From bb38f68ab1b1731b20b0461e9f6ff7b12d4f07d7 Mon Sep 17 00:00:00 2001
From: leonthuongto <leon@ixswap.io>
Date: Fri, 10 Jan 2025 12:00:20 +0700
Subject: [PATCH] Fix UI for kyc (#3060)

---
 src/pages/KYC/CountriesBlockAlert.tsx    | 7 ++++++-
 src/pages/KYC/SecondaryContactOption.tsx | 5 +++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/pages/KYC/CountriesBlockAlert.tsx b/src/pages/KYC/CountriesBlockAlert.tsx
index 7e96c25ddc..be87053211 100644
--- 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
index f19d6d22e1..6ad0e850cc 100644
--- 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