From f2000056167142f5cb2a330ca5e85e221453415d Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 19 Jan 2022 22:41:28 +0300
Subject: [PATCH] Convert CloseButton styles out from css modules (#4723)

* Convert CloseButton styles out from css modules

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix close button styling

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 ...e-button.module.scss => close-button.scss} | 54 ++++++++++---------
 .../components/layout/close-button.tsx        | 10 ++--
 2 files changed, 33 insertions(+), 31 deletions(-)
 rename src/renderer/components/layout/{close-button.module.scss => close-button.scss} (66%)

diff --git a/src/renderer/components/layout/close-button.module.scss b/src/renderer/components/layout/close-button.scss
similarity index 66%
rename from src/renderer/components/layout/close-button.module.scss
rename to src/renderer/components/layout/close-button.scss
index 57a7296339..56a402ff6e 100644
--- a/src/renderer/components/layout/close-button.module.scss
+++ b/src/renderer/components/layout/close-button.scss
@@ -19,34 +19,36 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.closeButton {
-  width: 35px;
-  height: 35px;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  border: 2px solid var(--textColorDimmed);
-  border-radius: 50%;
+.SettingsCloseButton {
+  .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);
+    }
+
+    .Icon {
+      color: var(--textColorAccent);
+      opacity: 0.6;
+    }
   }
 
-  &:active {
-    transform: translateY(1px);
+  .escLabel {
+    text-align: center;
+    margin-top: var(--margin);
+    font-weight: bold;
+    user-select: none;
+    color: var(--textColorDimmed);
+    pointer-events: none;
   }
 }
-
-.icon {
-  color: var(--textColorAccent);
-  opacity: 0.6;
-}
-
-.esc {
-  text-align: center;
-  margin-top: var(--margin);
-  font-weight: bold;
-  user-select: none;
-  color: var(--textColorDimmed);
-  pointer-events: none;
-}
\ No newline at end of file
diff --git a/src/renderer/components/layout/close-button.tsx b/src/renderer/components/layout/close-button.tsx
index 9bdf78f0bd..0271b12ecf 100644
--- a/src/renderer/components/layout/close-button.tsx
+++ b/src/renderer/components/layout/close-button.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./close-button.module.scss";
+import "./close-button.scss";
 
 import React, { HTMLAttributes } from "react";
 import { Icon } from "../icon";
@@ -29,11 +29,11 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export function CloseButton(props: Props) {
   return (
-    <div {...props}>
-      <div className={styles.closeButton} role="button" aria-label="Close">
-        <Icon material="close" className={styles.icon}/>
+    <div className="SettingsCloseButton" {...props}>
+      <div className="closeIcon" role="button" aria-label="Close">
+        <Icon material="close" />
       </div>
-      <div className={styles.esc} aria-hidden="true">
+      <div className="escLabel" aria-hidden="true">
         ESC
       </div>
     </div>