Fix UI for kyc (#3060)

IX-Swap · Jan 10, 2025 · bb38f68 · bb38f68
1 parent 46972f1
commit bb38f68
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/pages/KYC/CountriesBlockAlert.tsx b/src/pages/KYC/CountriesBlockAlert.tsx
@@ -20,7 +20,7 @@ const CountriesBlockAlert: React.FC = () => {
 
   return (
     <Container>
-      <Flex alignItems={'center'} style={{ gap: 8 }}>
+      <Flex flexDirection={['column', 'row']} alignItems={'center'} style={{ gap: 8 }} >
         <AlertIcon />
         <div>Our service is currently unavailable to citizens of the United States or North Korea.</div>
       </Flex>
@@ -55,4 +55,9 @@ const Container = styled.div`
   font-weight: 400;
   line-height: 160%; /* 22.4px */
   letter-spacing: -0.28px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 8px;
+  }
 `
diff --git a/src/pages/KYC/SecondaryContactOption.tsx b/src/pages/KYC/SecondaryContactOption.tsx
@@ -509,13 +509,13 @@ const CodeBox = styled.input.attrs(
       width: isMobile ? '50px' : '80px',
       height: isMobile ? '60px' : '80px',
       textAlign: 'center',
-      marginRight: '10px',
       background: props.backgroundColor,
       border: `1px solid ${props.borderColor}`,
       borderRadius: '5px',
-      fontSize: '32px',
+      fontSize: '24px',
       fontWeight: '700',
       color: props.color,
+      fontFamily: 'Inter',
     },
     maxLength: 1,
     type: 'tel',
@@ -539,6 +539,7 @@ const CodeRow = styled.div`
   justify-content: center;
   margin-bottom: 10px;
   flex-direction: row;
+  gap: 4px;
 `
 
 export default SecondaryContactOption