From 36aa3fa4eea8216501c5502afb4e91705a63ad13 Mon Sep 17 00:00:00 2001 From: Douglas Daniel Date: Wed, 11 Sep 2024 13:25:59 -0500 Subject: [PATCH] feat(wallet): Use Leo Side Nav in Wallet --- .../assets/svg-icons/wallet_logo_dark.svg | 1 + .../assets/svg-icons/wallet_logo_light.svg | 1 + .../desktop/wallet-nav/wallet-nav.style.ts | 58 ++++++++------- .../desktop/wallet-nav/wallet-nav.tsx | 72 ++++++++++++------- .../wallet-page-wrapper.style.ts | 7 +- .../tab-header/tab-header.style.ts | 4 +- 6 files changed, 85 insertions(+), 58 deletions(-) create mode 100644 components/brave_wallet_ui/assets/svg-icons/wallet_logo_dark.svg create mode 100644 components/brave_wallet_ui/assets/svg-icons/wallet_logo_light.svg diff --git a/components/brave_wallet_ui/assets/svg-icons/wallet_logo_dark.svg b/components/brave_wallet_ui/assets/svg-icons/wallet_logo_dark.svg new file mode 100644 index 000000000000..59395c843f13 --- /dev/null +++ b/components/brave_wallet_ui/assets/svg-icons/wallet_logo_dark.svg @@ -0,0 +1 @@ + diff --git a/components/brave_wallet_ui/assets/svg-icons/wallet_logo_light.svg b/components/brave_wallet_ui/assets/svg-icons/wallet_logo_light.svg new file mode 100644 index 000000000000..672170a8c04e --- /dev/null +++ b/components/brave_wallet_ui/assets/svg-icons/wallet_logo_light.svg @@ -0,0 +1 @@ + diff --git a/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.style.ts b/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.style.ts index dde2ca2cdfcc..678f135d5ef2 100644 --- a/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.style.ts +++ b/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.style.ts @@ -5,41 +5,30 @@ import styled from 'styled-components' import * as leo from '@brave/leo/tokens/css/variables' +import Navigation from '@brave/leo/react/navigation' + +// Assets +import WalletLogoLight from '../../../assets/svg-icons/wallet_logo_light.svg' +import WalletLogoDark from '../../../assets/svg-icons/wallet_logo_dark.svg' + +// Shared Styles import { layoutSmallWidth, - layoutTopPosition, - maxCardWidth, - navWidth, - navSpace + navWidth } from '../wallet-page-wrapper/wallet-page-wrapper.style' -export const Wrapper = styled.div<{ - isPanel: boolean -}>` +export const Wrapper = styled.div` display: flex; - align-items: center; - justify-content: center; + align-items: flex-start; + justify-content: flex-start; flex-direction: column; - background-color: ${leo.color.container.background}; - border-radius: 16px; position: absolute; - top: ${layoutTopPosition}px; - /* - (100vw / 2) - (${navWidth}px / 2) makes the nav perfectly centered - horizontally in the browser window. - - - (${maxCardWidth}px / 2) - (${navSpace}px / 2) is to then adjust the - nav to the left to be centered with the layout card body. - */ - left: calc( - (100vw / 2) - (${navWidth}px / 2) - (${maxCardWidth}px / 2) - - (${navSpace}px / 2) - ); - overflow: visible; + background-color: ${leo.color.container.background}; + top: 0px; + bottom: 0px; + left: 0px; z-index: 10; width: ${navWidth}px; - padding: 12px 0px; - box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.07); @media screen and (max-width: ${layoutSmallWidth}px) { flex-direction: row; top: unset; @@ -48,9 +37,10 @@ export const Wrapper = styled.div<{ bottom: 0px; border: none; padding: 8px 0px; - border-radius: 0px; box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.04); width: unset; + align-items: center; + justify-content: center; } ` @@ -88,3 +78,17 @@ export const PanelOptionsWrapper = styled.div` display: flex; } ` + +export const WalletLogo = styled.div` + height: 28px; + width: 87.65px; + background-image: url(${WalletLogoLight}); + background-size: cover; + @media (prefers-color-scheme: dark) { + background-image: url(${WalletLogoDark}); + } +` + +export const LeoNavigation = styled(Navigation)` + width: 100%; +` diff --git a/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.tsx b/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.tsx index 80312ecda4b0..dc4a4b39abd9 100644 --- a/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.tsx +++ b/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.tsx @@ -4,12 +4,12 @@ // You can obtain one at https://mozilla.org/MPL/2.0/. import * as React from 'react' +import { useLocation, useHistory } from 'react-router-dom' +import NavigationMenu from '@brave/leo/react/navigationMenu' +import NavigationItem from '@brave/leo/react/navigationItem' -// Selectors -import { UISelectors } from '../../../common/selectors' - -// Hooks -import { useSafeUISelector } from '../../../common/hooks/use-safe-selector' +// Utils +import { getLocale } from '../../../../common/locale' // Options import { @@ -26,15 +26,19 @@ import { Wrapper, Section, PageOptionsWrapper, - PanelOptionsWrapper + PanelOptionsWrapper, + LeoNavigation, + WalletLogo } from './wallet-nav.style' +import { Row, VerticalDivider } from '../../shared/style' export const WalletNav = () => { - // redux - const isPanel = useSafeUISelector(UISelectors.isPanel) + // routing + const history = useHistory() + const { pathname: walletLocation } = useLocation() return ( - +
{PanelNavOptions.map((option) => ( @@ -47,22 +51,40 @@ export const WalletNav = () => { -
- {NavOptions.map((option) => ( - - ))} -
-
- {BuySendSwapDepositOptions.map((option) => ( - - ))} -
+ + + + + + {NavOptions.map((option) => ( + history.push(option.route)} + > + {getLocale(option.name)} + + ))} + + + + {BuySendSwapDepositOptions.map((option) => ( + history.push(option.route)} + > + {getLocale(option.name)} + + ))} + + ) 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 0f3419acd7ca..811e9eed2d15 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 @@ -22,8 +22,7 @@ export const layoutSmallWidth = 1100 export const layoutPanelWidth = 660 export const layoutTopPosition = 68 // navSpace and navWidth need to be defined here to prevent circular imports. -export const navSpace = 24 -export const navWidth = 240 +export const navWidth = 250 export const Wrapper = styled.div<{ noPadding?: boolean @@ -65,11 +64,11 @@ export const LayoutCardWrapper = styled.div<{ */ --left-padding-without-nav: calc((100vw / 2) - (${maxCardWidth}px / 2)); /* - + (${navWidth}px / 2) + (${navSpace}px / 2) is to then adjust the card body + + (${navWidth}px / 2) is to then adjust the card body to the right to be centered with the nav. */ --left-padding-with-nav: calc( - var(--left-padding-without-nav) + (${navWidth}px / 2) + (${navSpace}px / 2) + var(--left-padding-without-nav) + (${navWidth}px / 2) ); display: flex; flex-direction: column; diff --git a/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts index bc4af1ba9b6f..cf3905aab102 100644 --- a/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts +++ b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts @@ -8,8 +8,8 @@ import * as leo from '@brave/leo/tokens/css/variables' import Icon from '@brave/leo/react/icon' // Assets -import BraveLogoLight from '../../send/assets/brave-logo-light.svg' -import BraveLogoDark from '../../send/assets/brave-logo-dark.svg' +import BraveLogoLight from '../../../../assets/svg-icons/wallet_logo_light.svg' +import BraveLogoDark from '../../../../assets/svg-icons/wallet_logo_dark.svg' // Shared Styles import { StyledDiv, StyledButton } from '../../send/shared.styles'