Update cards

src/assets/styles/bootstrap/_variables.scss

@@ -493,7 +493,7 @@ $headings-margin-bottom:      $spacer / 2 !default;
 $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        500 !default;
-$headings-line-height:        1.2 !default;
+$headings-line-height:        unset !default;
 $headings-color:              null !default;
 // scss-docs-end headings-variables
 

src/layout/card/NitroCardView.scss

@@ -1,13 +1,12 @@
 $nitro-card-header-height: 33px;
 $nitro-card-tabs-height: 33px;
-$nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
 
 .nitro-card {
     pointer-events: all;
 
+    @import './accordion/NitroCardAccordionView';
     @import './content/NitroCardContentView';
     @import './header/NitroCardHeaderView';
-    @import './simple-header/NitroCardSimpleHeaderView';
     @import './tabs/NitroCardTabsView';
 }
 
@@ -60,5 +59,3 @@ $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
         filter: brightness(0.8);
     }
 }
-
-@import './accordion/NitroCardAccordionView';

src/layout/card/NitroCardView.tsx

@@ -8,19 +8,14 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
     const { className = '', disableDrag = false, simple = false, theme = 'primary', children = null } = props;
 
     return (
-        <NitroCardContextProvider value={ { theme } }>
+        <NitroCardContextProvider value={ { theme, simple } }>
-            { simple &&
+            <div className="nitro-card-responsive">
-                <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
+                <DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
-                    { children }
+                    <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
-                </div> }
+                        { children }
-            { !simple &&
+                    </div>
-                <div className="nitro-card-responsive">
+                </DraggableWindow>
-                    <DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
+            </div>
-                        <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
-                            { children }
-                        </div>
-                    </DraggableWindow>
-                </div> }
         </NitroCardContextProvider>
     );
 }

src/layout/card/accordion/index.ts

@@ -0,0 +1,3 @@
+export * from './item';
+export * from './NitroCardAccordionView';
+export * from './NitroCardAccordionView.types';

src/layout/card/accordion/item/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroCardAccordionItemView';
+export * from './NitroCardAccordionItemView.types';

src/layout/card/content/NitroCardContentView.scss

@@ -1,6 +1,11 @@
 .content-area {
     padding-top: $container-padding-x;
     padding-bottom: $container-padding-x;
+
+    &.simple {
+        padding-left: ($container-padding-x + 25px);
+        padding-right: ($container-padding-x + 25px);
+    }
 }
 
 @include media-breakpoint-down(lg) {

src/layout/card/content/NitroCardContentView.tsx

@@ -1,13 +1,15 @@
 import { FC } from 'react';
+import { useNitroCardContext } from '../context';
 import { NitroCardContentViewProps } from './NitroCardContextView.types';
 
 export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
 {
-    const { className = null } = props;
+    const { className = null, children = null } = props;
+    const { simple = false } = useNitroCardContext();
     
     return (
-        <div className={ 'container-fluid bg-light content-area ' + className }>
+        <div className={ `container-fluid bg-light content-area ${ (simple ? 'simple' : '') } ${ className || '' }` }>
-            { props.children }
+            { children }
         </div>
     );
 }

src/layout/card/context/NitroCardContext.tsx

@@ -2,7 +2,8 @@ import { createContext, FC, useContext } from 'react';
 import { INitroCardContext, NitroCardContextProps } from './NitroCardContext.types';
 
 const NitroCardContext = createContext<INitroCardContext>({
-    theme: null
+    theme: null,
+    simple: false
 });
 
 export const NitroCardContextProvider: FC<NitroCardContextProps> = props =>

src/layout/card/context/NitroCardContext.types.ts

@@ -3,6 +3,7 @@ import { ProviderProps } from 'react';
 export interface INitroCardContext
 {
     theme: string;
+    simple: boolean;
 }
 
 export interface NitroCardContextProps extends ProviderProps<INitroCardContext>

src/layout/card/context/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroCardContext';
+export * from './NitroCardContext.types';

src/layout/card/header/NitroCardHeaderView.scss

@@ -1,4 +1,16 @@
 .nitro-card-header {
-    min-height: $nitro-card-header-height;
+    min-height: 33px;
-    max-height: $nitro-card-header-height;
+    max-height: 33px;
+
+    &.simple-header {
+        min-height: 28px;
+        max-height: 28px;
+    }
+
+    .bg-tertiary-split {
+        border: 2px solid darken($quaternary, 4);
+        box-shadow: 0 0 0 2px $white;
+        width: 100%;
+        margin: 0 25px;
+    }
 }

src/layout/card/header/NitroCardHeaderView.tsx

@@ -5,10 +5,26 @@ import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
     const { headerText = null, onCloseClick = null } = props;
-    const { theme } = useNitroCardContext();
+    const { simple = false } = useNitroCardContext();
+
+    if(simple)
+    {
+        return (
+            <div className="container-fluid bg-light">
+                <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 }>
+                            <i className="fas fa-times" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
 
     return (
-        <div className={ `drag-handler container-fluid bg-${ theme }` }>
+        <div className="drag-handler container-fluid bg-primary">
             <div className="row nitro-card-header">
                 <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>

src/layout/card/index.ts

@@ -1,4 +1,6 @@
+export * from './accordion';
 export * from './content';
+export * from './context';
 export * from './header';
 export * from './NitroCardView';
 export * from './NitroCardView.types';

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

@@ -1,11 +0,0 @@
-.nitro-card-header {
-    min-height: $nitro-card-header-height;
-    max-height: $nitro-card-header-height;
-
-    .bg-tertiary-split {
-        border: 2px solid darken($quaternary, 4);
-        box-shadow: 0 0 0 2px $white;
-        width: 100%;
-        margin: 0 30px;
-    }
-}

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

@@ -1,20 +0,0 @@
-import { FC } from 'react';
-import { NitroCardSimpleHeaderViewProps } from './NitroCardSimpleHeaderView.types';
-
-export const NitroCardSimpleHeaderView: FC<NitroCardSimpleHeaderViewProps> = props =>
-{
-    const { headerText = null, onCloseClick = null } = props;
-
-    return (
-        <div className='container-fluid bg-light'>
-            <div className="row nitro-card-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 px-2 py-1 drag-handler">{ headerText }</div>
-                    <div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
-                        <i className="fas fa-times" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}

src/layout/card/simple-header/NitroCardSimpleHeaderView.types.ts

@@ -1,7 +0,0 @@
-import { MouseEvent } from 'react';
-
-export interface NitroCardSimpleHeaderViewProps
-{
-    headerText: string;
-    onCloseClick: (event: MouseEvent) => void;
-}

src/layout/card/simple-header/index.ts

@@ -1,2 +0,0 @@
-export * from './NitroCardSimpleHeaderView';
-export * from './NitroCardSimpleHeaderView.types';

src/layout/draggable-window/index.ts

@@ -0,0 +1,2 @@
+export * from './DraggableWindow';
+export * from './DraggableWindow.types';

src/layout/index.ts

@@ -1,2 +1,4 @@
 export * from './card';
-export * from './loading-spinner/LoadingSpinnerView';
+export * from './draggable-window';
+export * from './loading-spinner';
+export * from './transitions';

src/layout/loading-spinner/index.ts

@@ -0,0 +1 @@
+export * from './LoadingSpinnerView';

src/layout/transitions/index.ts

@@ -0,0 +1,3 @@
+export * from './TransitionAnimation';
+export * from './TransitionAnimation.types';
+export * from './TransitionAnimationStyles';

src/views/friend-list/FriendListView.tsx

@@ -4,9 +4,7 @@ import { createPortal } from 'react-dom';
 import { FriendListEvent } from '../../events';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
-import { NitroCardHeaderView, NitroCardView } from '../../layout';
+import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardHeaderView, NitroCardView } from '../../layout';
-import { NitroCardAccordionItemView } from '../../layout/card/accordion/item/NitroCardAccordionItemView';
-import { NitroCardAccordionView } from '../../layout/card/accordion/NitroCardAccordionView';
 import { LocalizeText } from '../../utils/LocalizeText';
 import { FriendListContextProvider } from './context/FriendListContext';
 import { FriendListMessageHandler } from './FriendListMessageHandler';

src/views/notification-center/views/broadcast-message/BroadcastMessageView.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { NitroCardContentView, NitroCardView } from '../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
 import { BroadcastMessageViewProps } from './BroadcastMessageView.types';
@@ -19,8 +18,8 @@ export const BroadcastMessageView: FC<BroadcastMessageViewProps> = props =>
         );
         
     return (
-        <NitroCardView className="nitro-notification">
+        <NitroCardView className="nitro-notification" simple={ true }>
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
+            <NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
             <NitroCardContentView className="text-black">
                 { content }
             </NitroCardContentView>

src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { NitroCardContentView, NitroCardView } from '../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
 import { HotelWillShutdownViewProps } from './HotelWillShutdownView.types';
@@ -19,8 +18,8 @@ export const HotelWillShutdownView: FC<HotelWillShutdownViewProps> = props =>
         );
 
     return (
-        <NitroCardView className="nitro-notification">
+        <NitroCardView className="nitro-notification" simple={ true }>
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
+            <NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
             <NitroCardContentView className="text-black">
                 { content }
             </NitroCardContentView>

src/views/notification-center/views/moderator-message/ModeratorMessageView.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { NitroCardContentView, NitroCardView } from '../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
 import { ModeratorMessageViewProps } from './ModeratorMessageView.types';
@@ -24,8 +23,8 @@ export const ModeratorMessageView: FC<ModeratorMessageViewProps> = props =>
         );
 
     return (
-        <NitroCardView className="nitro-notification">
+        <NitroCardView className="nitro-notification" simple={ true }>
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
+            <NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
             <NitroCardContentView className="text-black">
                 { content }
             </NitroCardContentView>

src/views/notification-center/views/motd/MOTDView.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { NitroCardContentView, NitroCardView } from '../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
 import { MOTDViewProps } from './MOTDView.types';
@@ -22,8 +21,8 @@ export const MOTDView: FC<MOTDViewProps> = props =>
         );
 
     return (
-        <NitroCardView className="nitro-notification">
+        <NitroCardView className="nitro-notification" simple={ true }>
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
+            <NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
             <NitroCardContentView className="text-black">
                 { content }
             </NitroCardContentView>

src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx

@@ -2,9 +2,7 @@ import { RoomWidgetCameraPublishComposer, RoomWidgetCameraPublishedEvent, RoomWi
 import { FC, useCallback, useState } from 'react';
 import { GetRoomCameraWidgetManager } from '../../../../../../api/nitro/camera/GetRoomCameraWidgetManager';
 import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks/messages/message-event';
-import { NitroCardContentView } from '../../../../../../layout/card/content/NitroCardContentView';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
-import { NitroCardView } from '../../../../../../layout/card/NitroCardView';
-import { NitroCardSimpleHeaderView } from '../../../../../../layout/card/simple-header/NitroCardSimpleHeaderView';
 import { LocalizeText } from '../../../../../../utils/LocalizeText';
 import { CurrencyIcon } from '../../../../../shared/currency-icon/CurrencyIcon';
 import { useCameraWidgetContext } from '../../context/CameraWidgetContext';
@@ -72,8 +70,8 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
     if(!price) return null;
 
     return (
-        <NitroCardView className="nitro-camera-checkout">
+        <NitroCardView className="nitro-camera-checkout" simple={ true }>
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('camera.confirm_phase.title') } onCloseClick={ event => processAction('close') } />
+            <NitroCardHeaderView headerText={ LocalizeText('camera.confirm_phase.title') } onCloseClick={ event => processAction('close') } />
             <NitroCardContentView>
                 <div className="picture-preview border mb-2" style={ { backgroundImage: 'url(' + getCurrentPicture().src + ')' } }></div>
                 <div className="bg-muted rounded p-2 text-black mb-2 d-flex justify-content-between align-items-center">

src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx

@@ -2,11 +2,7 @@ import classNames from 'classnames';
 import { RoomCameraWidgetSelectedEffect } from 'nitro-renderer/src/nitro/camera/RoomCameraWidgetSelectedEffect';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetRoomCameraWidgetManager } from '../../../../../../api';
-import { NitroCardContentView } from '../../../../../../layout/card/content/NitroCardContentView';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../../layout';
-import { NitroCardHeaderView } from '../../../../../../layout/card/header/NitroCardHeaderView';
-import { NitroCardView } from '../../../../../../layout/card/NitroCardView';
-import { NitroCardTabsView } from '../../../../../../layout/card/tabs/NitroCardTabsView';
-import { NitroCardTabsItemView } from '../../../../../../layout/card/tabs/tabs-item/NitroCardTabsItemView';
 import { LocalizeText } from '../../../../../../utils/LocalizeText';
 import { useCameraWidgetContext } from '../../context/CameraWidgetContext';
 import { CameraWidgetEditorTabs, CameraWidgetEditorViewProps } from './CameraWidgetEditorView.types';

src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx

@@ -1,7 +1,5 @@
 import { FC, useCallback, useState } from 'react';
-import { NitroCardContentView } from '../../../../../layout/card/content/NitroCardContentView';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
-import { NitroCardHeaderView } from '../../../../../layout/card/header/NitroCardHeaderView';
-import { NitroCardView } from '../../../../../layout/card/NitroCardView';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useRoomContext } from '../../../context/RoomContext';
 import { FurnitureDimmerData } from './FurnitureDimmerData';

src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx

@@ -5,10 +5,7 @@ import { GetRoomEngine } from '../../../../../api/nitro/room/GetRoomEngine';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
 import { CreateMessageHook } from '../../../../../hooks/messages/message-event';
-import { NitroCardContentView } from '../../../../../layout/card/content/NitroCardContentView';
+import { DraggableWindow, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
-import { NitroCardHeaderView } from '../../../../../layout/card/header/NitroCardHeaderView';
-import { NitroCardView } from '../../../../../layout/card/NitroCardView';
-import { DraggableWindow } from '../../../../../layout/draggable-window/DraggableWindow';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { useRoomContext } from '../../../context/RoomContext';

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

@@ -3,9 +3,7 @@ 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 } from '../../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } 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,8 +66,8 @@ export const FurnitureExchangeCreditView: FC<FurnitureExchangeCreditProps> = pro
     if(!exchangeCreditData) return null;
 
     return (
-        <NitroCardView className="nitro-exchange-credit">
+        <NitroCardView className="nitro-exchange-credit" simple={ true }>
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ event => processAction('close') } />
+            <NitroCardHeaderView 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

@@ -5,9 +5,7 @@ import { GetRoomSession } from '../../../../../api/nitro/session/GetRoomSession'
 import { GetSessionDataManager } from '../../../../../api/nitro/session/GetSessionDataManager';
 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 { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
-import { NitroCardView } from '../../../../../layout/card/NitroCardView';
-import { NitroCardSimpleHeaderView } from '../../../../../layout/card/simple-header';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { useRoomContext } from '../../../context/RoomContext';
@@ -171,8 +169,8 @@ export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
     if(!mannequinData) return null;
 
     return (
-        <NitroCardView className="nitro-mannequin">
+        <NitroCardView className="nitro-mannequin" simple={ true }>
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => processAction('close') }/>
+            <NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => processAction('close') } />
             <NitroCardContentView>
                 <div className="row">
                     <div className="col-4">