colors

frontend/src/components/ArticleCard.tsx

@@ -8,7 +8,6 @@ interface Props {
 
 export default function ArticleCard(props: Props) {
   const navigate = useNavigate();
-  // TODO: Retrieve author id => author name
 
   return (
     <Card

frontend/src/components/Navbar.tsx

@@ -1,43 +1,41 @@
-import { Button, Input } from '@mui/material';
-import { Link } from 'react-router-dom';
+import { Button, Input, Typography } from '@mui/material';
+import { useNavigate } from "react-router";
 import ProfilePlaceholder from "../assets/provile.svg";
-import "../style.css";
 
 export default function Navbar() {
-  // TODO: create search function
-  // TODO: Profile integration
+  let navigate = useNavigate();
+
   return (
-    <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}
-          to="/"
-          variant="outlined"
+    <div className="navbar bg-dark flex flex-row justify-between">
+      <div id="left" className="flex flex-row" >
+        <div
+          id="home-link"
+          className="flex items-center bg-bold-1 pl-3 pr-3 cursor-pointer"
+          onClick={() => navigate("/")}
         >
-          Home
-        </Button>
-
-        <Button
-          component={Link}
-          to="/articleList"
-          variant="outlined"
+          <Typography className="text-tb1">
+            Home
+          </Typography>
+        </div>
+        <div
+          id="articleslist-link"
+          className="flex items-center bg-bold-2 pl-3 pr-3 cursor-pointer"
+          onClick={() => navigate("/articleList")}
         >
-          Articles
-        </Button>
+          <Typography className="text-tb2">
+            Articles
+          </Typography>
+        </div>
       </div>
-
-      <div className="flex flex-row justify-end items-center gap-3">
-        <Input
-          placeholder="Search" fullWidth={false} disableUnderline={true}
-        />
-        <img
-          className="
-            flex
-            h-[3em]
-            w-[3em]
-            rounded-full"
-          src={ProfilePlaceholder} alt="PFP"
-        />
+      <div id="right" className="flex flex-row bg-neutral-3 flex flex-row">
+        <div id="search-bar" className="flex items-center pl-3 pr-3">
+          <Input />
+        </div>
+        <div id="profile-link" className="flex items-center pl-3 pr-3">
+          <Typography className="text-tn3">
+            Profile
+          </Typography>
+        </div>
       </div>
     </div>
   );

frontend/src/index.css

@@ -6,8 +6,8 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(0, 0, 0, 1);
-  background-color: #ffffff;
+  color: #000000;
+  background-color: var(--color-neutral-2);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -15,9 +15,38 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+
 body {
-  padding-top: 1rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
+  margin: 0;
+}
+
+.navbar {
+  height: 2.5rem;
+}
+
+.page-container {
+  padding: 2rem;
   width: 100%;
+  max-width: 1300px;
+  min-height: calc(100vh - 2.5rem);
+  margin: 0 auto;
+  background-color: var(--color-neutral-1);
+}
+
+@theme {
+  --color-bold-1: #ffbf00;
+  --color-bold-2: #008b8b;
+  --color-bold-3: #d9645c;
+  --color-neutral-1: #d6bb87;
+  --color-neutral-2: #4a7070;
+  --color-neutral-3: #7a7570;
+  --color-dark: #2b3b3b;
+
+  --color-tb1: #1b2a2a;
+  --color-tb2: #ffffff;
+  --color-tb3: #ffffff;
+  --color-tn1: #1b2a2a;
+  --color-tn2: #ffffff;
+  --color-tn3: #ffffff;
+  --color-td:  #ffffff;
 }

frontend/src/pages/Article.tsx

@@ -5,7 +5,7 @@ export default function Article() {
   let { slug } = useParams();
 
   return (
-    <div id="article">
+    <div id="article" className="page-container">
       <h1>Article: {slug}</h1>
     </div>
   );

frontend/src/pages/ArticleList.tsx

@@ -26,7 +26,7 @@ export default function ArticleList() {
   }, []);
 
   return (
-    <div className="p-3 flex flex-col gap-5">
+    <div className="page-container p-3 flex flex-col gap-5">
       {/*<Button
         style={{ border: "solid", borderWidth: "1px" }}
         onClick={() => getAllArticles()}

frontend/src/pages/Home.tsx

@@ -1,7 +1,7 @@
 export default function Home() {
 
   return (
-    <div id="home">
+    <div id="home" className="page-container">
       <h1>Home</h1>
     </div>
   );

frontend/src/style.css

@@ -1,11 +0,0 @@
-@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;
-}