Change card themeing

src/common/card/NitroCardContentView.tsx

@@ -1,22 +1,18 @@
 import { FC, useMemo } from 'react';
 import { Column, ColumnProps } from '..';
-import { useNitroCardContext } from './NitroCardContext';
 
 export const NitroCardContentView: FC<ColumnProps> = props =>
 {
     const { overflow = 'auto', classNames = [], ...rest } = props;
-    const { simple = false } = useNitroCardContext();
 
     const getClassNames = useMemo(() =>
     {
         const newClassNames: string[] = [ 'container-fluid', 'content-area' ];
 
-        if(simple) newClassNames.push('simple');
-
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ simple, classNames ]);
+    }, [ classNames ]);
 
     return <Column classNames={ getClassNames } overflow={ overflow } { ...rest } />;
 }

src/common/card/NitroCardContext.tsx

@@ -3,12 +3,10 @@ import { createContext, FC, ProviderProps, useContext } from 'react';
 interface INitroCardContext
 {
     theme: string;
-    simple: boolean;
 }
 
 const NitroCardContext = createContext<INitroCardContext>({
-    theme: null,
+    theme: null
-    simple: false
 });
 
 export const NitroCardContextProvider: FC<ProviderProps<INitroCardContext>> = props =>

src/common/card/NitroCardHeaderView.tsx

@@ -1,31 +1,26 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC, MouseEvent, useCallback, useMemo } from 'react';
 import { Base, Column, ColumnProps, Flex } from '..';
-import { useNitroCardContext } from './NitroCardContext';
 
 interface NitroCardHeaderViewProps extends ColumnProps
 {
     headerText: string;
-    theme?: string;
     noCloseButton?: boolean;
     onCloseClick: (event: MouseEvent) => void;
 }
 
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
-    const { headerText = null, noCloseButton = false, onCloseClick = null, overflow = 'hidden', justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
+    const { headerText = null, noCloseButton = false, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
-    const { simple = false } = useNitroCardContext();
 
     const getClassNames = useMemo(() =>
     {
         const newClassNames: string[] = [ 'drag-handler', 'container-fluid', 'nitro-card-header' ];
 
-        if(simple) newClassNames.push('bg-tertiary-split');
-
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ simple, classNames ]);
+    }, [ classNames ]);
 
     const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
     {
@@ -34,10 +29,10 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
     }, []);
 
     return (
-        <Column center overflow={ overflow } classNames={ getClassNames } { ...rest }>
+        <Column center classNames={ getClassNames } { ...rest }>
             <Flex fullWidth center position="relative">
                 <span className="nitro-card-header-text">{ headerText }</span>
-                <Base position="absolute" className="header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
+                <Base position="absolute" className="end-0 nitro-card-header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
                     <FontAwesomeIcon icon="times" />
                 </Base>
             </Flex>

src/common/card/NitroCardView.scss

@@ -15,39 +15,99 @@ $nitro-card-tabs-height: 33px;
         .nitro-card-header {
             min-height: 33px;
             max-height: 33px;
-            background-color: $primary;
+            background: $primary;
-
-            &.bg-tertiary-split {
-                min-height: 28px;
-                max-height: 28px;
-                position: relative;
-                border-bottom: 2px solid darken($quaternary, 5);
-                box-shadow: 0 2px white;
-                width: 100%;
-                margin: 0;
-        
-                &:before {
-                    position: absolute;
-                    content: " ";
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 2px;
-                    background-color: rgba($white, 0.3);
-                }
-
-                .nitro-card-header-text {
-                    color: $white;
-                    text-shadow: 0px 4px 4px rgba($black, 0.25);
-                    @include font-size($h5-font-size);
-                }
-            }
 
             .nitro-card-header-text {
                 color: $white;
                 text-shadow: 0px 4px 4px rgba($black, 0.25);
                 @include font-size($h4-font-size);
             }
+
+            .nitro-card-header-close {
+                cursor: pointer;
+                padding: 1px 3px;
+                line-height: 1;
+                border-radius: $border-radius;
+                box-shadow: 0 0 0 1.6px $white;
+                border: 2px solid #921911;
+                background: repeating-linear-gradient(
+                    rgba(245, 80, 65, 1),
+                    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);
+                }
+            }
+        }
+
+        .nitro-card-tabs {
+            background-color: $secondary;
+        }
+
+        .content-area {
+            background-color: $light;
+        }
+    }
+
+    &.theme-primary-slim {
+        border: $border-width solid $border-color;
+
+        .nitro-card-header {
+            position: relative;
+            min-height: 27px;
+            max-height: 27px;
+            background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
+            border-bottom: 2px solid darken($quaternary, 5);
+            box-shadow: 0 2px white;
+            width: 100%;
+            margin: 0;
+            
+            &:before {
+                position: absolute;
+                content: " ";
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 2px;
+                background-color: rgba($white, 0.3);
+            }
+
+            .nitro-card-header-text {
+                color: $white;
+                text-shadow: 0px 4px 4px rgba($black, 0.25);
+                @include font-size($h5-font-size);
+            }
+
+            .nitro-card-header-close {
+                cursor: pointer;
+                padding: 0px 2px;
+                line-height: 1;
+                @include font-size($h7-font-size);
+                border-radius: $border-radius;
+                box-shadow: 0 0 0 1.6px $white;
+                border: 2px solid #921911;
+                background: repeating-linear-gradient(
+                    rgba(245, 80, 65, 1),
+                    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);
+                }
+            }
         }
 
         .nitro-card-tabs {
@@ -82,30 +142,6 @@ $nitro-card-tabs-height: 33px;
 .nitro-card-header {
     position: relative;
     height: 100%;
-
-    .header-close {
-        right: 6px;
-        border-radius: $border-radius;
-        box-shadow: 0 0 0 1.5px $white;
-        border: 2px solid #921911;
-        background: repeating-linear-gradient(
-            rgba(245, 80, 65, 1),
-            rgba(245, 80, 65, 1) 50%,
-            rgba(194, 48, 39, 1) 50%,
-            rgba(194, 48, 39, 1) 100%
-        );
-        cursor: pointer;
-        line-height: 1;
-        padding: 1px 3px;
-
-        &:hover {
-            filter: brightness(1.2);
-        }
-
-        &:active {
-            filter: brightness(0.8);
-        }
-    }
 }
 
 .nitro-card-tabs {

src/common/card/NitroCardView.tsx

@@ -5,29 +5,26 @@ import { NitroCardContextProvider } from './NitroCardContext';
 
 export interface NitroCardViewProps extends DraggableWindowProps, ColumnProps
 {
-    simple?: boolean;
     theme?: string;
 }
 
 export const NitroCardView: FC<NitroCardViewProps> = props =>
 {
-    const { simple = false, theme = 'primary', uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, overflow = 'hidden', position = 'relative', gap = 0, classNames = [], ...rest } = props;
+    const { theme = 'primary', uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, overflow = 'hidden', position = 'relative', gap = 0, classNames = [], ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
         const newClassNames: string[] = [ 'nitro-card', 'rounded', 'shadow', ];
 
-        if(simple) newClassNames.push('bg-tertiary-split');
-
         newClassNames.push(`theme-${ theme || 'primary' }`);
 
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ simple, theme, classNames ]);
+    }, [ theme, classNames ]);
 
     return (
-        <NitroCardContextProvider value={ { theme, simple } }>
+        <NitroCardContextProvider value={ { theme } }>
             <DraggableWindow uniqueKey={ uniqueKey } handleSelector={ handleSelector } windowPosition={ windowPosition } disableDrag={ disableDrag }>
                 <Column overflow={ overflow } position={ position } gap={ gap } classNames={ getClassNames } { ...rest } />
             </DraggableWindow>

src/common/layout/LayoutNotificationAlertView.tsx

@@ -9,7 +9,7 @@ interface LayoutNotificationAlertViewProps extends NitroCardViewProps
 
 export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> = props =>
 {
-    const { title = '', close = null, simple = true, classNames = [], children = null, ...rest } = props;
+    const { title = '', close = null, classNames = [], children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -21,7 +21,7 @@ export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> =
     }, [ classNames ]);
 
     return (
-        <NitroCardView classNames={ getClassNames } simple={ simple } { ...rest }>
+        <NitroCardView classNames={ getClassNames } theme="primary-slim" { ...rest }>
             <NitroCardHeaderView headerText={ title } onCloseClick={ close } />
             <NitroCardContentView justifyContent="between" className="text-black">
                 { children }

src/components/achievements/AchievementsView.tsx

@@ -210,7 +210,7 @@ export const AchievementsView: FC<{}> = props =>
     if(!isVisible || !isInitalized) return null;
 
     return (
-        <NitroCardView uniqueKey="achievements" className="nitro-achievements" simple={ true }>
+        <NitroCardView uniqueKey="achievements" className="nitro-achievements" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('inventory.achievements') } onCloseClick={ event => setIsVisible(false) } />
             { getSelectedCategory &&
                 <NitroCardSubHeaderView position="relative" className="justify-content-center align-items-center cursor-pointer" gap={ 3 }>

src/components/camera/views/checkout/CameraWidgetCheckoutView.tsx

@@ -93,7 +93,7 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
     if(!price) return null;
 
     return (
-        <NitroCardView className="nitro-camera-checkout" simple={ true }>
+        <NitroCardView className="nitro-camera-checkout" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('camera.confirm_phase.title') } onCloseClick={ event => processAction('close') } />
             <NitroCardContentView>
                 <Flex center>

src/components/catalog/views/gift/CatalogGiftView.tsx

@@ -165,7 +165,7 @@ export const CatalogGiftView: FC<{}> = props =>
     const priceText = 'catalog.gift_wrapping_new.' + (isBoxDefault ? 'freeprice' : 'price');
 
     return (
-        <NitroCardView uniqueKey="catalog-gift" className="nitro-catalog-gift" simple={ true }>
+        <NitroCardView uniqueKey="catalog-gift" className="nitro-catalog-gift" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('catalog.gift_wrapping.title') } onCloseClick={ close } />
             <NitroCardContentView className="text-black">
                 <FormGroup column>

src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx

@@ -86,7 +86,7 @@ export const MarketplacePostOfferView : FC<{}> = props =>
     }, [askingPrice, getFurniTitle, item]);
 
     return ( item && 
-        <NitroCardView className="nitro-catalog-layout-marketplace-post-offer" simple={ true }>
+        <NitroCardView className="nitro-catalog-layout-marketplace-post-offer" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('inventory.marketplace.make_offer.title') } onCloseClick={ close } />
             <NitroCardContentView overflow="hidden">
                 <Grid fullHeight>

src/components/groups/views/GroupInformationStandaloneView.tsx

@@ -21,7 +21,7 @@ export const GroupInformationStandaloneView: FC<{}> = props =>
     if(!groupInformation) return null;
 
     return (
-        <NitroCardView className="nitro-group-information-standalone" simple>
+        <NitroCardView className="nitro-group-information-standalone" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('group.window.title') } onCloseClick={ event => setGroupInformation(null) } />
             <NitroCardContentView>
                 <GroupInformationView groupInformation={ groupInformation } onClose={ () => setGroupInformation(null) } />

src/components/groups/views/GroupMembersView.tsx

@@ -161,7 +161,7 @@ export const GroupMembersView: FC<{}> = props =>
     if((groupId === -1) || !membersData) return null;
 
     return (
-        <NitroCardView className="nitro-group-members" simple>
+        <NitroCardView className="nitro-group-members" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('group.members.title', ['groupName'], [ membersData ? membersData.groupTitle : '' ]) } onCloseClick={ event => setGroupId(-1) } />
             <NitroCardContentView overflow="hidden">
                 <Flex gap={ 2 }>

src/components/guide-tool/GuideToolView.tsx

@@ -320,7 +320,7 @@ export const GuideToolView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView className="nitro-guide-tool" simple>
+        <NitroCardView className="nitro-guide-tool" theme="primary-slim">
             <NitroCardHeaderView headerText={ headerText } onCloseClick={ event => processAction('close') } noCloseButton={ noCloseButton } />
             <NitroCardContentView className="text-black">
                 { (sessionState === GuideSessionState.GUIDE_TOOL_MENU) &&

src/components/help/views/name-change/NameChangeView.tsx

@@ -56,7 +56,7 @@ export const NameChangeView:FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView className="nitro-change-username" simple={ true }>
+        <NitroCardView className="nitro-change-username" theme="primary-slim">
             <NitroCardHeaderView headerText={LocalizeText(titleKey)} onCloseClick={ () => onAction('close') } />
             <NitroCardContentView className="text-black">
                 { layout === INIT && <NameChangeInitView onAction={ onAction } /> }

src/components/mod-tools/ModToolsView.tsx

@@ -185,7 +185,7 @@ export const ModToolsView: FC<{}> = props =>
         <ModToolsContextProvider value={ { modToolsState, dispatchModToolsState } }>
             <ModToolsMessageHandler />
             { isVisible &&
-                <NitroCardView uniqueKey="mod-tools" className="nitro-mod-tools" simple={ false }>
+                <NitroCardView uniqueKey="mod-tools" className="nitro-mod-tools">
                     <NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardContentView className="text-black" gap={ 1 }>
                         <Button gap={ 1 } onClick={ event => handleClick('toggle_room') } disabled={ !currentRoomId }>

src/components/mod-tools/views/room/ModToolsChatlogView.tsx

@@ -35,7 +35,7 @@ export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
     if(!roomChatlog) return null;
 
     return (
-        <NitroCardView className="nitro-mod-tools-chatlog" simple={true}>
+        <NitroCardView className="nitro-mod-tools-chatlog" theme="primary-slim">
             <NitroCardHeaderView headerText={ `Room Chatlog ${ roomChatlog.roomName }` } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black h-100">
                 { roomChatlog &&

src/components/mod-tools/views/room/ModToolsRoomView.tsx

@@ -78,7 +78,7 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
     }, [ roomId, infoRequested, setInfoRequested ]);
 
     return (
-        <NitroCardView className="nitro-mod-tools-room" simple>
+        <NitroCardView className="nitro-mod-tools-room" theme="primary-slim">
             <NitroCardHeaderView headerText={ 'Room Info' + (name ? ': ' + name : '') } onCloseClick={ event => onCloseClick() } />
             <NitroCardContentView className="text-black">
                 <Flex gap={ 2 }>

src/components/mod-tools/views/tickets/CfhChatlogView.tsx

@@ -33,7 +33,7 @@ export const CfhChatlogView: FC<CfhChatlogViewProps> = props =>
     UseMessageEventHook(CfhChatlogEvent, onCfhChatlogEvent);
 
     return (
-        <NitroCardView className="nitro-mod-tools-cfh-chatlog" simple={true}>
+        <NitroCardView className="nitro-mod-tools-cfh-chatlog" theme="primary-slim">
             <NitroCardHeaderView headerText={'Issue Chatlog'} onCloseClick={onCloseClick} />
             <NitroCardContentView className="text-black">
                 { chatlogData && <ChatlogView records={[chatlogData.chatRecord]} />}

src/components/mod-tools/views/tickets/ModToolsIssueInfoView.tsx

@@ -46,7 +46,7 @@ export const ModToolsIssueInfoView: FC<IssueInfoViewProps> = props =>
     
     return (
         <>
-            <NitroCardView className="nitro-mod-tools-handle-issue" simple>
+            <NitroCardView className="nitro-mod-tools-handle-issue" theme="primary-slim">
                 <NitroCardHeaderView headerText={'Resolving issue ' + issueId} onCloseClick={() => onIssueInfoClosed(issueId)} />
                 <NitroCardContentView className="text-black">
                     <Text fontSize={ 4 }>Issue Information</Text>

src/components/mod-tools/views/user/ModToolsUserChatlogView.tsx

@@ -38,7 +38,7 @@ export const ModToolsUserChatlogView: FC<ModToolsUserChatlogViewProps> = props =
     }, [ userId ]);
 
     return (
-        <NitroCardView className="nitro-mod-tools-chatlog" simple>
+        <NitroCardView className="nitro-mod-tools-chatlog" theme="primary-slim">
             <NitroCardHeaderView headerText={ `User Chatlog: ${ username || '' }` } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black h-100">
                 { userChatlog &&

src/components/mod-tools/views/user/ModToolsUserModActionView.tsx

@@ -155,7 +155,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
     if(!user) return null;
 
     return (
-        <NitroCardView className="nitro-mod-tools-user-action" simple={true}>
+        <NitroCardView className="nitro-mod-tools-user-action" theme="primary-slim">
             <NitroCardHeaderView headerText={'Mod Action: ' + (user ? user.username : '')} onCloseClick={ () => onCloseClick() } />
             <NitroCardContentView className="text-black">
                 <select className="form-select form-select-sm" value={ selectedTopic } onChange={ event => setSelectedTopic(parseInt(event.target.value)) }>

src/components/mod-tools/views/user/ModToolsUserRoomVisitsView.tsx

@@ -48,7 +48,7 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
     if(!userId) return null;
 
     return (
-        <NitroCardView className="nitro-mod-tools-user-visits" simple>
+        <NitroCardView className="nitro-mod-tools-user-visits" theme="primary-slim">
             <NitroCardHeaderView headerText={ 'User Visits' } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black" gap={ 1 }>
                 <Column gap={ 0 } overflow="hidden">

src/components/mod-tools/views/user/ModToolsUserSendMessageView.tsx

@@ -34,7 +34,7 @@ export const ModToolsUserSendMessageView: FC<ModToolsUserSendMessageViewProps> =
     if(!user) return null;
 
     return (
-        <NitroCardView className="nitro-mod-tools-user-message" simple>
+        <NitroCardView className="nitro-mod-tools-user-message" theme="primary-slim">
             <NitroCardHeaderView headerText={'Send Message'} onCloseClick={ () => onCloseClick() } />
             <NitroCardContentView className="text-black">
                 <Text>Message To: { user.username }</Text>

src/components/mod-tools/views/user/ModToolsUserView.tsx

@@ -107,7 +107,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
 
     return (
         <>
-            <NitroCardView className="nitro-mod-tools-user" simple>
+            <NitroCardView className="nitro-mod-tools-user" theme="primary-slim">
                 <NitroCardHeaderView headerText={ LocalizeText('modtools.userinfo.title', [ 'username' ], [ userInfo.userName ]) } onCloseClick={ () => onCloseClick() } />
                 <NitroCardContentView className="text-black">
                     <Grid overflow="hidden">

src/components/navigator/views/room-doorbell/NavigatorRoomDoorbellView.tsx

@@ -35,7 +35,7 @@ export const NavigatorRoomDoorbellView: FC<NavigatorRoomDoorbellViewProps> = pro
     }
 
     return (
-        <NitroCardView className="nitro-navigator-doorbell" simple={ true }>
+        <NitroCardView className="nitro-navigator-doorbell" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.doorbell.title') } onCloseClick={ close } />
             <NitroCardContentView>
                 <Column gap={ 1 }>

src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx

@@ -116,7 +116,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
     if(!roomInfoData) return null;
     
     return (
-        <NitroCardView className="nitro-room-info" simple={ true }>
+        <NitroCardView className="nitro-room-info" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings.roominfo') } onCloseClick={ () => processAction('close') } />
             <NitroCardContentView className="text-black">
                 { roomInfoData.enteredGuestRoom &&

src/components/navigator/views/room-link/NavigatorRoomLinkView.tsx

@@ -51,7 +51,7 @@ export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props =>
     if(!roomInfoData) return null;
     
     return (
-        <NitroCardView className="nitro-room-link" simple={ true }>
+        <NitroCardView className="nitro-room-link" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.embed.title') } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black d-flex align-items-center">
                 <Flex gap={ 2 }>

src/components/navigator/views/room-password/NavigatorRoomPasswordView.tsx

@@ -34,7 +34,7 @@ export const NavigatorRoomPasswordView: FC<NavigatorRoomPasswordViewProps> = pro
     }, [ roomData, password, onClose ]);
 
     return (
-        <NitroCardView className="nitro-navigator-password" simple={ true }>
+        <NitroCardView className="nitro-navigator-password" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.password.title') } onCloseClick={ close } />
             <NitroCardContentView>
                 <Column gap={ 1 }>

src/components/room/widgets/doorbell/DoorbellWidgetView.tsx

@@ -64,7 +64,7 @@ export const DoorbellWidgetView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView className="nitro-widget-doorbell" simple={ true }>
+        <NitroCardView className="nitro-widget-doorbell" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.doorbell.title') } onCloseClick={ event => setIsVisible(false) } />
             <NitroCardContentView overflow="hidden" gap={ 0 }>
                 <Column gap={ 2 }>

src/components/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx

@@ -81,7 +81,7 @@ export const FurnitureCustomStackHeightView: FC<{}> = props =>
     if(objectId === -1) return null;
 
     return (
-        <NitroCardView className="nitro-widget-custom-stack-height" simple>
+        <NitroCardView className="nitro-widget-custom-stack-height" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('widget.custom.stack.height.title') } onCloseClick={ close } />
             <NitroCardContentView justifyContent="between">
                 <Text>{ LocalizeText('widget.custom.stack.height.text') }</Text>

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

@@ -40,7 +40,7 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
     if(objectId === -1) return null;
 
     return (
-        <NitroCardView className="nitro-widget-exchange-credit" simple>
+        <NitroCardView className="nitro-widget-exchange-credit" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ close } />
             <NitroCardContentView center>
                 <Flex overflow="hidden" gap={ 2 }>

src/components/room/widgets/furniture/friend-furni/FurnitureFriendFurniView.tsx

@@ -98,7 +98,7 @@ export const FurnitureFriendFurniView: FC<{}> = props =>
 
     return (
         <>
-            { engravingStage > 0 && <NitroCardView className="nitro-engraving-lock" simple={ true }>
+            { engravingStage > 0 && <NitroCardView className="nitro-engraving-lock" theme="primary-slim">
                 <NitroCardHeaderView headerText={ LocalizeText('friend.furniture.confirm.lock.caption') } onCloseClick={ event => processAction('close_request') } />
                 <NitroCardContentView>
                     <h5 className="text-black text-center fw-bold mt-2 mb-2">

src/components/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx

@@ -213,7 +213,7 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
     if(objectId === -1) return null;
 
     return (
-        <NitroCardView className="nitro-gift-opening" simple={ true }>
+        <NitroCardView className="nitro-gift-opening" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText(senderName ? 'widget.furni.present.window.title_from' : 'widget.furni.present.window.title', [ 'name' ], [ senderName ]) } onCloseClick={ close } />
             <NitroCardContentView center>
                 { (placedItemId === -1) &&

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

@@ -173,7 +173,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
     if(mode === MODE_NONE) return null;
 
     return (
-        <NitroCardView className="nitro-mannequin" simple>
+        <NitroCardView className="nitro-mannequin" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => setMode(MODE_NONE) } />
             <NitroCardContentView center>
                 <Flex gap={ 2 } overflow="hidden">

src/components/user-profile/UserProfileView.tsx

@@ -79,7 +79,7 @@ export const UserProfileView: FC<{}> = props =>
     if(!userProfile) return null;
 
     return (
-        <NitroCardView className="user-profile" simple>
+        <NitroCardView className="user-profile" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('extendedprofile.caption') } onCloseClick={ onClose } />
             <NitroCardContentView>
                 <Grid>

src/components/user-settings/UserSettingsView.tsx

@@ -114,7 +114,7 @@ export const UserSettingsView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView uniqueKey="user-settings" className="user-settings-window" simple>
+        <NitroCardView uniqueKey="user-settings" className="user-settings-window" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={event => processAction('close_view')} />
             <NitroCardContentView className="text-black">
                 <Column gap={ 1 }>

src/components/wired/views/WiredBaseView.tsx

@@ -76,7 +76,7 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
     }, [ trigger, setIntParams, setStringParam, setFurniIds ]);
 
     return (
-        <NitroCardView uniqueKey="nitro-wired" className="nitro-wired" simple={ true }>
+        <NitroCardView uniqueKey="nitro-wired" className="nitro-wired" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ close } />
             <NitroCardContentView>
                 <Column gap={ 1 }>

src/views/floorplan-editor/FloorplanEditorView.tsx

@@ -122,7 +122,7 @@ export const FloorplanEditorView: FC<{}> = props =>
         <>
             <FloorplanEditorContextProvider value={{ originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings }}>
                 {isVisible &&
-                    <NitroCardView uniqueKey="floorpan-editor" className="nitro-floorplan-editor" simple={ true }>
+                    <NitroCardView uniqueKey="floorpan-editor" className="nitro-floorplan-editor" theme="primary-slim">
                         <NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
                         <NitroCardContentView>
                             <Grid>

src/views/floorplan-editor/views/FloorplanImportExportView.tsx

@@ -42,7 +42,7 @@ export const FloorplanImportExportView: FC<FloorplanImportExportViewProps> = pro
     });
 
     return (
-        <NitroCardView simple={true} className="floorplan-import-export">
+        <NitroCardView theme="primary-slim" className="floorplan-import-export">
             <NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.import.export')} onCloseClick={ onCloseClick } />
             <NitroCardContentView>
                 <Column size={ 12 } className="h-100">

src/views/friends/views/friends-remove-confirmation/FriendsRemoveConfirmationView.tsx

@@ -15,7 +15,7 @@ export const FriendsRemoveConfirmationView: FC<FriendsRemoveConfirmationViewProp
     const { selectedFriendsIds = null, removeFriendsText = null, removeSelectedFriends = null, onCloseClick = null } = props;
 
     return (
-        <NitroCardView className="nitro-friends-remove-confirmation" uniqueKey="nitro-friends-remove-confirmation" simple={ true }>
+        <NitroCardView className="nitro-friends-remove-confirmation" uniqueKey="nitro-friends-remove-confirmation" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('friendlist.removefriendconfirm.title') } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black d-flex flex-column gap-3">
                <div>{ removeFriendsText }</div>

src/views/friends/views/friends-room-invite/FriendsRoomInviteView.tsx

@@ -16,7 +16,7 @@ export const FriendsRoomInviteView: FC<FriendsRoomInviteViewProps> = props =>
     const [ roomInviteMessage, setRoomInviteMessage ] = useState<string>('');
 
     return (
-        <NitroCardView className="nitro-friends-room-invite" uniqueKey="nitro-friends-room-invite" simple={ true }>
+        <NitroCardView className="nitro-friends-room-invite" uniqueKey="nitro-friends-room-invite" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('friendlist.invite.title') } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black d-flex flex-column gap-2">
                 { LocalizeText('friendlist.invite.summary', ['count'], [selectedFriendsIds.length.toString()]) }

src/views/friends/views/messenger/FriendsMessengerView.tsx

@@ -251,7 +251,7 @@ export const FriendsMessengerView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView className="nitro-friends-messenger" uniqueKey="nitro-friends-messenger" simple={true}>
+        <NitroCardView className="nitro-friends-messenger" uniqueKey="nitro-friends-messenger" theme="primary-slim">
             <NitroCardHeaderView headerText={LocalizeText('messenger.window.title', ['OPEN_CHAT_COUNT'], [visibleThreads.length.toString()])} onCloseClick={event => setIsVisible(false)} />
             <NitroCardContentView>
             <Grid>

src/views/hc-center/HcCenterView.tsx

@@ -205,7 +205,7 @@ export const HcCenterView: FC<{}> = props =>
     );
 
     return (
-        <NitroCardView simple={true} className="nitro-hc-center">
+        <NitroCardView theme="primary-slim" className="nitro-hc-center">
             <NitroCardHeaderView headerText={LocalizeText('generic.hccenter')} onCloseClick={() => setIsVisible(false)} />
             <div className="bg-muted p-2 position-relative">
                 <div className="hc-logo mb-2" />