Added Tailwind Button Components

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"

frontend/src/pages/Demo/DemoTailwind.tsx

@@ -1,14 +1,77 @@
-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 transition-colors duration-300 dark:bg-[#030D2D]">
+        <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="mb-2 mt-4 text-blue-dark dark:text-white">
+          Active
+        </Typography.Title3>
+        <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*/}
+          <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="mb-4 flex flex-wrap items-center gap-4">
+          <Button disabled>Medium Disabled</Button>
+          <Button size="large" 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="mb-4 flex flex-wrap items-center gap-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 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>

frontend/src/tw-components/Buttons.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import clsx from "clsx";
+import Typography from "tw-components/Typography";
+
+const buttonSizes = {
+  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]",
+};
+
+type ButtonSize = keyof typeof buttonSizes;
+
+type BaseButtonProps = {
+  size?: ButtonSize;
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onClick?: () => void;
+};
+
+// Shared styles
+const baseButtonStyles =
+  "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] dark:disabled:bg-grey dark:disabled:text-grey-light";
+
+// Base Button, no text, just styling
+const BaseButton: React.FC<BaseButtonProps> = ({
+  size = "medium",
+  disabled = false,
+  className,
+  children,
+  onClick,
+}) => {
+  return (
+    <button
+      className={clsx(
+        baseButtonStyles,
+        buttonSizes[size],
+        !disabled && enabledDarkModeStyles,
+        className,
+      )}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+// 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 };

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",