nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 23:50:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Change card themeing

Browse Source
This commit is contained in:
Bill 2022-03-04 01:29:14 -05:00
parent 878d4c8972
commit f51ab006e0
43 changed files with 135 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/common/card/NitroCardContentView.tsx
View File

@ -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 } />;
}

4
src/common/card/NitroCardContext.tsx
View File

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

13
src/common/card/NitroCardHeaderView.tsx
View File

@ -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 { simple = false } = useNitroCardContext();
const { headerText = null, noCloseButton = false, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
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>

138
src/common/card/NitroCardView.scss
View File

@ -15,39 +15,99 @@ $nitro-card-tabs-height: 33px;
.nitro-card-header {
min-height: 33px;
max-height: 33px;
background-color: $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);
}
}
background: $primary;
.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 {

9
src/common/card/NitroCardView.tsx
View File

@ -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>

4
src/common/layout/LayoutNotificationAlertView.tsx
View File

@ -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 }

2
src/components/achievements/AchievementsView.tsx
View File

@ -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 }>

2
src/components/camera/views/checkout/CameraWidgetCheckoutView.tsx
View File

@ -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>

2
src/components/catalog/views/gift/CatalogGiftView.tsx
View File

@ -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>

2
src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
View File

@ -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>

2
src/components/groups/views/GroupInformationStandaloneView.tsx
View File

@ -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) } />

2
src/components/groups/views/GroupMembersView.tsx
View File

@ -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 }>

2
src/components/guide-tool/GuideToolView.tsx
View File

@ -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) &&

2
src/components/help/views/name-change/NameChangeView.tsx
View File

@ -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 } /> }

2
src/components/mod-tools/ModToolsView.tsx
View File

@ -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 }>

2
src/components/mod-tools/views/room/ModToolsChatlogView.tsx
View File

@ -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 &&

2
src/components/mod-tools/views/room/ModToolsRoomView.tsx
View File

@ -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 }>

2
src/components/mod-tools/views/tickets/CfhChatlogView.tsx
View File

@ -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]} />}

2
src/components/mod-tools/views/tickets/ModToolsIssueInfoView.tsx
View File

@ -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>

2
src/components/mod-tools/views/user/ModToolsUserChatlogView.tsx
View File

@ -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 &&

2
src/components/mod-tools/views/user/ModToolsUserModActionView.tsx
View File

@ -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)) }>

2
src/components/mod-tools/views/user/ModToolsUserRoomVisitsView.tsx
View File

@ -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">

2
src/components/mod-tools/views/user/ModToolsUserSendMessageView.tsx
View File

@ -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>

2
src/components/mod-tools/views/user/ModToolsUserView.tsx
View File

@ -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">

2
src/components/navigator/views/room-doorbell/NavigatorRoomDoorbellView.tsx
View File

@ -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 }>

2
src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx
View File

@ -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 &&

2
src/components/navigator/views/room-link/NavigatorRoomLinkView.tsx
View File

@ -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 }>

2
src/components/navigator/views/room-password/NavigatorRoomPasswordView.tsx
View File

@ -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 }>

2
src/components/room/widgets/doorbell/DoorbellWidgetView.tsx
View File

@ -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 }>

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

@ -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>

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

@ -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 }>

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

@ -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">

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

@ -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) &&

2
src/components/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
View File

@ -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">

2
src/components/user-profile/UserProfileView.tsx
View File

@ -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>

2
src/components/user-settings/UserSettingsView.tsx
View File

@ -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 }>

2
src/components/wired/views/WiredBaseView.tsx
View File

@ -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 }>

2
src/views/floorplan-editor/FloorplanEditorView.tsx
View File

@ -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>

2
src/views/floorplan-editor/views/FloorplanImportExportView.tsx
View File

@ -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">

2
src/views/friends/views/friends-remove-confirmation/FriendsRemoveConfirmationView.tsx
View File

@ -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>

2
src/views/friends/views/friends-room-invite/FriendsRoomInviteView.tsx
View File

@ -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()]) }

2
src/views/friends/views/messenger/FriendsMessengerView.tsx
View File

@ -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>

2
src/views/hc-center/HcCenterView.tsx
View File

@ -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" />