fix: text layout on register page

mechanismHQ · Sep 18, 2023 · f03b84d · f03b84d
1 parent 51d1c0a
commit f03b84d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/web/components/p/register/index.tsx b/web/components/p/register/index.tsx
@@ -39,13 +39,17 @@ export const Register: React.FC<{ children?: React.ReactNode }> = () => {
     ));
   }, [availableNamespaces, emptyInput, nameIsValid, transformedName]);
 
+  if (!noNames) {
+    return <RegisterNoName />;
+  }
+
   return (
     <>
       <Box flexGrow={1} />
       <div className="w-full space-y-6">
         {registrationTxid ? (
           <RegistrationTx />
-        ) : noNames ? (
+        ) : (
           <>
             <div className="space-y-10 text-center">
               {/* <div className="max-w-lg mx-auto"> */}
@@ -86,8 +90,6 @@ export const Register: React.FC<{ children?: React.ReactNode }> = () => {
               </Table>
             )}
           </>
-        ) : (
-          <RegisterNoName />
         )}
       </div>
       <Box flexGrow={1} />

diff --git a/web/components/p/register/no-name.tsx b/web/components/p/register/no-name.tsx
@@ -4,27 +4,30 @@ import { useAtomValue } from 'jotai';
 import { Button } from '@components/ui/button';
 import { useSwitchAccounts } from '@common/hooks/use-switch-accounts';
 import { Link } from '@components/link';
+import { Text } from '@components/ui/text';
 
 export const RegisterNoName: React.FC<{ children?: React.ReactNode }> = () => {
   const { switchAccounts } = useSwitchAccounts();
   const allNames = useAtomValue(currentUserAddressNameStringsState);
   const v1Name = allNames.coreName;
   return (
-    <div className="space-y-5 text-center">
-      <div className="flex flex-col gap-10 items-center">
-        <div>
-          <h1 className="text-gray-200 text-7xl font-open-sauce-one font-medium tracking-normal leading-10 max-w-lg">
-            Register your BNS name
-          </h1>
+    <>
+      <div className="flex-grow"></div>
+      <div className="space-y-5 text-center">
+        <div className="flex flex-col gap-10 items-center">
+          <div className="max-w-lg">
+            <Text variant="Display02">Register your BNS name</Text>
+          </div>
+          <Text variant="Body02" className="max-w-lg">
+            Looks like you registered {v1Name} for this account. Switch to an account that
+            doesn&apos;t own any names, or <Link href="/upgrade">migrate your name to BNSx</Link>.
+          </Text>
+          <Button className="w-60 text-md" size="lg" onClick={() => switchAccounts()}>
+            Switch accounts
+          </Button>
         </div>
-        <p className="text-gray-200 text-sm font-inter font-normal tracking-normal leading-6 max-w-lg">
-          Looks like you registered {v1Name} for this account. Switch to an account that
-          doesn&apos;t own any names, or <Link href="/upgrade">migrate your name to BNSx</Link>.
-        </p>
-        <Button className="w-60 text-md" size="lg" onClick={() => switchAccounts()}>
-          Switch accounts
-        </Button>
       </div>
-    </div>
+      <div className="flex-grow"></div>
+    </>
   );
 };