From a12a37cf2bf1f7b6149a7ce3c589aee26dade435 Mon Sep 17 00:00:00 2001 From: Douglas Daniel Date: Tue, 17 Sep 2024 16:01:18 -0500 Subject: [PATCH] style(wallet): Update Wallet Panel Background --- .../components/desktop/views/crypto/index.tsx | 2 ++ .../views/portfolio/portfolio-overview.tsx | 9 -------- .../desktop/views/portfolio/style.ts | 16 -------------- .../portfolio_lines_background_dark.svg | 1 + .../portfolio_lines_background_light.svg | 1 + .../wallet-page-wrapper.style.ts | 22 ++++++++++++++++++- .../wallet-page-wrapper.tsx | 9 ++++++-- 7 files changed, 32 insertions(+), 28 deletions(-) create mode 100644 components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/portfolio_lines_background_dark.svg create mode 100644 components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/portfolio_lines_background_light.svg diff --git a/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx b/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx index cec1b73ea8f4..85d67e4fcdc9 100644 --- a/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx +++ b/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx @@ -230,6 +230,7 @@ export const CryptoView = ({ sessionRoute }: Props) => { noCardPadding={true} cardHeader={} useDarkBackground={isPanel} + isPortfolio={true} hideDivider={true} > @@ -274,6 +275,7 @@ export const CryptoView = ({ sessionRoute }: Props) => { noCardPadding={true} cardHeader={} useDarkBackground={isPanel} + isPortfolio={true} hideDivider={isPanel} > diff --git a/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx b/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx index c8f46cf7f246..f1a541e5b011 100644 --- a/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx +++ b/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx @@ -8,10 +8,6 @@ import { skipToken } from '@reduxjs/toolkit/query/react' import { useHistory, useLocation } from 'react-router' import { Route, Switch, Redirect } from 'react-router-dom' -// selectors -import { useSafeUISelector } from '../../../../common/hooks/use-safe-selector' -import { UISelectors } from '../../../../common/selectors' - // hooks import { useBalancesFetcher // @@ -92,7 +88,6 @@ import { ControlsRow, BalanceAndButtonsWrapper, BalanceAndChangeWrapper, - BackgroundWatermark, BalanceAndLineChartWrapper } from './style' import { Column, Row, HorizontalSpace } from '../../../shared/style' @@ -152,9 +147,6 @@ export const PortfolioOverview = () => { false ) - // redux - const isPanel = useSafeUISelector(UISelectors.isPanel) - // queries const { data: networks } = useGetVisibleNetworksQuery() const { userVisibleTokensInfo, isLoadingUserTokens } = @@ -518,7 +510,6 @@ export const PortfolioOverview = () => { fullWidth={true} justifyContent='flex-start' > - {isPanel && } diff --git a/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/portfolio_lines_background_light.svg b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/portfolio_lines_background_light.svg new file mode 100644 index 000000000000..375f5cedc1fb --- /dev/null +++ b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/assets/portfolio_lines_background_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 811e9eed2d15..afd67570372a 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 @@ -11,6 +11,8 @@ 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' +import LinesLight from './assets/portfolio_lines_background_light.svg' +import LinesDark from './assets/portfolio_lines_background_dark.svg' // Shared Styles import { Row } from '../../shared/style' @@ -105,12 +107,15 @@ export const ContainerCard = styled.div<{ noBorderRadius?: boolean useDarkBackground?: boolean useFullHeight?: boolean + noBackground?: boolean }>` display: flex; flex: none; flex-direction: column; background-color: ${(p) => - p.useDarkBackground + p.noBackground + ? 'unset' + : p.useDarkBackground ? leo.color.page.background : leo.color.container.background}; border-radius: ${(p) => (p.hideCardHeader ? '24px' : '0px 0px 24px 24px')}; @@ -289,3 +294,18 @@ export const FeatureRequestButtonWrapper = styled.div` display: none; } ` + +export const PortfolioBackgroundWatermark = styled.div` + width: 100%; + height: 100%; + background-image: url(${LinesLight}); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + position: absolute; + top: 0px; + left: 0px; + @media (prefers-color-scheme: dark) { + background-image: url(${LinesDark}); + } +` 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 fc77afb8d74b..5ec5cb8b4c88 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 @@ -37,7 +37,8 @@ import { CardHeaderWrapper, CardHeader, CardHeaderShadow, - CardHeaderContentWrapper + CardHeaderContentWrapper, + PortfolioBackgroundWatermark } from './wallet-page-wrapper.style' import { loadTimeData } from '../../../../common/loadTimeData' @@ -55,6 +56,7 @@ export interface Props { noBorderRadius?: boolean useDarkBackground?: boolean useFullHeight?: boolean + isPortfolio?: boolean children?: React.ReactNode } @@ -72,7 +74,8 @@ export const WalletPageWrapper = (props: Props) => { noMinCardHeight, noBorderRadius, useDarkBackground, - useFullHeight + useFullHeight, + isPortfolio } = props const isAndroid = loadTimeData.getBoolean('isAndroid') || false @@ -162,6 +165,7 @@ export const WalletPageWrapper = (props: Props) => { noPadding={noPadding} noTopPosition={isPanel || isAndroid} > + {isPanel && isPortfolio && } {isWalletCreated && !hideHeader && !isPanel && !isAndroid && ( )} @@ -195,6 +199,7 @@ export const WalletPageWrapper = (props: Props) => { noBorderRadius={noBorderRadius} useDarkBackground={useDarkBackground} useFullHeight={useFullHeight} + noBackground={isPanel && isPortfolio} > {children}