fix: faucet input

app/src/lib/components/header/header.svelte

@@ -26,11 +26,15 @@ import { routes } from "$lib/components/navigation/index.ts"
       {#each Object.entries(routes) as [name, { draft, path }], index (name)}
         <Button
           size="sm"
-          variant="link"
           href={path}
+          variant="link"
           class={cn(
-            'px-2 my-auto text-lg text-white no-underline decoration-transparent border-solid border-[1px] border-transparent outline outline-1 outline-transparent hover:outline-zinc-400/30 dark:hover:bg-zinc-800/70',
-            $page.route.id === path && 'bg-muted-foreground/10',
+            draft
+              ? 'hidden'
+              : [
+                  'px-2 my-auto text-lg text-white no-underline decoration-transparent border-solid border-[1px] border-transparent outline outline-1 outline-transparent hover:outline-zinc-400/30 dark:hover:bg-zinc-800/70',
+                  $page.route.id === path && 'bg-muted-foreground/10',
+                ],
           )}
         >
           {name}
@@ -39,7 +43,7 @@ import { routes } from "$lib/components/navigation/index.ts"
     </nav>
     <div class="hidden sm:flex space-x-3">
       <Connect />
-      <ThemeSwitch />
+      <!-- <ThemeSwitch /> -->
     </div>
     <!-- <Navigation /> -->
   </div>

app/src/lib/components/navigation/index.ts

@@ -2,7 +2,7 @@ import Navigation from "./navigation.svelte"
 
 const routes = {
   home: { draft: false, path: "/" },
-  send: { draft: true, path: "/send" },
+  send: { draft: false, path: "/send" },
   faucet: { draft: false, path: "/faucet" },
   transfers: { draft: true, path: "/transfers" }
 } as const

app/src/lib/components/navigation/navigation.svelte

@@ -10,17 +10,7 @@ $: if ($navigating) navigationDrawerOpen = false
 </script>
 
 <Drawer.Root bind:open={navigationDrawerOpen} closeOnEscape={true} closeOnOutsideClick={true}>
-  <Drawer.Trigger let:builder open>
-    <!-- <Button
-      size="icon"
-      variant="outline"
-      builders={[builder]}
-      class="border-none lg:hidden flex"
-      on:click={() => (navigationDrawerOpen = !navigationDrawerOpen)}
-    >
-      <Menu class="size-9" />
-    </Button> -->
-  </Drawer.Trigger>
+  <Drawer.Trigger let:builder open></Drawer.Trigger>
   <Drawer.Content class="border-t-[1px] border-solid border-accent h-[60%] w-full min-w-full my-2">
     <nav class="flex flex-col space-y-2 justify-between h-full pt-2">
       {#each Object.entries(routes) as [name, { draft, path }], index (name)}
@@ -29,11 +19,15 @@ $: if ($navigating) navigationDrawerOpen = false
           size="lg"
           href={path}
           variant="link"
-          class={cn([
-            'rounded-none py-2 text-left text-6xl font-bold w-full hover:bg-white/5 size-full',
-            ' decoration-transparent no-underline ring-0 focus:ring-0 focus:ring-offset-0 outline-none focus-visible:outline-none focus-visible:ring-0',
-            isCurrentPage && 'bg-white/15',
-          ])}
+          class={cn(
+            draft
+              ? 'hidden'
+              : [
+                  'rounded-none py-2 text-left text-6xl font-bold w-full hover:bg-white/5 size-full',
+                  ' decoration-transparent no-underline ring-0 focus:ring-0 focus:ring-offset-0 outline-none focus-visible:outline-none focus-visible:ring-0',
+                  isCurrentPage && 'bg-white/15',
+                ],
+          )}
         >
           {name}
         </Button>

app/src/lib/components/search-bar.svelte

@@ -32,15 +32,15 @@ onMount(() => {
 })
 </script>
 
-<div class="relative mr-auto flex-1 w-full max-w-[445px]">
+<div class="relative mr-auto flex-1 w-full max-w-[475px]">
   <Search class="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
   <Input
     type="search"
     pattern="[a-z]"
     autocorrect="off"
     autocomplete="off"
     spellcheck="false"
-    autocapitalize="off"
+    autocapitalize="none"
     placeholder="Search..."
     bind:value={searchInput}
     on:input={debounce(() => {

app/src/lib/components/ui/input/index.ts

@@ -16,6 +16,7 @@ export type InputEvents = {
   mouseover: FormInputEvent<MouseEvent>
   mouseenter: FormInputEvent<MouseEvent>
   mouseleave: FormInputEvent<MouseEvent>
+  mousemove: FormInputEvent<MouseEvent>
   paste: FormInputEvent<ClipboardEvent>
   input: FormInputEvent<InputEvent>
   wheel: FormInputEvent<WheelEvent>

app/src/lib/components/ui/input/input.svelte

@@ -32,6 +32,7 @@ export let readonly: $$Props["readonly"] = undefined
   on:keypress
   on:keyup
   on:mouseover
+  on:mousemove
   on:mouseenter
   on:mouseleave
   on:paste

app/src/routes/faucet/+page.svelte

@@ -80,13 +80,13 @@ const handleMouseLeave = () => {
 </script>
 
 <svelte:head>
-  <title>Union - Faucet</title>
+  <title>Union | Faucet</title>
 </svelte:head>
 
-<main class="mx-auto w-full flex flex-col items-center px-4 mt-16">
+<main class="mx-auto w-full flex flex-col items-center px-4 mt-10">
   <DraftPageNotice />
 
-  <h1 class="text-3xl font-extrabold my-6">Faucet</h1>
+  <h1 class="text-4xl font-black my-4">Faucet</h1>
   {#if $delayed || $submitting}
     LOADING
   {/if}
@@ -100,7 +100,7 @@ const handleMouseLeave = () => {
     use:enhance
     method="POST"
     class={cn([
-      'sm:w-[400px] w-[350px] max-w-[500px] space-y-6',
+      'sm:w-[400px] w-[400px] max-w-[550px] space-y-6',
       ($delayed || $submitting || $message?.status === 'success') && 'invisible',
     ])}
   >
@@ -116,12 +116,16 @@ const handleMouseLeave = () => {
             autocapitalize="none"
             on:blur={handleBlur}
             on:focus={handleFocus}
-            on:mouseleave={handleMouseMove}
+            on:mousemove={handleMouseMove}
+            on:mouseleave={handleMouseLeave}
             on:mouseenter={handleMouseEnter}
             bind:value={$cosmosStore.address}
             pattern={unionAddressRegex.source}
             placeholder="union14qemq0vw6y3gc3u3e0aty2e764u4gs5lnxk4rv"
-            class="h-12 w-full cursor-default rounded-md border border-slate-800 bg-neutral-950 p-3.5 text-slate-100 transition-colors duration-500 placeholder:select-none placeholder:text-neutral-600 focus:border-[#8678F9] focus:outline-none"
+            class={cn(
+              'h-12 w-full cursor-default rounded-md border border-slate-800 bg-neutral-950 p-3.5 text-slate-100 transition-colors duration-500 placeholder:select-none placeholder:text-neutral-600 focus:border-[#8678F9]',
+              'focus:outline-none ring-0 focus:ring-0 focus-visible:ring-0',
+            )}
             title="Must be a valid Union address (bech32, starts with `union`)"
           />
           <input

app/src/routes/ibc/+page.svelte

@@ -189,7 +189,7 @@ const hideableChannelsColumns = ["ordering", "version", "counterparty"]
 </script>
 
 <svelte:head>
-  <title>Union - IBC</title>
+  <title>Union | IBC</title>
 </svelte:head>
 
 <main

app/src/routes/send/+page.svelte

@@ -162,8 +162,14 @@ let buttonText = "Send it" satisfies
   | String
 </script>
 
+<svelte:head>
+  <title>Union | Send</title>
+</svelte:head>
+
 <main class="flex justify-center size-full items-start px-0 sm:px-3 min-h-full">
-  <Card.Root class="size-full max-w-[475px] sm:mt-16 mt-6 p-2 bg-transparent border-none outline-none">
+  <Card.Root
+    class="size-full max-w-[475px] sm:mt-16 mt-6 p-2 bg-transparent border-none outline-none"
+  >
     <Card.Header
       class="pt-0.5 px-2 pb-0 flex flex-row w-full justify-between items-start h-10 gap-x-3 mb-4"
     >
@@ -297,21 +303,24 @@ let buttonText = "Send it" satisfies
           <ChevronDown class={cn(devBorder, 'size-6 mb-auto mt-0.5 ml-auto')} />
         </Button>
       </div>
-      
+
       <!-- amount -->
       <div class={cn('my-2')}>
         <p class="text-left text-2xl font-extrabold ml-2">Amount</p>
         <Input
           minlength={1}
           maxlength={64}
           placeholder="0.00"
+          autocorrect="off"
           autocomplete="off"
+          spellcheck="false"
+          autocapitalize="none"
           data-transfer-from-amount
           bind:value={inputValue.from}
           pattern="^[0-9]*[.,]?[0-9]*$"
           class={cn(
-            'text-5xl font-bold h-20 mt-2 mb-0 px-3 focus-visible:ring-0 tabular-nums border-none',
-            'outline-1 outline-accent/90 outline',
+            'text-5xl font-bold h-20 mt-2 mb-0 px-3 tabular-nums border-none',
+            'outline-1 outline-accent/80 outline',
           )}
         />
       </div>
@@ -321,13 +330,16 @@ let buttonText = "Send it" satisfies
         <Input
           minlength={1}
           maxlength={64}
+          autocorrect="off"
           autocomplete="off"
+          spellcheck="false"
+          autocapitalize="none"
           data-transfer-recipient-address
           placeholder="Destination address"
           bind:value={inputValue.recipient}
           class={cn(
-            'text-sm mt-2 mb-0 px-3 focus-visible:ring-0 tabular-nums border-none',
-            'outline-1 outline-accent/90 outline',
+            'text-sm mt-2 mb-0 px-3 tabular-nums border-none',
+            'outline-1 outline-accent/80 outline',
           )}
         />
       </div>
@@ -405,10 +417,6 @@ let buttonText = "Send it" satisfies
   {assetSearchResults}
 />
 
-<svelte:head>
-  <title>Union - Send</title>
-</svelte:head>
-
 <DraftPageNotice className="hidden sm:inline" />
 
 <style lang="postcss">

app/src/routes/transfers/+page.svelte

@@ -38,7 +38,7 @@ const pollingIntervalMS = 2_500
 </script>
 
 <svelte:head>
-  <title>Union - Transfers</title>
+  <title>Union | Transfers</title>
 </svelte:head>
 
 <DraftPageNotice />