From 6f1dc79f5df55dc883b7863bf3232f1f23471f4f Mon Sep 17 00:00:00 2001
From: Juliet <m@juli.ee>
Date: Fri, 10 Oct 2025 20:02:48 +0200
Subject: [PATCH] restyle account manager

---
 src/components/account.tsx |  3 +--
 src/components/login.tsx   | 32 ++++++++++++++++++++------------
 src/components/search.tsx  | 10 +++++-----
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/account.tsx b/src/components/account.tsx
index d85c5c4..6132251 100644
--- a/src/components/account.tsx
+++ b/src/components/account.tsx
@@ -69,8 +69,7 @@ const AccountManager = () => {
     <>
       <Modal open={openManager()} onClose={() => setOpenManager(false)}>
         <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">
-          <div class="mb-2 flex items-center gap-1 px-1 font-semibold">
-            <span class="iconify lucide--user-round"></span>
+          <div class="mb-2 px-1 font-semibold">
             <span>Manage accounts</span>
           </div>
           <div class="mb-3 max-h-[20rem] overflow-y-auto md:max-h-[25rem]">
diff --git a/src/components/login.tsx b/src/components/login.tsx
index 726194e..2ced4e2 100644
--- a/src/components/login.tsx
+++ b/src/components/login.tsx
@@ -12,7 +12,6 @@ import {
   type Session,
 } from "@atcute/oauth-browser-client";
 import { createSignal, Show } from "solid-js";
-import { TextInput } from "./text-input";
 
 configureOAuth({
   metadata: {
@@ -29,6 +28,7 @@ const Login = () => {
 
   const login = async (handle: string) => {
     try {
+      setNotice("");
       if (!handle) return;
       let resolved;
       if (!isHandle(handle)) {
@@ -58,24 +58,32 @@ const Login = () => {
   return (
     <form class="flex flex-col gap-y-2 px-1" onsubmit={(e) => e.preventDefault()}>
       <div class="flex items-center gap-1">
-        <label for="handle" class="mr-1 flex items-center">
-          <span class="iconify lucide--user-round-plus text-lg"></span>
+        <label for="handle" class="hidden">
+          Add account
         </label>
-        <TextInput
-          id="handle"
-          placeholder="user.bsky.social"
-          onInput={(e) => setLoginInput(e.currentTarget.value)}
-          class="grow"
-        />
+        <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">
+          <label
+            for="handle"
+            class="iconify lucide--user-round-plus text-neutral-500 dark:text-neutral-400"
+          ></label>
+          <input
+            type="text"
+            spellcheck={false}
+            placeholder="user.bsky.social"
+            id="handle"
+            class="grow py-1 select-none placeholder:text-sm focus:outline-none"
+            onInput={(e) => setLoginInput(e.currentTarget.value)}
+          />
+        </div>
         <button
           onclick={() => login(loginInput())}
-          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"
+          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"
         >
-          <span class="iconify lucide--log-in text-lg"></span>
+          <span class="iconify lucide--log-in"></span>
         </button>
       </div>
       <Show when={notice()}>
-        <div>{notice()}</div>
+        <div class="text-sm">{notice()}</div>
       </Show>
     </form>
   );
diff --git a/src/components/search.tsx b/src/components/search.tsx
index d5a230c..5faef0f 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -99,18 +99,18 @@ const Search = () => {
       <label for="input" class="hidden">
         PDS URL, AT URI, or handle
       </label>
-      <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">
-        <span
+      <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">
+        <label
+          for="input"
           class="iconify lucide--search text-neutral-500 dark:text-neutral-400"
-          onClick={() => searchInput.focus()}
-        ></span>
+        ></label>
         <input
           type="text"
           spellcheck={false}
           placeholder="PDS URL, AT URI, DID, or handle"
           ref={searchInput}
           id="input"
-          class="grow select-none placeholder:text-sm focus:outline-none"
+          class="grow py-1 select-none placeholder:text-sm focus:outline-none"
           value={input() ?? ""}
           onInput={(e) => setInput(e.currentTarget.value)}
         />
-- 
2.51.2