Fix logo

centrifuge · Sep 4, 2024 · 28e9163 · 28e9163
1 parent f6b46ee
commit 28e9163
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/centrifuge-app/src/components/LayoutBase/index.tsx b/centrifuge-app/src/components/LayoutBase/index.tsx
@@ -32,7 +32,7 @@ export function LayoutBase(): JSX.Element {
       </WalletContainer>
       <Inner>
         <LogoContainer>
-          <LogoLink></LogoLink>
+          <LogoLink />
         </LogoContainer>
         <ToolbarContainer as="aside">
           <Menu />

diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx
@@ -42,7 +42,7 @@ export const Inner = styled(Grid)`
   padding-bottom: 1rem;
   @media (min-width: ${({ theme }) => theme.breakpoints['M']}) and (max-width: ${({ theme }) =>
       theme.breakpoints['L']}) {
-    width: 7vw;
+    width: 6vw;
     background-color: ${({ theme }) => theme.colors.backgroundInverted};
     overflow: visible;
   }
@@ -77,13 +77,19 @@ export const LogoContainer = styled(Stack)`
   z-index: ${({ theme }) => theme.zIndices.header};
   position: sticky;
   top: 0;
-  width: 100%;
 
-  grid-area: logo;
   height: ${HEADER_HEIGHT}px;
   justify-content: center;
+  padding-left: 12px;
 
-  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
+  @media (min-width: ${({ theme }) => theme.breakpoints['M']}) and (max-width: ${({ theme }) =>
+      theme.breakpoints['L']}) {
+    justify-content: start;
+    padding-top: ${({ theme }) => theme.space[2]}px;
+    padding-left: 12px;
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints['L']}) {
     justify-content: start;
     padding-top: ${({ theme }) => theme.space[2]}px;
   }

diff --git a/centrifuge-app/src/components/LogoLink-deprecated.tsx b/centrifuge-app/src/components/LogoLink-deprecated.tsx
@@ -7,12 +7,12 @@ const [LogoMark, WordMark] = config.logo
 
 export function LogoLink() {
   const isMedium = useIsAboveBreakpoint('M')
-  const isXLarge = useIsAboveBreakpoint('XL')
+  const isLarge = useIsAboveBreakpoint('L')
 
   return (
     <Link to="/">
-      <Box color="textPrimary" width={[80, 80, 36, 36, 120]}>
-        {isMedium && !isXLarge ? <LogoMark /> : <WordMark />}
+      <Box color="textPrimary" width={[80, 80, 36, 120, 120]}>
+        {!isMedium || isLarge ? <WordMark /> : <LogoMark />}
       </Box>
     </Link>
   )

diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -4,7 +4,6 @@ import Decimal from 'decimal.js-light'
 import { useNavigate } from 'react-router'
 import styled from 'styled-components'
 import { formatBalance, formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting'
-import { Eththumbnail } from '../EthThumbnail'
 import { CardHeader } from '../ListItemCardStyles'
 import { RouterTextLink } from '../TextLink'
 import { PoolStatus, PoolStatusKey } from './PoolStatus'
@@ -111,13 +110,11 @@ export function PoolCard({
             {name}
           </Text>
         </Box>
-        <Eththumbnail show={poolId?.startsWith('0x')}>
-          {iconUri ? (
-            <Box as="img" src={iconUri} alt="" height={38} width={38} borderRadius="4px" />
-          ) : (
-            <Thumbnail type="pool" label="LP" size="small" />
-          )}
-        </Eththumbnail>
+        {iconUri ? (
+          <Box as="img" src={iconUri} alt="" height={38} width={38} borderRadius="4px" />
+        ) : (
+          <Thumbnail type="pool" label="LP" size="small" />
+        )}
       </CardHeader>
       <Divider />
       <Box display="flex" justifyContent="space-between" alignItems="center" marginY="8px">