From 909fbc171597cd10cd85931b5a6022e593957e71 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Mon, 16 Aug 2021 13:18:55 -0400
Subject: [PATCH] Fix mini-camera layout

---
 src/layout/Layout.scss                              |  1 +
 src/layout/card/header/NitroCardHeaderView.tsx      | 12 +++++++++---
 .../mini-camera/NitroLayoutMiniCameraView.scss      | 13 +++++++++++++
 3 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 src/layout/mini-camera/NitroLayoutMiniCameraView.scss

diff --git a/src/layout/Layout.scss b/src/layout/Layout.scss
index 29d09c48..3c31789c 100644
--- a/src/layout/Layout.scss
+++ b/src/layout/Layout.scss
@@ -25,4 +25,5 @@
 @import './card/NitroCardView';
 @import './draggable-window/DraggableWindow';
 @import './loading-spinner/LoadingSpinnerView';
+@import './mini-camera/NitroLayoutMiniCameraView';
 @import './trophy/NitroLayoutTrophyView';
diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx
index 17284bf5..3be15c6d 100644
--- a/src/layout/card/header/NitroCardHeaderView.tsx
+++ b/src/layout/card/header/NitroCardHeaderView.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, MouseEvent, useCallback } from 'react';
 import { useNitroCardContext } from '../context/NitroCardContext';
 import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
 
@@ -7,6 +7,12 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
     const { headerText = null, onCloseClick = null } = props;
     const { simple = false } = useNitroCardContext();
 
+    const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
+    {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+    }, []);
+
     if(simple)
     {
         return (
@@ -14,7 +20,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
                 <div className="row nitro-card-header simple-header">
                     <div className="d-flex justify-content-center align-items-center w-100 position-relative">
                         <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 rounded-bottom drag-handler">{ headerText }</div>
-                        <div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
+                        <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
                             <i className="fas fa-times" />
                         </div>
                     </div>
@@ -28,7 +34,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
             <div className="row nitro-card-header">
                 <div className="d-flex justify-content-center align-items-center w-100 position-relative">
                     <div className="h4 text-white text-shadow header-text">{ headerText }</div>
-                    <div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
+                    <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
                         <i className="fas fa-times" />
                     </div>
                 </div>
diff --git a/src/layout/mini-camera/NitroLayoutMiniCameraView.scss b/src/layout/mini-camera/NitroLayoutMiniCameraView.scss
new file mode 100644
index 00000000..a209d6ca
--- /dev/null
+++ b/src/layout/mini-camera/NitroLayoutMiniCameraView.scss
@@ -0,0 +1,13 @@
+.nitro-room-thumbnail-camera {
+    width: 132px;
+    height: 192px;
+    background-image: url('../../assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png');
+
+    .camera-frame {
+        position: absolute;
+        width: 110px;
+        height: 110px;
+        margin-top: 38px;
+        margin-left: 3px;
+    }
+}