restyle account manager

juli.ee 6f1dc79f 7370ad75

verified
Changed files
+26 -19
src
+1 -2
src/components/account.tsx
··· 69 69 <> 70 70 <Modal open={openManager()} onClose={() => setOpenManager(false)}> 71 71 <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-16 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0"> 72 - <div class="mb-2 flex items-center gap-1 px-1 font-semibold"> 73 - <span class="iconify lucide--user-round"></span> 72 + <div class="mb-2 px-1 font-semibold"> 74 73 <span>Manage accounts</span> 75 74 </div> 76 75 <div class="mb-3 max-h-[20rem] overflow-y-auto md:max-h-[25rem]">
+20 -12
src/components/login.tsx
··· 12 12 type Session, 13 13 } from "@atcute/oauth-browser-client"; 14 14 import { createSignal, Show } from "solid-js"; 15 - import { TextInput } from "./text-input"; 16 15 17 16 configureOAuth({ 18 17 metadata: { ··· 29 28 30 29 const login = async (handle: string) => { 31 30 try { 31 + setNotice(""); 32 32 if (!handle) return; 33 33 let resolved; 34 34 if (!isHandle(handle)) { ··· 58 58 return ( 59 59 <form class="flex flex-col gap-y-2 px-1" onsubmit={(e) => e.preventDefault()}> 60 60 <div class="flex items-center gap-1"> 61 - <label for="handle" class="mr-1 flex items-center"> 62 - <span class="iconify lucide--user-round-plus text-lg"></span> 61 + <label for="handle" class="hidden"> 62 + Add account 63 63 </label> 64 - <TextInput 65 - id="handle" 66 - placeholder="user.bsky.social" 67 - onInput={(e) => setLoginInput(e.currentTarget.value)} 68 - class="grow" 69 - /> 64 + <div class="dark:bg-dark-100 dark:shadow-dark-800 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-700 dark:focus-within:outline-neutral-400"> 65 + <label 66 + for="handle" 67 + class="iconify lucide--user-round-plus text-neutral-500 dark:text-neutral-400" 68 + ></label> 69 + <input 70 + type="text" 71 + spellcheck={false} 72 + placeholder="user.bsky.social" 73 + id="handle" 74 + class="grow py-1 select-none placeholder:text-sm focus:outline-none" 75 + onInput={(e) => setLoginInput(e.currentTarget.value)} 76 + /> 77 + </div> 70 78 <button 71 79 onclick={() => login(loginInput())} 72 - class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 80 + class="flex items-center rounded-lg p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 73 81 > 74 - <span class="iconify lucide--log-in text-lg"></span> 82 + <span class="iconify lucide--log-in"></span> 75 83 </button> 76 84 </div> 77 85 <Show when={notice()}> 78 - <div>{notice()}</div> 86 + <div class="text-sm">{notice()}</div> 79 87 </Show> 80 88 </form> 81 89 );
+5 -5
src/components/search.tsx
··· 99 99 <label for="input" class="hidden"> 100 100 PDS URL, AT URI, or handle 101 101 </label> 102 - <div class="dark:bg-dark-100 dark:shadow-dark-800 flex items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-700 dark:focus-within:outline-neutral-400"> 103 - <span 102 + <div class="dark:bg-dark-100 dark:shadow-dark-800 flex items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-700 dark:focus-within:outline-neutral-400"> 103 + <label 104 + for="input" 104 105 class="iconify lucide--search text-neutral-500 dark:text-neutral-400" 105 - onClick={() => searchInput.focus()} 106 - ></span> 106 + ></label> 107 107 <input 108 108 type="text" 109 109 spellcheck={false} 110 110 placeholder="PDS URL, AT URI, DID, or handle" 111 111 ref={searchInput} 112 112 id="input" 113 - class="grow select-none placeholder:text-sm focus:outline-none" 113 + class="grow py-1 select-none placeholder:text-sm focus:outline-none" 114 114 value={input() ?? ""} 115 115 onInput={(e) => setInput(e.currentTarget.value)} 116 116 />