Update: New settings close button

src/pages/settings/GenericSettings.tsx

@@ -1,4 +1,4 @@
-import { ArrowBack, X, XCircle } from "@styled-icons/boxicons-regular";
+import { ArrowBack, X } from "@styled-icons/boxicons-regular";
 import { Helmet } from "react-helmet";
 import { Switch, useHistory, useParams } from "react-router-dom";
 
@@ -148,9 +148,9 @@ export function GenericSettings({
             )}
             {!isTouchscreenDevice && (
                 <div className={styles.action}>
-                    <IconButton onClick={exitSettings}>
+                        <div onClick={exitSettings} className={styles.closeButton}>
-                        <XCircle size={48} />
+                            <X size={28} />
-                    </IconButton>
+                        </div>
                 </div>
             )}
         </div>

src/pages/settings/Settings.module.scss

@@ -168,24 +168,39 @@
         
         &:after {
             content: "ESC";
+            margin-top: 4px;
             display: flex;
             text-align: center;
             align-content: center;
             justify-content: center;
             position: relative;
             color: var(--foreground);
-            width: 48px;
+            width: 40px;
             opacity: .5;
             font-size: .75em;
         }
 
+        .closeButton {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            height: 40px;
+            width: 40px;
+            border: 3px solid var(--tertiary-background);
+            cursor: pointer;
+
+            svg {
+                color: var(--secondary-foreground);
+            }
+
+            &:active {
+                transform: translateY(2px);
+            }
+        }
+
         > div {
             display: inline;
-            > svg {
-                &:active {
-                    transform: translateY(2px);
-                }
-            }
         }
     }
 }