From ff2cf1ac4c2722379feb4f21b5105e2e9f749d25 Mon Sep 17 00:00:00 2001 From: Layne Date: Sun, 20 Jun 2021 06:57:34 -0400 Subject: [PATCH] second header addition --- src/assets/styles/bootstrap/_variables.scss | 14 ++++++++--- .../styles/bootstrap/mixins/_buttons.scss | 2 +- src/layout/card/NitroCardView.scss | 25 +++++++++++++++++++ .../card/header/NitroCardHeaderView.scss | 25 ------------------- .../NitroCardSimpleHeaderView.scss | 8 ++++++ .../NitroCardSimpleHeaderView.tsx | 13 ++++++---- .../FurnitureExchangeCreditView.scss | 2 +- .../FurnitureExchangeCreditView.tsx | 5 ++-- .../mannequin/FurnitureMannequinView.tsx | 4 +-- 9 files changed, 58 insertions(+), 40 deletions(-) diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss index 9649b47c..3f74afdc 100644 --- a/src/assets/styles/bootstrap/_variables.scss +++ b/src/assets/styles/bootstrap/_variables.scss @@ -72,16 +72,21 @@ $colors: ( // scss-docs-start theme-color-variables $primary: #1E7295 !default; $secondary: #185D79 !default; +$tertiary: #2DABC2 !default; +$quaternary: #2B91A7 !default; + $success: #008026 !default; $info: $cyan !default; $warning: $yellow !default; -$danger: #982F31 !default; +$danger: #C23027 !default; $light: #DFDFDF !default; $dark: $gray-900 !default; + + // scss-docs-end theme-color-variables -.bg-primary-split { - background: repeating-linear-gradient(#1E7295, #1E7295 49.9%, #185D79 50.1%, #185D79 100%); +.bg-tertiary-split { + background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%); } // scss-docs-start theme-colors-map @@ -642,9 +647,10 @@ $btn-padding-x-lg: $input-btn-padding-x-lg !default; $btn-font-size-lg: $input-btn-font-size-lg !default; $btn-border-width: $input-btn-border-width !default; +$btn-border-colour: rgba($black,.1) !default; $btn-font-weight: $font-weight-normal !default; -$btn-box-shadow: inset 0 2px 0 rgba($white, .15), 0 1px 1px rgba($black, .1) !default; +$btn-box-shadow: inset 0 2px 0 rgba($white, .15), inset 0 -2px rgba($black,.1), 0 1px rgba($black, .1) !default; $btn-focus-width: $input-btn-focus-width !default; $btn-focus-box-shadow: $input-btn-focus-box-shadow !default; $btn-disabled-opacity: .65 !default; diff --git a/src/assets/styles/bootstrap/mixins/_buttons.scss b/src/assets/styles/bootstrap/mixins/_buttons.scss index c06fa4a9..618a9ac3 100644 --- a/src/assets/styles/bootstrap/mixins/_buttons.scss +++ b/src/assets/styles/bootstrap/mixins/_buttons.scss @@ -20,7 +20,7 @@ ) { color: $color; @include gradient-bg($background); - border-color: $border; + border-color: $btn-border-colour; @include box-shadow($btn-box-shadow); &:hover { diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss index a0f7cb28..1781a2ec 100644 --- a/src/layout/card/NitroCardView.scss +++ b/src/layout/card/NitroCardView.scss @@ -5,6 +5,31 @@ $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height; .nitro-card { pointer-events: all; + .nitro-card-close-parent { + right: -3px; + top: 5px; + position: absolute; + width: auto; + + .nitro-card-close { + cursor: pointer; + border-radius: $border-radius; + box-shadow: inset 0 0 0 1px #921911, inset 0 2px rgba($white,.2); + padding:2px 6px 0 6px; + border:1px solid $white; + background: rgb(245,80,65); + background: linear-gradient(180deg, rgba(245,80,65,1) 0%, rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%); + + &:hover { + filter: brightness(1.2); + } + + &:active { + filter: brightness(0.8); + } + } + } + @import './content/NitroCardContentView'; @import './header/NitroCardHeaderView'; @import './simple-header/NitroCardSimpleHeaderView'; diff --git a/src/layout/card/header/NitroCardHeaderView.scss b/src/layout/card/header/NitroCardHeaderView.scss index 06d18968..bdf82f76 100644 --- a/src/layout/card/header/NitroCardHeaderView.scss +++ b/src/layout/card/header/NitroCardHeaderView.scss @@ -1,29 +1,4 @@ .nitro-card-header { min-height: $nitro-card-header-height; max-height: $nitro-card-header-height; - - .nitro-card-close-parent { - right:-3px; - top:5px; - position: absolute; - width: auto; - - .nitro-card-close { - cursor: pointer; - border-radius: $border-radius; - box-shadow: inset 0 0 0 1px #921911, inset 0 2px rgba($white,.2); - padding:2px 6px 0 6px; - border:1px solid $white; - background: rgb(245,80,65); - background: linear-gradient(180deg, rgba(245,80,65,1) 0%, rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%); - - &:hover { - filter: brightness(1.2); - } - - &:active { - filter: brightness(0.8); - } - } - } } diff --git a/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss b/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss index e69de29b..4b1439a6 100644 --- a/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss +++ b/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss @@ -0,0 +1,8 @@ +.nitro-card-close-parent { + right: 5px; +} + +.bg-tertiary-split { + border: 2px solid darken($quaternary,4); + box-shadow:0 0 0 2px $white; +} diff --git a/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx b/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx index d61941e4..d71306b3 100644 --- a/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx +++ b/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx @@ -6,13 +6,16 @@ export const NitroCardSimpleHeaderView: FC = pro const { headerText = null, onCloseClick = null } = props; return ( -
-
-
+
+
+
{ headerText }
-
- +
+
+
+ +
); diff --git a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss index d7665d50..34b1b665 100644 --- a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss +++ b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss @@ -1,3 +1,3 @@ .nitro-exchange-credit { - width: 250px; + width: 290px; } diff --git a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx index c883f689..785d3767 100644 --- a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx +++ b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx @@ -3,8 +3,9 @@ import { FC, useCallback, useState } from 'react'; import { GetRoomEngine, GetRoomSession } from '../../../../../api'; import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base'; import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event'; -import { NitroCardContentView, NitroCardHeaderView } from '../../../../../layout'; +import { NitroCardContentView } from '../../../../../layout'; import { NitroCardView } from '../../../../../layout/card/NitroCardView'; +import { NitroCardSimpleHeaderView } from '../../../../../layout/card/simple-header'; import { LocalizeText } from '../../../../../utils/LocalizeText'; import { useRoomContext } from '../../../context/RoomContext'; import { RoomWidgetRoomObjectUpdateEvent } from '../../../events'; @@ -68,7 +69,7 @@ export const FurnitureExchangeCreditView: FC = pro return ( - processAction('close') } /> + processAction('close') } />
{ LocalizeText('widgets.furniture.credit.redeem.value', [ 'value' ], [ exchangeCreditData.value.toString() ]) } diff --git a/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx b/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx index 604b4732..2ffb5e9f 100644 --- a/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx +++ b/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx @@ -6,8 +6,8 @@ import { GetSessionDataManager } from '../../../../../api/nitro/session/GetSessi import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base'; import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event'; import { NitroCardContentView } from '../../../../../layout/card/content/NitroCardContentView'; -import { NitroCardHeaderView } from '../../../../../layout/card/header/NitroCardHeaderView'; import { NitroCardView } from '../../../../../layout/card/NitroCardView'; +import { NitroCardSimpleHeaderView } from '../../../../../layout/card/simple-header'; import { LocalizeText } from '../../../../../utils/LocalizeText'; import { AvatarImageView } from '../../../../avatar-image/AvatarImageView'; import { useRoomContext } from '../../../context/RoomContext'; @@ -172,7 +172,7 @@ export const FurnitureMannequinView: FC = props => return ( - processAction('close') } /> + processAction('close') }/>