style(wallet): Portfolio Activity Tab Padding (uplift to 1.72.x) (#26169

) Uplift of #26155 (squashed) to beta
brave · Oct 24, 2024 · e32e659 · e32e659
1 parent d7efa3d
commit e32e659
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 15 deletions.
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
@@ -643,6 +643,8 @@ export const PortfolioOverview = () => {
         >
           <ActivityWrapper
             fullWidth={true}
+            fullHeight={true}
+            justifyContent='flex-start'
             padding='0px 16px'
           >
             <TransactionsScreen />

diff --git a/components/brave_wallet_ui/page/screens/transactions/transaction-screen.styles.ts b/components/brave_wallet_ui/page/screens/transactions/transaction-screen.styles.ts
@@ -5,10 +5,28 @@
 
 import styled from 'styled-components'
 
+// Icons
+import {
+  NoTransactionsIconDark,
+  NoTransactionsIconLight
+} from '../../../assets/svg-icons/empty-state-icons'
+
 export const SearchAndFiltersRow = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
   gap: 14px;
 `
+
+export const EmptyTransactionsIcon = styled.div`
+  width: 100px;
+  height: 100px;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  background-position: center;
+  background-image: url(${NoTransactionsIconLight});
+  @media (prefers-color-scheme: dark) {
+    background-image: url(${NoTransactionsIconDark});
+  }
+`
diff --git a/components/brave_wallet_ui/page/screens/transactions/transactions-screen.tsx b/components/brave_wallet_ui/page/screens/transactions/transactions-screen.tsx
@@ -63,6 +63,7 @@ import {
   LoadingSkeletonStyleProps,
   Skeleton
 } from '../../../components/shared/loading-skeleton/styles'
+import { EmptyTransactionsIcon } from './transaction-screen.styles'
 
 const txListItemSkeletonProps: LoadingSkeletonStyleProps = {
   width: '100%',
@@ -249,8 +250,9 @@ export const TransactionsScreen: React.FC = () => {
               <Column
                 fullHeight
                 gap={'24px'}
+                padding={isPanel ? '0px 0px 32px 0px' : '0px'}
               >
-                <VerticalSpacer space={14} />
+                <EmptyTransactionsIcon />
                 <Text
                   textSize='18px'
                   isBold
@@ -263,24 +265,29 @@ export const TransactionsScreen: React.FC = () => {
               </Column>
             )}
 
-            <Column
-              fullWidth={true}
-              fullHeight={true}
-              justifyContent='flex-start'
-            >
-              {filteredTransactions.map((tx, i) => (
-                <PortfolioTransactionItem
-                  key={tx.id}
-                  transaction={tx}
-                  onClick={onClickTransaction}
-                />
-              ))}
-            </Column>
+            {filteredTransactions.length !== 0 && (
+              <Column
+                fullWidth={true}
+                fullHeight={true}
+                justifyContent='flex-start'
+              >
+                {filteredTransactions.map((tx) => (
+                  <PortfolioTransactionItem
+                    key={tx.id}
+                    transaction={tx}
+                    onClick={onClickTransaction}
+                  />
+                ))}
+              </Column>
+            )}
 
             {txsForSelectedChain &&
               txsForSelectedChain.length !== 0 &&
               filteredTransactions.length === 0 && (
-                <Column fullHeight>
+                <Column
+                  fullHeight
+                  padding={isPanel ? '32px 0px 64px 0px' : '0px'}
+                >
                   <Text textSize='14px'>
                     {getLocale('braveWalletConnectHardwareSearchNothingFound')}
                   </Text>