Updated Button component and donate button in footer (#680)

Author: bzzz-coding

frontend/src/tw-components/Buttons.tsx

@@ -14,41 +14,77 @@ const buttonSizes = {
 
 type ButtonSize = keyof typeof buttonSizes;
 
+type ButtonVariant = "default" | "primary-dark";
+
 type BaseButtonProps = {
   size?: ButtonSize;
   disabled?: boolean;
   className?: string;
+  variant?: ButtonVariant;
   children?: React.ReactNode;
   onClick?: () => void;
+  href?: string;
 };
 
-// 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";
+const variantStyles: Record<ButtonVariant, string> = {
+  default: `
+    bg-blue-dark 
+    text-white
+    hover:bg-blue-dark-hover
+    focus:bg-blue-dark-focused
+    active:bg-blue-dark-focused
+    disabled:bg-grey 
+    disabled:text-white
+    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
+  `,
+  "primary-dark": `
+    bg-white
+    text-blue-dark
+    hover:bg-grey-light
+    focus:bg-grey-light
+    active:bg-grey-light
+  `,
+};
 
 // Base Button, no text, just styling
 const BaseButton: React.FC<BaseButtonProps> = ({
   size = "medium",
   disabled = false,
   className,
+  variant = "default",
   children,
   onClick,
+  href,
 }) => {
+  const buttonClasses = cn(
+    "transition-all duration-200 flex items-center justify-center rounded-[64px] focus:outline-none disabled:cursor-not-allowed",
+    buttonSizes[size],
+    variantStyles[variant],
+    className,
+  );
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        className={buttonClasses}
+        onClick={onClick}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {children}
+      </a>
+    );
+  }
+
   return (
-    <button
-      className={cn(
-        baseButtonStyles,
-        buttonSizes[size],
-        !disabled && enabledDarkModeStyles,
-        className,
-      )}
-      disabled={disabled}
-      onClick={onClick}
-    >
+    <button className={buttonClasses} disabled={disabled} onClick={onClick}>
       {children}
     </button>
   );

frontend/src/tw-components/Dialog.tsx

@@ -28,6 +28,7 @@ function Dialog({ open = false, ...props }: DialogProps) {
     }
   }, [isBackdropOpen]);
 
+
   useEffect(() => {
     if (open) {
       setIsBackdropOpen(true);

frontend/src/tw-components/FooterNav.tsx

@@ -3,7 +3,7 @@ import React, { Fragment } from "react";
 import { Link } from "react-router-dom";
 
 // Internal imports
-import { Button } from "components/components";
+import { Button } from "tw-components/Buttons";
 import { logoHorizontalOnDark, logoStackedOnDark } from "assets/images/images";
 
 interface menuObject {
@@ -55,9 +55,9 @@ function FooterNav() {
       </nav>
       <div className="mx-0 flex lg:ml-auto">
         <Button
-          color="primary-dark"
+          size="small"
+          variant="primary-dark"
           href="https://www.hackforla.org/donate/"
-          size="sm"
         >
           Donate
         </Button>