style(wallet): Update Wallet Panel Background

components/brave_wallet_ui/components/desktop/views/crypto/index.tsx

@@ -230,6 +230,7 @@ export const CryptoView = ({ sessionRoute }: Props) => {
             noCardPadding={true}
             cardHeader={<PortfolioOverviewHeader />}
             useDarkBackground={isPanel}
+            isPortfolio={true}
             hideDivider={true}
           >
             <StyledWrapper>
@@ -274,6 +275,7 @@ export const CryptoView = ({ sessionRoute }: Props) => {
             noCardPadding={true}
             cardHeader={<PortfolioOverviewHeader />}
             useDarkBackground={isPanel}
+            isPortfolio={true}
             hideDivider={isPanel}
           >
             <StyledWrapper>

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 && <BackgroundWatermark />}
             <BalanceAndButtonsWrapper
               fullWidth={true}
               alignItems='center'

components/brave_wallet_ui/components/desktop/views/portfolio/style.ts

@@ -14,7 +14,6 @@ import {
   NoTransactionsIconDark,
   NoTransactionsIconLight
 } from '../../../../assets/svg-icons/empty-state-icons'
-import Lines from '../../../../assets/svg-icons/portfolio_lines_background.svg'
 
 // Shared Styles
 import {
@@ -314,18 +313,3 @@ export const ContentWrapper = styled(Column)<{
 export const BalanceAndLineChartWrapper = styled(Column)`
   position: relative;
 `
-
-export const BackgroundWatermark = styled.div`
-  box-shadow: ${leo.color.page.background} 0px 50px 50px -30px inset;
-  width: 100%;
-  height: 100%;
-  background-image: url(${Lines});
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  position: absolute;
-  opacity: 0.6;
-  @media (prefers-color-scheme: dark) {
-    opacity: 0.2;
-  }
-`

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});
+  }
+`

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 && <PortfolioBackgroundWatermark />}
         {isWalletCreated && !hideHeader && !isPanel && !isAndroid && (
           <TabHeader hideHeaderMenu={hideHeaderMenu} />
         )}
@@ -195,6 +199,7 @@ export const WalletPageWrapper = (props: Props) => {
               noBorderRadius={noBorderRadius}
               useDarkBackground={useDarkBackground}
               useFullHeight={useFullHeight}
+              noBackground={isPanel && isPortfolio}
             >
               {children}
             </ContainerCard>