From b80a62e29f34034ac44ec63a68072351682fb79c Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 19 Jan 2022 21:53:07 +0300
Subject: [PATCH] Fix close button styling

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/layout/close-button.scss       | 34 ++++++++++---------
 .../components/layout/close-button.tsx        |  4 +--
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/renderer/components/layout/close-button.scss b/src/renderer/components/layout/close-button.scss
index bc82c91dba..56a402ff6e 100644
--- a/src/renderer/components/layout/close-button.scss
+++ b/src/renderer/components/layout/close-button.scss
@@ -20,25 +20,27 @@
  */
 
 .SettingsCloseButton {
-  width: 35px;
-  height: 35px;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  border: 2px solid var(--textColorDimmed);
-  border-radius: 50%;
+  .closeIcon {
+    width: 35px;
+    height: 35px;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    border: 2px solid var(--textColorDimmed);
+    border-radius: 50%;
 
-  &:hover {
-    background-color: #72767d25;
-  }
+    &:hover {
+      background-color: #72767d25;
+    }
 
-  &:active {
-    transform: translateY(1px);
-  }
+    &:active {
+      transform: translateY(1px);
+    }
 
-  .Icon {
-    color: var(--textColorAccent);
-    opacity: 0.6;
+    .Icon {
+      color: var(--textColorAccent);
+      opacity: 0.6;
+    }
   }
 
   .escLabel {
diff --git a/src/renderer/components/layout/close-button.tsx b/src/renderer/components/layout/close-button.tsx
index d45b426378..0271b12ecf 100644
--- a/src/renderer/components/layout/close-button.tsx
+++ b/src/renderer/components/layout/close-button.tsx
@@ -29,8 +29,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export function CloseButton(props: Props) {
   return (
-    <div {...props}>
-      <div className="SettingsCloseButton" role="button" aria-label="Close">
+    <div className="SettingsCloseButton" {...props}>
+      <div className="closeIcon" role="button" aria-label="Close">
         <Icon material="close" />
       </div>
       <div className="escLabel" aria-hidden="true">