From 1745cc636d6b6f92cb22dd49bfcec93fcd6e43a1 Mon Sep 17 00:00:00 2001 From: muerwre <33246675+muerwre@users.noreply.github.com> Date: Mon, 15 Aug 2022 13:38:08 +0700 Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D1=86=D0=B2=D0=B5=D1=82=D0=B0=20=D0=B2=20=D0=B0=D0=BB?= =?UTF-8?q?=D1=8C=D1=82=D0=B5=D1=80=D0=BD=D0=B0=D1=82=D0=B8=D0=B2=D0=BD?= =?UTF-8?q?=D0=BE=D0=B9=20=D1=82=D0=B5=D0=BC=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/horizon_backdrop.svg | 418 ++++++++++++++++++ src/components/menu/VerticalMenu/index.tsx | 7 +- .../menu/VerticalMenu/styles.module.scss | 1 + src/constants/themes/index.ts | 1 + .../settings/ThemeSwitcher/index.tsx | 6 +- .../settings/ThemeSwitcher/styles.module.scss | 14 +- src/styles/_inputs.scss | 2 +- src/styles/themes/_horizon.scss | 2 +- 8 files changed, 442 insertions(+), 9 deletions(-) create mode 100644 public/images/horizon_backdrop.svg diff --git a/public/images/horizon_backdrop.svg b/public/images/horizon_backdrop.svg new file mode 100644 index 00000000..e1107f3b --- /dev/null +++ b/public/images/horizon_backdrop.svg @@ -0,0 +1,418 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/menu/VerticalMenu/index.tsx b/src/components/menu/VerticalMenu/index.tsx index f35c62e4..0b84065e 100644 --- a/src/components/menu/VerticalMenu/index.tsx +++ b/src/components/menu/VerticalMenu/index.tsx @@ -19,9 +19,12 @@ function VerticalMenu({ ...props }: PropsWithChildren) { return ( - +
{children} - +
); } diff --git a/src/components/menu/VerticalMenu/styles.module.scss b/src/components/menu/VerticalMenu/styles.module.scss index dbbf5441..1c3e5d1d 100644 --- a/src/components/menu/VerticalMenu/styles.module.scss +++ b/src/components/menu/VerticalMenu/styles.module.scss @@ -2,6 +2,7 @@ @import 'src/styles/mixins'; .menu { + background: $content_bg_backdrop; border-radius: $radius; padding: 0 !important; display: flex; diff --git a/src/constants/themes/index.ts b/src/constants/themes/index.ts index 1a03082d..00a8ed90 100644 --- a/src/constants/themes/index.ts +++ b/src/constants/themes/index.ts @@ -15,6 +15,7 @@ export const themeColors: Record = { colors: [ 'linear-gradient(170deg, #00ac35 -50%, #007962 150%)', 'linear-gradient(165deg, #ff7549 -50%, #ff3344 150%)', + 'linear-gradient(170deg, #582cd0, #592071)', ], background: `url('/images/noise_top.png') 0% 0% #23201f`, }, diff --git a/src/containers/settings/ThemeSwitcher/index.tsx b/src/containers/settings/ThemeSwitcher/index.tsx index 25138e2e..c112fa0d 100644 --- a/src/containers/settings/ThemeSwitcher/index.tsx +++ b/src/containers/settings/ThemeSwitcher/index.tsx @@ -27,15 +27,15 @@ const ThemeSwitcher: FC = () => { onClick={() => setTheme(id as Theme)} > - - {item.colors.map((color) => ( +
+ {item.colors.reverse().map((color) => (
))} - +
{item.name}
diff --git a/src/containers/settings/ThemeSwitcher/styles.module.scss b/src/containers/settings/ThemeSwitcher/styles.module.scss index 9df40937..853f5039 100644 --- a/src/containers/settings/ThemeSwitcher/styles.module.scss +++ b/src/containers/settings/ThemeSwitcher/styles.module.scss @@ -25,6 +25,16 @@ @include outer_shadow; border-radius: 100%; - flex: 0 1 20px; - height: 20px; + flex: 0 1 24px; + height: 24px; + + &:not(:last-child) { + margin-left: -8px; + } +} + +.palette { + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; } diff --git a/src/styles/_inputs.scss b/src/styles/_inputs.scss index 0d2b1b5a..1f52111d 100644 --- a/src/styles/_inputs.scss +++ b/src/styles/_inputs.scss @@ -7,5 +7,5 @@ $input_shadow_error: inset $color_danger 0 0 0 1px; $input_shadow_filled: $input_shadow; $input_font: $font_16_medium; $input_placeholder_font: $font_16_medium; -$input_bg_color: $content_bg_dark; +$input_bg_color: $content_bg; $input_grey_color: #444444; diff --git a/src/styles/themes/_horizon.scss b/src/styles/themes/_horizon.scss index cf24899c..ee857d27 100644 --- a/src/styles/themes/_horizon.scss +++ b/src/styles/themes/_horizon.scss @@ -73,7 +73,7 @@ $_ocean: #25b0bc; --content_bg_info: #{transparentize($_lemon, 0.7)}; --content_bg_danger: #{transparentize($_red, 0.5)}; --content_bg_backdrop: 50% 50% / cover no-repeat - url('/images/horizon_bg.svg') #{transparentize($_cold, 0.4)}; + url('/images/horizon_backdrop.svg') #{transparentize($_cold, 0.2)}; // white shades (move to --vars) --white: white;