style.css

frontend/src/components/Navbar.tsx

@@ -1,12 +1,13 @@
 import { Button, Input } from '@mui/material';
 import { Link } from 'react-router-dom';
 import ProfilePlaceholder from "../assets/provile.svg";
+import "../style.css";
 
 export default function Navbar() {
   // TODO: create search function
   // TODO: Profile integration
   return (
-    <div className="flex flex-row justify-between">
+    <div className="bg-color-bold-1 flex flex-row justify-between">
       <div className="flex flex-row justify-start items-center gap-3">
         <Button
           component={Link}
@@ -27,22 +28,6 @@ export default function Navbar() {
 
       <div className="flex flex-row justify-end items-center gap-3">
         <Input
-          className="
-            rounded-xl
-            bg-gray-100
-            px-2
-            py-1
-            text-sm
-            text-gray-800
-            placeholder-gray-400
-            shadow-sm
-            transition
-            duration-150
-            ease-in-out
-            focus-within:bg-white
-            focus-within:ring-2
-            focus-within:ring-gray-300
-            hover:bg-gray-200"
           placeholder="Search" fullWidth={false} disableUnderline={true}
         />
         <img

frontend/src/index.css

@@ -7,7 +7,7 @@
 
   color-scheme: light dark;
   color: rgba(0, 0, 0, 1);
-  background-color: #cccccc;
+  background-color: #ffffff;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

frontend/src/style.css

@@ -0,0 +1,11 @@
+@import "tailwindcss";
+
+@theme {
+  --color-bold-1: #ffbf00;
+  --color-bold-2: #008b8b;
+  --color-bold-3: #d9645c;
+  --color-neutral-1: #d4a5a5;
+  --color-neutral-2: #9caf88;
+  --color-neutral-3: #8B8680;
+  --color-dark: #1a3a3a;
+}