From 1717c35e5996aa91b0344cb45a1924945f0afaf6 Mon Sep 17 00:00:00 2001
From: sksmagr23 <sakshamag34@gmail.com>
Date: Tue, 18 Jun 2024 11:55:17 +0530
Subject: [PATCH] frontend: improved the button component

The button component is modified to make it more
user friendly ,and added default options for type
and size props like reject, accept and button
content accepted as children.

fixes #120
---
 frontend/src/Navbar.tsx         | 69 +++++++++++++------------
 frontend/src/library/button.tsx | 90 ++++++++++++++++++++++++++++-----
 frontend/src/library/modal.tsx  | 14 ++---
 frontend/src/pages/Error.tsx    |  9 ++--
 frontend/src/pages/Game.tsx     | 10 ++--
 frontend/src/pages/Home.tsx     | 26 ++++------
 frontend/src/pages/Login.tsx    | 14 ++---
 frontend/src/pages/SignUp.tsx   | 14 ++---
 8 files changed, 155 insertions(+), 91 deletions(-)

diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
index 9085549..d357d5e 100644
--- a/frontend/src/Navbar.tsx
+++ b/frontend/src/Navbar.tsx
@@ -40,12 +40,13 @@ const Navbar: React.FC = () => {
                     <>
                         <div className="text-xl font-bold mt-2">
                             <Button
-                                text={auth.getUser()!.name}
-                                buttonSize="w-56 h-11"
-                                className="border-4"
-                                rounded="rounded-2xl"
+                                variant="accept"
+                                size="medium"
+                                buttonSize="w-64 h-11"
                                 onClick={goToLogin}
-                            />
+                            >
+                                {auth.getUser()!.name}
+                            </Button>
                         </div>
                     </>
                 ) : (
@@ -53,12 +54,13 @@ const Navbar: React.FC = () => {
                         {showLoginBtn && (
                             <div className="text-xl font-bold mt-2">
                                 <Button
-                                    text="Login"
-                                    onClick={() => navigate('/login')}
+                                    variant="accept"
+                                    size="medium"
                                     buttonSize="w-56 h-11"
-                                    className="border-4"
-                                    rounded="rounded-2xl"
-                                />
+                                    onClick={() => navigate('/login')}
+                                >
+                                    Login
+                                </Button>
                             </div>
                         )}
                     </>
@@ -83,51 +85,54 @@ const Navbar: React.FC = () => {
                                     {auth.getUser()?.name}
                                 </div>
                                 <Button
-                                    text="Logout"
-                                    onClick={auth.logout}
-                                    className="border-4 mb-2 mt-5"
+                                    variant="accept"
+                                    size="medium"
                                     fontSize="text-2xl"
-                                    buttonSize="w-[170px] h-12"
-                                    px="px-0"
-                                />
+                                    onClick={auth.logout}
+                                    className="mb-2 mt-5"
+                                >
+                                    Logout
+                                </Button>
                             </>
                         ) : (
                             <>
                                 <Button
-                                    text="Login"
-                                    onClick={() => navigate('/login')}
-                                    className="border-4 mb-2 mt-20"
+                                    variant="accept"
+                                    size="medium"
                                     fontSize="text-2xl"
-                                    buttonSize="w-[170px] h-12"
-                                    px="px-0"
-                                />
+                                    onClick={() => navigate('/login')}
+                                    className="mb-2 mt-20"
+                                >
+                                    Login
+                                </Button>
                             </>
                         )}
                         <div className="mt-4">
                             <Button
-                                text="About Us"
-                                className="border-4 mb-2"
+                                variant="accept"
+                                size="medium"
                                 fontSize="text-2xl"
-                                buttonSize="w-[170px] h-12"
-                                px="px-0"
                                 onClick={() => {
                                     setShowAboutUsModal(true);
                                     setSidebarOpen(false);
                                 }}
-                            />
+                                className="mb-2"
+                            >
+                                About Us
+                            </Button>
                         </div>
                         <div className="mt-4">
                             <Button
-                                text="Rules"
-                                className="border-4"
+                                variant="accept"
+                                size="medium"
                                 fontSize="text-2xl"
-                                buttonSize="w-[170px] h-12"
-                                px="px-0"
                                 onClick={() => {
                                     setShowRulesModal(true);
                                     setSidebarOpen(false);
                                 }}
-                            />
+                            >
+                                Rules
+                            </Button>
                         </div>
                     </div>
                     <div
diff --git a/frontend/src/library/button.tsx b/frontend/src/library/button.tsx
index add3958..b4e2929 100644
--- a/frontend/src/library/button.tsx
+++ b/frontend/src/library/button.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 import '../index.css';
 
 type ButtonProps = {
-    text: string;
     textColor?: string;
     backgroundColor?: string;
     fontSize?: string;
@@ -17,37 +16,100 @@ type ButtonProps = {
     buttonSize?: string;
     type?: 'submit' | 'reset' | 'button';
     borderColor?: string;
-    hoverColor?: string;
     hoverScale?: boolean;
     px?: string;
     py?: string;
     className?: string;
     onClick?: () => void;
+    variant?: 'accept' | 'reject' | '';
+    size?: 'small' | 'medium' | 'large';
+    children: React.ReactNode;
 };
 
 const Button: React.FC<ButtonProps> = ({
-    text,
-    textColor = 'text-white',
-    backgroundColor = 'bg-lime-500',
-    fontSize = 'text-lg',
-    rounded = 'rounded-2xl',
-    buttonSize = 'w-36 h-11',
-    px = 'px-3',
-    py = 'py-1',
-    borderColor = 'border-black',
-    hoverColor = 'hover:bg-lime-600',
+    textColor,
+    backgroundColor,
+    fontSize,
+    rounded,
+    buttonSize,
+    px,
+    py,
+    borderColor,
     hoverScale = true,
     type = 'button',
     onClick,
     className = '',
+    variant = '',
+    size = 'medium',
+    children,
 }) => {
+    const variantStyles = {
+        accept: {
+            textColor: 'text-white',
+            backgroundColor: 'bg-lime-500',
+            borderColor: 'border-black',
+            hoverColor: 'hover:brightness-125',
+        },
+        reject: {
+            textColor: 'text-white',
+            backgroundColor: 'bg-red-500',
+            borderColor: 'border-black',
+            hoverColor: 'hover:brightness-125',
+        },
+        default: {
+            textColor: 'text-black',
+            backgroundColor: 'bg-gray-200',
+            borderColor: 'border-gray-400',
+            hoverColor: 'hover:brightness-110',
+        },
+    };
+
+    const sizeStyles = {
+        small: {
+            fontSize: 'text-md',
+            rounded: 'rounded-xl',
+            buttonSize: 'w-36 h-8',
+            px: 'px-2',
+            py: 'py-1',
+        },
+        medium: {
+            fontSize: 'text-xl',
+            rounded: 'rounded-2xl',
+            buttonSize: 'w-44 h-12',
+            px: 'px-1',
+            py: 'py-1',
+        },
+        large: {
+            fontSize: 'text-3xl',
+            rounded: 'rounded-3xl',
+            buttonSize: 'w-56 h-18',
+            px: 'px-4',
+            py: 'py-2',
+        },
+    };
+
+    const chosenVariant = variant
+        ? variantStyles[variant]
+        : variantStyles.default;
+    const chosenSize = sizeStyles[size];
+
     return (
         <button
             type={type}
             onClick={onClick}
-            className={`text-stroke ${className} shadow-xl border-3 ${borderColor} font-kavoon ${textColor} ${buttonSize} ${rounded} ${fontSize} ${px} ${py} ${backgroundColor} transition-all duration-300 ${hoverScale ? 'transform hover:scale-105' : ''} ${hoverColor}`}
+            className={`text-stroke ${className} shadow-xl border-4 ${
+                borderColor || chosenVariant.borderColor
+            } font-kavoon ${textColor || chosenVariant.textColor} ${
+                buttonSize || chosenSize.buttonSize
+            } ${rounded || chosenSize.rounded} ${fontSize || chosenSize.fontSize} ${
+                px || chosenSize.px
+            } ${py || chosenSize.py} ${
+                backgroundColor || chosenVariant.backgroundColor
+            } transition-all duration-300 ${
+                hoverScale ? 'transform hover:scale-105' : ''
+            } ${chosenVariant.hoverColor}`}
         >
-            {text}
+            {children}
         </button>
     );
 };
diff --git a/frontend/src/library/modal.tsx b/frontend/src/library/modal.tsx
index dda5f4e..ea522b2 100644
--- a/frontend/src/library/modal.tsx
+++ b/frontend/src/library/modal.tsx
@@ -59,15 +59,15 @@ const Modal: React.FC<ModalProps> = ({ onClose }) => {
                     />
                 </div>
                 <Button
-                    text="Enter"
-                    onClick={handleButtonClick}
+                    size="medium"
                     backgroundColor="bg-yellow-300"
+                    className="hover:bg-yellow-500"
+                    borderColor="border-black"
                     textColor="text-white"
-                    borderColor="border-black border-4"
-                    hoverColor="hover:bg-yellow-400"
-                    rounded="rounded-full"
-                    buttonSize="w-32 h-10"
-                />
+                    onClick={handleButtonClick}
+                >
+                    Enter
+                </Button>
             </div>
         </div>
     );
diff --git a/frontend/src/pages/Error.tsx b/frontend/src/pages/Error.tsx
index 7853bfb..5ed7b39 100644
--- a/frontend/src/pages/Error.tsx
+++ b/frontend/src/pages/Error.tsx
@@ -24,12 +24,13 @@ function Error() {
                         Please return to the Homepage!
                     </p>
                     <Button
-                        text="Return back to homepage"
+                        variant="accept"
+                        size="medium"
                         buttonSize="w-80 h-12"
-                        className="border-4"
-                        rounded="rounded-full"
                         onClick={() => navigate('/')}
-                    />
+                    >
+                        Return to homepage
+                    </Button>
                 </div>
             </div>
         </div>
diff --git a/frontend/src/pages/Game.tsx b/frontend/src/pages/Game.tsx
index 661bf03..1763f9c 100644
--- a/frontend/src/pages/Game.tsx
+++ b/frontend/src/pages/Game.tsx
@@ -71,12 +71,14 @@ const Game: React.FC = () => {
                         </div>
                     </div>
                     <Button
-                        text="UNO"
-                        className="border-2 active:bg-red-600 mt-4"
+                        variant="accept"
+                        size="small"
+                        className="border-2 active:bg-red-600 mt-4 hover:bg-purple-900"
                         backgroundColor="bg-purple-800"
-                        hoverColor="hover:bg-purple-900"
                         buttonSize="w-18 h-10"
-                    />
+                    >
+                        UNO
+                    </Button>
                 </div>
 
                 {/* Player Mat */}
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index d7b87bf..6530038 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -32,23 +32,17 @@ const Home: React.FC = () => {
                     />
                 </div>
                 <Button
-                    text="Start Game"
-                    className="mb-6 w-48 border-4"
-                    buttonSize="w-[220px] h-16"
-                    fontSize="text-3xl"
-                    px="px-3"
-                    py="py-1"
+                    variant="accept"
+                    className="mb-5"
+                    size="large"
                     onClick={CreateGame}
-                />
-                <Button
-                    text="Join Game"
-                    className="mb-4 w-48 border-4"
-                    buttonSize="w-[220px] h-16"
-                    fontSize="text-3xl"
-                    px="px-3"
-                    py="py-1"
-                    onClick={JoinGame}
-                />
+                >
+                    Start Game
+                </Button>
+
+                <Button variant="accept" size="large" onClick={JoinGame}>
+                    Join Game
+                </Button>
             </div>
             {showModal && <Modal onClose={() => setShowModal(false)} />}
         </div>
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 4244d6d..61fa6a0 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -75,14 +75,14 @@ const Login: React.FC = () => {
                                     </div>
                                     <div className="flex justify-center">
                                         <Button
-                                            text="Login"
-                                            textColor="text-white"
-                                            py="0"
-                                            buttonSize="w-32 h-10"
-                                            className="border-4 rounded-full"
-                                            fontSize="text-2xl"
+                                            variant="accept"
+                                            size="medium"
+                                            buttonSize="w-36 h-12"
                                             type="submit"
-                                        />
+                                            fontSize="text-2xl"
+                                        >
+                                            Login
+                                        </Button>
                                     </div>
                                 </div>
                             </form>
diff --git a/frontend/src/pages/SignUp.tsx b/frontend/src/pages/SignUp.tsx
index af6bfd5..a1017c0 100644
--- a/frontend/src/pages/SignUp.tsx
+++ b/frontend/src/pages/SignUp.tsx
@@ -95,14 +95,14 @@ const SignUp: React.FC = () => {
                                     </div>
                                     <div className="flex justify-center">
                                         <Button
-                                            text="Sign Up"
-                                            textColor="text-white"
-                                            py="0"
-                                            buttonSize="w-32 h-10"
-                                            className="border-4 rounded-full"
-                                            fontSize="text-2xl"
+                                            variant="accept"
+                                            size="medium"
+                                            buttonSize="w-36 h-12"
                                             type="submit"
-                                        />
+                                            fontSize="text-2xl"
+                                        >
+                                            Sign Up
+                                        </Button>
                                     </div>
                                 </div>
                             </form>