From f51ab006e06109d9043b83f2979c231a87e45aa6 Mon Sep 17 00:00:00 2001 From: Bill Date: Fri, 4 Mar 2022 01:29:14 -0500 Subject: [PATCH] Change card themeing --- src/common/card/NitroCardContentView.tsx | 6 +- src/common/card/NitroCardContext.tsx | 4 +- src/common/card/NitroCardHeaderView.tsx | 13 +- src/common/card/NitroCardView.scss | 138 +++++++++++------- src/common/card/NitroCardView.tsx | 9 +- .../layout/LayoutNotificationAlertView.tsx | 4 +- .../achievements/AchievementsView.tsx | 2 +- .../checkout/CameraWidgetCheckoutView.tsx | 2 +- .../catalog/views/gift/CatalogGiftView.tsx | 2 +- .../marketplace/MarketplacePostOfferView.tsx | 2 +- .../views/GroupInformationStandaloneView.tsx | 2 +- .../groups/views/GroupMembersView.tsx | 2 +- src/components/guide-tool/GuideToolView.tsx | 2 +- .../help/views/name-change/NameChangeView.tsx | 2 +- src/components/mod-tools/ModToolsView.tsx | 2 +- .../views/room/ModToolsChatlogView.tsx | 2 +- .../mod-tools/views/room/ModToolsRoomView.tsx | 2 +- .../views/tickets/CfhChatlogView.tsx | 2 +- .../views/tickets/ModToolsIssueInfoView.tsx | 2 +- .../views/user/ModToolsUserChatlogView.tsx | 2 +- .../views/user/ModToolsUserModActionView.tsx | 2 +- .../views/user/ModToolsUserRoomVisitsView.tsx | 2 +- .../user/ModToolsUserSendMessageView.tsx | 2 +- .../mod-tools/views/user/ModToolsUserView.tsx | 2 +- .../NavigatorRoomDoorbellView.tsx | 2 +- .../views/room-info/NavigatorRoomInfoView.tsx | 2 +- .../views/room-link/NavigatorRoomLinkView.tsx | 2 +- .../NavigatorRoomPasswordView.tsx | 2 +- .../widgets/doorbell/DoorbellWidgetView.tsx | 2 +- .../FurnitureCustomStackHeightView.tsx | 2 +- .../FurnitureExchangeCreditView.tsx | 2 +- .../friend-furni/FurnitureFriendFurniView.tsx | 2 +- .../gift-opening/FurnitureGiftOpeningView.tsx | 2 +- .../mannequin/FurnitureMannequinView.tsx | 2 +- .../user-profile/UserProfileView.tsx | 2 +- .../user-settings/UserSettingsView.tsx | 2 +- src/components/wired/views/WiredBaseView.tsx | 2 +- .../floorplan-editor/FloorplanEditorView.tsx | 2 +- .../views/FloorplanImportExportView.tsx | 2 +- .../FriendsRemoveConfirmationView.tsx | 2 +- .../FriendsRoomInviteView.tsx | 2 +- .../views/messenger/FriendsMessengerView.tsx | 2 +- src/views/hc-center/HcCenterView.tsx | 2 +- 43 files changed, 135 insertions(+), 113 deletions(-) diff --git a/src/common/card/NitroCardContentView.tsx b/src/common/card/NitroCardContentView.tsx index e9d6d20b..903b4c5c 100644 --- a/src/common/card/NitroCardContentView.tsx +++ b/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 = 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 ; } diff --git a/src/common/card/NitroCardContext.tsx b/src/common/card/NitroCardContext.tsx index 74af63cf..517b435b 100644 --- a/src/common/card/NitroCardContext.tsx +++ b/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({ - theme: null, - simple: false + theme: null }); export const NitroCardContextProvider: FC> = props => diff --git a/src/common/card/NitroCardHeaderView.tsx b/src/common/card/NitroCardHeaderView.tsx index d51b4492..1f251e2f 100644 --- a/src/common/card/NitroCardHeaderView.tsx +++ b/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 = 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) => { @@ -34,10 +29,10 @@ export const NitroCardHeaderView: FC = props => }, []); return ( - + { headerText } - + diff --git a/src/common/card/NitroCardView.scss b/src/common/card/NitroCardView.scss index d1dfeb84..8396f41b 100644 --- a/src/common/card/NitroCardView.scss +++ b/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; - - &.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 { diff --git a/src/common/card/NitroCardView.tsx b/src/common/card/NitroCardView.tsx index 62b0a27f..329d3615 100644 --- a/src/common/card/NitroCardView.tsx +++ b/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 = 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 ( - + diff --git a/src/common/layout/LayoutNotificationAlertView.tsx b/src/common/layout/LayoutNotificationAlertView.tsx index 6829ffaf..c0483487 100644 --- a/src/common/layout/LayoutNotificationAlertView.tsx +++ b/src/common/layout/LayoutNotificationAlertView.tsx @@ -9,7 +9,7 @@ interface LayoutNotificationAlertViewProps extends NitroCardViewProps export const LayoutNotificationAlertView: FC = 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 = }, [ classNames ]); return ( - + { children } diff --git a/src/components/achievements/AchievementsView.tsx b/src/components/achievements/AchievementsView.tsx index a7f30f2f..05e6db94 100644 --- a/src/components/achievements/AchievementsView.tsx +++ b/src/components/achievements/AchievementsView.tsx @@ -210,7 +210,7 @@ export const AchievementsView: FC<{}> = props => if(!isVisible || !isInitalized) return null; return ( - + setIsVisible(false) } /> { getSelectedCategory && diff --git a/src/components/camera/views/checkout/CameraWidgetCheckoutView.tsx b/src/components/camera/views/checkout/CameraWidgetCheckoutView.tsx index 48a23164..f7fe7ea6 100644 --- a/src/components/camera/views/checkout/CameraWidgetCheckoutView.tsx +++ b/src/components/camera/views/checkout/CameraWidgetCheckoutView.tsx @@ -93,7 +93,7 @@ export const CameraWidgetCheckoutView: FC = props if(!price) return null; return ( - + processAction('close') } /> diff --git a/src/components/catalog/views/gift/CatalogGiftView.tsx b/src/components/catalog/views/gift/CatalogGiftView.tsx index a2904404..76b59149 100644 --- a/src/components/catalog/views/gift/CatalogGiftView.tsx +++ b/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 ( - + diff --git a/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx b/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx index 9ba734f8..b9a7c859 100644 --- a/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx +++ b/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx @@ -86,7 +86,7 @@ export const MarketplacePostOfferView : FC<{}> = props => }, [askingPrice, getFurniTitle, item]); return ( item && - + diff --git a/src/components/groups/views/GroupInformationStandaloneView.tsx b/src/components/groups/views/GroupInformationStandaloneView.tsx index 27a779dd..89be7dcf 100644 --- a/src/components/groups/views/GroupInformationStandaloneView.tsx +++ b/src/components/groups/views/GroupInformationStandaloneView.tsx @@ -21,7 +21,7 @@ export const GroupInformationStandaloneView: FC<{}> = props => if(!groupInformation) return null; return ( - + setGroupInformation(null) } /> setGroupInformation(null) } /> diff --git a/src/components/groups/views/GroupMembersView.tsx b/src/components/groups/views/GroupMembersView.tsx index 2e025c54..d9323384 100644 --- a/src/components/groups/views/GroupMembersView.tsx +++ b/src/components/groups/views/GroupMembersView.tsx @@ -161,7 +161,7 @@ export const GroupMembersView: FC<{}> = props => if((groupId === -1) || !membersData) return null; return ( - + setGroupId(-1) } /> diff --git a/src/components/guide-tool/GuideToolView.tsx b/src/components/guide-tool/GuideToolView.tsx index 7a4860fa..b09dd692 100644 --- a/src/components/guide-tool/GuideToolView.tsx +++ b/src/components/guide-tool/GuideToolView.tsx @@ -320,7 +320,7 @@ export const GuideToolView: FC<{}> = props => if(!isVisible) return null; return ( - + processAction('close') } noCloseButton={ noCloseButton } /> { (sessionState === GuideSessionState.GUIDE_TOOL_MENU) && diff --git a/src/components/help/views/name-change/NameChangeView.tsx b/src/components/help/views/name-change/NameChangeView.tsx index feccefc3..e7d33ce2 100644 --- a/src/components/help/views/name-change/NameChangeView.tsx +++ b/src/components/help/views/name-change/NameChangeView.tsx @@ -56,7 +56,7 @@ export const NameChangeView:FC<{}> = props => if(!isVisible) return null; return ( - + onAction('close') } /> { layout === INIT && } diff --git a/src/components/mod-tools/ModToolsView.tsx b/src/components/mod-tools/ModToolsView.tsx index 07495e95..bf6e86a5 100644 --- a/src/components/mod-tools/ModToolsView.tsx +++ b/src/components/mod-tools/ModToolsView.tsx @@ -185,7 +185,7 @@ export const ModToolsView: FC<{}> = props => { isVisible && - + setIsVisible(false) } />