fix: dns import styling

aslobodnik · Mar 13, 2024 · 29d2210 · 29d2210
1 parent aa7706a
commit 29d2210
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/src/components/pages/import/[name]/shared.tsx b/src/components/pages/import/[name]/shared.tsx
@@ -42,10 +42,15 @@ export const DnsImportHeading = forwardRef<HTMLDivElement, ComponentProps<typeof
 export const DnsImportActionsContainer = styled.div(
   ({ theme }) => css`
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: stretch;
+    width: 100%;
     gap: ${theme.space['2']};
+    ${mq.sm.min(css`
+      flex-direction: row;
+      align-items: center;
+    `)}
   `,
 )
 
@@ -83,8 +88,13 @@ const ButtonInner = styled.div(
     justify-content: space-between;
     width: 100%;
     align-items: center;
-    height: auto;
+
     padding: ${theme.space['4']};
+    white-space: normal;
+    overflow: hidden;
+    & > div {
+      max-width: 100%;
+    }
   `,
 )
 
@@ -116,6 +126,7 @@ const ButtonWithContent = styled(Button)(
 export const ValueText = styled(Typography)(
   () => css`
     text-align: right;
+    word-break: break-all;
   `,
 )
 

diff --git a/src/components/pages/import/[name]/steps/SelectImportType.tsx b/src/components/pages/import/[name]/steps/SelectImportType.tsx
@@ -12,6 +12,7 @@ import { useDnsOffchainStatus } from '@app/hooks/dns/useDnsOffchainStatus'
 import { useDnsSecEnabled } from '@app/hooks/dns/useDnsSecEnabled'
 import { useDnsOwner } from '@app/hooks/ensjs/dns/useDnsOwner'
 import { useResolver } from '@app/hooks/ensjs/public/useResolver'
+import { CenteredTypography } from '@app/transaction-flow/input/ProfileEditor/components/CenteredTypography'
 import { getSupportLink } from '@app/utils/supportLinks'
 
 import { DnsImportActionButton, DnsImportCard, DnsImportHeading } from '../shared'
@@ -24,29 +25,33 @@ import {
 } from '../useDnsImportReducer'
 import { checkDnsAddressMatch, DnsAddressStatus } from '../utils'
 
-const TypesSelectionContainer = styled.div(
+const StyledRadioButtonGroup = styled(RadioButtonGroup)(
   ({ theme }) => css`
     display: flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: flex-start;
-    gap: ${theme.space['2']};
-    max-width: 100%;
+    gap: 0;
+    border-radius: ${theme.radii.large};
+    border: 1px solid ${theme.colors.border};
+
+    & > :first-child {
+      border-bottom: 1px solid ${theme.colors.border};
+    }
   `,
 )
 
-const StyledRadioButtonGroup = styled(RadioButtonGroup)(
+const TypesSelectionContainer = styled.div(
   ({ theme }) => css`
     display: flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: flex-start;
-    gap: 0;
-    border-radius: ${theme.radii.large};
-    border: 1px solid ${theme.colors.border};
+    gap: ${theme.space['2']};
+    max-width: 100%;
 
     & > :first-child {
-      border-bottom: 1px solid ${theme.colors.border};
+      padding: 0 ${theme.space['4']};
     }
   `,
 )
@@ -58,8 +63,10 @@ const TypeLabelContainer = styled.div(
     align-items: flex-start;
     justify-content: flex-start;
     gap: ${theme.space['1']};
-    overflow: hidden;
-    word-wrap: normal;
+
+    div {
+      white-space: normal;
+    }
 
     &[aria-disabled='true'] {
       opacity: 0.5;
@@ -189,7 +196,7 @@ export const SelectImportType = ({
   return (
     <DnsImportCard>
       <DnsImportHeading>{t('title', { name: selected.name })}</DnsImportHeading>
-      <Typography>{t('subtitle')}</Typography>
+      <CenteredTypography>{t('subtitle')}</CenteredTypography>
       <SupportOutlink href={getSupportLink('dnsNames')}>{t('learnMore')}</SupportOutlink>
       <TypesSelectionContainer>
         <Typography weight="bold">{t('select.heading')}</Typography>