From c595e2b792e5fbbeeb9b288ed2ed62297879e7f1 Mon Sep 17 00:00:00 2001 From: Douglas Daniel Date: Wed, 4 Sep 2024 11:24:32 -0500 Subject: [PATCH] style(wallet): Segmented Control Sizing and Padding --- .../explorer_web3_header.style.ts | 18 ++++++++++++++ .../explorer_web3_header.tsx} | 20 ++++++++++++---- .../components/desktop/views/crypto/index.tsx | 2 +- .../accounts-and-transctions-list/index.tsx | 4 ++-- .../views/portfolio/portfolio-overview.tsx | 2 +- .../segmented_control.style.ts | 24 +++++++++++++------ .../segmented_control/segmented_control.tsx | 6 ++--- 7 files changed, 57 insertions(+), 19 deletions(-) create mode 100644 components/brave_wallet_ui/components/desktop/card-headers/explorer_web3_header.style.ts rename components/brave_wallet_ui/components/desktop/{views/explore_web3/explore_web3_header.tsx => card-headers/explorer_web3_header.tsx} (50%) 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 new file mode 100644 index 000000000000..3b6a44938a15 --- /dev/null +++ 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/components/brave_wallet_ui/components/desktop/views/explore_web3/explore_web3_header.tsx b/components/brave_wallet_ui/components/desktop/card-headers/explorer_web3_header.tsx similarity index 50% rename from components/brave_wallet_ui/components/desktop/views/explore_web3/explore_web3_header.tsx rename to components/brave_wallet_ui/components/desktop/card-headers/explorer_web3_header.tsx index 161496b4df53..f2944dea3024 100644 --- a/components/brave_wallet_ui/components/desktop/views/explore_web3/explore_web3_header.tsx +++ b/components/brave_wallet_ui/components/desktop/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 + return ( + + + + ) } diff --git a/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx b/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx index 6826c61e0473..cec1b73ea8f4 100644 --- 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/components/brave_wallet_ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx b/components/brave_wallet_ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx index 637c344066fb..842c5504af8f 100644 --- a/components/brave_wallet_ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx +++ b/components/brave_wallet_ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx @@ -217,7 +217,7 @@ export const AccountsAndTransactionsList = ({ )} @@ -300,7 +300,7 @@ export const AccountsAndTransactionsList = ({ )} 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 index 067b9e018c25..c8f46cf7f246 100644 --- 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 && ( )} 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 index 9a3998a08494..29d6b8072898 100644 --- 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 -)` - margin: 24px 0 10px 0; -` +export const SegmentedControl = styled(LeoSegmentedControl).attrs({ + size: window.innerWidth <= layoutPanelWidth ? 'small' : 'default' +})`` 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 index 95bba742d6f5..e880c8e8cad3 100644 --- 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 ( - + {