From 1c44de5daac054d1a421dcb1424b30bb992457eb Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Tue, 22 Jun 2021 19:08:08 -0300
Subject: [PATCH] Fix close button

---
 src/layout/card/NitroCardView.scss            | 20 +++++++++++++++++++
 .../card/header/NitroCardHeaderView.scss      | 20 -------------------
 .../NitroCardSimpleHeaderView.scss            | 20 -------------------
 .../room/widgets/camera/CameraWidgetView.scss |  4 ++--
 .../views/capture/CameraWidgetCaptureView.tsx |  6 ++----
 5 files changed, 24 insertions(+), 46 deletions(-)

diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss
index e8aed37c..2a0f4800 100644
--- a/src/layout/card/NitroCardView.scss
+++ b/src/layout/card/NitroCardView.scss
@@ -41,4 +41,24 @@ $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
     }
 }
 
+.header-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);
+    }
+}
+
 @import './accordion/NitroCardAccordionView';
diff --git a/src/layout/card/header/NitroCardHeaderView.scss b/src/layout/card/header/NitroCardHeaderView.scss
index 5addce7e..bdf82f76 100644
--- a/src/layout/card/header/NitroCardHeaderView.scss
+++ b/src/layout/card/header/NitroCardHeaderView.scss
@@ -1,24 +1,4 @@
 .nitro-card-header {
     min-height: $nitro-card-header-height;
     max-height: $nitro-card-header-height;
-
-    .header-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);
-        }
-    }
 }
diff --git a/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss b/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss
index c7cdc6d7..16f04ff7 100644
--- a/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss
+++ b/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss
@@ -8,24 +8,4 @@
         width: 100%;
         margin: 0 30px;
     }
-
-    .header-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);
-        }
-    }
 }
diff --git a/src/views/room/widgets/camera/CameraWidgetView.scss b/src/views/room/widgets/camera/CameraWidgetView.scss
index f3b8f31c..b43244d5 100644
--- a/src/views/room/widgets/camera/CameraWidgetView.scss
+++ b/src/views/room/widgets/camera/CameraWidgetView.scss
@@ -1,7 +1,7 @@
 .nitro-camera-capture {
-    .nitro-card-close-parent {
+    .header-close {
         top: 7px;
-        right: 10px;
+        right: 9px;
     }
     
     .camera-canvas {
diff --git a/src/views/room/widgets/camera/views/capture/CameraWidgetCaptureView.tsx b/src/views/room/widgets/camera/views/capture/CameraWidgetCaptureView.tsx
index 3518f59f..25dacc9f 100644
--- a/src/views/room/widgets/camera/views/capture/CameraWidgetCaptureView.tsx
+++ b/src/views/room/widgets/camera/views/capture/CameraWidgetCaptureView.tsx
@@ -79,10 +79,8 @@ export const CameraWidgetCaptureView: FC<CameraWidgetCaptureViewProps> = props =
         <DraggableWindow handle=".nitro-camera-capture">
             <div className="nitro-camera-capture d-flex flex-column justify-content-center align-items-center">
                <div className="camera-canvas">
-                    <div className="nitro-card-close-parent">
-                        <div className="nitro-card-close" onClick={ event => processAction('close') }>
-                            <i className="fas fa-times"/>
-                        </div>
+                    <div className="position-absolute header-close" onClick={ event => processAction('close') }>
+                        <i className="fas fa-times"/>
                     </div>
                     <div ref={ cameraFrameRef } className={'camera-frame ' + classNames({'bg': cameraWidgetContext.selectedPictureIndex > -1}) }>
                         { cameraWidgetContext.selectedPictureIndex > -1 && <div>