review(josheleonard): review fixes (part 1)

components/brave_wallet_ui/options/gas-fee-options.ts

@@ -22,4 +22,4 @@ export const gasFeeOptions: GasFeeOption[] = [
     name: 'braveSwapFast',
     icon: 'rocket'
   }
-]
+]

components/brave_wallet_ui/page/screens/swap/components/buttons/account-list-button/account-list-button.style.ts

@@ -22,4 +22,4 @@ export const Button = styled(StyledButton)`
   &:hover {
     background-color: var(--background-color-hover);
   }
-`
+`

components/brave_wallet_ui/page/screens/swap/components/buttons/select-token-or-network/select-token-or-network.style.ts

@@ -5,7 +5,6 @@
 
 import styled from 'styled-components'
 import * as leo from '@brave/leo/tokens/css'
-import { SelectTokenButtonStyleProps } from './select-token-or-network'
 import { StyledButton, Icon, Row, Text } from '../../shared-swap.styles'
 
 export const Button = styled(StyledButton) <SelectTokenButtonStyleProps>`
@@ -83,3 +82,12 @@ export const GasBubble = styled(Row)`
 export const NotSupportedText = styled(Text)`
   color: ${(p) => p.theme.palette.white};
 `
+
+export interface SelectTokenButtonStyleProps {
+  buttonType?: 'primary' | 'secondary'
+  buttonSize?: 'big' | 'medium' | 'small'
+  moreRightPadding?: boolean
+  hasBackground?: boolean
+  hasShadow?: boolean
+  networkNotSupported?: boolean
+}

components/brave_wallet_ui/page/screens/swap/components/buttons/select-token-or-network/select-token-or-network.tsx

@@ -28,7 +28,8 @@ import {
   ButtonIcon,
   FuelTank,
   NotSupportedText,
-  GasBubble
+  GasBubble,
+  SelectTokenButtonStyleProps
 } from './select-token-or-network.style'
 import {
   Text,
@@ -38,15 +39,6 @@ import {
   AssetIcon
 } from '../../shared-swap.styles'
 
-export interface SelectTokenButtonStyleProps {
-  buttonType?: 'primary' | 'secondary'
-  buttonSize?: 'big' | 'medium' | 'small'
-  moreRightPadding?: boolean
-  hasBackground?: boolean
-  hasShadow?: boolean
-  networkNotSupported?: boolean
-}
-
 interface Props extends SelectTokenButtonStyleProps {
   onClick: () => void
   text: string | undefined

components/brave_wallet_ui/page/screens/swap/components/buttons/standard-button/standard-button.tsx

@@ -3,12 +3,10 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import * as React from 'react'
+import styled from 'styled-components'
+import { StyledButton } from '../../shared-swap.styles'
 
-// Styled Components
-import { Button } from './standard-button.style'
-
-export interface StandardButtonStyleProps {
+interface Props {
   isSelected?: boolean
   buttonSize?: 'normal' | 'small'
   buttonStyle?: 'round' | 'square'
@@ -20,40 +18,81 @@ export interface StandardButtonStyleProps {
   marginRight?: number
 }
 
-interface Props extends StandardButtonStyleProps {
-  buttonText: string
-  onClick: () => void
-}
-
-export const StandardButton = (props: Props) => {
-  const {
-    isSelected,
-    buttonSize,
-    buttonStyle,
-    buttonText,
-    buttonType,
-    buttonWidth,
-    disabled,
-    horizontalMargin,
-    marginRight,
-    onClick,
-    verticalMargin
-  } = props
-
-  return (
-    <Button
-      buttonStyle={buttonStyle}
-      buttonType={buttonType}
-      buttonWidth={buttonWidth}
-      disabled={disabled}
-      horizontalMargin={horizontalMargin}
-      onClick={onClick}
-      verticalMargin={verticalMargin}
-      buttonSize={buttonSize}
-      isSelected={isSelected}
-      marginRight={marginRight}
-    >
-      {buttonText}
-    </Button>
-  )
-}
+export const StandardButton = styled(StyledButton) <Props>`
+  --button-background: ${(p) =>
+    p.buttonStyle === 'square'
+      ? p.theme.color.divider01
+      : p.buttonType === 'secondary'
+        ? p.theme.color.background01
+        : p.theme.color.interactive05};
+  --button-background-hover: ${(p) =>
+    p.buttonStyle === 'square'
+      ? p.theme.color.interactive05
+      : p.theme.color.interactive04};
+  --vertical-margin: ${(p) => p.verticalMargin ?? 0}px;
+  --horizontal-margin: ${(p) => p.horizontalMargin ?? 0}px;
+  --border-secondary-selected: ${(p) => p.theme.color.interactive05};
+  --button-color-disabled: #ffffff;
+  @media (prefers-color-scheme: dark) {
+    --button-background: ${(p) =>
+      p.buttonStyle === 'square'
+        ? p.theme.color.divider01
+        : p.buttonType === 'secondary'
+          ? p.theme.color.background01
+          : p.theme.palette.blurple500};
+    --button-background-hover: ${(p) =>
+      p.buttonStyle === 'square'
+        ? p.theme.palette.blurple500
+        : p.theme.color.interactive04};
+    --border-secondary-selected: ${(p) => p.theme.color.focusBorder};
+    /* #677078 does not exist in design system */
+    --button-color-disabled: #677078;
+  }
+  background-color: var(--button-background);
+  border-radius: ${(p) => (p.buttonStyle === 'square' ? '0px' : '48px')};
+  border: ${(p) =>
+    p.buttonType === 'secondary'
+      ? p.isSelected
+        ? '1px solid var(--border-secondary-selected)'
+        : `1px solid ${p.theme.color.interactive08}`
+      : 'none'};
+  color: ${(p) =>
+    p.buttonType === 'secondary'
+      ? p.isSelected
+        ? 'var(--border-secondary-selected)'
+        : p.theme.color.text03
+      : p.buttonStyle === 'square'
+        ? p.theme.color.text02
+        : p.theme.palette.white};
+  font-size: ${(p) =>
+    p.buttonStyle === 'square' || p.buttonSize === 'small' ? '14px' : '16px'};
+  margin: var(--vertical-margin) var(--horizontal-margin);
+  margin-right: ${(p) => p.marginRight ?? 0}px;
+  padding: ${(p) => (p.buttonSize === 'small' ? '6px 15px' : '18px')};
+  width: ${(p) =>
+    p.buttonWidth === 'dynamic'
+      ? 'unset'
+      : p.buttonWidth === 'full'
+        ? '100%'
+        : `${p.buttonWidth}px`};
+  &:hover:not([disabled]) {
+    background-color: ${(p) =>
+    p.buttonType === 'secondary'
+      ? p.theme.color.background01
+      : 'var(--button-background-hover)'};
+    border: ${(p) =>
+    p.buttonType === 'secondary'
+      ? '1px solid var(--border-secondary-selected)'
+      : 'none'};
+    color: ${(p) =>
+    p.buttonType === 'secondary'
+      ? p.isSelected
+        ? 'var(--border-secondary-selected)'
+        : p.theme.color.text03
+      : p.theme.palette.white};
+  }
+  :disabled {
+    background-color: ${(p) => p.theme.color.disabled};
+    color: var(--button-color-disabled);
+  }
+`

components/brave_wallet_ui/page/screens/swap/components/swap/account-modal/account-modal.tsx

@@ -92,7 +92,13 @@ export const AccountModal = (props: Props) => {
 
   return (
     <ModalBox>
-      {/* Hiding Porfolio Section until we support it */}
+      {/*
+        * TODO(onyb): this should be removed since the account dropdown is
+        * eventually going to be replaced with Send-like UX.
+        * 
+        * Hiding Porfolio Section until we support/remove it
+        */
+      }
       {/* <Column
         columnWidth='full'
         verticalPadding={16}

components/brave_wallet_ui/page/screens/swap/components/swap/account-selector/account-selector.tsx

@@ -9,13 +9,6 @@ import * as React from 'react'
 import {
   WalletSelectors
 } from '../../../../../../common/selectors'
-import {
-  useUnsafeWalletSelector
-} from '../../../../../../common/hooks/use-safe-selector'
-
-import {
-  useGetSelectedChainQuery
-} from '../../../../../../common/slices/api.slice'
 
 // Utils
 import {
@@ -26,6 +19,12 @@ import {
 import {
   useOnClickOutside
 } from '../../../../../../common/hooks/useOnClickOutside'
+import {
+  useUnsafeWalletSelector
+} from '../../../../../../common/hooks/use-safe-selector'
+import {
+  useGetSelectedChainQuery
+} from '../../../../../../common/slices/api.slice'
 
 // Types
 import {

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

@@ -39,7 +39,6 @@ import {
 } from '../account-modal/account-modal'
 
 // Hooks
-// import { useNetworkFees } from '~/hooks/useNetworkFees'
 import {
   useOnClickOutside
 } from '../../../../../../common/hooks/useOnClickOutside'
@@ -96,8 +95,6 @@ export const Header = (props: Props) => {
     }, [setNetwork, refreshBlockchainState])
 
   // Hooks
-  // const { getNetworkFeeFiatEstimate } = useNetworkFees()
-
   // Click away for network selector
   useOnClickOutside(
     networkSelectorRef,

components/brave_wallet_ui/page/screens/swap/components/swap/select-token-modal/select-token-modal.tsx

@@ -195,13 +195,14 @@ export const SelectTokenModal = React.forwardRef<HTMLDivElement, Props>(
         </ScrollContainer>
         {showZeroBalanceButton && (
           <Button
-            buttonText={buttonText}
             onClick={toggleHideTokensWithZeroBalances}
             buttonStyle='square'
             buttonWidth='full'
             horizontalMargin={0}
             verticalMargin={0}
-          />
+          >
+            {buttonText}
+          </Button>
         )}
       </StandardModal>
     )

components/brave_wallet_ui/page/screens/swap/components/swap/settings/swap-settings-modal.tsx

@@ -169,15 +169,16 @@ export const SwapSettingsModal = (props: Props) => {
               <Row horizontalAlign='flex-start'>
                 {slippagePresets.map(preset => (
                   <StandardButton
-                    buttonText={`${preset}%`}
                     onClick={() => setSlippageTolerance(preset)}
                     buttonType='secondary'
                     buttonSize='small'
                     buttonWidth={64}
                     isSelected={slippageTolerance === preset}
                     marginRight={8}
                     key={preset}
-                  />
+                  >
+                    {preset}%
+                  </StandardButton>
                 ))}
               </Row>
               <SlippageInput

components/brave_wallet_ui/page/screens/swap/components/swap/swap-container/swap-container.style.ts

@@ -25,9 +25,8 @@ export const Wrapper = styled(StyledDiv)`
   @media screen and (max-width: 570px) {
     padding: 68px 0px;
   }
-}
 `
-
+  
 export const Background = styled(StyledDiv) <{
   height: number
   network: string