Merge pull request #21719 from brave/feat-wallet-center-nav-and-body

feat(wallet): Center Nav and Body Together

components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.style.ts

@@ -7,7 +7,10 @@ import styled from 'styled-components'
 import * as leo from '@brave/leo/tokens/css'
 import {
   layoutSmallWidth,
-  layoutTopPosition
+  layoutTopPosition,
+  maxCardWidth,
+  navWidth,
+  navSpace
 } from '../wallet-page-wrapper/wallet-page-wrapper.style'
 
 export const Wrapper = styled.div<{
@@ -27,10 +30,20 @@ export const Wrapper = styled.div<{
   border-radius: 16px;
   position: absolute;
   top: ${layoutTopPosition}px;
-  left: 32px;
+  /*
+    (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;
   z-index: 10;
-  width: 240px;
+  width: ${navWidth}px;
   padding: 12px 0px;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.07);
   @media screen and (max-width: ${layoutSmallWidth}px) {

components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.style.ts

@@ -8,12 +8,14 @@ import * as leo from '@brave/leo/tokens/css'
 import { Row } from '../../shared/style'
 
 const minCardHeight = 497
-const maxCardWidth = 768
-const layoutScaleWithNav = 1374
+export const maxCardWidth = 768
 const layoutSmallCardBottom = 67
-export const layoutSmallWidth = 980
+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 Wrapper = styled.div<{
   noPadding?: boolean
@@ -48,10 +50,22 @@ export const LayoutCardWrapper = styled.div<{
       ? 'var(--no-header-top-position)'
       : 'var(--header-top-position)'};
   --bottom-position: ${(p) => (p.hideNav ? 0 : layoutSmallCardBottom)}px;
+  /*
+    (100vw / 2) - (${maxCardWidth}px / 2) makes the card body perfectly centered
+    horizontally in the browser window.
+  */
+  --left-padding-without-nav: calc((100vw / 2) - (${maxCardWidth}px / 2));
+  /*
+    + (${navWidth}px / 2) + (${navSpace}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)
+  );
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  align-items: center;
+  align-items: flex-start;
   top: var(--top-position);
   bottom: 0px;
   position: absolute;
@@ -62,10 +76,10 @@ export const LayoutCardWrapper = styled.div<{
   &::-webkit-scrollbar {
     display: none;
   }
-  @media screen and (max-width: ${layoutScaleWithNav}px) {
-    padding: 0px 32px 32px 304px;
-    align-items: flex-start;
-  }
+  padding-left: ${(p) =>
+    p.hideNav
+      ? 'var(--left-padding-without-nav)'
+      : 'var(--left-padding-with-nav)'};
   @media screen and (max-width: ${layoutSmallWidth}px) {
     bottom: var(--bottom-position);
     padding: 0px 32px 32px 32px;
@@ -78,7 +92,6 @@ export const LayoutCardWrapper = styled.div<{
 
 export const ContainerCard = styled.div<{
   noPadding?: boolean
-  maxWidth?: number
   hideCardHeader?: boolean
   noMinCardHeight?: boolean
   noBorderRadius?: boolean
@@ -99,10 +112,10 @@ export const ContainerCard = styled.div<{
   padding: ${(p) => (p.noPadding ? 0 : 20)}px;
   width: 100%;
   min-height: ${(p) => (p.noMinCardHeight ? 'unset' : `${minCardHeight}px`)};
-  max-width: ${(p) => (p.maxWidth ? p.maxWidth : maxCardWidth)}px;
+  max-width: ${maxCardWidth}px;
   position: relative;
   @media screen and (max-width: ${layoutSmallWidth}px) {
-    max-width: ${(p) => (p.maxWidth ? `${p.maxWidth}px` : 'unset')};
+    max-width: unset;
     width: 100%;
   }
   @media screen and (max-width: ${layoutPanelWidth}px) {
@@ -117,28 +130,20 @@ export const ContainerCard = styled.div<{
 `
 
 export const CardHeaderWrapper = styled.div<{
-  maxWidth?: number
   isPanel?: boolean
 }>`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  align-items: center;
+  align-items: flex-start;
   top: var(--layout-top-position);
   position: fixed;
   width: 100%;
-  max-width: ${(p) => (p.maxWidth ? `${p.maxWidth}px` : 'unset')};
-  @media screen and (max-width: ${layoutScaleWithNav}px) {
-    padding: ${(p) => (p.maxWidth ? '0px' : '0px 32px 0px 304px')};
-    left: ${(p) => (p.maxWidth ? 'unset' : '0px')};
-    right: ${(p) => (p.maxWidth ? 'unset' : '0px')};
-    align-items: flex-start;
-  }
   @media screen and (max-width: ${layoutSmallWidth}px) {
     left: unset;
     right: unset;
     align-items: center;
-    padding: ${(p) => (p.maxWidth ? '0px' : '0px 32px')};
+    padding: 0px 32px;
   }
   @media screen and (max-width: ${layoutPanelWidth}px) {
     padding: 0px;

components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.tsx

@@ -45,7 +45,6 @@ import { loadTimeData } from '../../../../common/loadTimeData'
 
 export interface Props {
   wrapContentInBox?: boolean
-  cardWidth?: number
   noPadding?: boolean
   noCardPadding?: boolean
   hideBackground?: boolean
@@ -63,7 +62,6 @@ export interface Props {
 export const WalletPageWrapper = (props: Props) => {
   const {
     children,
-    cardWidth,
     noPadding,
     noCardPadding,
     wrapContentInBox,
@@ -176,17 +174,13 @@ export const WalletPageWrapper = (props: Props) => {
             hideNav={hideNav}
           >
             {cardHeader && !isPanel && (
-              <CardHeaderWrapper
-                maxWidth={cardWidth}
-                isPanel={isPanel}
-              >
+              <CardHeaderWrapper isPanel={isPanel}>
                 <CardHeaderShadow headerHeight={headerHeight} />
               </CardHeaderWrapper>
             )}
 
             <ContainerCard
               noPadding={noCardPadding}
-              maxWidth={cardWidth}
               hideCardHeader={!cardHeader}
               noMinCardHeight={noMinCardHeight}
               noBorderRadius={noBorderRadius}
@@ -198,7 +192,6 @@ export const WalletPageWrapper = (props: Props) => {
             {cardHeader && (
               <CardHeaderWrapper
                 ref={headerRef}
-                maxWidth={cardWidth}
                 isPanel={isPanel}
               >
                 <CardHeader

components/brave_wallet_ui/page/container.tsx

@@ -161,7 +161,6 @@ export const Container = () => {
       >
         <WalletPageWrapper
           wrapContentInBox={true}
-          cardWidth={680}
           hideNav={true}
           hideHeaderMenu={true}
           noBorderRadius={true}

components/brave_wallet_ui/page/screens/fund-wallet/deposit-funds.tsx

@@ -129,7 +129,6 @@ export const DepositFundsScreen = ({ isAndroid }: Props) => {
           hideNav={isAndroid}
           hideHeader={isAndroid}
           wrapContentInBox={true}
-          cardWidth={456}
           cardHeader={
             <PageTitleHeader
               title={getLocale('braveWalletDepositCryptoButton')}
@@ -147,7 +146,6 @@ export const DepositFundsScreen = ({ isAndroid }: Props) => {
           hideNav={isAndroid}
           hideHeader={isAndroid}
           wrapContentInBox={true}
-          cardWidth={456}
           cardHeader={
             <PageTitleHeader
               title={getLocale('braveWalletDepositCryptoButton')}