From 94bac50358f3b6d3e56d21446cfc9783f9905acc Mon Sep 17 00:00:00 2001 From: Layne Date: Tue, 22 Jun 2021 03:08:16 -0400 Subject: [PATCH] changes ig --- src/assets/styles/bootstrap/_variables.scss | 6 ++++-- src/assets/styles/scrollbars.scss | 12 +++++------- src/layout/card/NitroCardView.scss | 1 - .../card/content/NitroCardContentView.scss | 2 ++ .../card/header/NitroCardHeaderView.scss | 4 ++++ .../CatalogLayoutSingleBundleView.tsx | 2 +- src/views/purse/PurseView.scss | 11 ++++++++++- src/views/purse/PurseView.tsx | 3 ++- src/views/purse/currency/CurrencyView.scss | 13 +++++++------ src/views/purse/currency/CurrencyView.tsx | 18 +++++++++++++----- src/views/right-side/RightSideView.scss | 3 ++- src/views/toolbar/ToolbarView.scss | 6 +++--- 12 files changed, 53 insertions(+), 28 deletions(-) diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss index ee27f8c8..01276306 100644 --- a/src/assets/styles/bootstrap/_variables.scss +++ b/src/assets/styles/bootstrap/_variables.scss @@ -46,7 +46,7 @@ $yellow: #ffc107 !default; $green: #198754 !default; $teal: #20c997 !default; $cyan: #0dcaf0 !default; -$muted: #B6BEC5 !default; +$muted: #B6BEC5 !default; // scss-docs-end color-variables // scss-docs-start colors-map @@ -79,11 +79,13 @@ $success: #008026 !default; $info: $cyan !default; $warning: $yellow !default; $danger: #C23027 !default; + $light: #DFDFDF !default; -$dark: $gray-900 !default; +$dark: #24211c !default; $light-dark: $gray-800 !default; + // scss-docs-end theme-color-variables .bg-tertiary-split { diff --git a/src/assets/styles/scrollbars.scss b/src/assets/styles/scrollbars.scss index bc995b77..e9eee6a5 100644 --- a/src/assets/styles/scrollbars.scss +++ b/src/assets/styles/scrollbars.scss @@ -5,23 +5,21 @@ ::-webkit-scrollbar-track { border-radius: $border-radius; - background: rgba($primary,.4); - box-shadow:inset 1px 0 rgba($black,.2); + background: rgba($black,.1); + box-shadow:inset 0 0 1px 1px rgba($black,.1); padding-top:3px; } ::-webkit-scrollbar-thumb { border-radius: $border-radius; - background: #DCDCDC; - box-shadow:inset 0px 4px $white, inset 0px -4px rgba($black,.2), 0 1px rgba($black,.2); + background: rgba($primary,.4); width: 4px; } ::-webkit-scrollbar-thumb:hover { - background: rgba($white, 1); + background: rgba($primary,.8); } ::-webkit-scrollbar-thumb:active { - box-shadow: inset 1px 4px rgba($white,.4), inset -1px -4px rgba($black,.2), 0 1px rgba($black,.2); - background:#C4C4C4; + background: $secondary; } diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss index 53da0829..77385ae7 100644 --- a/src/layout/card/NitroCardView.scss +++ b/src/layout/card/NitroCardView.scss @@ -12,7 +12,6 @@ $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height; } .nitro-card-close-parent { - right: -3px; top: 5px; position: absolute; width: auto; diff --git a/src/layout/card/content/NitroCardContentView.scss b/src/layout/card/content/NitroCardContentView.scss index 3b95c177..c8108cc7 100644 --- a/src/layout/card/content/NitroCardContentView.scss +++ b/src/layout/card/content/NitroCardContentView.scss @@ -7,6 +7,8 @@ .content-area { height: 100% !important; + min-height: auto !important; max-height: 100% !important; + resize: none !important; } } diff --git a/src/layout/card/header/NitroCardHeaderView.scss b/src/layout/card/header/NitroCardHeaderView.scss index bdf82f76..d7ac863b 100644 --- a/src/layout/card/header/NitroCardHeaderView.scss +++ b/src/layout/card/header/NitroCardHeaderView.scss @@ -1,4 +1,8 @@ .nitro-card-header { min-height: $nitro-card-header-height; max-height: $nitro-card-header-height; + + .nitro-card-close-parent { + right:-3px; + } } diff --git a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx index 9fd95fba..d1c47be1 100644 --- a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx +++ b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx @@ -21,7 +21,7 @@ export const CatalogLayoutSingleBundleView: FC -
+
diff --git a/src/views/purse/PurseView.scss b/src/views/purse/PurseView.scss index e24e7381..9bcf83f7 100644 --- a/src/views/purse/PurseView.scss +++ b/src/views/purse/PurseView.scss @@ -1,5 +1,14 @@ .nitro-purse { - + background: rgba($dark,.95); + border: 1px solid lighten($dark,8.3); + box-shadow: inset 0px 3px lighten(rgba($dark,.6),2.5), inset 0 -2px darken(rgba($dark,.6),4); + font-weight: bolder; + + .notification-button { + color:lighten($dark,20); + cursor: pointer; + font-size: 0.9rem; + } } @import './currency/CurrencyView'; diff --git a/src/views/purse/PurseView.tsx b/src/views/purse/PurseView.tsx index 6bf73add..d7b9ee12 100644 --- a/src/views/purse/PurseView.tsx +++ b/src/views/purse/PurseView.tsx @@ -29,13 +29,14 @@ export const PurseView: FC = props => return ( -
+
{ currencies && currencies.map((currency, index) => { if(displayedCurrencies.indexOf(currency.type) === -1) return null; return ; }) } +
); diff --git a/src/views/purse/currency/CurrencyView.scss b/src/views/purse/currency/CurrencyView.scss index 5432ef9b..5df98f9c 100644 --- a/src/views/purse/currency/CurrencyView.scss +++ b/src/views/purse/currency/CurrencyView.scss @@ -1,9 +1,10 @@ .nitro-currency { - background: rgba(20, 20, 20, .95); - border: 1px solid #101010; - box-shadow: inset 2px 2px rgba(255, 255, 255, .1), inset -2px -2px rgba(255, 255, 255, .1); - - .icon { - border-left: 1px solid rgba(255, 255, 255, .1); + pointer-events: all; + .nitro-currency-text { + max-width: 60px; + } + &:not(:last-child) { + border-right:1px solid #000; + box-shadow: 1px 0 lighten($dark,8.3) } } diff --git a/src/views/purse/currency/CurrencyView.tsx b/src/views/purse/currency/CurrencyView.tsx index 11a5c5be..4287794b 100644 --- a/src/views/purse/currency/CurrencyView.tsx +++ b/src/views/purse/currency/CurrencyView.tsx @@ -1,3 +1,5 @@ +import { OverlayTrigger, Tooltip } from 'react-bootstrap'; +import { LocalizeShortNumber } from '../../../utils/LocalizeShortNumber'; import { CurrencyIcon } from '../../currency-icon/CurrencyIcon'; import { CurrencyViewProps } from './CurrencyView.types'; @@ -6,13 +8,19 @@ export function CurrencyView(props: CurrencyViewProps): JSX.Element const { currency = null } = props; return ( -
-
-
{ currency.amount }
-
+ + { currency.amount } + + }> +
+
{LocalizeShortNumber(currency.amount)}
+
-
+ ); } diff --git a/src/views/right-side/RightSideView.scss b/src/views/right-side/RightSideView.scss index 8ecb2ec9..febd7891 100644 --- a/src/views/right-side/RightSideView.scss +++ b/src/views/right-side/RightSideView.scss @@ -2,7 +2,8 @@ position: absolute; top: 10px; right: 10px; - width: 200px; + min-width: 200px; + max-width: 400px; z-index: $rightside-zindex; pointer-events: none; } diff --git a/src/views/toolbar/ToolbarView.scss b/src/views/toolbar/ToolbarView.scss index c4511533..9a9e3dd9 100644 --- a/src/views/toolbar/ToolbarView.scss +++ b/src/views/toolbar/ToolbarView.scss @@ -9,9 +9,9 @@ .nitro-toolbar { height: 100%; pointer-events: all; - background: rgba(20, 20, 20, .95); - border-top: 1px solid #101010; - box-shadow: inset 0px 2px rgba(255, 255, 255, .1); + background: rgba($dark,.95); + border-top: 2px solid lighten($dark,8.3); + box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4); #toolbar-chat-input-container { margin-left: 25px;