From de05fad9f40b08006bb894a33be59dc6e7fd7801 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Tue, 6 Jul 2021 00:20:55 +0200
Subject: [PATCH] Update: New settings close button

---
 src/pages/settings/GenericSettings.tsx  |  8 ++++----
 src/pages/settings/Settings.module.scss | 27 +++++++++++++++++++------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index b1206b0a..2024110b 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/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}>
-                        <XCircle size={48} />
-                    </IconButton>
+                        <div onClick={exitSettings} className={styles.closeButton}>
+                            <X size={28} />
+                        </div>
                 </div>
             )}
         </div>
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index 1368da03..a28bdb9c 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/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);
-                }
-            }
         }
     }
 }