Make all buttons SQUARE!!!

client/src/components/Button.tsx

@@ -12,14 +12,11 @@ interface ButtonProps {
     onClick?: (e: React.MouseEvent<Element>) => void;
 
     /* Type of the button */
-    type: 'primary' | 'outline' | 'text' | 'error';
+    type: 'primary' | 'outline' | 'text' | 'error' | 'outline-primary';
 
     /* If true, sets button as a disabled button */
     disabled?: boolean;
 
-    /* Square button */
-    square?: boolean;
-
     /* Bold button */
     bold?: boolean;
 
@@ -37,25 +34,34 @@ interface ButtonProps {
  */
 const Button = (props: ButtonProps) => {
     // Define formatting
-    const defaultFormat = 'py-4 text-center text-2xl no-underline outline-none ';
-    const borderFormat = props.type === 'outline' ? 'border-lightest border-[2.5px] hover:bg-backgroundDark' : 'border-none';
+    const defaultFormat =
+        'py-3 text-center text-2xl no-underline outline-none border-solid border-transparent border-[2.5px] bg-transparent text-primary hover:text-primaryDark rounded-xl';
+
+    // Format borders
+    const borderFormat =
+        props.type.indexOf('outline') !== -1 &&
+        'border-lightest hover:bg-backgroundDark text-light hover:text-light';
+    const primaryBorderFormat = props.type === 'outline-primary' && 'border-primary text-primary hover:text-primary';
+
+    // Format text
     const typeFormat =
         props.type === 'primary'
-            ? 'bg-primary text-background hover:bg-primaryDark'
-            : props.type === 'error'
-            ? 'bg-error text-background hover:bg-errorDark'
-            : 'bg-transparent text-primary hover:text-primaryDark';
-    const squareFormat = props.square ? 'rounded-2xl' : 'rounded-full';
+            ? 'bg-primary text-background hover:bg-primaryDark hover:text-background'
+            : props.type === 'error' && 'bg-error text-background hover:bg-errorDark';
     const varFormat = !props.disabled
         ? typeFormat + ' cursor-pointer duration-200'
-        : 'cursor-auto text-lighter bg-backgroundDark';
+        : 'cursor-auto text-lighter bg-backgroundDark hover:text-lighter';
+
+    // Format bold and width
     const boldFormat = props.bold ? 'font-bold' : 'font-normal';
     const widthFormat = props.full ? 'w-full' : 'w-3/4 md:w-2/3';
+
+    // Combine all formats
     const formatting = twMerge(
         defaultFormat,
         borderFormat,
+        primaryBorderFormat,
         varFormat,
-        squareFormat,
         boldFormat,
         widthFormat,
         props.className

client/src/components/RadioButton.tsx

@@ -36,7 +36,6 @@ const RadioButton = (props: RadioButtonProps) => {
         <Button
             type="outline"
             full
-            square
             className={twMerge(
                 'flex flex-col items-center py-2 px-4 my-2',
                 props.selected

client/src/components/admin/AdminToggleSwitch.tsx

@@ -6,19 +6,19 @@ const AdminToggleSwitch = (props: {
 }) => {
     return (
         <div className="w-full flex flex-row items-center justify-center my-10">
-            <div className="bg-primaryLight flex flex-row rounded-full relative">
+            <div className="bg-primaryLight flex flex-row rounded-xl relative">
                 <div
                     className={`absolute top-0 left-0 w-44 h-16 transition-transform duration-300 ease-in-out ${
                         !props.state ? 'transform translate-x-44' : ''
                     }`}
                 >
-                    <div className="flex flex-col items-center justify-center w-full h-full text-2xl rounded-full bg-primary text-white">
+                    <div className="flex flex-col items-center justify-center w-full h-full text-2xl rounded-xl bg-primary text-white">
                         {props.state ? 'Projects' : 'Judges'}
                     </div>
                 </div>
 
                 <button
-                    className={`block w-44 h-16 text-2xl rounded-full ${
+                    className={`block w-44 h-16 text-2xl rounded-xl ${
                         props.state ? '' : 'bg-transparent text-light'
                     }`}
                     onClick={() => {
@@ -28,7 +28,7 @@ const AdminToggleSwitch = (props: {
                     Projects
                 </button>
                 <button
-                    className={`block w-44 h-16 text-2xl rounded-full ${
+                    className={`block w-44 h-16 text-2xl rounded-xl ${
                         !props.state ? '' : 'bg-transparent text-light'
                     }`}
                     onClick={() => {

client/src/components/admin/AdminToolbar.tsx

@@ -24,7 +24,6 @@ const AdminToolbar = (props: { showProjects: boolean; lastUpdate: Date }) => {
                 <div>
                     <Button
                         type="outline"
-                        square
                         bold
                         full
                         className="py-2 px-4 rounded-md"
@@ -37,7 +36,6 @@ const AdminToolbar = (props: { showProjects: boolean; lastUpdate: Date }) => {
                     {props.showProjects && (
                         <Button
                             type="outline"
-                            square
                             bold
                             full
                             className="py-2 px-4 rounded-md"

client/src/components/admin/PauseButton.tsx

@@ -30,8 +30,7 @@ const PauseButton = () => {
 
     return clock.running ? (
         <Button
-            type="outline"
-            square
+            type="outline-primary"
             bold
             className={pauseButtonFormat}
             onClick={() => handleClick(true)}
@@ -41,7 +40,6 @@ const PauseButton = () => {
     ) : (
         <Button
             type="primary"
-            square
             bold
             className={pauseButtonFormat + " border-[2.5px] border-transparent border-solid"}
             onClick={() => handleClick(false)}

client/src/pages/Home.tsx

@@ -15,12 +15,12 @@ const App = () => {
             <Button href="/judge/login" type="primary">
                 Judging Portal
             </Button>
-            <Button href="/expo" type="outline" className="py-3 mt-4 mb-2">
-                Project Expo
-            </Button>
-            <Button href="/admin/login" type="text">
+            <Button href="/admin/login" type="primary" className="my-4 bg-primaryLight text-black hover:bg-primaryLight hover:brightness-95 hover:text-black">
                 Admin Portal
             </Button>
+            <Button href="/expo" type="outline" className="py-2 w-3/5 md:w-1/2 text-xl">
+                Project Expo
+            </Button>
         </Container>
     );
 };

client/src/pages/judge/index.tsx

@@ -240,11 +240,11 @@ const Judge = () => {
             <Container noCenter className="px-2 pb-4">
                 <h1 className="text-2xl my-2">Welcome, {judge?.name}!</h1>
                 <div className="w-full mb-6">
-                    <Button type="primary" full square href="/judge/live">
+                    <Button type="primary" full href="/judge/live">
                         Next Project
                     </Button>
                     <div className="flex align-center justify-center mt-4">
-                        <Button type="outline" square onClick={takeBreak} className="text-lg p-2">
+                        <Button type="outline" onClick={takeBreak} className="text-lg p-2">
                             I want to take a break!
                         </Button>
                     </div>

client/src/pages/judge/live.tsx

@@ -331,7 +331,7 @@ const JudgeLive = () => {
                     ) : (
                         <div
                             className={twMerge(
-                                'py-5 mb-4 text-6xl rounded-xl w-full border-primary border-4 border-solid text-center cursor-pointer ',
+                                'py-6 mb-4 text-6xl rounded-xl w-full border-primary border-4 border-solid text-center cursor-pointer ',
                                 timesUp ? 'border-error bg-error/20' : '',
                                 paused ? 'bg-lighter/20' : ''
                             )}
@@ -350,7 +350,7 @@ const JudgeLive = () => {
                     <div className="flex items-center">
                         <Button
                             type="primary"
-                            className="bg-error mr-2 py-1 text-xl rounded-xl basis-2/5 disabled:bg-backgroundDark hover:bg-errorDark"
+                            className="bg-error mr-2 py-1 text-xl basis-2/5 disabled:bg-backgroundDark hover:bg-errorDark"
                             disabled={false}
                             onClick={() => {
                                 openPopup('flag');
@@ -360,7 +360,7 @@ const JudgeLive = () => {
                         </Button>
                         <Button
                             type="primary"
-                            className="bg-gold mx-2 py-1 text-xl rounded-xl basis-2/5 text-black disabled:bg-backgroundDark disabled:text-lighter hover:bg-goldDark"
+                            className="bg-gold mx-2 py-1 text-xl basis-2/5 text-black disabled:bg-backgroundDark disabled:text-lighter hover:bg-goldDark"
                             disabled={judge === null}
                             onClick={() => {
                                 openPopup('skip');