adds upload modal

frontend/src/upload/Upload.tsx

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+export default function Upload() {
+  //   return null;
+
+  const [docName, setDocName] = useState('');
+  return (
+    <article className="absolute z-30  h-screen w-screen  bg-gray-alpha">
+      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
+        <p className="text-xl text-jet">Upload New Documentation</p>
+        <input
+          type="text"
+          className="h-10 w-[60%] rounded-md border-2 border-gray-5000 px-3 outline-none"
+          value={docName}
+          onChange={(e) => setDocName(e.target.value)}
+        ></input>
+        <div className="relative bottom-16 left-2">
+          <span className="bg-white px-2 text-xs text-gray-4000">Name</span>
+        </div>
+        <div>
+          <label className="rounded-md border border-blue-2000 px-4 py-2 font-medium text-blue-2000">
+            <input type="file" className="hidden" />
+            Choose Files
+          </label>
+        </div>
+        <div className="flex flex-row-reverse">
+          <button className="ml-6 rounded-md bg-blue-3000 py-2 px-6 text-white">
+            Train
+          </button>
+          <button className="font-medium">Cancel</button>
+        </div>
+      </article>
+    </article>
+  );
+}
+
+// TODO: sanitize all inputs

frontend/tailwind.config.cjs

@@ -16,10 +16,13 @@ module.exports = {
         'gray-2000': 'rgba(0, 0, 0, 0.5)',
         'gray-3000': 'rgba(243, 243, 243, 1)',
         'gray-4000': '#949494',
+        'gray-5000': '#BBBBBB',
         'red-1000': 'rgb(254, 202, 202)',
         'red-2000': '#F44336',
         'red-3000': '#621B16',
         'blue-1000': '#7D54D1',
+        'blue-2000': '#002B49',
+        'blue-3000': '#4B02E2',
       },
     },
   },