From ab2525ad95e31d8b5e0f3e1ca886c77a7bdeb917 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Sun, 17 Dec 2023 23:49:17 +0800
Subject: [PATCH] Separate button icons and buttons themselves to address
 mobile issue of buttons not functioning when clicking the enveloped icon

---
 src/Components/Drawer/Drawer.tsx             | 98 ++++++++++----------
 src/Components/DrawerButton/DrawerButton.tsx | 28 +++---
 2 files changed, 61 insertions(+), 65 deletions(-)

diff --git a/src/Components/Drawer/Drawer.tsx b/src/Components/Drawer/Drawer.tsx
index 1360ac5..a495de6 100644
--- a/src/Components/Drawer/Drawer.tsx
+++ b/src/Components/Drawer/Drawer.tsx
@@ -56,55 +56,55 @@ export default function Drawer() {
           marginBottom: 8,
         }}
       />
-      <DrawerButton
-        onClick={() => {
-          navigate("/dashboard");
-        }}
-        icon={
-          <HomeIcon
-            style={{
-              width: "48px",
-              height: "48px",
-              color: "white",
-              marginRight: "2px",
-              alignSelf: "center",
-              justifySelf: "center",
-            }}
-          />
-        }
-        label={"Dashboard"}
-      />
-      <DrawerButton
-        onClick={async () => {
-          navigate("/");
-          await dispatch(auth_toggle());
-          await setAccessToken("");
-          await setRefreshToken("");
-          toast("Logged out", {
-            position: "top-right",
-            autoClose: 2000,
-            hideProgressBar: false,
-            closeOnClick: true,
-            pauseOnHover: true,
-            draggable: true,
-            progress: undefined,
-            theme: "light",
-          });
-        }}
-        icon={
-          <LogoutIcon
-            style={{
-              width: "48px",
-              height: "48px",
-              color: "white",
-              marginRight: "2px",
-              alignSelf: "center",
-              justifySelf: "center",
-            }}
-          />
-        }
-        label={"Log out"}
-      />
+      <div style={styles.flex_row}>
+        <HomeIcon
+          style={{
+            width: "48px",
+            height: "48px",
+            color: "white",
+            marginRight: "2px",
+            alignSelf: "center",
+            justifySelf: "center",
+          }}
+        />
+        <DrawerButton
+          onClick={() => {
+            navigate("/dashboard");
+          }}
+          label={"Dashboard"}
+        />
+      </div>
+      <div style={styles.flex_row}>
+        <LogoutIcon
+          style={{
+            width: "48px",
+            height: "48px",
+            color: "white",
+            marginRight: "2px",
+            alignSelf: "center",
+            justifySelf: "center",
+          }}
+        />
+        <DrawerButton
+          onClick={async () => {
+            navigate("/");
+            await dispatch(auth_toggle());
+            await setAccessToken("");
+            await setRefreshToken("");
+            toast("Logged out", {
+              position: "top-right",
+              autoClose: 2000,
+              hideProgressBar: false,
+              closeOnClick: true,
+              pauseOnHover: true,
+              draggable: true,
+              progress: undefined,
+              theme: "light",
+            });
+          }}
+          label={"Log out"}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/Components/DrawerButton/DrawerButton.tsx b/src/Components/DrawerButton/DrawerButton.tsx
index 22fbf44..4cc04c9 100644
--- a/src/Components/DrawerButton/DrawerButton.tsx
+++ b/src/Components/DrawerButton/DrawerButton.tsx
@@ -5,7 +5,6 @@ import { colors } from "../../styles";
 export interface props {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   children?: React.ReactNode;
-  icon?: React.ReactNode;
   label: string;
 }
 export default function DrawerButton(props: props) {
@@ -23,8 +22,8 @@ export default function DrawerButton(props: props) {
         onMouseLeave={() => setClicked(false)}
         style={{
           borderRadius: 24,
-          minWidth: "128px",
-          maxWidth: "128px",
+          minWidth: "192px",
+          maxWidth: "192px",
           borderColor: colors.button_border,
           borderStyle: "solid",
           borderWidth: "2px",
@@ -34,21 +33,18 @@ export default function DrawerButton(props: props) {
           paddingLeft: "4px",
           marginBottom: "4px",
           marginTop: "4px",
-          backgroundColor: clicked ? colors.button_light : colors.button_dark,
+          backgroundColor: clicked ? colors.button_dark : colors.button_light,
         }}
       >
-        <div style={styles.flex_row}>
-          {clicked ? <></> : props.icon}
-          <p
-            style={{
-              ...(clicked ? styles.text_dark : styles.text_light),
-              ...styles.text_M,
-              ...{ marginLeft: "4px" },
-            }}
-          >
-            {props.label}
-          </p>
-        </div>
+        <p
+          style={{
+            ...(clicked ? styles.text_light : styles.text_dark),
+            ...styles.text_M,
+            ...{ textAlign: "left", marginLeft: "4px" },
+          }}
+        >
+          {props.label}
+        </p>
       </button>
     </div>
   );