From ad83423fc2d34d74315999afb10c0cc47c3d9786 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Mon, 18 Dec 2023 15:59:29 +0800
Subject: [PATCH]  Reduce drawer button width

---
 src/Components/DrawerButton/DrawerButton.tsx | 65 ++++++++++----------
 1 file changed, 31 insertions(+), 34 deletions(-)

diff --git a/src/Components/DrawerButton/DrawerButton.tsx b/src/Components/DrawerButton/DrawerButton.tsx
index 4cc04c9..7595629 100644
--- a/src/Components/DrawerButton/DrawerButton.tsx
+++ b/src/Components/DrawerButton/DrawerButton.tsx
@@ -10,42 +10,39 @@ export interface props {
 export default function DrawerButton(props: props) {
   const [clicked, setClicked] = useState(false);
   return (
-    <div>
-      <button
-        onClick={props.onClick}
-        onMouseDown={() => {
-          if (!clicked) {
-            setClicked(!clicked);
-          }
-        }}
-        onMouseUp={() => setClicked(false)}
-        onMouseLeave={() => setClicked(false)}
+    <button
+      onClick={props.onClick}
+      onMouseDown={() => {
+        if (!clicked) {
+          setClicked(!clicked);
+        }
+      }}
+      onMouseUp={() => setClicked(false)}
+      onMouseLeave={() => setClicked(false)}
+      style={{
+        borderRadius: 24,
+        minWidth: "160px",
+        maxWidth: "160px",
+        borderColor: colors.button_border,
+        borderStyle: "solid",
+        borderWidth: "2px",
+        paddingBottom: 0,
+        paddingTop: 0,
+        paddingLeft: "4px",
+        marginBottom: "4px",
+        marginTop: "4px",
+        backgroundColor: clicked ? colors.button_dark : colors.button_light,
+      }}
+    >
+      <p
         style={{
-          borderRadius: 24,
-          minWidth: "192px",
-          maxWidth: "192px",
-          borderColor: colors.button_border,
-          borderStyle: "solid",
-          borderWidth: "2px",
-          paddingBottom: 0,
-          paddingTop: 0,
-          paddingRight: "4px",
-          paddingLeft: "4px",
-          marginBottom: "4px",
-          marginTop: "4px",
-          backgroundColor: clicked ? colors.button_dark : colors.button_light,
+          ...(clicked ? styles.text_light : styles.text_dark),
+          ...styles.text_M,
+          ...{ textAlign: "left", marginLeft: "16px" },
         }}
       >
-        <p
-          style={{
-            ...(clicked ? styles.text_light : styles.text_dark),
-            ...styles.text_M,
-            ...{ textAlign: "left", marginLeft: "4px" },
-          }}
-        >
-          {props.label}
-        </p>
-      </button>
-    </div>
+        {props.label}
+      </p>
+    </button>
   );
 }