From 89c442dc4eb121b88db5e35eecf8d7071a76a36c Mon Sep 17 00:00:00 2001 From: v1rtl Date: Fri, 6 Dec 2024 22:06:41 +0200 Subject: [PATCH] fix AvatarNFT and other mq stuff --- .../ProfileEditor/Avatar/AvatarNFT.tsx | 35 +++++++++---------- .../TransactionDialogManager/DisplayItems.tsx | 2 +- src/components/ProfileSnippet.tsx | 2 +- .../import/[name]/steps/CompleteImport.tsx | 2 +- .../profile/[name]/ProfileEmptyBanner.tsx | 6 ++-- .../[name]/registration/steps/Complete.tsx | 11 +++--- .../[name]/registration/steps/Invoice.tsx | 16 ++++----- src/pages/ens-v2.tsx | 10 +++--- src/pages/index.tsx | 2 +- 9 files changed, 43 insertions(+), 43 deletions(-) diff --git a/src/components/@molecules/ProfileEditor/Avatar/AvatarNFT.tsx b/src/components/@molecules/ProfileEditor/Avatar/AvatarNFT.tsx index 118034268..d1b35147f 100644 --- 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 = ({ ) : ( - + {t('input.profileEditor.tabs.avatar.nft.loadError')} diff --git a/src/components/@molecules/TransactionDialogManager/DisplayItems.tsx b/src/components/@molecules/TransactionDialogManager/DisplayItems.tsx index a33e334ee..53e67cc75 100644 --- a/src/components/@molecules/TransactionDialogManager/DisplayItems.tsx +++ b/src/components/@molecules/TransactionDialogManager/DisplayItems.tsx @@ -252,7 +252,7 @@ const DurationValue = ({ value }: { value: string | undefined }) => { {value} - + {t('transaction.extendNames.newExpiry', { date: formatExpiry(date) })} diff --git a/src/components/ProfileSnippet.tsx b/src/components/ProfileSnippet.tsx index 6a4fd2533..d8b25dce3 100644 --- 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 index 177a51e9c..3f6a5bcf5 100644 --- 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 index afe7ed287..effbab0c3 100644 --- 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 index 38673ef3c..9dd75079b 100644 --- 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 index 9af693035..c890054bf 100644 --- 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) => { {items.map(({ label, value, bufferPercentage }, inx) => ( - + {label} @@ -99,7 +99,7 @@ export const Invoice = ({ name, expiryTitle, expiryDate, items }: Props) => { @@ -109,7 +109,7 @@ export const Invoice = ({ name, expiryTitle, expiryDate, items }: Props) => { ))} - + {expiryTitle} diff --git a/src/pages/ens-v2.tsx b/src/pages/ens-v2.tsx index 80e1d5a9f..8df3f8e2b 100644 --- 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 /> - + {t('learn-more.title')} {t('learn-more.caption')} @@ -288,7 +288,7 @@ export default function ENSv2() { - + {t('accessible.title')} {t('accessible.caption')} @@ -326,7 +326,7 @@ export default function ENSv2() { - + {t('announcement.title')} {/* diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2e81f64f3..725f61ed2 100644 --- 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 */