Skip to content

Commit

Permalink
frontend: improved the button component
Browse files Browse the repository at this point in the history 
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 shivansh-bhatnagar18#120
  • Loading branch information
@sksmagr23 @kuv2707
sksmagr23 authored and kuv2707 committed Jun 18, 2024
1 parent 8e901c1 commit 1717c35
Show file tree
Hide file tree
Showing 8 changed files with 155 additions and 91 deletions.
69 changes: 37 additions & 32 deletions frontend/src/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,25 +40,27 @@ 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>
</>
) : (
<>
{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>
)}
</>
Expand All @@ -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
Expand Down
90 changes: 76 additions & 14 deletions frontend/src/library/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,45 +9,107 @@ import React from 'react';
import '../index.css';

type ButtonProps = {
text: string;
textColor?: string;
backgroundColor?: string;
fontSize?: string;
rounded?: string;
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>
);
};
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/library/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/pages/Error.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 6 additions & 4 deletions frontend/src/pages/Game.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */}
Expand Down
26 changes: 10 additions & 16 deletions frontend/src/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/pages/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/pages/SignUp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 1717c35

Please sign in to comment.