From 6841eeba60e4ab2addef71582abac689db0a7f6e Mon Sep 17 00:00:00 2001
From: Layne <laynebalsters@gmail.com>
Date: Sun, 20 Jun 2021 01:46:24 -0400
Subject: [PATCH] close button

---
 .../card/header/NitroCardHeaderView.scss      | 25 +++++++++++++++++++
 .../card/header/NitroCardHeaderView.tsx       |  4 +--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/layout/card/header/NitroCardHeaderView.scss b/src/layout/card/header/NitroCardHeaderView.scss
index bdf82f76..06d18968 100644
--- a/src/layout/card/header/NitroCardHeaderView.scss
+++ b/src/layout/card/header/NitroCardHeaderView.scss
@@ -1,4 +1,29 @@
 .nitro-card-header {
     min-height: $nitro-card-header-height;
     max-height: $nitro-card-header-height;
+
+    .nitro-card-close-parent {
+        right:-3px;
+        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);
+            }
+        }
+    }
 }
diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx
index 8e93c8ed..c850c4d2 100644
--- a/src/layout/card/header/NitroCardHeaderView.tsx
+++ b/src/layout/card/header/NitroCardHeaderView.tsx
@@ -13,8 +13,8 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
                 <div className="col-10 offset-1 d-flex justify-content-center align-items-center">
                     <div className="h4 m-0 text-white text-shadow">{ headerText }</div>
                 </div>
-                <div className="d-flex col-1 justify-content-center align-items-center">
-                    <div className="cursor-pointer" onClick={ onCloseClick }>
+                <div className="nitro-card-close-parent">
+                    <div className="nitro-card-close" onClick={ onCloseClick }>
                         <i className="fas fa-times"></i>
                     </div>
                 </div>