From 486b937c472231cf5dacbeb10cc027d8e74ff880 Mon Sep 17 00:00:00 2001
From: bzzz-coding <86077274+bzzz-coding@users.noreply.github.com>
Date: Thu, 6 Feb 2025 14:15:10 -0800
Subject: [PATCH 1/5] Added Tailwind Button Components

---
 frontend/src/pages/Demo/DemoTailwind.tsx |  69 +++++++++++++++-
 frontend/src/tw-components/Buttons.tsx   | 100 +++++++++++++++++++++++
 frontend/tailwind.config.js              |   1 +
 3 files changed, 168 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/tw-components/Buttons.tsx

diff --git a/frontend/src/pages/Demo/DemoTailwind.tsx b/frontend/src/pages/Demo/DemoTailwind.tsx
index 54759963..ad7fa78b 100644
--- a/frontend/src/pages/Demo/DemoTailwind.tsx
+++ b/frontend/src/pages/Demo/DemoTailwind.tsx
@@ -1,14 +1,79 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Typography from "tw-components/Typography";
+import { Button, IconButton } from "tw-components/Buttons";
 
 const DemoTailwind = () => {
+  // Add a setDarkMode for testing dark mode styles
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    if (darkMode) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [darkMode]);
+
   return (
     <div className="min-h-screen bg-grey-light p-8">
+      <div className="mx-auto max-w-4xl rounded-lg bg-white p-6 shadow-md dark:bg-[#030D2D] transition-colors duration-300">
+        <Typography.Title1 className="mb-4 text-blue-dark dark:text-white">
+          Buttons
+        </Typography.Title1>
+
+        <Button onClick={() => setDarkMode(!darkMode)}>Toggle Dark Mode</Button>
+
+        {/* Regular Buttons, active is the default state */}
+        <Typography.Title3 className="mt-4 mb-2 text-blue-dark dark:text-white">
+          Active
+        </Typography.Title3>
+        <div className="flex flex-wrap items-center gap-4 mb-4">
+          <Button size="small">Small</Button>
+          <Button size="small-long">Small-Long</Button>
+          {/* Medium is the default*/}
+          <Button>Medium</Button>
+          <Button size="medium-long">Medium-Long</Button>
+          <Button size="large">Large</Button>
+          <Button size="large-long">Large-Long</Button>
+        </div>
+
+        {/* Disabled Buttons */}
+        <Typography.Title3 className="mb-2 text-blue-dark dark:text-white">
+          Disabled
+        </Typography.Title3>
+        <div className="flex flex-wrap items-center gap-4 mb-4">
+          <Button state="disabled">
+            Medium Disabled
+          </Button>
+          <Button size="large" state="disabled">
+            Large Disabled
+          </Button>
+        </div>
+
+        {/* Hover & Active/Focused States */}
+        <Typography.Title3 className="mb-2 text-blue-dark dark:text-white">
+          Hover, Focused and Active
+        </Typography.Title3>
+        <div className="flex flex-wrap items-center gap-4 mb-4">
+          <Button>Hover</Button>
+          <Button>Focus (tab)</Button>
+          <Button>Active (click & hold)</Button>
+        </div>
+
+        {/* Icon Buttons */}
+        <Typography.Title3 className="mb-2 text-blue-dark dark:text-white">
+          Search Icon
+        </Typography.Title3>
+        <div className="flex flex-wrap items-center gap-4">
+          <IconButton />
+          <IconButton state="disabled" />
+        </div>
+      </div>
+
       <div className="mx-auto max-w-4xl rounded-lg bg-white p-6 shadow-md">
         <Typography.Title1 className="mb-4 text-blue-dark">
           Typography Demo (Title 1 - Roboto Bold 48/137% +0)
         </Typography.Title1>
-
         <Typography.Title2 className="mb-2 text-blue-dark">
           Title Styles (Title 2 - Roboto Bold 36/137% +0)
         </Typography.Title2>
diff --git a/frontend/src/tw-components/Buttons.tsx b/frontend/src/tw-components/Buttons.tsx
new file mode 100644
index 00000000..eab0bd47
--- /dev/null
+++ b/frontend/src/tw-components/Buttons.tsx
@@ -0,0 +1,100 @@
+import React from "react";
+import Typography from "tw-components/Typography";
+
+// size can only be one of:
+// "small" | "small-long" | "medium" | "medium-long" | "large" | "large-long" | "icon-only"
+type ButtonSize = keyof typeof buttonSizes;
+// state can only be "enabled" or "disabled"
+type ButtonState = keyof typeof buttonColors;
+
+type ButtonProps = {
+  size?: ButtonSize;
+  state?: ButtonState;
+  children?: React.ReactNode;
+  onClick?: () => void;
+};
+
+type IconButtonProps = {
+  state?: ButtonState;
+  onClick?: () => void;
+};
+
+const buttonSizes = {
+  small: "px-[24px] h-[32px] flex items-center justify-center leading-none",
+  "small-long":
+    "px-[40px] h-[32px] flex items-center justify-center leading-none",
+  medium: "px-[32px] h-[42px] flex items-center justify-center leading-none",
+  "medium-long":
+    "px-[48px] h-[42px] flex items-center justify-center leading-none",
+  large: "px-[40px] h-[51px] flex items-center justify-center leading-none",
+  "large-long":
+    "px-[56px] h-[51px] flex items-center justify-center leading-none",
+  "icon-only": "px-[24px] h-[42px] flex items-center justify-center",
+};
+
+const buttonColors = {
+  enabled:
+    "bg-blue-dark text-white dark:bg-white dark:text-blue-dark hover:bg-blue-dark-hover focus:bg-blue-dark-focused focus:outline-none active:bg-blue-dark-focused dark:hover:bg-grey-light dark:focus:bg-[#D9DBDF] dark:active:bg-[#D9DBDF]",
+  disabled:
+    "bg-grey text-white cursor-not-allowed dark:bg-grey dark:text-grey-light",
+};
+
+const buttonTypography: Record<keyof typeof buttonSizes, React.ElementType> = {
+  small: Typography.Title7,
+  "small-long": Typography.Title7,
+  medium: Typography.Title6,
+  "medium-long": Typography.Title6,
+  large: Typography.Title5,
+  "large-long": Typography.Title5,
+  "icon-only": Typography.Title7, // Not sure about this one
+};
+
+const Button: React.FC<ButtonProps> = ({
+  size = "medium",
+  state = "enabled",
+  children,
+  onClick,
+}) => {
+  const TextComponent = buttonTypography[size];
+
+  return (
+    <button
+      className={`rounded-[64px] ${buttonSizes[size]} ${buttonColors[state]} transition-all duration-200`}
+      disabled={state === "disabled"}
+      onClick={onClick}
+    >
+      <TextComponent>{children}</TextComponent>
+    </button>
+  );
+};
+
+const IconButton: React.FC<IconButtonProps> = ({
+  state = "enabled",
+  onClick,
+}) => {
+  return (
+    <button
+      className={`rounded-[24px] ${buttonSizes["icon-only"]} ${buttonColors[state]} transition-all duration-200`}
+      disabled={state === "disabled"}
+      onClick={onClick}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="m20 20l-4.05-4.05m0 0a7 7 0 1 0-9.9-9.9a7 7 0 0 0 9.9 9.9"
+        />
+      </svg>
+    </button>
+  );
+};
+
+export { Button, IconButton };
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index d6a6985e..7541c68e 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: "class", // Enables dark mode with a class
   content: [
     "./src/pages/Demo/DemoTailwind.tsx",
     "./src/pages/Authentication/*.tsx",

From 11b1a124e590d8a12717a74defbe6776fbafc05b Mon Sep 17 00:00:00 2001
From: bzzz-coding <86077274+bzzz-coding@users.noreply.github.com>
Date: Thu, 13 Feb 2025 15:23:29 -0800
Subject: [PATCH 2/5] Updated Buttons.tsx with clsx

---
 frontend/package-lock.json               |  14 +++
 frontend/package.json                    |   1 +
 frontend/src/pages/Demo/DemoTailwind.tsx |  18 ++--
 frontend/src/tw-components/Buttons.tsx   | 118 +++++++++++------------
 4 files changed, 82 insertions(+), 69 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a1d0cbf0..1ac3f2e4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,6 +12,7 @@
         "@popperjs/core": "^2.11.6",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
+        "clsx": "^2.1.1",
         "react-hook-form": "^7.46.1",
         "react-popper": "^2.3.0",
         "vite-tsconfig-paths": "^4.3.1"
@@ -3540,6 +3541,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -12930,6 +12939,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 73d8e4b2..a82f5797 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -70,6 +70,7 @@
     "@popperjs/core": "^2.11.6",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "clsx": "^2.1.1",
     "react-hook-form": "^7.46.1",
     "react-popper": "^2.3.0",
     "vite-tsconfig-paths": "^4.3.1"
diff --git a/frontend/src/pages/Demo/DemoTailwind.tsx b/frontend/src/pages/Demo/DemoTailwind.tsx
index ad7fa78b..4894a97c 100644
--- a/frontend/src/pages/Demo/DemoTailwind.tsx
+++ b/frontend/src/pages/Demo/DemoTailwind.tsx
@@ -16,7 +16,7 @@ const DemoTailwind = () => {
 
   return (
     <div className="min-h-screen bg-grey-light p-8">
-      <div className="mx-auto max-w-4xl rounded-lg bg-white p-6 shadow-md dark:bg-[#030D2D] transition-colors duration-300">
+      <div className="mx-auto max-w-4xl rounded-lg bg-white p-6 shadow-md transition-colors duration-300 dark:bg-[#030D2D]">
         <Typography.Title1 className="mb-4 text-blue-dark dark:text-white">
           Buttons
         </Typography.Title1>
@@ -24,10 +24,10 @@ const DemoTailwind = () => {
         <Button onClick={() => setDarkMode(!darkMode)}>Toggle Dark Mode</Button>
 
         {/* Regular Buttons, active is the default state */}
-        <Typography.Title3 className="mt-4 mb-2 text-blue-dark dark:text-white">
+        <Typography.Title3 className="mb-2 mt-4 text-blue-dark dark:text-white">
           Active
         </Typography.Title3>
-        <div className="flex flex-wrap items-center gap-4 mb-4">
+        <div className="mb-4 flex flex-wrap items-center gap-4">
           <Button size="small">Small</Button>
           <Button size="small-long">Small-Long</Button>
           {/* Medium is the default*/}
@@ -41,11 +41,9 @@ const DemoTailwind = () => {
         <Typography.Title3 className="mb-2 text-blue-dark dark:text-white">
           Disabled
         </Typography.Title3>
-        <div className="flex flex-wrap items-center gap-4 mb-4">
-          <Button state="disabled">
-            Medium Disabled
-          </Button>
-          <Button size="large" state="disabled">
+        <div className="mb-4 flex flex-wrap items-center gap-4">
+          <Button disabled={true}>Medium Disabled</Button>
+          <Button size="large" disabled={true}>
             Large Disabled
           </Button>
         </div>
@@ -54,7 +52,7 @@ const DemoTailwind = () => {
         <Typography.Title3 className="mb-2 text-blue-dark dark:text-white">
           Hover, Focused and Active
         </Typography.Title3>
-        <div className="flex flex-wrap items-center gap-4 mb-4">
+        <div className="mb-4 flex flex-wrap items-center gap-4">
           <Button>Hover</Button>
           <Button>Focus (tab)</Button>
           <Button>Active (click & hold)</Button>
@@ -66,7 +64,7 @@ const DemoTailwind = () => {
         </Typography.Title3>
         <div className="flex flex-wrap items-center gap-4">
           <IconButton />
-          <IconButton state="disabled" />
+          <IconButton disabled={true} />
         </div>
       </div>
 
diff --git a/frontend/src/tw-components/Buttons.tsx b/frontend/src/tw-components/Buttons.tsx
index eab0bd47..17affc2e 100644
--- a/frontend/src/tw-components/Buttons.tsx
+++ b/frontend/src/tw-components/Buttons.tsx
@@ -1,100 +1,100 @@
 import React from "react";
+import clsx from "clsx";
 import Typography from "tw-components/Typography";
 
 // size can only be one of:
 // "small" | "small-long" | "medium" | "medium-long" | "large" | "large-long" | "icon-only"
 type ButtonSize = keyof typeof buttonSizes;
-// state can only be "enabled" or "disabled"
-type ButtonState = keyof typeof buttonColors;
 
+// Button props
 type ButtonProps = {
   size?: ButtonSize;
-  state?: ButtonState;
+  disabled?: boolean;
   children?: React.ReactNode;
   onClick?: () => void;
+  isIconButton?: boolean;
 };
 
-type IconButtonProps = {
-  state?: ButtonState;
-  onClick?: () => void;
-};
-
+// Button size styles
 const buttonSizes = {
-  small: "px-[24px] h-[32px] flex items-center justify-center leading-none",
-  "small-long":
-    "px-[40px] h-[32px] flex items-center justify-center leading-none",
-  medium: "px-[32px] h-[42px] flex items-center justify-center leading-none",
-  "medium-long":
-    "px-[48px] h-[42px] flex items-center justify-center leading-none",
-  large: "px-[40px] h-[51px] flex items-center justify-center leading-none",
-  "large-long":
-    "px-[56px] h-[51px] flex items-center justify-center leading-none",
-  "icon-only": "px-[24px] h-[42px] flex items-center justify-center",
-};
-
-const buttonColors = {
-  enabled:
-    "bg-blue-dark text-white dark:bg-white dark:text-blue-dark hover:bg-blue-dark-hover focus:bg-blue-dark-focused focus:outline-none active:bg-blue-dark-focused dark:hover:bg-grey-light dark:focus:bg-[#D9DBDF] dark:active:bg-[#D9DBDF]",
-  disabled:
-    "bg-grey text-white cursor-not-allowed dark:bg-grey dark:text-grey-light",
+  small: "px-[24px] h-[32px]",
+  "small-long": "px-[40px] h-[32px]",
+  medium: "px-[32px] h-[42px]",
+  "medium-long": "px-[48px] h-[42px]",
+  large: "px-[40px] h-[51px]",
+  "large-long": "px-[56px] h-[51px]",
+  "icon-only": "px-[24px] h-[42px]",
 };
 
-const buttonTypography: Record<keyof typeof buttonSizes, React.ElementType> = {
+const buttonTypography: Record<
+  keyof typeof buttonSizes,
+  React.ElementType | null
+> = {
   small: Typography.Title7,
   "small-long": Typography.Title7,
   medium: Typography.Title6,
   "medium-long": Typography.Title6,
   large: Typography.Title5,
   "large-long": Typography.Title5,
-  "icon-only": Typography.Title7, // Not sure about this one
+  "icon-only": null,
 };
 
+// Shared base styles for all buttons
+const baseButtonStyles =
+  "transition-all duration-200 flex items-center justify-center bg-blue-dark text-white hover:bg-blue-dark-hover focus:bg-blue-dark-focused focus:outline-none active:bg-blue-dark-focused";
+
+const enabledDarkModeStyles =
+  "dark:bg-white dark:text-blue-dark dark:hover:bg-grey-light dark:focus:bg-[#D9DBDF] dark:active:bg-[#D9DBDF]";
+
+const disabledStyles = "pointer-events-none bg-grey text-grey-light";
+
+// Button component (handles both regular and icon buttons)
 const Button: React.FC<ButtonProps> = ({
   size = "medium",
-  state = "enabled",
+  disabled = false,
   children,
   onClick,
+  isIconButton = false,
 }) => {
   const TextComponent = buttonTypography[size];
 
   return (
     <button
-      className={`rounded-[64px] ${buttonSizes[size]} ${buttonColors[state]} transition-all duration-200`}
-      disabled={state === "disabled"}
+      className={clsx(
+        baseButtonStyles,
+        buttonSizes[size],
+        isIconButton ? "rounded-[24px]" : "rounded-[64px]",
+        disabled ? disabledStyles : enabledDarkModeStyles,
+      )}
+      disabled={disabled}
       onClick={onClick}
     >
-      <TextComponent>{children}</TextComponent>
+      {isIconButton ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="m20 20l-4.05-4.05m0 0a7 7 0 1 0-9.9-9.9a7 7 0 0 0 9.9 9.9"
+          />
+        </svg>
+      ) : (
+        TextComponent && <TextComponent>{children}</TextComponent>
+      )}
     </button>
   );
 };
 
-const IconButton: React.FC<IconButtonProps> = ({
-  state = "enabled",
-  onClick,
-}) => {
-  return (
-    <button
-      className={`rounded-[24px] ${buttonSizes["icon-only"]} ${buttonColors[state]} transition-all duration-200`}
-      disabled={state === "disabled"}
-      onClick={onClick}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-      >
-        <path
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          d="m20 20l-4.05-4.05m0 0a7 7 0 1 0-9.9-9.9a7 7 0 0 0 9.9 9.9"
-        />
-      </svg>
-    </button>
-  );
-};
+// Export separate IconButton
+const IconButton: React.FC<Omit<ButtonProps, "size" | "children">> = (
+  props,
+) => <Button {...props} size="icon-only" isIconButton />;
 
 export { Button, IconButton };

From b91c9bd34d4cc2dec5695e93c35a3d3058ddad08 Mon Sep 17 00:00:00 2001
From: bzzz-coding <86077274+bzzz-coding@users.noreply.github.com>
Date: Mon, 24 Feb 2025 10:01:07 -0800
Subject: [PATCH 3/5] Refactored button components

---
 frontend/src/pages/Demo/DemoTailwind.tsx |   6 +-
 frontend/src/tw-components/Buttons.tsx   | 133 +++++++++++++----------
 2 files changed, 76 insertions(+), 63 deletions(-)

diff --git a/frontend/src/pages/Demo/DemoTailwind.tsx b/frontend/src/pages/Demo/DemoTailwind.tsx
index 4894a97c..652be178 100644
--- a/frontend/src/pages/Demo/DemoTailwind.tsx
+++ b/frontend/src/pages/Demo/DemoTailwind.tsx
@@ -42,8 +42,8 @@ const DemoTailwind = () => {
           Disabled
         </Typography.Title3>
         <div className="mb-4 flex flex-wrap items-center gap-4">
-          <Button disabled={true}>Medium Disabled</Button>
-          <Button size="large" disabled={true}>
+          <Button disabled>Medium Disabled</Button>
+          <Button size="large" disabled>
             Large Disabled
           </Button>
         </div>
@@ -64,7 +64,7 @@ const DemoTailwind = () => {
         </Typography.Title3>
         <div className="flex flex-wrap items-center gap-4">
           <IconButton />
-          <IconButton disabled={true} />
+          <IconButton disabled />
         </div>
       </div>
 
diff --git a/frontend/src/tw-components/Buttons.tsx b/frontend/src/tw-components/Buttons.tsx
index 17affc2e..8d0d3fc5 100644
--- a/frontend/src/tw-components/Buttons.tsx
+++ b/frontend/src/tw-components/Buttons.tsx
@@ -2,20 +2,6 @@ import React from "react";
 import clsx from "clsx";
 import Typography from "tw-components/Typography";
 
-// size can only be one of:
-// "small" | "small-long" | "medium" | "medium-long" | "large" | "large-long" | "icon-only"
-type ButtonSize = keyof typeof buttonSizes;
-
-// Button props
-type ButtonProps = {
-  size?: ButtonSize;
-  disabled?: boolean;
-  children?: React.ReactNode;
-  onClick?: () => void;
-  isIconButton?: boolean;
-};
-
-// Button size styles
 const buttonSizes = {
   small: "px-[24px] h-[32px]",
   "small-long": "px-[40px] h-[32px]",
@@ -26,75 +12,102 @@ const buttonSizes = {
   "icon-only": "px-[24px] h-[42px]",
 };
 
-const buttonTypography: Record<
-  keyof typeof buttonSizes,
-  React.ElementType | null
-> = {
-  small: Typography.Title7,
-  "small-long": Typography.Title7,
-  medium: Typography.Title6,
-  "medium-long": Typography.Title6,
-  large: Typography.Title5,
-  "large-long": Typography.Title5,
-  "icon-only": null,
+type ButtonSize = keyof typeof buttonSizes;
+
+type BaseButtonProps = {
+  size?: ButtonSize;
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onClick?: () => void;
 };
 
-// Shared base styles for all buttons
+// Shared styles
 const baseButtonStyles =
-  "transition-all duration-200 flex items-center justify-center bg-blue-dark text-white hover:bg-blue-dark-hover focus:bg-blue-dark-focused focus:outline-none active:bg-blue-dark-focused";
+  "transition-all duration-200 flex items-center justify-center rounded-[64px] bg-blue-dark text-white hover:bg-blue-dark-hover focus:bg-blue-dark-focused focus:outline-none active:bg-blue-dark-focused disabled:bg-grey disabled:text-white disabled:cursor-not-allowed";
 
+// Dark mode styles for enabled buttons
 const enabledDarkModeStyles =
-  "dark:bg-white dark:text-blue-dark dark:hover:bg-grey-light dark:focus:bg-[#D9DBDF] dark:active:bg-[#D9DBDF]";
-
-const disabledStyles = "pointer-events-none bg-grey text-grey-light";
+  "dark:bg-white dark:text-blue-dark dark:hover:bg-grey-light dark:focus:bg-[#D9DBDF] dark:active:bg-[#D9DBDF] dark:disabled:bg-grey dark:disabled:text-grey-light";
 
-// Button component (handles both regular and icon buttons)
-const Button: React.FC<ButtonProps> = ({
+// Base Button, no text, just styling
+const BaseButton: React.FC<BaseButtonProps> = ({
   size = "medium",
   disabled = false,
+  className,
   children,
   onClick,
-  isIconButton = false,
 }) => {
-  const TextComponent = buttonTypography[size];
-
   return (
     <button
       className={clsx(
         baseButtonStyles,
         buttonSizes[size],
-        isIconButton ? "rounded-[24px]" : "rounded-[64px]",
-        disabled ? disabledStyles : enabledDarkModeStyles,
+        !disabled && enabledDarkModeStyles,
+        className,
       )}
       disabled={disabled}
       onClick={onClick}
     >
-      {isIconButton ? (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-        >
-          <path
-            fill="none"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            d="m20 20l-4.05-4.05m0 0a7 7 0 1 0-9.9-9.9a7 7 0 0 0 9.9 9.9"
-          />
-        </svg>
-      ) : (
-        TextComponent && <TextComponent>{children}</TextComponent>
-      )}
+      {children}
     </button>
   );
 };
 
-// Export separate IconButton
-const IconButton: React.FC<Omit<ButtonProps, "size" | "children">> = (
-  props,
-) => <Button {...props} size="icon-only" isIconButton />;
+// Default Button, extends base button, adds typography
+const buttonTypography: Record<
+  Exclude<ButtonSize, "icon-only">,
+  React.ElementType
+> = {
+  small: Typography.Title7,
+  "small-long": Typography.Title7,
+  medium: Typography.Title6,
+  "medium-long": Typography.Title6,
+  large: Typography.Title5,
+  "large-long": Typography.Title5,
+};
+
+type ButtonProps = Omit<BaseButtonProps, "children"> & {
+  size?: Exclude<ButtonSize, "icon-only">;
+  children: React.ReactNode;
+};
+
+const Button: React.FC<ButtonProps> = ({
+  size = "medium",
+  children,
+  ...props
+}) => {
+  const TextComponent = buttonTypography[size];
+  return (
+    <BaseButton {...props} size={size}>
+      <TextComponent>{children}</TextComponent>
+    </BaseButton>
+  );
+};
+
+// Icon Button, extends base button, adds static svg
+type IconButtonProps = Omit<BaseButtonProps, "size" | "children">;
+
+const IconButton: React.FC<IconButtonProps> = (props) => {
+  return (
+    <BaseButton {...props} size="icon-only" className="rounded-[24px]">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="m20 20l-4.05-4.05m0 0a7 7 0 1 0-9.9-9.9a7 7 0 0 0 9.9 9.9"
+        />
+      </svg>
+    </BaseButton>
+  );
+};
 
 export { Button, IconButton };

From 9b9e0c5d0996ca06707d11c87727980b27b34f64 Mon Sep 17 00:00:00 2001
From: bzzz-coding <86077274+bzzz-coding@users.noreply.github.com>
Date: Fri, 28 Feb 2025 10:20:42 -0800
Subject: [PATCH 4/5] Refactored Typography components

---
 frontend/src/tw-components/Typography.tsx | 147 ++++++++--------------
 1 file changed, 49 insertions(+), 98 deletions(-)

diff --git a/frontend/src/tw-components/Typography.tsx b/frontend/src/tw-components/Typography.tsx
index 4f3a7e23..9f9711ab 100644
--- a/frontend/src/tw-components/Typography.tsx
+++ b/frontend/src/tw-components/Typography.tsx
@@ -1,4 +1,24 @@
 import React from "react";
+import clsx from "clsx";
+
+const baseStyles = "font-sans leading-[137%]";
+
+const TypographyStyles = {
+  Title1: "text-[48px] font-bold",
+  Title2: "text-[36px] font-bold",
+  Title3: "text-[28px] font-bold",
+  Title4: "text-[24px] font-bold",
+  Title5: "text-[20px] font-bold",
+  Title6: "text-[16px] font-bold",
+  Title7: "text-[14px] font-bold",
+  Paragraph1: "text-[20px]",
+  Paragraph2: "text-[18px]",
+  Paragraph3: "text-[16px]",
+  Paragraph4: "text-[15px]",
+  Paragraph5: "text-[14px]",
+  HyperlinkBold: "text-[16px] font-bold underline",
+  Hyperlink: "text-[14px] underline",
+} as const;
 
 type TypographyProps = {
   children: React.ReactNode;
@@ -10,107 +30,38 @@ type HyperlinkProps = {
 } & TypographyProps &
   React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
-const Typography = {
-  Title1: ({ children, className = "", ...props }: TypographyProps) => (
-    <h1
-      className={`font-sans text-[48px] font-bold leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </h1>
-  ),
-  Title2: ({ children, className = "", ...props }: TypographyProps) => (
-    <h2
-      className={`font-sans text-[36px] font-bold leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </h2>
-  ),
-  Title3: ({ children, className = "", ...props }: TypographyProps) => (
-    <h3
-      className={`font-sans text-[28px] font-bold leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </h3>
-  ),
-  Title4: ({ children, className = "", ...props }: TypographyProps) => (
-    <h4
-      className={`font-sans text-[24px] font-bold leading-[30px] ${className}`}
-      {...props}
-    >
-      {children}
-    </h4>
-  ),
-  Title5: ({ children, className = "", ...props }: TypographyProps) => (
-    <h5
-      className={`font-sans text-[20px] font-bold leading-[137%] ${className}`}
-      {...props}
-    >
+const createTypography = (
+  Tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p",
+  size: (typeof TypographyStyles)[keyof typeof TypographyStyles],
+) => {
+  const Component = ({ children, className, ...props }: TypographyProps) => (
+    <Tag className={clsx(baseStyles, size, className)} {...props}>
       {children}
-    </h5>
-  ),
-  Title6: ({ children, className = "", ...props }: TypographyProps) => (
-    <h6
-      className={`font-sans text-[16px] font-bold leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </h6>
-  ),
-  Title7: ({ children, className = "", ...props }: TypographyProps) => (
-    <h6
-      className={`font-sans text-[14px] font-bold leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </h6>
-  ),
-  Paragraph1: ({ children, className = "", ...props }: TypographyProps) => (
-    <p
-      className={`font-sans text-[20px] leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </p>
-  ),
-  Paragraph2: ({ children, className = "", ...props }: TypographyProps) => (
-    <p
-      className={`font-sans text-[18px] leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </p>
-  ),
-  Paragraph3: ({ children, className = "", ...props }: TypographyProps) => (
-    <p
-      className={`font-sans text-[16px] leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </p>
-  ),
-  Paragraph4: ({ children, className = "", ...props }: TypographyProps) => (
-    <p
-      className={`font-sans text-[15px] leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </p>
-  ),
-  Paragraph5: ({ children, className = "", ...props }: TypographyProps) => (
-    <p
-      className={`font-sans text-[14px] leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </p>
-  ),
+    </Tag>
+  );
+
+  Component.displayName = `Typography.${Tag}`;
+
+  return Component;
+};
+
+const Typography = {
+  Title1: createTypography("h1", TypographyStyles.Title1),
+  Title2: createTypography("h2", TypographyStyles.Title2),
+  Title3: createTypography("h3", TypographyStyles.Title3),
+  Title4: createTypography("h4", TypographyStyles.Title4),
+  Title5: createTypography("h5", TypographyStyles.Title5),
+  Title6: createTypography("h6", TypographyStyles.Title6),
+  Title7: createTypography("h6", TypographyStyles.Title7),
+  Paragraph1: createTypography("p", TypographyStyles.Paragraph1),
+  Paragraph2: createTypography("p", TypographyStyles.Paragraph2),
+  Paragraph3: createTypography("p", TypographyStyles.Paragraph3),
+  Paragraph4: createTypography("p", TypographyStyles.Paragraph4),
+  Paragraph5: createTypography("p", TypographyStyles.Paragraph5),
   HyperlinkBold: ({ children, className, href, ...props }: HyperlinkProps) => (
     <a
       href={href}
-      className={`font-sans text-[16px] font-bold leading-[137%] underline ${className}`}
+      className={clsx(baseStyles, TypographyStyles.HyperlinkBold, className)}
       {...props}
     >
       {children}
@@ -119,7 +70,7 @@ const Typography = {
   Hyperlink: ({ children, className, href, ...props }: HyperlinkProps) => (
     <a
       href={href}
-      className={`font-sans text-[14px] leading-[137%] underline ${className}`}
+      className={clsx(baseStyles, TypographyStyles.Hyperlink, className)}
       {...props}
     >
       {children}

From 33e617ef3ff7677faf78b5dcca9c20d9c36be11b Mon Sep 17 00:00:00 2001
From: bzzz-coding <86077274+bzzz-coding@users.noreply.github.com>
Date: Sun, 9 Mar 2025 19:40:39 -0700
Subject: [PATCH 5/5] Deleted unnecessary type

---
 frontend/src/tw-components/Typography.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/tw-components/Typography.tsx b/frontend/src/tw-components/Typography.tsx
index 9f9711ab..0f2e3bad 100644
--- a/frontend/src/tw-components/Typography.tsx
+++ b/frontend/src/tw-components/Typography.tsx
@@ -18,7 +18,7 @@ const TypographyStyles = {
   Paragraph5: "text-[14px]",
   HyperlinkBold: "text-[16px] font-bold underline",
   Hyperlink: "text-[14px] underline",
-} as const;
+};
 
 type TypographyProps = {
   children: React.ReactNode;