From 04a9527ea56da145b18fbc7d0893797975c6fbcf Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Mon, 04 May 2026 21:08:13 +0000
Subject: [PATCH] appview/pulls/new: tweak border and background color of elements

Signed-off-by: eti <eti@eti.tf>
---
 appview/pages/templates/knots/index.html | 2 +-
 appview/pages/templates/repo/new.html | 6 +++---
 appview/pages/templates/spindles/index.html | 2 +-
 appview/pages/templates/repo/fragments/diffOpts.html | 2 +-
 appview/pages/templates/strings/fragments/form.html | 2 +-
 appview/pages/templates/user/settings/emails.html | 2 +-
 appview/pages/templates/user/settings/keys.html | 4 ++--
 appview/pages/templates/user/settings/profile.html | 2 +-
 appview/pages/templates/repo/pulls/fragments/pullPatchUpload.html | 2 +-
 appview/pages/templates/repo/pulls/fragments/pullStepDetails.html | 6 +++---
 appview/pages/templates/repo/pulls/fragments/pullStepReview.html | 14 +++++++-------
 appview/pages/templates/repo/pulls/fragments/pullStepSource.html | 6 +++---
 12 file(s) changed, 25 insertion(s)(+), 25 deletion(s)(-)

diff --git a/appview/pages/templates/knots/index.html b/appview/pages/templates/knots/index.html
--- a/appview/pages/templates/knots/index.html
+++ b/appview/pages/templates/knots/index.html
@@ -79,7 +79,7 @@
           name="domain"
           placeholder="knot.example.com"
           required
-          class="flex-1 w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400 px-3 py-2 border rounded"
+          class="flex-1 w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:placeholder-gray-400 px-3 py-2 border rounded"
         >
         <button
           type="submit"
diff --git a/appview/pages/templates/repo/new.html b/appview/pages/templates/repo/new.html
--- a/appview/pages/templates/repo/new.html
+++ b/appview/pages/templates/repo/new.html
@@ -111,7 +111,7 @@
       id="description"
       name="description"
       maxlength="140"
-      class="w-full w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
+      class="w-full w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 border border-gray-300 rounded px-3 py-2"
       placeholder="A brief description of your project..."
     />
     <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
@@ -132,7 +132,7 @@
       name="branch"
       value="main"
       required
-      class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
+      class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 border border-gray-300 rounded px-3 py-2"
     />
     <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
       The primary branch where development happens. Common choices are "main" or "master".
@@ -146,7 +146,7 @@
     <label class="block text-sm font-bold uppercase dark:text-white mb-1">
       Select a knot
     </label>
-    <div class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded p-3 space-y-2">
+    <div class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 border border-gray-300 rounded p-3 space-y-2">
       {{ range .Knots }}
         <div class="flex items-center">
           <input
diff --git a/appview/pages/templates/spindles/index.html b/appview/pages/templates/spindles/index.html
--- a/appview/pages/templates/spindles/index.html
+++ b/appview/pages/templates/spindles/index.html
@@ -76,7 +76,7 @@
     name="instance"
     placeholder="spindle.example.com"
     required
-    class="flex-1 w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400 px-3 py-2 border rounded"
+    class="flex-1 w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:placeholder-gray-400 px-3 py-2 border rounded"
     >
     <button
     type="submit"
diff --git a/appview/pages/templates/repo/fragments/diffOpts.html b/appview/pages/templates/repo/fragments/diffOpts.html
--- a/appview/pages/templates/repo/fragments/diffOpts.html
+++ b/appview/pages/templates/repo/fragments/diffOpts.html
@@ -12,7 +12,7 @@
   {{ $field := .Field }}
   {{ if eq $field "" }}{{ $field = "diff" }}{{ end }}
 
-  <div class="inline-flex items-center gap-1 p-1 bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300"
+  <div class="inline-flex items-center gap-1 p-1 bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300 border dark:border-gray-700"
        hx-on::before-request="const t=event.target.closest('button'); if(!t||t.classList.contains('shadow-sm'))return event.preventDefault(); this.querySelectorAll('button').forEach(b => { const active=b===t; b.classList.toggle('bg-white',active); b.classList.toggle('dark:bg-gray-800',active); b.classList.toggle('shadow-sm',active); b.classList.toggle('cursor-default',active); b.classList.toggle('hover:text-gray-900',!active); b.classList.toggle('dark:hover:text-white',!active); })">
     <button
        {{ if $usePost }}
diff --git a/appview/pages/templates/strings/fragments/form.html b/appview/pages/templates/strings/fragments/form.html
--- a/appview/pages/templates/strings/fragments/form.html
+++ b/appview/pages/templates/strings/fragments/form.html
@@ -31,7 +31,7 @@
       name="content" 
       id="content-textarea"
       wrap="off"
-      class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400 font-mono"
+      class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:placeholder-gray-400 font-mono"
       rows="20"
       spellcheck="false"
       placeholder="Paste your string here!"
diff --git a/appview/pages/templates/user/settings/emails.html b/appview/pages/templates/user/settings/emails.html
--- a/appview/pages/templates/user/settings/emails.html
+++ b/appview/pages/templates/user/settings/emails.html
@@ -72,7 +72,7 @@
     name="email"
     required
     placeholder="your@email.com"
-    class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
+    class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:placeholder-gray-400"
   />
   <div class="flex gap-2 pt-2">
     <button
diff --git a/appview/pages/templates/user/settings/keys.html b/appview/pages/templates/user/settings/keys.html
--- a/appview/pages/templates/user/settings/keys.html
+++ b/appview/pages/templates/user/settings/keys.html
@@ -73,7 +73,7 @@
     name="name"
     required
     placeholder="key name"
-    class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
+    class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:placeholder-gray-400"
   />
   <textarea
     type="text"
@@ -81,7 +81,7 @@
     name="key"
     required
     placeholder="ssh-rsa AAAAB3NzaC1yc2E..."
-    class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"></textarea>
+    class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:placeholder-gray-400"></textarea>
   <div class="flex gap-2 pt-2">
     <button
       type="button"
diff --git a/appview/pages/templates/user/settings/profile.html b/appview/pages/templates/user/settings/profile.html
--- a/appview/pages/templates/user/settings/profile.html
+++ b/appview/pages/templates/user/settings/profile.html
@@ -80,7 +80,7 @@
           <label class="uppercase text-sm font-bold p-0">Change handle</label>
           <form hx-post="/settings/handle" hx-swap="none" class="flex flex-col gap-3">
             <input type="hidden" name="type" value="custom">
-            <input id="custom-domain-input" type="text" name="handle" placeholder="mycoolhandle.com" class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400 px-2 py-1.5 border border-gray-200 dark:border-gray-600 rounded outline-none focus:ring-1 focus:ring-blue-500" required>
+            <input id="custom-domain-input" type="text" name="handle" placeholder="mycoolhandle.com" class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:placeholder-gray-400 px-2 py-1.5 border border-gray-200 dark:border-gray-600 rounded outline-none focus:ring-1 focus:ring-blue-500" required>
             <div class="bg-gray-50 dark:bg-gray-900 rounded p-3 text-gray-500 dark:text-gray-400 flex flex-col gap-2 text-xs">
               <p>Set up one of the following on your domain:</p>
               <div>
diff --git a/appview/pages/templates/repo/pulls/fragments/pullPatchUpload.html b/appview/pages/templates/repo/pulls/fragments/pullPatchUpload.html
--- a/appview/pages/templates/repo/pulls/fragments/pullPatchUpload.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullPatchUpload.html
@@ -19,7 +19,7 @@
             name="patch"
             id="patch"
             rows="12"
-            class="w-full mt-2 resize-y font-mono dark:bg-gray-700 dark:text-white dark:border-gray-600"
+            class="w-full mt-2 resize-y font-mono dark:bg-gray-800 dark:text-white dark:border-gray-700"
             placeholder="diff --git a/file.txt b/file.txt
 index 1234567..abcdefg 100644
 --- a/file.txt
diff --git a/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html b/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html
--- a/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html
@@ -30,7 +30,7 @@
             name="title"
             id="title"
             value="{{ $root.Title }}"
-            class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600"
+            class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700"
             placeholder="One-line summary of your change."
         />
     </div>
@@ -54,7 +54,7 @@
     {{ $previewUrl := .PreviewUrl }}
     <div class="flex flex-col gap-2" data-md-editor="{{ $id }}">
         {{ $tabClasses := "group flex items-center gap-2 px-3 py-1 text-sm whitespace-nowrap rounded hover:no-underline data-[active=true]:bg-white data-[active=true]:dark:bg-gray-800 data-[active=true]:shadow-sm data-[active=true]:cursor-default data-[active=false]:hover:text-gray-900 data-[active=false]:dark:hover:text-white" }}
-        <div class="inline-flex items-center gap-1 p-1 bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300 self-start">
+        <div class="inline-flex items-center gap-1 p-1 bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300 self-start border dark:border-gray-700">
             <button type="button" data-md-mode="write"
                 data-active="true"
                 class="{{ $tabClasses }}">
@@ -80,7 +80,7 @@
                 id="{{ $id }}"
                 name="{{ $name }}"
                 rows="{{ $rows }}"
-                class="w-full resize-y dark:bg-gray-700 dark:text-white dark:border-gray-600"
+                class="w-full resize-y dark:bg-gray-800 dark:text-white dark:border-gray-700"
                 placeholder="{{ $placeholder }}"
             >{{ $value }}</textarea>
         </div>
diff --git a/appview/pages/templates/repo/pulls/fragments/pullStepReview.html b/appview/pages/templates/repo/pulls/fragments/pullStepReview.html
--- a/appview/pages/templates/repo/pulls/fragments/pullStepReview.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullStepReview.html
@@ -144,7 +144,7 @@
                                             type="text"
                                             name="{{ $titleName }}"
                                             value="{{ $displayTitle }}"
-                                            class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600"
+                                            class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700"
                                             placeholder="{{ $p.Title }}"
                                         />
                                     </div>
@@ -216,14 +216,14 @@
     {{ if $p.SHA }}
         <span class="flex items-center gap-1 text-gray-700 dark:text-gray-300 flex-shrink-0">
             <button type="button"
-                class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+                class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-700 dark:text-gray-300"
                 title="Copy SHA"
                 onclick="event.preventDefault(); event.stopPropagation(); navigator.clipboard.writeText('{{ $p.SHA }}'); this.innerHTML=`{{ i "copy-check" "w-4 h-4" }}`; setTimeout(() => this.innerHTML=`{{ i "copy" "w-4 h-4" }}`, 1500)">
                 {{ i "copy" "w-4 h-4" }}
             </button>
             <a href="/{{ $repoInfo.FullName }}/tree/{{ $p.SHA }}"
                onclick="event.stopPropagation()"
-               class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+               class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-700 dark:text-gray-300"
                title="Browse repository at this commit">
                 {{ i "folder-code" "w-4 h-4" }}
             </a>
@@ -254,14 +254,14 @@
     <input type="checkbox" id="{{ $togId }}" class="hidden"/>
 
     <div id="{{ $diffAreaId }}">
-        <div class="bg-slate-100 dark:bg-gray-900 flex items-center gap-2 h-12 p-2 rounded-t-md border border-b-0 border-gray-200 dark:border-gray-700">
+        <div class="bg-slate-100 dark:bg-gray-700/50 flex items-center gap-2 h-12 p-2 rounded-t-md border border-b-0 border-gray-200 dark:border-gray-700">
             <label title="Toggle filetree panel" for="{{ $togId }}" class="hidden md:inline-flex items-center justify-center rounded cursor-pointer text-normal font-normal normal-case">
                 <span class="show-text">{{ i "panel-left-open" "size-4" }}</span>
                 <span class="hide-text">{{ i "panel-left-close" "size-4" }}</span>
             </label>
 
             {{ template "repo/fragments/diffStatPill" $stat }}
-            <span class="text-xs text-gray-600 dark:text-gray-400 hidden md:inline-flex">{{ $count }} changed file{{ if ne $count 1 }}s{{ end }}</span>
+            <span class="text-xs text-gray-600 dark:text-gray-300 hidden md:inline-flex">{{ $count }} changed file{{ if ne $count 1 }}s{{ end }}</span>
 
             <div class="flex-grow"></div>
 
@@ -425,14 +425,14 @@
     <input type="checkbox" id="composeFilesToggle" class="hidden"/>
 
     <div id="diff-area">
-        <div class="bg-slate-100 dark:bg-gray-900 flex items-center gap-2 h-12 p-2 rounded-t-md border border-b-0 border-gray-200 dark:border-gray-700">
+        <div class="bg-slate-100 dark:bg-gray-700/50 flex items-center gap-2 h-12 p-2 rounded-t-md border border-b-0 border-gray-200 dark:border-gray-700">
             <label title="Toggle filetree panel" for="composeFilesToggle" class="hidden md:inline-flex items-center justify-center rounded cursor-pointer text-normal font-normal normal-case">
                 <span class="show-text">{{ i "panel-left-open" "size-4" }}</span>
                 <span class="hide-text">{{ i "panel-left-close" "size-4" }}</span>
             </label>
 
             {{ template "repo/fragments/diffStatPill" $stat }}
-            <span class="text-xs text-gray-600 dark:text-gray-400 hidden md:inline-flex">{{ $count }} changed file{{ if ne $count 1 }}s{{ end }}</span>
+            <span class="text-xs text-gray-600 dark:text-gray-300 hidden md:inline-flex">{{ $count }} changed file{{ if ne $count 1 }}s{{ end }}</span>
 
             <div class="flex-grow"></div>
 
diff --git a/appview/pages/templates/repo/pulls/fragments/pullStepSource.html b/appview/pages/templates/repo/pulls/fragments/pullStepSource.html
--- a/appview/pages/templates/repo/pulls/fragments/pullStepSource.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullStepSource.html
@@ -94,13 +94,13 @@
 {{ end }}
 
 {{ define "pullSourceTabs" }}
-    {{ $active := "bg-white dark:bg-gray-800 shadow-sm cursor-default" }}
+    {{ $active := "bg-white dark:bg-gray-800 shadow-sm cursor-default border border-gray-700" }}
     {{ $inactive := "bg-transparent hover:bg-white/50 dark:hover:bg-gray-800/50" }}
-    {{ $shared := "group flex-1 p-3 text-left hover:no-underline flex flex-col gap-1 rounded border-0" }}
+    {{ $shared := "group flex-1 p-3 text-left hover:no-underline flex flex-col gap-1 rounded" }}
     {{ $titleCls := "font-medium text-sm dark:text-white flex items-center gap-2" }}
     {{ $descCls := "text-xs text-gray-500 dark:text-gray-400" }}
     {{ $fullName := .RepoInfo.FullName }}
-    <div class="flex gap-1 p-1 rounded-md bg-slate-100 dark:bg-gray-900"
+    <div class="flex gap-1 p-1.5 rounded-md bg-slate-100 dark:bg-gray-900 border dark:border-gray-700 items-center justify-stretch"
          hx-on::before-request="const t=event.target.closest('button'); if(!t||t.classList.contains('shadow-sm'))return event.preventDefault();">
         {{ if .RepoInfo.Roles.IsPushAllowed }}
             <button

--
tangled.sh