wrapped Trades in PageWrapper (gnosis#1246)

Co-authored-by: Leandro Boscariol <[email protected]>

Author: W3stside

src/components/DepositWidget/index.tsx

@@ -37,7 +37,7 @@ interface WithdrawState {
   tokenAddress: string
 }
 
-const BalancesWidget = styled(CardWidgetWrapper)`
+export const BalancesWidget = styled(CardWidgetWrapper)`
   background: var(--color-background-pageWrapper);
   height: 100%;
 

src/components/TradesWidget/index.tsx

@@ -7,11 +7,12 @@ import styled from 'styled-components'
 import { formatPrice, formatAmount, invertPrice, formatAmountFull } from '@gnosis.pm/dex-js'
 
 import FilterTools from 'components/FilterTools'
-import { CardTable, CardWidgetWrapper } from 'components/Layout/Card'
+import { CardTable } from 'components/Layout/Card'
 import { ConnectWalletBanner } from 'components/ConnectWalletBanner'
 import { FileDownloaderLink } from 'components/FileDownloaderLink'
 import { StandaloneCardWrapper } from 'components/Layout/PageWrapper'
 import { TradeRow } from 'components/TradesWidget/TradeRow'
+import { BalancesWidget } from 'components/DepositWidget'
 
 import { useWalletConnection } from 'hooks/useWalletConnection'
 import { useTrades } from 'hooks/useTrades'
@@ -21,10 +22,32 @@ import { Trade } from 'api/exchange/ExchangeApi'
 
 import { toCsv, CsvColumns } from 'utils/csv'
 import { filterTradesFn } from 'utils/filter'
-
 import { getNetworkFromId, divideBN } from 'utils'
 import { symbolOrAddress } from 'utils/display'
 
+const OverflowContainer = styled(BalancesWidget)`
+  > ${CardTable} {
+    > thead > tr:not(.cardRowDrawer) {
+      padding: 0.8rem 2rem 0.8rem 1.6rem;
+    }
+
+    > thead,
+    > tbody {
+      font-size: 1.3rem;
+
+      > tr:not(.cardRowDrawer) {
+        min-height: 4rem;
+        text-align: left;
+        > td,
+        > th {
+          justify-content: flex-start;
+          text-align: left;
+        }
+      }
+    }
+  }
+`
+
 const CsvButtonContainer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -205,7 +228,7 @@ export const TradesWidget: React.FC = () => {
     <ConnectWalletBanner />
   ) : (
     <StandaloneCardWrapper>
-      <CardWidgetWrapper>
+      <OverflowContainer>
         <FilterTools
           className="widgetFilterTools"
           resultName="trades"
@@ -215,7 +238,7 @@ export const TradesWidget: React.FC = () => {
           dataLength={filteredData.length}
         />
         <InnerTradesWidget trades={filteredData} />
-      </CardWidgetWrapper>
+      </OverflowContainer>
     </StandaloneCardWrapper>
   )
 }

src/pages/Trades.tsx

@@ -1 +1,11 @@
-export { default } from 'components/TradesWidget'
+import React from 'react'
+import TradesPage from 'components/TradesWidget'
+import { PageWrapper } from 'components/Layout/PageWrapper'
+
+const Trades: React.FC = () => (
+  <PageWrapper>
+    <TradesPage />
+  </PageWrapper>
+)
+
+export default Trades