From c704420329a15672a7a140d16dda7c11ff8aa477 Mon Sep 17 00:00:00 2001 From: Douglas Daniel Date: Tue, 10 Sep 2024 11:51:45 -0500 Subject: [PATCH] style(wallet): Update Wallet Background --- .../assets/bottom_layer_dark.svg | 1 + .../assets/bottom_layer_light.svg | 1 + .../assets/top_layer_dark.svg | 1 + .../assets/top_layer_light.svg | 1 + .../wallet-page-wrapper.style.ts | 83 ++++++------------- .../wallet-page-wrapper.tsx | 2 - 6 files changed, 29 insertions(+), 60 deletions(-) create mode 100644 components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/bottom_layer_dark.svg create mode 100644 components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/bottom_layer_light.svg create mode 100644 components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/top_layer_dark.svg create mode 100644 components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/top_layer_light.svg diff --git a/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/bottom_layer_dark.svg b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/bottom_layer_dark.svg new file mode 100644 index 000000000000..27e3fd74af95 --- /dev/null +++ b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/bottom_layer_dark.svg @@ -0,0 +1 @@ + diff --git a/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/bottom_layer_light.svg b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/bottom_layer_light.svg new file mode 100644 index 000000000000..5626160af52b --- /dev/null +++ b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/bottom_layer_light.svg @@ -0,0 +1 @@ + diff --git a/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/top_layer_dark.svg b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/top_layer_dark.svg new file mode 100644 index 000000000000..cdcca8bb4883 --- /dev/null +++ b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/top_layer_dark.svg @@ -0,0 +1 @@ + diff --git a/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/top_layer_light.svg b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/top_layer_light.svg new file mode 100644 index 000000000000..77e7a97d1160 --- /dev/null +++ b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/top_layer_light.svg @@ -0,0 +1 @@ + diff --git a/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.style.ts b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.style.ts index 681f9c6d0981..0f3419acd7ca 100644 --- a/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.style.ts +++ b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.style.ts @@ -5,6 +5,14 @@ import styled from 'styled-components' import * as leo from '@brave/leo/tokens/css/variables' + +// Assets +import TopLayerLight from './assets/top_layer_light.svg' +import BottomLayerLight from './assets/bottom_layer_light.svg' +import TopLayerDark from './assets/top_layer_dark.svg' +import BottomLayerDark from './assets/bottom_layer_dark.svg' + +// Shared Styles import { Row } from '../../shared/style' const minCardHeight = 497 @@ -235,76 +243,35 @@ export const BackgroundGradientWrapper = styled.div` bottom: 0px; left: 0px; right: 0px; - opacity: 0.5; - background-color: ${leo.color.page.background}; + opacity: 0.3; + background-color: ${leo.color.primary[10]}; ` export const BackgroundGradientTopLayer = styled.div` + width: 100%; + height: 100%; + background-image: url(${TopLayerLight}); + background-repeat: no-repeat; + background-size: cover; + background-position: center; position: absolute; - left: -42%; - right: 35%; - top: 15%; - bottom: 25%; - background: #dfdefc; - border-radius: 100%; - filter: blur(36.2567px); - transform: matrix(1, -0.06, -0.32, -0.95, 0, 0); - z-index: 5; - @media (prefers-color-scheme: dark) { - /* #013F4B does not exist in design system */ - background: #013f4b; - filter: blur(47px); - left: 35%; - right: -100%; - top: 2%; - bottom: 25%; - transform: matrix(-0.98, 0.19, -0.73, -0.68, 0, 0); - } -` - -export const BackgroundGradientMiddleLayer = styled.div` - position: absolute; - left: 25%; - right: 10%; - top: 10%; - bottom: 25%; - background: #d6e7ff; - border-radius: 100%; - filter: blur(47.5869px); - transform: matrix(-1, 0.06, -0.32, -0.95, 0, 0); z-index: 4; @media (prefers-color-scheme: dark) { - /* #030A49 does not exist in design system */ - background: #030a49; - filter: blur(70px); - left: -40%; - right: 17%; - top: 50%; - bottom: -80%; - transform: matrix(-0.98, 0.19, -0.73, -0.68, 0, 0); + background-image: url(${TopLayerDark}); } ` export const BackgroundGradientBottomLayer = styled.div` + width: 100%; + height: 100%; + background-image: url(${BottomLayerLight}); + background-repeat: no-repeat; + background-size: cover; + background-position: center; position: absolute; - left: -30%; - right: 20%; - top: 45%; - bottom: -25%; - background: #c8edfd; - border-radius: 100%; - filter: blur(47.5869px); - transform: matrix(-1, 0.06, -0.32, -0.95, 0, 0); - z-index: 3; + z-index: 5; @media (prefers-color-scheme: dark) { - /* #014B3A does not exist in design system */ - background: #014b3a; - filter: blur(70px); - left: 25%; - right: -80%; - top: 15%; - bottom: -40%; - transform: matrix(-0.79, 0.61, -0.98, -0.22, 0, 0); + background-image: url(${BottomLayerDark}); } ` diff --git a/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.tsx b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.tsx index 9210260291de..fc77afb8d74b 100644 --- a/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.tsx +++ b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.tsx @@ -31,7 +31,6 @@ import { StaticBackground, BackgroundGradientWrapper, BackgroundGradientTopLayer, - BackgroundGradientMiddleLayer, BackgroundGradientBottomLayer, BlockForHeight, FeatureRequestButtonWrapper, @@ -156,7 +155,6 @@ export const WalletPageWrapper = (props: Props) => { {!isPanel && ( - )}