Apply CloseButton styling to button wrapping SVG

HackIllinois · Feb 7, 2025 · a0f585e · a0f585e
1 parent 44ee9c1
commit a0f585e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/components/CloseButton/CloseButton.module.scss b/components/CloseButton/CloseButton.module.scss
@@ -1,3 +1,11 @@
+.button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+    margin-left: -5px; // To align the button with the other content
+}
+
 .button:hover {
     cursor: pointer;
 }
diff --git a/components/CloseButton/CloseButton.tsx b/components/CloseButton/CloseButton.tsx
@@ -2,19 +2,19 @@ import styles from "./CloseButton.module.scss";
 
 const CloseButton = ({ handleClose }: { handleClose: () => void }) => {
     return (
-        <svg
-            className={styles.button}
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 40 40"
-            width="3rem"
-            height="3rem"
-            onClick={handleClose}
-        >
-            <path
-                fill="#000000"
-                d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
-            ></path>
-        </svg>
+        <button className={styles.button} onClick={handleClose}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24px 24px"
+                width="24px"
+                height="24px"
+            >
+                <path
+                    fill="#000000"
+                    d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
+                ></path>
+            </svg>
+        </button>
     );
 };