fix AvatarNFT and other mq stuff

ensdomains · Dec 6, 2024 · 89c442d · 89c442d
1 parent b4097cc
commit 89c442d
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 43 deletions.
diff --git a/src/components/@molecules/ProfileEditor/Avatar/AvatarNFT.tsx b/src/components/@molecules/ProfileEditor/Avatar/AvatarNFT.tsx
@@ -11,7 +11,6 @@ import {
   Dialog,
   Heading,
   MagnifyingGlassSVG,
-  mq,
   Typography,
 } from '@ensdomains/thorin'
 
@@ -158,7 +157,7 @@ const NFTContainer = styled.div(
     &[aria-disabled='true'] {
       cursor: not-allowed;
       opacity: 1;
-      color: ${theme.colors.textTertiary};
+      color: ${theme.colors.grey};
     }
   `,
 )
@@ -209,11 +208,11 @@ const SelectedNFTContainer = styled.div(({ theme }) => [
         font-size: ${theme.fontSizes.headingThree};
       }
     }
+    @media (min-width: ${theme.breakpoints.sm}) {
+      width: calc(80vw - 2 * ${theme.space['6']});
+      max-width: ${theme.space['128']};
+    }
   `,
-  mq.sm.min(css`
-    width: calc(80vw - 2 * ${theme.space['6']});
-    max-width: ${theme.space['128']};
-  `),
 ])
 
 const SelectedNFTImageWrapper = styled.div(
@@ -240,22 +239,22 @@ const FilterContainer = styled.div(
     gap: ${theme.space['4']};
     margin-bottom: ${theme.space['4']};
 
-    ${mq.sm.min(css`
+    @media (min-width: ${theme.breakpoints.sm}) {
       margin-bottom: ${theme.space['6']};
-    `)}
+    }
 
     & > button {
       flex-basis: 100px;
       margin-bottom: -${theme.space['4']};
-      ${mq.sm.min(css`
+      @media (min-width: ${theme.breakpoints.sm}) {
         margin-bottom: -${theme.space['6']};
-      `)}
+      }
     }
   `,
 )
 
-const LoadingContainer = styled.div(({ theme }) => [
-  css`
+const LoadingContainer = styled.div(
+  ({ theme }) => css`
     width: ${theme.space.full};
     min-height: ${theme.space['32']};
 
@@ -264,11 +263,11 @@ const LoadingContainer = styled.div(({ theme }) => [
     justify-content: center;
     flex-direction: column;
     gap: ${theme.space['4']};
+    @media (min-width: ${theme.breakpoints.sm}) {
+      gap: ${theme.space['6']};
+    }
   `,
-  mq.sm.min(css`
-    gap: ${theme.space['6']};
-  `),
-])
+)
 
 const LoadFailureContainer = styled.div(
   ({ theme }) => css`
@@ -286,7 +285,7 @@ const LoadFailureContainer = styled.div(
     border-radius: ${theme.radii['2xLarge']};
 
     background-color: ${theme.colors.greySurface};
-    color: ${theme.colors.textTertiary};
+    color: ${theme.colors.grey};
 
     & > svg {
       width: ${theme.space['5']};
@@ -329,7 +328,7 @@ const NftItem = ({
       ) : (
         <LoadFailureContainer>
           <AlertSVG />
-          <Typography fontVariant="smallBold" color="textTertiary">
+          <Typography fontVariant="smallBold" color="grey">
             {t('input.profileEditor.tabs.avatar.nft.loadError')}
           </Typography>
         </LoadFailureContainer>

diff --git a/src/components/@molecules/TransactionDialogManager/DisplayItems.tsx b/src/components/@molecules/TransactionDialogManager/DisplayItems.tsx
@@ -252,7 +252,7 @@ const DurationValue = ({ value }: { value: string | undefined }) => {
       <Typography ellipsis>
         <strong>{value}</strong>
       </Typography>
-      <Typography color="textTertiary" fontVariant="small">
+      <Typography color="grey" fontVariant="small">
         {t('transaction.extendNames.newExpiry', { date: formatExpiry(date) })}
       </Typography>
     </DurationContainer>

diff --git a/src/components/ProfileSnippet.tsx b/src/components/ProfileSnippet.tsx
@@ -21,7 +21,7 @@ const Container = styled.div<{ $banner?: string }>(
     width: 100%;
     padding: ${theme.space['4']};
     padding-top: ${theme.space['18']};
-    background-image: ${$banner ? `url(${$banner})` : theme.colors.gradients.blue};
+    background-image: ${$banner ? `url(${$banner})` : theme.colors.blueGradient};
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-size: 100% ${theme.space['28']};

diff --git a/src/components/pages/import/[name]/steps/CompleteImport.tsx b/src/components/pages/import/[name]/steps/CompleteImport.tsx
@@ -68,7 +68,7 @@ const SubtitleWithGradient = styled(Typography)(
     font-size: ${theme.fontSizes.headingThree};
     font-weight: bold;
 
-    background: ${theme.colors.gradients.blue};
+    background: ${theme.colors.blueGradient};
     /* stylelint-disable property-no-vendor-prefix */
     -webkit-background-clip: text;
     -moz-background-clip: text;

diff --git a/src/components/pages/profile/[name]/ProfileEmptyBanner.tsx b/src/components/pages/profile/[name]/ProfileEmptyBanner.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
-import { Button, mq, Typography } from '@ensdomains/thorin'
+import { Button, Typography } from '@ensdomains/thorin'
 
 import StarsSVG from '@app/assets/Stars.svg'
 import { useProfileActions } from '@app/hooks/pages/profile/[name]/profile/useProfileActions/useProfileActions'
@@ -22,12 +22,12 @@ const Container = styled.div(
     border-radius: 16px;
     background: linear-gradient(#e7f4ef 100%, #fdf0dd 100%);
 
-    ${mq.sm.max(css`
+    @media (max-width: ${theme.breakpoints.sm}) {
       grid-template-columns: 1fr;
       text-align: center;
       gap: ${theme.space['4']};
       padding: ${theme.space['4']};
-    `)}
+    }
   `,
 )
 

diff --git a/src/components/pages/profile/[name]/registration/steps/Complete.tsx b/src/components/pages/profile/[name]/registration/steps/Complete.tsx
@@ -50,9 +50,9 @@ const ButtonContainer = styled.div(
     justify-content: center;
     gap: ${theme.space['2']};
 
-    ${mq.sm.min(css`
+    @media (min-width: ${theme.breakpoints.sm}) {
       flex-direction: row;
-    `)}
+    }
   `,
 )
 
@@ -77,10 +77,11 @@ const InvoiceContainer = styled.div(
     justify-content: center;
     flex-direction: column;
     gap: ${theme.space['4']};
-    ${mq.sm.min(css`
+
+    @media (min-width: ${theme.breakpoints.sm}) {
       gap: ${theme.space['6']};
       flex-direction: row;
-    `)}
+    }
   `,
 )
 
@@ -109,7 +110,7 @@ const SubtitleWithGradient = styled(Typography)(
     font-size: ${theme.fontSizes.headingThree};
     font-weight: bold;
 
-    background-image: ${theme.colors.gradients.blue};
+    background-image: ${theme.colors.blueGradient};
     /* stylelint-disable property-no-vendor-prefix */
     -webkit-background-clip: text;
     -moz-background-clip: text;

diff --git a/src/components/pages/profile/[name]/registration/steps/Invoice.tsx b/src/components/pages/profile/[name]/registration/steps/Invoice.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
-import { CalendarSVG, Colors, Dropdown, mq, Skeleton, Typography } from '@ensdomains/thorin'
+import { CalendarSVG, Colors, Dropdown, Skeleton, Typography } from '@ensdomains/thorin'
 
 import { CurrencyText } from '@app/components/@atoms/CurrencyText/CurrencyText'
 import { useCalendarOptions } from '@app/hooks/useCalendarOptions'
@@ -27,10 +27,10 @@ const Container = styled.div(
     border-radius: ${theme.space['2']};
     border: 1px solid #e8e8e8;
 
-    ${mq.sm.min(css`
+    @media (min-width: ${theme.breakpoints.sm}) {
       grid-template-columns: 1fr;
-      column-gap: 0px;
-    `)}
+      column-gap: 0;
+    }
   `,
 )
 
@@ -41,7 +41,7 @@ const LineItem = styled.div<{ $color?: Colors }>(
     justify-content: space-between;
     gap: ${theme.space['1']};
     line-height: ${theme.space['5']};
-    color: ${$color ? theme.colors[$color] : theme.colors.textTertiary};
+    color: ${$color ? theme.colors[$color] : theme.colors.grey};
 
     &:not(:last-of-type) {
       padding-bottom: ${theme.space['4']};
@@ -90,7 +90,7 @@ export const Invoice = ({ name, expiryTitle, expiryDate, items }: Props) => {
     <Container>
       {items.map(({ label, value, bufferPercentage }, inx) => (
         <LineItem data-testid={`invoice-item-${inx}`} key={label}>
-          <Typography fontVariant="small" color="textTertiary">
+          <Typography fontVariant="small" color="grey">
             {label}
           </Typography>
           <Skeleton loading={!value}>
@@ -99,7 +99,7 @@ export const Invoice = ({ name, expiryTitle, expiryDate, items }: Props) => {
             </Typography>
             <Typography
               fontVariant="small"
-              color="textTertiary"
+              color="grey"
               data-testid={`invoice-item-${inx}-amount-usd`}
             >
               <CurrencyText bufferPercentage={bufferPercentage} eth={value || 0n} currency="usd" />
@@ -109,7 +109,7 @@ export const Invoice = ({ name, expiryTitle, expiryDate, items }: Props) => {
       ))}
 
       <LineItem data-testid="invoice-item-expiry">
-        <Typography fontVariant="small" color="textTertiary">
+        <Typography fontVariant="small" color="grey">
           {expiryTitle}
         </Typography>
         <Typography color="textPrimary" data-testid="invoice-item-expiry-date">

diff --git a/src/pages/ens-v2.tsx b/src/pages/ens-v2.tsx
@@ -222,9 +222,9 @@ const AnnouncementContainer = styled.div(
     flex-direction: column;
     gap: ${theme.space['4']};
 
-    ${mq.sm.min(css`
+    @media (min-width: ${theme.breakpoints.sm}) {
       flex-direction: row;
-    `)}
+    }
   `,
 )
 
@@ -271,7 +271,7 @@ export default function ENSv2() {
         allowFullScreen
       />
       <CenteredCard>
-        <Typography fontVariant="headingTwo" asProp="h2">
+        <Typography fontVariant="headingTwo" as="h2">
           {t('learn-more.title')}
         </Typography>
         <Typography fontVariant="body">{t('learn-more.caption')}</Typography>
@@ -288,7 +288,7 @@ export default function ENSv2() {
       </CenteredCard>
       <GridOneToThree>
         <CardWithEmoji>
-          <Typography fontVariant="headingTwo" asProp="h2">
+          <Typography fontVariant="headingTwo" as="h2">
             {t('accessible.title')}
           </Typography>
           <Typography fontVariant="body">{t('accessible.caption')}</Typography>
@@ -326,7 +326,7 @@ export default function ENSv2() {
         </Card>
       </GridOneToThree>
       <SlideshowContainer>
-        <Typography asProp="h3" fontVariant="headingThree">
+        <Typography as="h3" fontVariant="headingThree">
           {t('announcement.title')}
         </Typography>
         {/* <Carousel>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -19,7 +19,7 @@ const GradientTitle = styled.h1(
     font-size: ${theme.fontSizes.headingTwo};
     text-align: center;
     font-weight: 800;
-    background-image: ${theme.colors.gradients.accent};
+    background-image: ${theme.colors.blueGradient};
     background-repeat: no-repeat;
     background-size: 110%;
     /* stylelint-disable-next-line property-no-vendor-prefix */