make more responsive

ensdomains · Oct 26, 2024 · 92ab1f7 · 92ab1f7
1 parent 9f91007
commit 92ab1f7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 10 deletions.
diff --git a/src/components/pages/migrate/MigrationSection.tsx b/src/components/pages/migrate/MigrationSection.tsx
@@ -9,18 +9,18 @@ export const MigrationSection = styled.div(
       text-align: center;
     }
     & > div {
-      display: flex;
-      flex-direction: column;
+      display: grid;
+      grid-template-columns: repeat(1, 1fr);
       gap: ${theme.space['4']};
     }
     & > div > div {
       width: 100%;
       display: flex;
       align-items: center;
     }
-    @media (min-width: 360px) {
+    @media (min-width: 480px) {
       & > div {
-        flex-direction: row;
+        grid-template-columns: repeat(2, 1fr);
       }
     }
   `,

diff --git a/src/components/pages/migrate/MigrationTab.tsx b/src/components/pages/migrate/MigrationTab.tsx
@@ -12,6 +12,7 @@ import {
   Banner,
   Button,
   Card,
+  FastForwardSVG,
   GasPumpSVG,
   KeySVG,
   RightArrowSVG,
@@ -59,9 +60,9 @@ const Caption = styled(Typography)`
   max-width: 538px;
 `
 
-const GetStarted = styled.div(
+const ContainerWithCenteredButton = styled.div(
   ({ theme }) => css`
-    & > div button span {
+    button span {
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -171,6 +172,13 @@ const AllNamesAreApprovedBanner = styled.div(
   `,
 )
 
+const RebatesMigrationSection = styled(MigrationSection)`
+  & > div > div:nth-child(3) {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+`
+
 export const migrationTabs = ['ensv2', 'migrations', 'extension'] as const
 
 export type MigrationTabType = (typeof migrationTabs)[number]
@@ -248,7 +256,7 @@ const LandingTab = ({
         <Typography asProp="h3" fontVariant="headingThree">
           {t('get-started.title')}
         </Typography>
-        <GetStarted>
+        <ContainerWithCenteredButton>
           <Card>
             <CardHeader>
               <UpCircleSVG />
@@ -261,7 +269,19 @@ const LandingTab = ({
               </span>
             </Button>
           </Card>
-        </GetStarted>
+          <Card>
+            <CardHeader>
+              <FastForwardSVG />
+              {t('get-started.extend.title')}
+            </CardHeader>
+            {t('get-started.extend.caption')}
+            <Button colorStyle="greenPrimary" width="max">
+              <span>
+                {t('cta.claim-rebates')} <RightArrowSVG />
+              </span>
+            </Button>
+          </Card>
+        </ContainerWithCenteredButton>
       </MigrationSection>
       <SlideshowContainer>
         <Typography asProp="h3" fontVariant="headingThree">
@@ -389,7 +409,7 @@ const MigrationsTab = ({
           setTab={setNameListTab}
         />
       ) : null}
-      <MigrationSection>
+      <RebatesMigrationSection>
         <Typography asProp="h3" fontVariant="headingThree">
           {t('approval-benefits.title')}
         </Typography>
@@ -408,8 +428,22 @@ const MigrationsTab = ({
             </CardHeader>
             {t('approval-benefits.no-gas-cost.caption')}
           </Card>
+          <Card>
+            <CardHeader>
+              <FastForwardSVG />
+              {t('approval-benefits.claim-rebates.title')}
+            </CardHeader>
+            {t('approval-benefits.claim-rebates.caption')}
+            <ContainerWithCenteredButton>
+              <Button colorStyle="greenPrimary" width="max">
+                <span>
+                  {t('cta.claim-rebates')} <RightArrowSVG />
+                </span>
+              </Button>
+            </ContainerWithCenteredButton>
+          </Card>
         </div>
-      </MigrationSection>
+      </RebatesMigrationSection>
     </>
   )
 }