@@ -2,42 +2,42 @@ {{ define "title" }}new repo{{ end }}
 
 {{ define "content" }}
     <h1>new repo</h1>
-    <form>
-        <label for="name">repo name</label>
-        <input
-            type="text"
-            id="name"
-            name="name"
-            class="px-1 border-2 border-blue-100"
-            required
-        />
+    <form hx-post="/repo/new" class="mt-6 space-y-6" hx-swap="none">
+        <div class="space-y-2">
+            <label for="name" class="block">repo name</label>
+            <input
+                type="text"
+                id="name"
+                name="name"
+                required
+                class="w-full max-w-md"
+            />
+        </div>
 
-        <fieldset class="border-blue-100 border-2">
-            <legend>select a knot:</legend>
-            {{ range .Knots }}
-                <label>
-                    <input
-                        class="px-1 border-2 border-blue-500"
-                        type="radio"
-                        name="domain"
-                        value="{{ . }}"
-                    />
-                    {{ . }} </label
-                ><br />
-            {{ else }}
-                <p>no knots available</p>
-            {{ end }}
+        <fieldset class="space-y-3">
+            <legend class="font-medium">select a knot</legend>
+            <div class="space-y-2">
+                {{ range .Knots }}
+                    <div>
+                        <label class="inline-flex items-center">
+                            <input
+                                type="radio"
+                                name="domain"
+                                value="{{ . }}"
+                                class="mr-2"
+                            />
+                            <span>{{ . }}</span>
+                        </label>
+                    </div>
+                {{ else }}
+                    <p>No knots available</p>
+                {{ end }}
+            </div>
         </fieldset>
 
-        <button
-            type="submit"
-            hx-post="/repo/new"
-            hx-swap="none"
-            class="my-2 btn"
-        >
-            create repo
-        </button>
+        <div class="space-y-2">
+            <button type="submit" class="btn">create repo</button>
+            <div id="repo" class="error"></div>
+        </div>
     </form>
-
-    <div id="repo" class="error"></div>
 {{ end }}

@@ -3,36 +3,62 @@
 {{ define "content" }}
     <h1>settings</h1>
 
-    <h2>profile</h2>
-    <p><strong>handle:</strong> {{ .LoggedInUser.Handle }}</p>
-    <p><strong>did:</strong> {{ .LoggedInUser.Did }}</p>
-    <p><strong>pds:</strong> {{ .LoggedInUser.Pds }}</p>
+    <section class="mb-8">
+        <h2 class="text-xl mb-4">profile</h2>
+        <dl class="grid grid-cols-[auto_1fr] gap-x-4">
+            <dt>handle</dt>
+            <dd>{{ .LoggedInUser.Handle }}</dd>
+            <dt>did</dt>
+            <dd>{{ .LoggedInUser.Did }}</dd>
+            <dt>pds</dt>
+            <dd>{{ .LoggedInUser.Pds }}</dd>
+        </dl>
+    </section>
 
-    <h2>ssh keys</h2>
-    <form hx-put="/settings/keys">
-        <label for="name">key name:</label>
-        <input type="text" id="name" name="name" required />
+    <section>
+        <h2 class="text-xl mb-4">ssh keys</h2>
+        <form
+            hx-put="/settings/keys"
+            hx-swap="none"
+            class="max-w-2xl space-y-4 mb-8"
+        >
+            <div>
+                <label for="name" class="block mb-1">key name</label>
+                <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    required
+                    class="w-full"
+                />
+            </div>
 
-        <label for="key">pub key:</label>
-        <textarea
-            id="key"
-            name="key"
-            placeholder="ssh-rsa AAAAAA..."
-            required
-        ></textarea>
+            <div>
+                <label for="key" class="block mb-1">pub key</label>
+                <textarea
+                    id="key"
+                    name="key"
+                    placeholder="ssh-rsa AAAAAA..."
+                    required
+                    class="w-full h-24"
+                ></textarea>
+            </div>
+
+            <button class="btn" type="submit">add key</button>
 
-        <button class="btn my-2" type="submit">add key</button>
-    </form>
+            <div id="settings-keys" class="error"></div>
+        </form>
 
-    <h3>existing keys</h3>
-    <ul id="key-list">
-        {{ range .PubKeys }}
-            <li>
-                <strong>{{ .Name }}</strong><br />
-                <code>{{ .Key }}</code>
-            </li>
-        {{ else }}
-            <p>no ssh keys added yet</p>
-        {{ end }}
-    </ul>
+        <h3 class="text-lg mb-2">existing keys</h3>
+        <ul id="key-list" class="space-y-4">
+            {{ range .PubKeys }}
+                <li class="p-4 bg-gray-50 rounded">
+                    <h4 class="font-bold mb-2">{{ .Name }}</h4>
+                    <code class="block text-sm break-all">{{ .Key }}</code>
+                </li>
+            {{ else }}
+                <p class="text-gray-600">no ssh keys added yet</p>
+            {{ end }}
+        </ul>
+    </section>
 {{ end }}

@@ -30,7 +30,7 @@
 func (s *State) SettingsKeys(w http.ResponseWriter, r *http.Request) {
 	switch r.Method {
 	case http.MethodGet:
-		w.Write([]byte("unimplemented"))
+		s.pages.Notice(w, "settings-keys", "Unimplemented.")
 		log.Println("unimplemented")
 		return
 	case http.MethodPut:
@@ -43,11 +43,13 @@
 		_, _, _, _, err := ssh.ParseAuthorizedKey([]byte(key))
 		if err != nil {
 			log.Printf("parsing public key: %s", err)
+			s.pages.Notice(w, "settings-keys", "That doesn't look like a valid public key. Make sure it's a <strong>public</strong> key.")
 			return
 		}
 
 		if err := s.db.AddPublicKey(did, name, key); err != nil {
 			log.Printf("adding public key: %s", err)
+			s.pages.Notice(w, "settings-keys", "Failed to add public key.")
 			return
 		}
 
@@ -66,11 +68,12 @@ })
 		// invalid record
 		if err != nil {
 			log.Printf("failed to create record: %s", err)
+			s.pages.Notice(w, "settings-keys-bad", "Failed to create record.")
 			return
 		}
 
 		log.Println("created atproto record: ", resp.Uri)
-
+		s.pages.HxLocation(w, "/settings")
 		return
 	}
 }

@@ -11,37 +11,52 @@ }
     h1 {
         @apply text-2xl;
         @apply font-sans;
-        @apply text-gray-900;
+        @apply text-black;
         @apply py-4;
     }
 
     ::selection {
         @apply bg-green-400;
-        @apply text-gray-900;
+        @apply text-black;
         @apply bg-opacity-30;
     }
     a {
-        @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600;
+        @apply underline text-black hover:text-gray-800 visited:text-gray-600;
+    }
+
+    @layer base {
+        label {
+            @apply block text-sm text-black;
+        }
+        input {
+            @apply bg-white border border-black rounded-sm focus:ring-black p-2;
+        }
+        textarea {
+            @apply bg-white border border-black rounded-sm focus:ring-black p-2;
+        }
     }
 
     @layer components {
         .btn {
             @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
                 justify-center bg-transparent px-2 pb-[0.2rem] text-base
-                text-gray-900 before:absolute before:inset-0 before:-z-10
-                before:block before:rounded-sm before:border before:border-blue-200
-                before:bg-white before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#e5edff]
-                before:content-[''] hover:before:border-blue-300
-                hover:before:bg-blue-50
-                hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#e5edff]
+                text-black before:absolute before:inset-0 before:-z-10
+                before:block before:rounded-sm before:border before:border-black
+                before:bg-white before:shadow-[0_2px_2px_0_rgba(0,0,0,0.1),inset_0_-2px_0_0_#ffffff]
+                before:content-[''] hover:before:border-gray-800
+                hover:before:bg-gray-50
+                hover:before:shadow-[0_2px_2px_0_rgba(0,0,0,0.1),inset_0_-2px_0_0_#ffffff]
                 focus:outline-none focus-visible:before:outline
-                focus-visible:before:outline-4 focus-visible:before:outline-blue-500
-                active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)];
+                focus-visible:before:outline-4 focus-visible:before:outline-black
+                active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)];
         }
     }
     @layer utilities {
         .error {
-            @apply py-1 border-red-400 text-red-600;
+            @apply py-1 border-black text-black;
+        }
+        .success {
+            @apply py-1 border-black text-black;
         }
     }
 }