Merge pull request #18261 from brave/allow-full-width-portfolio-graph

feat(wallet): Allow Full Width Portfolio Graph
brave · Apr 27, 2023 · 839d3e8 · 839d3e8
2 parents fec6c49 + 156d36a
commit 839d3e8
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 9 deletions.
diff --git a/components/brave_wallet_ui/components/desktop/line-chart/index.tsx b/components/brave_wallet_ui/components/desktop/line-chart/index.tsx
@@ -81,7 +81,7 @@ function LineChart ({
       <LoadingOverlay isLoading={isLoading}>
         <LoadIcon />
       </LoadingOverlay>
-      <ResponsiveContainer width='99%' height='99%'>
+      <ResponsiveContainer width='100%' height='99%'>
         <AreaChart
           data={chartData}
           margin={{ top: 5, left: 0, right: 0, bottom: 0 }}

diff --git a/.../brave_wallet_ui/components/desktop/views/portfolio/components/token-lists/token-list.tsx b/.../brave_wallet_ui/components/desktop/views/portfolio/components/token-lists/token-list.tsx
@@ -56,6 +56,7 @@ interface Props {
   enableScroll?: boolean
   maxListHeight?: string
   estimatedItemSize: number
+  horizontalPadding?: number
 }
 
 export const TokenLists = ({
@@ -67,7 +68,8 @@ export const TokenLists = ({
   maxListHeight,
   hideAssetFilter,
   hideAccountFilter,
-  hideAutoDiscovery
+  hideAutoDiscovery,
+  horizontalPadding
 }: Props) => {
   // routing
   const history = useHistory()
@@ -210,7 +212,7 @@ export const TokenLists = ({
   // render
   return (
     <>
-      <FilterTokenRow>
+      <FilterTokenRow horizontalPadding={horizontalPadding}>
 
         <Column flex={1} style={{ minWidth: '25%' }} alignItems='flex-start'>
           <SearchBar
@@ -234,15 +236,24 @@ export const TokenLists = ({
 
       {enableScroll
         ? (
-          <ScrollableColumn maxHeight={maxListHeight}>
+          <ScrollableColumn
+            maxHeight={maxListHeight}
+            padding={
+              `0px ${horizontalPadding !== undefined
+                ? horizontalPadding
+                : 0}px`
+            }
+          >
             {listUi}
           </ScrollableColumn>
         )
         : listUi
       }
 
       {!hideAddButton &&
-        <ButtonRow>
+        <ButtonRow
+          horizontalPadding={horizontalPadding}
+        >
           <AddButton
             buttonType='secondary'
             onSubmit={showAddAssetsModal}

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
@@ -389,6 +389,7 @@ export const PortfolioOverview = () => {
         networks={networks || []}
         estimatedItemSize={58}
         enableScroll={true}
+        horizontalPadding={20}
         renderToken={({ item, viewMode }) =>
           viewMode === 'list'
             ? <PortfolioAssetItem

diff --git a/components/brave_wallet_ui/components/desktop/views/portfolio/style.ts b/components/brave_wallet_ui/components/desktop/views/portfolio/style.ts
@@ -60,13 +60,22 @@ export const PriceText = styled.span`
   color: ${(p) => p.theme.color.text01};
 `
 
-export const ButtonRow = styled.div<{ noMargin?: boolean }>`
+export const ButtonRow = styled.div<
+  {
+    noMargin?: boolean,
+    horizontalPadding?: number
+  }>`
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
   margin: ${(p) => p.noMargin ? '0px' : '20px 0px'};
+  padding: 0px ${(p) =>
+    p.horizontalPadding !== undefined
+      ? p.horizontalPadding
+      : 0
+  }px;
 `
 
 export const BalanceRow = styled.div<{ gap?: string }>`
@@ -241,12 +250,20 @@ export const CoinGeckoText = styled.span`
   margin: 15px 0px;
 `
 
-export const FilterTokenRow = styled.div`
+export const FilterTokenRow = styled.div<
+  {
+    horizontalPadding?: number
+  }>`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
   gap: 14px;
+  padding: 0px ${(p) =>
+    p.horizontalPadding !== undefined
+      ? p.horizontalPadding
+      : 0
+  }px;
 `
 
 export const NftMultimedia = styled.iframe<{ visible?: boolean }>`

diff --git a/...nents/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.style.ts b/...nents/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.style.ts
@@ -41,7 +41,8 @@ export const LayoutCardWrapper = styled.div<{
 
 export const ContainerCard = styled.div<
   {
-    cardOverflow?: 'auto' | 'hidden' | 'visible'
+    cardOverflow?: 'auto' | 'hidden' | 'visible',
+    noPadding?: boolean
   }>`
   display: flex;
   flex-direction: column;
@@ -51,7 +52,7 @@ export const ContainerCard = styled.div<
   box-sizing: border-box;
   justify-content: flex-start;
   align-items: center;
-  padding: 20px;
+  padding: ${(p) => p.noPadding ? 0 : 20}px;
   width: 100%;
   min-height: ${minCardHeight}px;
   max-height: calc(100vh - 132px);

diff --git a/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.tsx b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.tsx
@@ -111,6 +111,7 @@ export const WalletPageWrapper = (props: Props) => {
           >
             <ContainerCard
               cardOverflow={cardOverflow}
+              noPadding={walletLocation === WalletRoutes.Portfolio}
             >
               {children}
             </ContainerCard>