responsive banner

ensdomains · Nov 9, 2024 · a3ef737 · a3ef737
1 parent c9c7c0e
commit a3ef737
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 51 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/pages/AnnouncementBanner.tsx b/src/components/pages/AnnouncementBanner.tsx
@@ -7,15 +7,37 @@ import { Button, Typography } from '@ensdomains/thorin'
 const Container = styled(Link)(
   ({ theme }) => css`
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     width: ${theme.space.full};
     max-width: 466px;
     padding: ${theme.space['4']};
     align-items: center;
+    justify-content: space-between;
     gap: ${theme.space['4']};
     align-self: center;
     border-radius: ${theme.radii['2xLarge']};
     background-color: ${theme.colors.backgroundPrimary};
+
+    @media (max-width: 640px) {
+      a {
+        width: 100%;
+      }
+    }
+
+    @media (min-width: 640px) {
+      flex-direction: row;
+    }
+  `,
+)
+
+const TextContainer = styled.div(
+  ({ theme }) => css`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: ${theme.space['4']};
+
+    width: ${theme.space.full};
   `,
 )
 
@@ -30,14 +52,16 @@ export const AnnouncementBanner = () => {
 
   return (
     <Container href="/ens-v2">
-      <img src="/migrate/confetti.png" alt="" height={33} width={33} />
-      <Text>
-        <Typography fontVariant="largeBold">{t('banner.title')}</Typography>
-        <Typography fontVariant="small" color="grey">
-          {t('banner.caption')}
-        </Typography>
-      </Text>
-      <Button colorStyle="greenPrimary" width="max">
+      <TextContainer>
+        <img src="/migrate/confetti.png" alt="" height={33} width={33} />
+        <Text>
+          <Typography fontVariant="largeBold">{t('banner.title')}</Typography>
+          <Typography fontVariant="small" color="grey">
+            {t('banner.caption')}
+          </Typography>
+        </Text>
+      </TextContainer>
+      <Button as="a" href="/ens-v2" colorStyle="greenPrimary" width="max">
         {t('banner.cta')}
       </Button>
     </Container>