fix(react-signin): design subnames

JustaName-id · Sep 20, 2024 · b384537 · b384537
1 parent b10b40c
commit b384537
Showing 1 changed file with 16 additions and 11 deletions.
diff --git a/packages/@justaname.id/react-signin/src/lib/modal/SelectSubnameDialog/index.tsx b/packages/@justaname.id/react-signin/src/lib/modal/SelectSubnameDialog/index.tsx
@@ -42,8 +42,8 @@ export interface SelectSubnameDialogProps {
   open: boolean;
 }
 
-export const SelectSubnameDialog: React.FC<SelectSubnameDialogProps> = ({  subnames, handleOpenDialog, open }) => {
-  const { address} = useMountedAccount();
+export const SelectSubnameDialog: React.FC<SelectSubnameDialogProps> = ({ subnames, handleOpenDialog, open }) => {
+  const { address } = useMountedAccount();
   const [username, setUsername] = React.useState('');
   const [subnameSigningIn, setSubnameSigningIn] = React.useState('');
   const { ensDomain } = useJustaName();
@@ -82,7 +82,7 @@ export const SelectSubnameDialog: React.FC<SelectSubnameDialogProps> = ({  subna
       }}>
         <Flex
           style={{
-            padding:'0px 0 0 0',
+            padding: '0px 0 0 0',
             borderRadius: '16px',
             background: 'var(--justaname-foreground-color-4)',
           }}
@@ -114,7 +114,7 @@ export const SelectSubnameDialog: React.FC<SelectSubnameDialogProps> = ({  subna
                   cursor: 'pointer'
                 }}
                 onClick={() => handleOpenDialog(false)}
-                />
+              />
             </Flex>
 
             <TransitionElement className={(shouldBeAbleToSelect) ? 'visible' : ''} maxheight={'fit-content'}>
@@ -129,6 +129,11 @@ export const SelectSubnameDialog: React.FC<SelectSubnameDialogProps> = ({  subna
                 <Flex
                   direction={'column'}
                   gap={'15px'}
+                  style={{
+                    maxHeight: '20vh',
+                    overflowY: 'scroll',
+                    overflowX: 'hidden'
+                  }}
                 >
                   {
                     subnames.map((subname, index) => {
@@ -139,7 +144,7 @@ export const SelectSubnameDialog: React.FC<SelectSubnameDialogProps> = ({  subna
                             subname={subname}
                             onClick={() => {
                               setSubnameSigningIn(subname.subname);
-                              signIn({ ens: subname.subname }).then(()=> handleOpenDialog(false)).finally(() => {
+                              signIn({ ens: subname.subname }).then(() => handleOpenDialog(false)).finally(() => {
                                 setSubnameSigningIn('');
                               });
                             }}
@@ -230,13 +235,13 @@ export const SelectSubnameDialog: React.FC<SelectSubnameDialogProps> = ({  subna
                 }}
               >
                 Powered by <A
-                style={{
-                  color: 'var(--justaname-primary-color)',
-                  fontWeight: '700',
-                  fontSize: '12px'
+                  style={{
+                    color: 'var(--justaname-primary-color)',
+                    fontWeight: '700',
+                    fontSize: '12px'
 
-                }}
-                href="https://justaname.id" target="_blank" rel="noreferrer">justaname.id</A>
+                  }}
+                  href="https://justaname.id" target="_blank" rel="noreferrer">justaname.id</A>
               </SPAN>
 
             </Flex>