From c2f2aeed1e012e0f3d382eff8f3f23097fe991cf Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 22 Jun 2021 05:52:58 -0400
Subject: [PATCH] Update close button

---
 src/layout/card/NitroCardView.scss            | 24 -------------------
 .../card/header/NitroCardHeaderView.scss      | 22 ++++++++++++++++-
 .../card/header/NitroCardHeaderView.tsx       |  8 +++----
 3 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss
index f691a6d0..e8aed37c 100644
--- a/src/layout/card/NitroCardView.scss
+++ b/src/layout/card/NitroCardView.scss
@@ -11,30 +11,6 @@ $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
     @import './tabs/NitroCardTabsView';
 }
 
-.nitro-card-close-parent {
-    top: 5px;
-    position: absolute;
-    width: auto;
-
-    .nitro-card-close {
-        cursor: pointer;
-        border-radius: $border-radius;
-        box-shadow: inset 0 0 0 1px #921911, inset 0 2px rgba($white,.2);
-        padding:2px 6px 0 6px;
-        border:1px solid $white;
-        background: rgb(245,80,65);
-        background: linear-gradient(180deg, rgba(245,80,65,1) 0%, rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%);
-
-        &:hover {
-            filter: brightness(1.2);
-        }
-
-        &:active {
-            filter: brightness(0.8);
-        }
-    }
-}
-
 .nitro-card-responsive {
     position: absolute;
     top: 0;
diff --git a/src/layout/card/header/NitroCardHeaderView.scss b/src/layout/card/header/NitroCardHeaderView.scss
index d7ac863b..700bbb18 100644
--- a/src/layout/card/header/NitroCardHeaderView.scss
+++ b/src/layout/card/header/NitroCardHeaderView.scss
@@ -2,7 +2,27 @@
     min-height: $nitro-card-header-height;
     max-height: $nitro-card-header-height;
 
+    .nitro-card-close {
+        right: 6px;
+        border-radius: $border-radius;
+        box-shadow: inset 0 0 0 1.5px #921911, inset 0 2px rgba($white, .2);
+        border: 1px solid $white;
+        background: rgb(245,80,65);
+        background: linear-gradient(180deg, rgba(245,80,65,1) 0%, rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%);
+        cursor: pointer;
+        line-height: 1;
+        padding: 4px 6px;
+
+        &:hover {
+            filter: brightness(1.2);
+        }
+
+        &:active {
+            filter: brightness(0.8);
+        }
+    }
+
     .nitro-card-close-parent {
-        right:-3px;
+        right: -3px;
     }
 }
diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx
index 4f4fd4d1..79330e73 100644
--- a/src/layout/card/header/NitroCardHeaderView.tsx
+++ b/src/layout/card/header/NitroCardHeaderView.tsx
@@ -10,12 +10,10 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
     return (
         <div className={ `drag-handler container-fluid bg-${ theme }` }>
             <div className="row nitro-card-header">
-                <div className="col-10 offset-1 d-flex justify-content-center align-items-center">
+                <div className="d-flex justify-content-center align-items-center w-100 position-relative">
                     <div className="h4 m-0 text-white text-shadow">{ headerText }</div>
-                </div>
-                <div className="nitro-card-close-parent">
-                    <div className="nitro-card-close cursor-pointer" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
-                        <i className="fas fa-times"></i>
+                    <div className="position-absolute nitro-card-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
+                        <i className="fas fa-times" />
                     </div>
                 </div>
             </div>