Refactor navbar + reusable button components

backend/package.json

@@ -16,7 +16,6 @@
   "dependencies": {
     "@supabase/supabase-js": "^2.46.1",
     "cors": "^2.8.5",
-    "dependencies": "^0.0.1",
     "dotenv": "^16.4.5",
     "express": "^4.21.0",
     "jsonwebtoken": "^9.0.2",

frontend/package.json

@@ -13,11 +13,11 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@heroicons/react": "^2.2.0",
     "@mui/icons-material": "^6.1.2",
     "@mui/material": "^6.1.2",
     "@supabase/supabase-js": "^2.45.5",
     "axios": "^1.7.7",
-    "dependencies": "^0.0.1",
     "pdfjs-dist": "^4.7.76",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

frontend/src/App.css

@@ -1,10 +1,3 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
 .logo {
   height: 6em;
   padding: 1.5em;

frontend/src/App.jsx

@@ -76,7 +76,7 @@ function App() {
   const handleClickLogout = async () => {
     try {
       await logout();
-      navigate("/home");
+      navigate("/login");
     } catch (e) {
       console.log("Failed to logout: " + e.message);
     }

frontend/src/components/AppBar/AppBar.css

@@ -0,0 +1,85 @@
+.app-bar {
+  display: flex;
+  box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  left: 0;
+  height: 120px;
+  width: 98vw;
+  padding: 1rem 3rem 1rem 2rem;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #F7FAFF;
+  z-index: 1000;
+}
+
+.logo {
+  padding: 0px;
+  height: 85px;
+  width: 85px;
+}
+
+.icon-search-filter-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 100px;
+}
+
+.search-filter-container {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+
+.search-input {
+  height: 18px;
+  font-size: 16px;
+  padding: 12px 20px 12px 40px;
+  background-color: white;
+  background-image: url('../../assets/magnifying-glass.svg');
+  background-position: 10px 10px; 
+  background-repeat: no-repeat;
+  background-size: 20px 20px;
+  background-color: #FBFCFE;
+  border: none;
+  border-radius: 20px;
+  box-shadow: 0px 0px 10px #e3e8f2;
+}
+
+.app-bar-filter-button {
+  display: flex;
+  height: 40px;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  color: #2F3C50;
+  background-color: #FBFCFE;
+  box-shadow: 0px 0px 10px #e3e8f2;
+  border-radius: 20px;
+  gap: 10px;
+}
+
+.small-icon-buttons-container {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+
+.small-icon-button {
+  display: flex;
+  height: 48px;
+  width: 54px;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  color: #2F3C50;
+  background-color: #FBFCFE;
+  box-shadow: 0px 0px 10px #e3e8f2;
+  border-radius: 20px;
+}
+
+.app-bar-icon {
+  height: 24px;
+  width: 24px;
+}

frontend/src/components/AppBar/AppBar.jsx

@@ -0,0 +1,34 @@
+import Logo from "../../assets/flow-leaflets-logo.svg";
+import {
+  AdjustmentsHorizontalIcon,
+  BellIcon,
+  UserCircleIcon
+} from '@heroicons/react/24/outline';
+import "./AppBar.css"
+
+export const AppBar = () => {
+  return (
+    <div className="app-bar">
+      <div className="icon-search-filter-container">
+        <img src={Logo} className="logo" />
+        <div className="search-filter-container">
+          <input type="text" className="search-input" name="search" placeholder="Search..." />
+          <button className="app-bar-filter-button">
+            <AdjustmentsHorizontalIcon className="app-bar-icon" />
+            <p>Filter</p>
+          </button>
+        </div>
+      </div>
+      <div>
+      <div className="small-icon-buttons-container">
+        <button className="small-icon-button">
+          <BellIcon className="app-bar-icon" />
+        </button>
+        <button className="small-icon-button">
+          <UserCircleIcon className="app-bar-icon" />
+        </button>
+      </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/Buttons/CLButtons.css

@@ -0,0 +1,12 @@
+.primary-variant-button {
+  color: #F7FAFF;
+  background-color: #244B94;
+  border-radius: 20px;
+}
+
+.secondary-variant-button {
+  color: #4F607E;
+  background-color: #F7FAFF;
+  border: 1px solid #9AB0E1;
+  border-radius: 20px;
+}

frontend/src/components/Buttons/CLButtons.jsx

@@ -0,0 +1,57 @@
+import "./CLButtons.css"
+
+const DEFAULT_HEIGHT = "54px"
+const DEFAULT_WIDTH = "fit-content"
+const DEFAULT_ON_CLICK = () => {}
+
+/**
+ * PRIMARY variant of the clinical logging button.
+ * Should work out of the box for most use cases (with the exception of onClick which does nothing by default).
+ * The height and width are customizable if necessary.
+ */
+export const CLButtonPrimary = ({
+  children,
+  height = DEFAULT_HEIGHT,
+  width = DEFAULT_WIDTH,
+  onClick = DEFAULT_ON_CLICK
+}) => {
+
+  return (
+    <button 
+      className="primary-variant-button"
+      onClick={onClick}
+      style={{
+        height: height,
+        width: width
+      }}
+    >
+      {children}
+    </button>
+  )
+}
+
+/**
+ * SECONDARY variant of the clinical logging button.
+ * Should work out of the box for most use cases (with the exception of onClick which does nothing by default).
+ * The height and width are customizable if necessary.
+ */
+export const CLButtonSecondary = ({
+  children,
+  height = DEFAULT_HEIGHT,
+  width = DEFAULT_WIDTH,
+  onClick = DEFAULT_ON_CLICK
+}) => {
+
+  return (
+    <button 
+      className="secondary-variant-button"
+      onClick={onClick}
+      style={{
+        height: height,
+        width: width
+      }}
+    >
+      {children}
+    </button>
+  )
+}