Add Text Field

front-end/src/components/textfield/TextField.module.scss

@@ -0,0 +1,39 @@
+@use '@styles/_fonts';
+
+.textField {
+  @include fonts.text-medium;
+
+  .label {
+    color: var(--alt-text);
+    text-align: left;
+  }
+
+  .container {
+    display: flex;
+    align-items: center;
+    background-color: var(--light-grey);
+    border-radius: 8px;
+    padding: 0.5rem;
+
+
+    .title {
+      color: var(--text-colour);
+    }
+
+    .input {
+      @include fonts.text-medium;
+      background: none;
+      border: none;
+      outline: none;
+      color: var(--text-colour);
+      flex-grow: 1;
+      padding-left: 0.5rem;
+      text-align: left;
+      width: 100%;
+
+      &::placeholder {
+        color: var(--alt-text);
+      }
+    }
+  }
+}

front-end/src/components/textfield/TextField.tsx

@@ -0,0 +1,37 @@
+import styles from './TextField.module.scss';
+
+interface TextFieldProps {
+  title: string;
+  value: string;
+  setValue: (value: string) => void;
+  label?: string;
+  placeholder?: string;
+}
+
+const TextField = ({
+  title,
+  value,
+  setValue,
+  label,
+  placeholder = 'Value',
+}: TextFieldProps) => {
+  return (
+    <div className={styles.textField}>
+      {label && <div className={styles.label}>{label}</div>}
+      <div className={styles.container}>
+        <div className={styles.title}>
+          {title}
+        </div>
+        <input
+          className={styles.input}
+          type="text"
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TextField;

front-end/src/main.ts

@@ -20,17 +20,6 @@ function createWindow() {
 
   win.maximize();
 
-  // Development
-  /*
-  win.loadFile(path.resolve(resourcePath, '../../build/index.html'));
-  backend = spawn(
-    'java', 
-    ['-jar', path.resolve(resourcePath, '../../../backend/target/backend-1.2.0-runner.jar')],
-    { env: { ...process.env, RESOURCE_PATH: resourcePath + '/binary_csv/' } }
-  );
-  */
-
-  // Production
   win.loadFile(path.resolve(resourcePath, 'build/index.html'));
   backend = spawn(
     path.resolve(resourcePath, '../backend/jre/bin/java.exe').toString(), 
@@ -39,24 +28,6 @@ function createWindow() {
       env: { ...process.env, RESOURCE_PATH: path.resolve(resourcePath, '../backend').toString() + '/' },
     },
   );
-
-  // Conditional file paths
-  /*
-  isProduction = app.isPackaged;
-  const frontendPath = path.resolve(resourcePath, isProduction ? 'build/index.html' : '../../build/index.html');
-  const backendPath = path.resolve(resourcePath, isProduction ? '../backend' : '../../../backend/target')
-  const dllPath = path.resolve(resourcePath, isProduction ? '../backend' : '../../../backend/src/main/java/com/mcmasterbaja/binary_csv').toString() + '/';
-
-  // Conditional
-  win.loadFile(frontendPath);
-  backend = spawn(
-    path.resolve(backendPath, 'jre/bin/java.exe').toString(), 
-    ['-jar', path.resolve(backendPath, 'backend-1.2.0-runner.jar')],
-    { 
-      env: { ...process.env, RESOURCE_PATH: dllPath },
-    },
-  );
-  */
 
   win.on('closed', () => win = null);
 

front-end/src/styles/_variables.scss

@@ -6,6 +6,7 @@ $background: #222222;
 $accent: #BB0808;
 $text-colour: #FFFFFF;
 $upload-stroke: #636363;
+$alt-text: #B3B3B3;
 
 // Baja colour
 $baja-colour: #75151E;
@@ -21,6 +22,7 @@ $upload-stroke: #636363;
   --text-colour: #{$text-colour};
 
   --light-grey: #{$upload-stroke};
+  --alt-text: #{$alt-text};
   --baja-colour: #{$baja-colour};
   --light-grey: #{$upload-stroke};
 }
@@ -33,14 +35,15 @@ $upload-stroke: #636363;
   --background: #FFFFFF;
   --accent: #BB0808;
   --text-colour: #000000;
+  --alt-text: #B3B3B3;
 }
 
 // A map of z-index values for different components
 $z-index: (
   dropdown: 1,
+   footer: 1,
   sidebar: 2,
   success: 3,
   tooltip: 4,
   modal: 5,
-  footer: 1,
-);
+);