second header addition

src/assets/styles/bootstrap/_variables.scss

@@ -72,16 +72,21 @@ $colors: (
 // scss-docs-start theme-color-variables
 $primary:       #1E7295 !default;
 $secondary:     #185D79 !default;
+$tertiary:      #2DABC2 !default;
+$quaternary:    #2B91A7 !default;
+
 $success:       #008026 !default;
 $info:          $cyan !default;
 $warning:       $yellow !default;
-$danger:        #982F31 !default;
+$danger:        #C23027 !default;
 $light:         #DFDFDF !default;
 $dark:          $gray-900 !default;
+
+
 // scss-docs-end theme-color-variables
 
-.bg-primary-split {
+.bg-tertiary-split {
-  background: repeating-linear-gradient(#1E7295, #1E7295 49.9%, #185D79 50.1%, #185D79 100%);
+  background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
 }
 
 // scss-docs-start theme-colors-map
@@ -642,9 +647,10 @@ $btn-padding-x-lg:            $input-btn-padding-x-lg !default;
 $btn-font-size-lg:            $input-btn-font-size-lg !default;
 
 $btn-border-width:            $input-btn-border-width !default;
+$btn-border-colour:           rgba($black,.1) !default;
 
 $btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              inset 0 2px 0 rgba($white, .15), 0 1px 1px rgba($black, .1) !default;
+$btn-box-shadow:              inset 0 2px 0 rgba($white, .15), inset 0 -2px rgba($black,.1), 0 1px rgba($black, .1) !default;
 $btn-focus-width:             $input-btn-focus-width !default;
 $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
 $btn-disabled-opacity:        .65 !default;

src/assets/styles/bootstrap/mixins/_buttons.scss

@@ -20,7 +20,7 @@
 ) {
   color: $color;
   @include gradient-bg($background);
-  border-color: $border;
+  border-color: $btn-border-colour;
   @include box-shadow($btn-box-shadow);
 
   &:hover {

src/layout/card/NitroCardView.scss

@@ -5,6 +5,31 @@ $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
 .nitro-card {
     pointer-events: all;
 
+    .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);
+            }
+        }
+    }
+
     @import './content/NitroCardContentView';
     @import './header/NitroCardHeaderView';
     @import './simple-header/NitroCardSimpleHeaderView';

src/layout/card/header/NitroCardHeaderView.scss

@@ -1,29 +1,4 @@
 .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);
-            }
-        }
-    }
 }

src/layout/card/simple-header/NitroCardSimpleHeaderView.scss

@@ -0,0 +1,8 @@
+.nitro-card-close-parent {
+    right: 5px;
+}
+
+.bg-tertiary-split {
+    border: 2px solid darken($quaternary,4);
+    box-shadow:0 0 0 2px $white;
+}

src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx

@@ -6,13 +6,16 @@ export const NitroCardSimpleHeaderView: FC<NitroCardSimpleHeaderViewProps> = pro
     const { headerText = null, onCloseClick = null } = props;
 
     return (
-        <div className="d-flex container-fluid align-items-center bg-light">
+        <div className="d-flex container-fluid align-items-center bg-light pb-1">
-            <div className="col-1"></div>
+            <div className="col-1"/>
-            <div className="d-flex bg-primary-split flex-grow-1 justify-content-center align-items-center border border-top-0 rounded-bottom px-2 py-1">
+            <div className="d-flex bg-tertiary-split flex-grow-1 justify-content-center align-items-center border-top-0 rounded-bottom px-2 py-1 drag-handler">
                 <div className="h5 m-0 text-white text-shadow">{ headerText }</div>
             </div>
-            <div className="d-flex col-1 justify-content-center align-items-center">
+            <div className="col-1"/>
-                <i className="fas fa-times cursor-pointer" onClick={ onCloseClick }></i>
+            <div className="nitro-card-close-parent">
+                <div className="nitro-card-close" onClick={ onCloseClick }>
+                    <i className="fas fa-times"/>
+                </div>
             </div>
         </div>
     );

src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss

@@ -1,3 +1,3 @@
 .nitro-exchange-credit {
-    width: 250px;
+    width: 290px;
 }

src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx

@@ -3,8 +3,9 @@ import { FC, useCallback, useState } from 'react';
 import { GetRoomEngine, GetRoomSession } from '../../../../../api';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
-import { NitroCardContentView, NitroCardHeaderView } from '../../../../../layout';
+import { NitroCardContentView } from '../../../../../layout';
 import { NitroCardView } from '../../../../../layout/card/NitroCardView';
+import { NitroCardSimpleHeaderView } from '../../../../../layout/card/simple-header';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useRoomContext } from '../../../context/RoomContext';
 import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
@@ -68,7 +69,7 @@ export const FurnitureExchangeCreditView: FC<FurnitureExchangeCreditProps> = pro
 
     return (
         <NitroCardView className="nitro-exchange-credit">
-            <NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ event => processAction('close') } />
+            <NitroCardSimpleHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ event => processAction('close') } />
             <NitroCardContentView>
                 <div className="text-black mb-2">
                     { LocalizeText('widgets.furniture.credit.redeem.value', [ 'value' ], [ exchangeCreditData.value.toString() ]) }

src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx

@@ -6,8 +6,8 @@ import { GetSessionDataManager } from '../../../../../api/nitro/session/GetSessi
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
 import { NitroCardContentView } from '../../../../../layout/card/content/NitroCardContentView';
-import { NitroCardHeaderView } from '../../../../../layout/card/header/NitroCardHeaderView';
 import { NitroCardView } from '../../../../../layout/card/NitroCardView';
+import { NitroCardSimpleHeaderView } from '../../../../../layout/card/simple-header';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { AvatarImageView } from '../../../../avatar-image/AvatarImageView';
 import { useRoomContext } from '../../../context/RoomContext';
@@ -172,7 +172,7 @@ export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
 
     return (
         <NitroCardView className="nitro-mannequin">
-            <NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => processAction('close') } />
+            <NitroCardSimpleHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => processAction('close') }/>
             <NitroCardContentView>
                 <div className="row">
                     <div className="col-4">