Feat/fix basename waitlist form (#772)

* Add link to waitlist form

* fix usernamepill font size and small search input

apps/web/src/components/Basenames/RegistrationFlow.tsx

@@ -32,6 +32,7 @@ import { InformationCircleIcon } from '@heroicons/react/16/solid';
 import Tooltip from 'apps/web/src/components/Tooltip';
 import RegistrationShareOnSocials from 'apps/web/src/components/Basenames/RegistrationShareOnSocials';
 import { Icon } from 'apps/web/src/components/Icon/Icon';
+import { isDevelopment } from 'libs/base-ui/constants';
 
 const RegistrationStateSwitcherDynamic = dynamic(
   async () => import('apps/web/src/components/Basenames/RegistrationStateSwitcher'),
@@ -112,8 +113,6 @@ export function RegistrationFlow() {
     }
   }, [basenameChain.id, searchParams, setSelectedName]);
 
-  const isDevelopment = false; // process.env.NODE_ENV === 'development';
-
   return (
     <>
       {isDevelopment && <RegistrationStateSwitcherDynamic />}
@@ -179,12 +178,12 @@ export function RegistrationFlow() {
           </Transition>
         </Transition>
         {/* 2 - Username Pill */}
-        <div className="relative flex w-full max-w-full -translate-y-12 flex-col items-center justify-center">
+        <div className="relative flex w-full max-w-full flex-col items-center justify-center md:-translate-y-12">
           <Transition
             appear
             show={!isSearch}
             className={classNames(
-              'relative z-50 transition-opacity',
+              'relative z-50 w-full transition-opacity',
               registrationTransitionDuration,
               {
                 'w-full max-w-[26rem]': isProfile,
@@ -201,7 +200,7 @@ export function RegistrationFlow() {
               appear
               show={isClaim}
               className={classNames(
-                'absolute left-1/2 z-40 mx-auto w-full -translate-x-1/2 -translate-y-32 transition-opacity md:max-w-[16rem]  md:-translate-y-20',
+                'absolute left-1/2 z-40 mx-auto w-full -translate-x-1/2 -translate-y-[calc(15vh)] transition-opacity md:max-w-[16rem]  md:-translate-y-20',
                 registrationTransitionDuration,
               )}
               enterFrom="opacity-0"

apps/web/src/components/Basenames/RegistrationForm/index.tsx

@@ -23,6 +23,7 @@ import { useRegisterNameCallback } from 'apps/web/src/hooks/useRegisterNameCallb
 import { IS_EARLY_ACCESS } from 'apps/web/src/utils/usernames';
 import classNames from 'classnames';
 import { ActionType } from 'libs/base-ui/utils/logEvent';
+import Link from 'next/link';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { formatEther } from 'viem';
 import { useAccount, useBalance, useChains, useSwitchChain } from 'wagmi';
@@ -46,6 +47,8 @@ function formatUsdPrice(price: bigint, ethUsdPrice: number) {
   return parsed;
 }
 
+const WAITLIST_FORM = 'https://app.deform.cc/form/6acf7a89-8cb5-4c31-b71d-7979014f4db4';
+
 export default function RegistrationForm() {
   const { isConnected, chain: connectedChain, address } = useAccount();
   const chains = useChains();
@@ -308,19 +311,20 @@ export default function RegistrationForm() {
   if (isConnected) {
     if (isOnSupportedNetwork) {
       return (
-        <div className="z-10 mt-8 flex flex-row items-center justify-center ">
-          <ExclamationCircleIcon width={12} height={12} className="fill-state-n-hovered" />
-          <p className="ml-2 text-state-n-hovered">
-            The connected wallet is not eligible for early access. Please{' '}
-            <a
-              href="http://https://app.deform.cc/form/6acf7a89-8cb5-4c31-b71d-7979014f4db4"
+        <div className="z-10 mt-8 flex flex-row items-center justify-center text-gray-40">
+          <p className="ml-2 text-center">
+            <span className="mr-2 inline-block">
+              <Icon name="info" width={12} height={12} color="currentColor" />
+            </span>
+            The connected wallet is not eligible for early access.{' '}
+            <Link
+              href={WAITLIST_FORM}
               target="_blank"
-              rel="noopener noreferrer"
-              className="underline"
+              className="text-blue-500 underline underline-offset-4"
             >
-              fill out this form
-            </a>{' '}
-            to get notified when Basenames becomes available.
+              Get notified
+            </Link>{' '}
+            when Basenames becomes available.
           </p>
         </div>
       );

apps/web/src/components/Basenames/UsernamePill/index.tsx

@@ -13,7 +13,7 @@ export function UsernamePill({ variant, username, address, isRegistering }: User
   const transitionClasses = 'transition-all duration-700 ease-in-out';
 
   const pillNameClasses = classNames(
-    'bg-blue-500 w-full text-white relative leading-[2em] overflow-hidden text-ellipsis max-w-full',
+    'bg-blue-500 w-fit-content mx-auto text-white relative leading-[2em] overflow-hidden text-ellipsis max-w-full',
     'shadow-[0px_8px_16px_0px_rgba(0,82,255,0.32),inset_0px_8px_16px_0px_rgba(255,255,255,0.25)]',
     transitionClasses,
     {
@@ -34,11 +34,21 @@ export function UsernamePill({ variant, username, address, isRegistering }: User
     },
   );
 
+  const nameLength = username.length;
+
+  const nameLengthPillFontSize = classNames({
+    'text-[clamp(0.8rem,5vw,3rem)]': nameLength > 25,
+    'text-[clamp(1rem,5vw,3rem)]': nameLength > 20 && nameLength <= 25,
+    'text-[clamp(1.5rem,5vw,3rem)]': nameLength > 15 && nameLength <= 20,
+    'text-[clamp(2rem,5vw,3rem)]': nameLength > 0 && nameLength <= 15,
+  });
+
   const userNameClasses = classNames(
     'overflow-y-hidden text-ellipsis whitespace-nowrap',
     transitionClasses,
     {
-      'text-[clamp(1rem,5vw,3rem)] pl-8 md:pl-[4rem]': variant === UsernamePillVariants.Inline,
+      'pl-8 md:pl-[4rem]': variant === UsernamePillVariants.Inline,
+      [nameLengthPillFontSize]: variant === UsernamePillVariants.Inline,
       'text-3xl pl-0 mt-20': variant === UsernamePillVariants.Card,
     },
   );

apps/web/src/components/Layout/UsernameNav/index.tsx

@@ -51,8 +51,10 @@ export default function UsernameNav() {
     <div className="absolute top-0 z-20 flex w-full flex-col">
       {showDevelopmentWarning && (
         <div className="flex items-center  justify-center gap-2 bg-orange-10 p-2 text-center text-orange-80">
-          <Icon name="info" color="currentColor" height="1rem" />
           <p>
+            <span className="align-center mr-1 inline-block">
+              <Icon name="info" color="currentColor" height="1rem" />
+            </span>
             You are on Base Mainnet.{' '}
             <button
               className="text-orange-90 underline underline-offset-2"
@@ -67,8 +69,10 @@ export default function UsernameNav() {
       )}
       {showProductionWarning && (
         <div className="flex items-center  justify-center gap-2 bg-orange-10 p-2 text-center text-orange-80">
-          <Icon name="info" color="currentColor" height="1rem" />
           <p>
+            <span className="align-center mr-1 inline-block">
+              <Icon name="info" color="currentColor" height="1rem" />
+            </span>
             You are on Base Sepolia.{' '}
             <button
               className="text-orange-90 underline underline-offset-2"