Refactored Pages

frontend/package.json

@@ -44,5 +44,6 @@
     "jest": "^29.7.0",
     "react-test-renderer": "^18.3.1",
     "vite": "^5.4.1"
-  }
+  },
+  "proxy": "http://localhost:5000"
 }

frontend/src/components/Buttons/CLButtons.jsx

@@ -1,8 +1,12 @@
-import "./CLButtons.css"
+import "./CLButtons.css";
 
-const DEFAULT_HEIGHT = "54px"
-const DEFAULT_WIDTH = "fit-content"
-const DEFAULT_ON_CLICK = () => {}
+const DEFAULT_PRIMARY_CLASSNAME = "primary-variant-button";
+const DEFAULT_SECONDARY_CLASSNAME = "secondary-variant-button";
+
+const DEFAULT_HEIGHT = "54px";
+const DEFAULT_WIDTH = "fit-content";
+const DEFAULT_TYPE = "button";
+const DEFAULT_ON_CLICK = () => {};
 
 /**
  * PRIMARY variant of the clinical logging button.
@@ -11,24 +15,30 @@ const DEFAULT_ON_CLICK = () => {}
  */
 export const CLButtonPrimary = ({
   children,
+  className,
   height = DEFAULT_HEIGHT,
   width = DEFAULT_WIDTH,
-  onClick = DEFAULT_ON_CLICK
+  type = DEFAULT_TYPE,
+  onClick = DEFAULT_ON_CLICK,
 }) => {
+  const updatedClassName = className
+    ? DEFAULT_PRIMARY_CLASSNAME + " " + className
+    : DEFAULT_PRIMARY_CLASSNAME;
 
   return (
-    <button 
-      className="primary-variant-button"
+    <button
+      className={updatedClassName}
+      type={type}
       onClick={onClick}
       style={{
         height: height,
-        width: width
+        width: width,
       }}
     >
       {children}
     </button>
-  )
-}
+  );
+};
 
 /**
  * SECONDARY variant of the clinical logging button.
@@ -37,21 +47,27 @@ export const CLButtonPrimary = ({
  */
 export const CLButtonSecondary = ({
   children,
+  className,
   height = DEFAULT_HEIGHT,
   width = DEFAULT_WIDTH,
-  onClick = DEFAULT_ON_CLICK
+  type = DEFAULT_TYPE,
+  onClick = DEFAULT_ON_CLICK,
 }) => {
-
+  const updatedClassName = className
+    ? DEFAULT_SECONDARY_CLASSNAME + " " + className
+    : DEFAULT_SECONDARY_CLASSNAME;
+
   return (
-    <button 
-      className="secondary-variant-button"
+    <button
+      className={updatedClassName}
+      type={type}
       onClick={onClick}
       style={{
         height: height,
-        width: width
+        width: width,
       }}
     >
       {children}
     </button>
-  )
-}
+  );
+};

frontend/src/components/ContentHeader/ContentHeader.css

@@ -0,0 +1,123 @@
+.content-header {
+    position: absolute;
+    left: 230px;
+    top: 18%;
+    display: flex;
+    width: 80%;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 4px; 
+    border-bottom: 1px solid #9AB0E1;
+}
+
+.content-header h2 {
+    font-size: 24px;
+    font-weight: 600;
+    color: #1E1E1E;
+}
+
+.content-header[data-page="upload-photo"] h2 {
+    border-bottom: 2px solid #2B4B96;
+}
+
+.button-group {
+    display: flex;
+    gap: 12px;  /* Space between buttons */
+    align-items: center;
+}
+
+.actions-wrapper {
+    position: relative;
+  }
+
+.actions-button {
+    background: white;
+    color: #000000;         /* SECONDARY_COLOR */
+    border-radius: 20px;    /* DEFAULT_BORDER_RADIUS */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    height: 40px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.actions-button-active {
+    background-color: #333A3F;
+    color: white;
+    border-color: #000000;
+}
+
+.actions-dropdown {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  background-color: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  min-width: 10rem;
+  z-index: 50;
+  border: 1px solid #E5E7EB;
+}
+
+.action-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 0.75rem;
+    padding: 0.75rem 2rem;
+    color: #374151;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    border: none;
+    background: none;
+    text-align: left;
+}
+
+.action-item:hover {
+    background-color: #F3F4F6;
+}
+
+.action-item svg {
+  width: 1.25rem;
+    height: 1.25rem;
+    color: #244B94;
+}
+
+.add-button {
+    background: #244B94;  /* PRIMARY_BACKGROUND_COLOR */
+    color: #F7FAFF;       /* PRIMARY_COLOR */
+    border-radius: 20px;  /* DEFAULT_BORDER_RADIUS */
+    width: 120px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.add-book-button:hover {
+    opacity: 0.9;
+}
+
+.plus-icon {
+    width: 18px;
+    height: 18px;
+}
+
+.down-icon {
+    width: 18px;
+    height: 18px;
+    transition: transform 0.2s ease;
+}
+
+.down-icon-active {
+    transform: rotate(180deg);
+}

frontend/src/components/ContentHeader/ContentHeader.jsx

@@ -0,0 +1,72 @@
+import { PlusIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+import "./ContentHeader.css";
+import { useState, useRef, useEffect } from "react";
+
+export default function ContentHeader({ header, primaryButtonText, actions }) {
+  return (
+    <div className="content-header">
+      <h2>{header}</h2>
+      <div className="button-group">
+        <AddButton text={primaryButtonText} onClick={() => {}} />
+        <ActionsButton actions={actions} />
+      </div>
+    </div>
+  );
+}
+
+function AddButton({ text, onClick = () => {} }) {
+  return (
+    <button onClick={onClick} className="add-button">
+      {text}
+      <PlusIcon className="plus-icon" />
+    </button>
+  );
+}
+
+function ActionsButton({ actions }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div className="actions-wrapper" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`actions-button ${isOpen ? "actions-button-active" : ""}`}
+      >
+        <span>Actions</span>
+        <ChevronDownIcon
+          className={`down-icon ${isOpen ? "down-icon-active" : ""}`}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="actions-dropdown">
+          {actions.map((action, index) => (
+            <button
+              key={index}
+              className="action-item"
+              onClick={() => {
+                action.onClick();
+                setIsOpen(false);
+              }}
+            >
+              {action.icon && <action.icon />}
+              {action.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/Home/LeftSection/GetStartedCard.css

@@ -0,0 +1,31 @@
+.get-started-card {
+  background: white;
+  border-radius: 30px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  width: 85%;
+  padding: 20px 30px;
+  height: 50%;
+}
+
+.get-started-card h2 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-top: 0;
+  color: #2f3c50;
+}
+
+.get-started-card p {
+  color: #3c4049;
+  font-weight: 400;
+  text-align: left;
+  font-size: 14px;
+  margin-bottom: 16px;
+}
+
+.button-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  height: 55%;
+}

frontend/src/components/Home/LeftSection/GetStartedCard.jsx

@@ -0,0 +1,27 @@
+import { CLButtonSecondary } from "../../Buttons/CLButtons";
+import { NewLogModal } from "../../NewLogModal/NewLogModal";
+import "./GetStartedCard.css";
+
+export default function GetStartedCard({
+  handleAddLogbook,
+  handleViewHistory,
+}) {
+  return (
+    <div className="get-started-card">
+      <h2>Get Started</h2>
+      <p>
+        Convert handwritten clinical logs to standardized excel templates with
+        just a click of a button!
+      </p>
+      <div className="button-stack">
+        <NewLogModal />
+        <CLButtonSecondary onClick={handleAddLogbook} width={"230px"}>
+          Add Logbook
+        </CLButtonSecondary>
+        <CLButtonSecondary onClick={handleViewHistory} width={"230px"}>
+          View Log History
+        </CLButtonSecondary>
+      </div>
+    </div>
+  );
+}