Fix landing page margins

centrifuge · Oct 23, 2024 · ba48e5a · ba48e5a
1 parent 3d38426
commit ba48e5a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 33 deletions.
diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx
@@ -147,7 +147,6 @@ export const WalletInner = styled(Stack)`
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     justify-content: flex-end;
     height: 50px;
-    margin-right: 30px;
     margin-top: 15px;
   }
 `
@@ -200,7 +199,6 @@ export const ContentWrapper = styled.div`
   @media (min-width: ${({ theme }) => theme.breakpoints['M']}) and (max-width: ${({ theme }) =>
       theme.breakpoints['L']}) {
     margin-left: 7vw;
-    width: calc(100% - 7vw);
     margin-top: 10px;
   }
 

diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -34,26 +34,14 @@ const StyledRouterTextLink = styled(RouterTextLink)`
   text-decoration: none;
 `
 const StyledCard = styled(Card)`
-  width: 100%;
-  max-width: 100%;
   height: 320px;
-  margin-right: 12px;
-  margin-bottom: 12px;
   padding: 12px;
   border: 1px solid rgba(207, 207, 207, 0.5);
 
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.textPrimary};
     box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   }
-
-  @media (min-width: ${({ theme }) => theme.breakpoints['M']}) {
-    width: auto;
-  }
-
-  @media (min-width: ${({ theme }) => theme.breakpoints['XL']}) {
-    width: auto;
-  }
 `
 
 const StyledText = styled(Text)`

diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx
@@ -1,6 +1,6 @@
 import Centrifuge, { Pool, PoolMetadata } from '@centrifuge/centrifuge-js'
 import { useCentrifuge } from '@centrifuge/centrifuge-react'
-import { Box, IconChevronRight, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Grid, IconChevronRight, Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useLocation } from 'react-router'
 import styled from 'styled-components'
@@ -82,7 +82,7 @@ export function PoolList() {
     <Stack>
       <Stack>
         <Box overflow="auto">
-          <Box as="ul" role="list" display="flex" flexWrap="wrap">
+          <Grid as="ul" columns={[1, 2, 3]} gap={2}>
             {metadataIsLoading
               ? Array(6)
                   .fill(true)
@@ -92,21 +92,16 @@ export function PoolList() {
                     </Box>
                   ))
               : filteredPools.map((pool) => (
-                  <PoolCardBox
-                    as="li"
-                    key={pool.poolId}
-                    status={pool.status}
-                    width={isLarge ? '33%' : isMedium ? '48%' : '100%'}
-                  >
+                  <PoolCardBox as="li" key={pool.poolId} status={pool.status}>
                     <PoolCard {...pool} />
                   </PoolCardBox>
                 ))}
-          </Box>
+          </Grid>
         </Box>
       </Stack>
       {!metadataIsLoading && archivedPools.length > 0 && (
         <>
-          <StyledBox display="flex" alignItems="center" marginBottom={1} as="button">
+          <StyledBox display="flex" alignItems="center" marginBottom={2} marginTop={2} as="button">
             <Text
               style={{ cursor: 'pointer' }}
               color="textSecondary"
@@ -127,21 +122,15 @@ export function PoolList() {
 function ArchivedPools({ pools }: { pools: PoolCardProps[] }) {
   const isMedium = useIsAboveBreakpoint('M')
   const isLarge = useIsAboveBreakpoint('L')
-  const isExtraLarge = useIsAboveBreakpoint('XL')
   return (
     <Stack gap={1} overflow="auto">
-      <Box as="ul" role="list" display="flex" flexWrap="wrap">
+      <Grid as="ul" columns={[1, 2, 3]} gap={2}>
         {pools.map((pool) => (
-          <PoolCardBox
-            as="li"
-            key={pool.poolId}
-            status={pool.status}
-            width={isLarge ? '33%' : isMedium ? '48%' : '100%'}
-          >
+          <PoolCardBox as="li" key={pool.poolId} status={pool.status}>
             <PoolCard {...pool} />
           </PoolCardBox>
         ))}
-      </Box>
+      </Grid>
     </Stack>
   )
 }