style(wallet): Segmented Control Sizing and Padding

brave · Sep 4, 2024 · b06f3c2 · b06f3c2
1 parent 745f2e5
commit b06f3c2
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 19 deletions.
diff --git a/components/brave_wallet_ui/components/desktop/card-headers/explorer_web3_header.style.ts b/components/brave_wallet_ui/components/desktop/card-headers/explorer_web3_header.style.ts
@@ -0,0 +1,18 @@
+// Copyright (c) 2023 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 https://mozilla.org/MPL/2.0/.
+import styled from 'styled-components'
+
+// Shared Styles
+import { Row } from '../../shared/style'
+import {
+  layoutSmallWidth //
+} from '../wallet-page-wrapper/wallet-page-wrapper.style'
+
+export const HeaderWrapper = styled(Row)`
+  padding: 24px 24px 0px 24px;
+  @media screen and (max-width: ${layoutSmallWidth}px) {
+    padding: 16px 16px 0px 16px;
+  }
+`
diff --git a/...iews/explore_web3/explore_web3_header.tsx → ...top/card-headers/explorer_web3_header.tsx b/...iews/explore_web3/explore_web3_header.tsx → ...top/card-headers/explorer_web3_header.tsx
@@ -5,15 +5,25 @@
 
 import * as React from 'react'
 
-// utils
-import { ExploreNavOptions } from '../../../../options/nav-options'
+// Options
+import { ExploreNavOptions } from '../../../options/nav-options'
+
+// Components
 import {
   SegmentedControl //
-} from '../../../shared/segmented_control/segmented_control'
+} from '../../shared/segmented_control/segmented_control'
 
-// components
+// Styled Components
+import { HeaderWrapper } from './explorer_web3_header.style'
 
 export const ExploreWeb3Header = () => {
   // render
-  return <SegmentedControl navOptions={ExploreNavOptions} />
+  return (
+    <HeaderWrapper>
+      <SegmentedControl
+        maxWidth='384px'
+        navOptions={ExploreNavOptions}
+      />
+    </HeaderWrapper>
+  )
 }
diff --git a/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx b/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx
@@ -41,7 +41,7 @@ import { Column } from '../../../shared/style'
 // components
 import getWalletPageApiProxy from '../../../../page/wallet_page_api_proxy'
 import { WalletBanner } from '../../wallet-banner/index'
-import { ExploreWeb3Header } from '../explore_web3/explore_web3_header'
+import { ExploreWeb3Header } from '../../card-headers/explorer_web3_header'
 import {
   EditVisibleAssetsModal //
 } from '../../popup-modals/edit-visible-assets-modal/index'

diff --git a/..._ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx b/..._ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx
@@ -217,7 +217,7 @@ export const AccountsAndTransactionsList = ({
           <Row padding='24px 0px'>
             <SegmentedControl
               navOptions={PortfolioAssetOptions}
-              width={'384px'}
+              maxWidth='384px'
             />
           </Row>
         )}
@@ -300,7 +300,7 @@ export const AccountsAndTransactionsList = ({
             <Row padding='24px 0px'>
               <SegmentedControl
                 navOptions={PortfolioAssetOptions}
-                width={'384px'}
+                maxWidth='384px'
               />
             </Row>
           )}

diff --git a/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx b/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx
@@ -590,7 +590,7 @@ export const PortfolioOverview = () => {
             {!hidePortfolioNFTsTab && (
               <SegmentedControl
                 navOptions={PortfolioNavOptions}
-                width={'384px'}
+                maxWidth='384px'
               />
             )}
           </ControlsRow>

diff --git a/components/brave_wallet_ui/components/shared/segmented_control/segmented_control.style.ts b/components/brave_wallet_ui/components/shared/segmented_control/segmented_control.style.ts
@@ -8,19 +8,29 @@ import LeoSegmentedControl, {
   SegmentedControlProps
 } from '@brave/leo/react/segmentedControl'
 
-export const StyledWrapper = styled.div<{ width?: string }>`
-  flex: 1;
+// Shared Styles
+import {
+  layoutPanelWidth,
+  layoutSmallWidth //
+} from '../../desktop/wallet-page-wrapper/wallet-page-wrapper.style'
+
+export const StyledWrapper = styled.div<{ maxWidth?: string }>`
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  z-index: 0px;
+  width: 100%;
+  max-width: ${(p) => p.maxWidth ?? 'unset'};
+  --leo-segmented-control-width: 100%;
+  @media screen and (max-width: ${layoutSmallWidth}px) {
+    max-width: unset;
+  }
 `
 
-export const SegmentedControl = styled(
-  LeoSegmentedControl
-)<SegmentedControlProps>`
-  margin: 24px 0 10px 0;
-`
+export const SegmentedControl = styled(LeoSegmentedControl).attrs({
+  size: window.innerWidth <= layoutPanelWidth ? 'small' : 'default'
+})<SegmentedControlProps>``
 
 export const ControlItemWrapper = styled.div`
   text-align: center;

diff --git a/components/brave_wallet_ui/components/shared/segmented_control/segmented_control.tsx b/components/brave_wallet_ui/components/shared/segmented_control/segmented_control.tsx
@@ -22,10 +22,10 @@ import {
 
 interface Props {
   navOptions: NavOption[]
-  width?: string
+  maxWidth?: string
 }
 
-export const SegmentedControl = ({ navOptions, width }: Props) => {
+export const SegmentedControl = ({ navOptions, maxWidth }: Props) => {
   // Routing
   const history = useHistory()
   const { pathname: walletLocation, hash } = useLocation()
@@ -40,7 +40,7 @@ export const SegmentedControl = ({ navOptions, width }: Props) => {
 
   // Render
   return (
-    <StyledWrapper width={width}>
+    <StyledWrapper maxWidth={maxWidth}>
       <StyledSegmentedControl
         value={selectedRoute}
         onChange={({ value }) => {