fix(swap): Update Nav Theme to Swap Theme

components/brave_wallet_ui/components/desktop/buy-send-swap-deposit-nav/buy-send-swap-deposit-button/buy-send-swap-deposit-button.style.ts

@@ -8,12 +8,6 @@ import styled from 'styled-components'
 import { WalletButton } from '../../../shared/style'
 
 export const StyledButton = styled(WalletButton) <{ isTab?: boolean }>`
-  --button-color: ${(p) => p.theme.color.text02};
-  --button-background: ${(p) => p.theme.color.background02};
-  &:hover {
-    --button-color: ${(p) => p.theme.color.text01};
-    --button-background: ${(p) => p.theme.color.divider01};
-  }
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -22,14 +16,18 @@ export const StyledButton = styled(WalletButton) <{ isTab?: boolean }>`
   padding: ${(p) => p.isTab ? 10 : 18}px;
   outline: none;
   border: none;
-  background-color: var(--button-background);
+  background-color: var(--nav-button-background);
   border-bottom: ${(p) => p.isTab ? 'none' : `1px solid ${p.theme.color.divider01}`};
   border-radius: ${(p) => p.isTab ? 6 : 0}px;
   margin-bottom: ${(p) => p.isTab ? 16 : 0}px;
-  color: var(--button-color);
+  color: var(--nav-button-color);
   font-weight: 600;
   font-size: 16px;
   font-family: 'Poppins';
+  &:hover {
+    color: var(--nav-button-color-hover);
+    background-color: var(--nav-button-background-hover);
+  }
   &:last-child { 
     border-bottom: none;
     margin-bottom: 0px;
@@ -42,6 +40,6 @@ export const ButtonIcon = styled.div <{ icon: string, isTab?: boolean }>`
   mask-size: contain;
   width: 20px;
   height: 20px;
-  background-color: var(--button-color);
+  background-color: var(--nav-button-color);
   margin-right: ${(p) => p.isTab ? 0 : 10}px;
 `

components/brave_wallet_ui/components/desktop/buy-send-swap-deposit-nav/buy-send-swap-deposit-button/buy-send-swap-deposit-button.tsx

@@ -21,10 +21,11 @@ import { StyledButton, ButtonIcon } from './buy-send-swap-deposit-button.style'
 export interface Props {
   option: NavOption
   isTab?: boolean
+  isSwap?: boolean
 }
 
 export const BuySendSwapDepositButton = (props: Props) => {
-  const { option, isTab } = props
+  const { option, isTab, isSwap } = props
 
   // State
   const [active, setActive] = React.useState(false)
@@ -59,6 +60,7 @@ export const BuySendSwapDepositButton = (props: Props) => {
         orientation='right'
         distance={46}
         showTip={!!isTab && active}
+        isSwap={isSwap}
       />
     </StyledButton>
   )

components/brave_wallet_ui/components/desktop/buy-send-swap-deposit-nav/buy-send-swap-deposit-nav.style.ts

@@ -10,10 +10,10 @@ export const Wrapper = styled.div<{ isTab?: boolean }>`
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  background-color: ${(p) => p.theme.color.background02};
+  background-color: var(--nav-background);
   border-radius: ${(p) => p.isTab ? 12 : 8}px;
   padding: ${(p) => p.isTab ? 8 : 0}px;
-  border: 2px solid ${(p) => p.theme.color.divider01};
+  border: 2px solid var(--nav-border);
   width: ${(p) => p.isTab ? 'unset' : '285px'};
   position: ${(p) => p.isTab ? 'fixed' : 'relative'};
   top: ${(p) => p.isTab ? '100px' : 'unset'};

components/brave_wallet_ui/components/desktop/buy-send-swap-deposit-nav/buy-send-swap-deposit-nav.tsx

@@ -13,16 +13,35 @@ import { BuySendSwapDepositButton } from './buy-send-swap-deposit-button/buy-sen
 
 // Styled Components
 import { Wrapper } from './buy-send-swap-deposit-nav.style'
+import './nav-theme.css'
 
 export interface Props {
   isTab?: boolean
+  isSwap?: boolean
 }
 
 // Transactions is not an option for Desktop.
 const buttonOptions = NavOptions.filter((option) => option.id !== 'transactions')
 
+const BRAVE_SWAP_DATA_THEME_KEY = 'brave-swap-data-theme'
+
 export const BuySendSwapDepositNav = (props: Props) => {
-  const { isTab } = props
+  const { isTab, isSwap } = props
+
+  React.useEffect(() => {
+    if (isSwap) {
+      const userTheme = window.localStorage.getItem(BRAVE_SWAP_DATA_THEME_KEY)
+      // Do nothing if user has not set a theme.
+      if (userTheme === null) {
+        return
+      }
+      // Update data-theme if user has selected a theme.
+      document.documentElement.setAttribute('data-theme', userTheme)
+      return
+    }
+    // Remove data-theme attribute if not on Swap screen.
+    document.documentElement.removeAttribute('data-theme')
+  }, [isSwap])
 
   const filteredButtonOptions = React.useMemo(() => {
     if (!isTab) {
@@ -35,7 +54,7 @@ export const BuySendSwapDepositNav = (props: Props) => {
   return (
     <Wrapper isTab={isTab}>
       {filteredButtonOptions.map((option) =>
-        <BuySendSwapDepositButton isTab={isTab} option={option} key={option.id} />
+        <BuySendSwapDepositButton isSwap={isSwap} isTab={isTab} option={option} key={option.id} />
       )}
     </Wrapper>
   )

components/brave_wallet_ui/components/desktop/buy-send-swap-deposit-nav/nav-theme.css

@@ -0,0 +1,54 @@
+/* Copyright (c) 2022 The Brave Authors. All rights reserved.
+   This Source Code Form is subject to the terms of the Mozilla Public
+   License, v. 2.0. If a copy of the MPL was not distributed with this file,
+   you can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:root {
+  /* Light Variables */
+  --nav-background: var(--color-legacy-background1);
+  --nav-border: var(--color-legacy-divider1);
+  --nav-button-color: var(--color-legacy-text2);
+  --nav-button-background: var(--color-legacy-background1);
+  --nav-button-color-hover: var(--color-legacy-text1);
+  --nav-button-background-hover: var(--color-legacy-divider1);
+  /* #1E2029 is not in the old design system */
+  --nav-tool-tip-background: #1e2029;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Dark Variables */
+    --nav-background: var(--color-legacy-background1);
+    --nav-border: var(--color-legacy-divider1);
+    --nav-button-color: var(--color-legacy-text2);
+    --nav-button-background: var(--color-legacy-background1);
+    --nav-button-color-hover: var(--color-legacy-text1);
+    --nav-button-background-hover: var(--color-legacy-divider1);
+    /* #17171F is not in the old design system */
+    --nav-tool-tip-background: #17171f;
+  }
+}
+
+html[data-theme='light'] {
+  /* Light Variables */
+  --nav-background: var(--color-legacy-background1);
+  --nav-border: var(--color-legacy-divider1);
+  --nav-button-color: var(--color-legacy-text2);
+  --nav-button-background: var(--color-legacy-background1);
+  --nav-button-color-hover: var(--color-legacy-text1);
+  --nav-button-background-hover: var(--color-legacy-divider1);
+  /* #1E2029 is not in the old design system */
+  --nav-tool-tip-background: #1e2029;
+}
+
+html[data-theme='dark'] {
+  /* Dark Variables */
+  --nav-background: var(--color-legacy-background1);
+  --nav-border: var(--color-legacy-divider1);
+  --nav-button-color: var(--color-legacy-text2);
+  --nav-button-background: var(--color-legacy-background1);
+  --nav-button-color-hover: var(--color-legacy-text1);
+  --nav-button-background-hover: var(--color-legacy-divider1);
+  /* #17171F is not in the old design system */
+  --nav-tool-tip-background: #17171f;
+}

components/brave_wallet_ui/components/shared/nav-tooltip/nav-tooltip.style.ts

@@ -7,6 +7,7 @@ import styled from 'styled-components'
 
 export const Tip = styled.div<{
   horizontalAlign?: 'left' | 'right' | 'center'
+  isSwap?: boolean
   orientation: 'top' | 'bottom' | 'right'
   distance: number
 }>`
@@ -19,7 +20,7 @@ export const Tip = styled.div<{
   transform: translateY(var(--y-tip-translation)) translateX(var(--x-tip-translation));
   padding: 8px 16px;
   color: ${(p) => p.theme.palette.white};
-  background: ${(p) => p.theme.palette.black};
+  background: ${(p) => p.isSwap ? 'var(--nav-tool-tip-background)' : p.theme.palette.black};
   z-index: 10;
   font-family: Poppins;
   font-size: 14px;
@@ -31,6 +32,7 @@ export const Tip = styled.div<{
 export const Pointer = styled.div<{
   orientation: 'top' | 'bottom' | 'right'
   distance: number
+  isSwap?: boolean
 }>`
   --top-rotation: 180deg;
   --bottom-rotation: 0deg;
@@ -44,5 +46,6 @@ export const Pointer = styled.div<{
   transform: translateY(var(--y-translation)) translateX(var(--x-translation)) rotate(var(--${(p) => p.orientation}-rotation));
   border-width: 0 7px 8px 7px;
   z-index: 10;
-  border-color: transparent transparent ${(p) => p.theme.palette.black} transparent;
+  /* --nav-tool-tip-background is closer aligned with swap design theme */
+  border-color: transparent transparent ${(p) => p.isSwap ? 'var(--nav-tool-tip-background)' : p.theme.palette.black} transparent;
 `

components/brave_wallet_ui/components/shared/nav-tooltip/nav-tooltip.tsx

@@ -14,10 +14,11 @@ export interface Props {
   orientation: 'top' | 'bottom' | 'right'
   distance: number
   showTip: boolean
+  isSwap?: boolean
 }
 
 export const NavTooltip = (props: Props) => {
-  const { text, horizontalAlign, orientation, distance, showTip } = props
+  const { text, horizontalAlign, orientation, distance, showTip, isSwap } = props
 
   if (!showTip) {
     return null
@@ -25,11 +26,12 @@ export const NavTooltip = (props: Props) => {
 
   return (
     <>
-      <Pointer distance={distance} orientation={orientation} />
+      <Pointer distance={distance} orientation={orientation} isSwap={isSwap} />
       <Tip
         distance={distance}
         orientation={orientation}
         horizontalAlign={horizontalAlign}
+        isSwap={isSwap}
       >
         {text}
       </Tip>

components/brave_wallet_ui/page/screens/swap/swap.tsx

@@ -88,7 +88,7 @@ export const Swap = () => {
   const swapServiceMojo = getSwapService()
 
   React.useEffect(() => {
-    ;(async () => {
+    ; (async () => {
       const results = await Promise.all(
         networks.map(async e => (await swapServiceMojo.isSwapSupported(e.chainId)).result)
       )
@@ -129,7 +129,7 @@ export const Swap = () => {
 
   return (
     <div>
-      <BuySendSwapDepositNav isTab={true} />
+      <BuySendSwapDepositNav isTab={true} isSwap={true} />
       {selectedNetwork && selectedAccount && (
         <SwapInterface
           getLocale={getLocale}