🎨 fixed all existing buttons

UofA-Blueprint · Nov 1, 2024 · 75c8f87 · 75c8f87
1 parent 2dd5a4c
commit 75c8f87
Show file tree

Hide file tree

Showing 9 changed files with 246 additions and 98 deletions.
diff --git a/src/components/AddMember.tsx b/src/components/AddMember.tsx
@@ -69,7 +69,7 @@ function AddMember({ isOpen, onClose }: AddMemberProps) {
 			actions={
 				<div className="flex flex-col gap-1 w-full">
 					<Button
-						shape="medium"
+						size="medium"
 						text="Add Member"
 						onClick={addMember()}
 					/>

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -4,7 +4,10 @@ import clsx from "clsx";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	/* Height of the button */
-	shape: "small" | "medium" | "large" | "round" | "square";
+	size: "small" | "medium" | "large";
+
+	/* Special button shapes */
+	shape?: "round" | "square";
 
 	/* The text to display on the button */
 	text?: string;
@@ -16,13 +19,14 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	disabled?: boolean;
 
 	/* The severity of the button */
-	severity?: "primary" | "secondary" | "danger";
+	severity?: "primary" | "secondary" | "danger" | "dangerPrimary";
 
 	/* The callback to run when the button is clicked */
 	onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
 function Button({
+	size,
 	shape,
 	text,
 	icon,
@@ -40,11 +44,19 @@ function Button({
 
 	const medium = "h-12 py-3 px-6 text-base";
 
-	const large = "h-16 py-4 px-6 text-2xl";
+	const large = "h-16 py-4 px-6 text-2xl leading-6";
 
-	const round = " h-[60px] w-[60px] rounded-full p-4";
+	const round = clsx("rounded-full p-4", {
+		"w-[60px] h-[60px]": size === "large",
+		"w-[48px] h-[48px]": size === "medium",
+		"w-[32px] h-[32px]": size === "small",
+	});
 
-	const square = "h-[60px] w-[60px] p-4";
+	const square = clsx("p-4", {
+		"w-[60px] h-[60px]": size === "large",
+		"w-[48px] h-[48px]": size === "medium",
+		"w-[32px] h-[32px]": size === "small",
+	});
 
 	const primary = "bg-primary-main text-neutrals-light-100";
 
@@ -54,32 +66,35 @@ function Button({
 	const danger =
 		"bg-transparent text-status-red-main border-2 border-status-red-main";
 
+	const dangerPrimary = "bg-status-red-main text-neutrals-light-100";
+
 	const disabledButton =
 		"bg-neutrals-light-500 text-neutrals-dark-200 border-transparent cursor-not-allowed";
 
-	const textStyle = "text-body-reg text-center min-w-max";
+	const textStyle = "text-center min-w-max";
 
 	return (
 		<button
 			ref={buttonRef}
 			disabled={disabled}
 			className={twMerge(
 				clsx(base, {
-					[small]: shape === "small",
-					[medium]: shape === "medium",
-					[large]: shape === "large",
+					[small]: size === "small",
+					[medium]: size === "medium",
+					[large]: size === "large",
 					[round]: shape === "round",
 					[square]: shape === "square",
 					[primary]: severity === "primary",
 					[secondary]: severity === "secondary",
 					[danger]: severity === "danger",
+					[dangerPrimary]: severity === "dangerPrimary",
 					[disabledButton]: disabled,
 				}),
 			)}
 			onClick={onClick}
 		>
 			<span>{icon}</span>
-			<span className={clsx(textStyle)}>{text}</span>
+			{text && !shape && <span className={clsx(textStyle)}>{text}</span>}
 		</button>
 	);
 }

diff --git a/src/components/ConfirmationModal.tsx b/src/components/ConfirmationModal.tsx
@@ -1,77 +1,84 @@
 import React from "react";
 import Modal from "@/components/Modal";
 import Button from "@/components/Button";
-import { WarningCircle  } from "@phosphor-icons/react";
+import { WarningCircle } from "@phosphor-icons/react";
 
 interface ConfirmationModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  headerText: string;
-  description: string;
-  buttonText: string;
-  onConfirm: () => void;
-  icon?: React.ReactNode;
-  errorText?: string;
-  primaryColor?: "primary" | "secondary" | "danger";
-  secondaryColor?: "primary" | "secondary" | "danger";
+	isOpen: boolean;
+	onClose: () => void;
+	headerText: string;
+	description: string;
+	buttonText: string;
+	onConfirm: () => void;
+	icon?: React.ReactNode;
+	errorText?: string;
+	primaryColor?: "primary" | "secondary" | "danger";
+	secondaryColor?: "primary" | "secondary" | "danger";
 }
 
 const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
-  isOpen,
-  onClose,
-  headerText,
-  description,
-  buttonText,
-  onConfirm,
-  icon,
-  errorText,
-  primaryColor = "primary",
-  secondaryColor = "secondary",
+	isOpen,
+	onClose,
+	headerText,
+	description,
+	buttonText,
+	onConfirm,
+	icon,
+	errorText,
+	primaryColor = "primary",
+	secondaryColor = "secondary",
 }) => {
-  // Define the content to pass to the Modal
-  const modalContent = (
-    <div className="flex flex-col">
-      {/* Description */}
-      <p className="text-neutrals-dark-100 ml-8 mr-7 mt-[-1rem] leading-tight">{description}</p>
-    </div>
-  );
+	// Define the content to pass to the Modal
+	const modalContent = (
+		<div className="flex flex-col">
+			{/* Description */}
+			<p className="text-neutrals-dark-100 ml-8 mr-7 mt-[-1rem] leading-tight">
+				{description}
+			</p>
+		</div>
+	);
 
-  return (
-    <Modal
-      isOpen={isOpen}
-      hideCloseButton={true}
-      onClose={onClose}
-      title={headerText}
-      icon={icon}
-      content={modalContent} 
-      actions={      
-                <div className="flex justify-end items-center mt-[-1rem] gap-[0.65rem]">
-                  {errorText && (
-                    <div className="flex items-center text-status-red-main gap-1">
-                      <WarningCircle size={20} className="flex-shrink-0"/>
-                      <span className="text-status-red-main leading-tight">{errorText}</span>
-                    </div>
-                  )}
-                  <div className="flex gap-2">
-                    {/* Cancel Button */}
-                    <Button
-                      text="Cancel"
-                      onClick={onClose}
-                      shape = "small"
-                      severity={secondaryColor}
-                    />
-                    {/* Confirm Button */}
-                    <Button
-                      text={buttonText}
-                      onClick={onConfirm}
-                      shape = "small"
-                      severity={primaryColor}
-                    />
-                  </div>
-                </div>
-      }
-    />
-  );
+	return (
+		<Modal
+			isOpen={isOpen}
+			hideCloseButton={true}
+			onClose={onClose}
+			title={headerText}
+			icon={icon}
+			content={modalContent}
+			actions={
+				<div className="flex justify-end items-center mt-[-1rem] gap-[0.65rem]">
+					{errorText && (
+						<div className="flex items-center text-status-red-main gap-1">
+							<WarningCircle
+								size={20}
+								className="flex-shrink-0"
+							/>
+							<span className="text-status-red-main leading-tight">
+								{errorText}
+							</span>
+						</div>
+					)}
+					<div className="flex gap-2">
+						{/* Cancel Button */}
+						<Button
+							text="Cancel"
+							onClick={onClose}
+							size="small"
+							severity={secondaryColor}
+						/>
+						{/* Confirm Button */}
+						<Button
+							text={buttonText}
+							onClick={onConfirm}
+							size="small"
+							severity={primaryColor}
+						/>
+					</div>
+				</div>
+			}
+		/>
+	);
 };
 
 export default ConfirmationModal;
diff --git a/src/components/EditMember.tsx b/src/components/EditMember.tsx
@@ -43,19 +43,19 @@ function EditMember({ isOpen, onClose }: EditMemberProps) {
 					<div className="flex flex-col gap-4">
 						<div>
 							<Button
-								shape="medium"
+								size="medium"
 								text="Save Changes"
 								onClick={onClose}
 							/>
 						</div>
 						<div className="flex flex-row gap-4">
 							<Button
-								shape="medium"
+								size="medium"
 								text="Delete Member Page"
 								severity="danger"
 							/>
 							<Button
-								shape="medium"
+								size="medium"
 								text="Reset Member Page"
 								severity="secondary"
 							/>

diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
@@ -125,7 +125,7 @@ const LoginModal = ({
 			{/* Login Button */}
 			<Button
 				text="Login"
-				shape="medium"
+				size="medium"
 				severity="primary"
 				disabled={invalidUsername || invalidPassword}
 				onClick={onClick}

diff --git a/src/components/MediaCard.tsx b/src/components/MediaCard.tsx
@@ -113,7 +113,7 @@ function MediaCard({
 								className="h-1/4"
 								severity="secondary"
 								onClick={() => setIsEditingCaption(false)}
-								shape={"small"}
+								size="small"
 							/>
 							<Button
 								className="h-1/4"
@@ -136,7 +136,7 @@ function MediaCard({
 										setIsEditingCaption(false);
 									}
 								}}
-								shape={"small"}
+								size="small"
 							/>
 						</div>
 					</div>

diff --git a/src/routes/admin/AdminHome.tsx b/src/routes/admin/AdminHome.tsx
@@ -241,7 +241,7 @@ export default function AdminHome() {
 							<div className="min-w-max">
 								<Button
 									text="Add Member"
-									shape="medium"
+									size="medium"
 									icon={<Plus size={24} />}
 									onClick={() =>
 										setIsAddMemberModalOpen(true)