appview/pages: new button for create actions

Signed-off-by: Anirudh Oppiliappan <[e-mail]>

appview/pages/templates/layouts/topbar.html

···
 {{ define "layouts/topbar" }}
     <nav class="space-x-4 mb-4 px-6 py-2 rounded bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">
-        <div class="container flex justify-between p-0">
+        <div class="container flex justify-between p-0 items-center">
             <div id="left-items">
                 <a href="/" hx-boost="true" class="flex gap-2 font-semibold italic">
                   tangled<sub>alpha</sub>
···
                 {{ i "code" "size-4" }} source
               </a>
             </div>
-            <div id="right-items" class="flex gap-2">
+            <div id="right-items" class="flex items-center gap-4">
                 {{ with .LoggedInUser }}
-                    <a href="/repo/new" hx-boost="true">
-                      {{ i "plus" "w-6 h-6" }}
+                    <a href="/repo/new" hx-boost="true" class="btn-create hover:no-underline hover:text-white">
+                      {{ i "plus" "w-4 h-4" }}
                     </a>
                     {{ block "dropDown" . }} {{ end }}
                 {{ else }}
···
         <a href="/knots">knots</a>
         <a href="/spindles">spindles</a>
         <a href="/settings">settings</a>
-        <a href="#" 
-           hx-post="/logout" 
-           hx-swap="none" 
+        <a href="#"
+           hx-post="/logout"
+           hx-swap="none"
            class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
           logout
         </a>

appview/pages/templates/repo/issues/issues.html

···
   </div>
   <a
       href="/{{ .RepoInfo.FullName }}/issues/new"
-      class="btn text-sm flex items-center justify-center gap-2 no-underline hover:no-underline"
+      class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"
       >
       {{ i "circle-plus" "w-4 h-4" }}
       <span>new</span>

appview/pages/templates/repo/issues/new.html

···
                 ></textarea>
             </div>
             <div>
-                <button type="submit" class="btn flex items-center gap-2">
-                    create
-                    <span id="spinner" class="group">
-                      {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+                <button type="submit" class="btn-create flex items-center gap-2">
+                    {{ i "circle-plus" "w-4 h-4" }}
+                    create issue
+                    <span id="create-pull-spinner" class="group">
+                        {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
                     </span>
                 </button>
             </div>

appview/pages/templates/repo/new.html

···
     </fieldset>
 
     <div class="space-y-2">
-      <button type="submit" class="btn flex items-center">
-        create repo
-        <span id="spinner" class="group">
-          {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-        </span>
-      </button>
-      <div id="repo" class="error"></div>
+        <button type="submit" class="btn-create flex items-center gap-2">
+            {{ i "book-plus" "w-4 h-4" }}
+            create repo
+            <span id="create-pull-spinner" class="group">
+                {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+            </span>
+        </button>
+        <div id="repo" class="error"></div>
     </div>
   </form>
 </div>

appview/pages/templates/repo/pulls/new.html

···
             </div>
 
             <div class="flex justify-start items-center gap-2 mt-4">
-                <button type="submit" class="btn flex items-center gap-2">
+                <button type="submit" class="btn-create flex items-center gap-2">
                     {{ i "git-pull-request-create" "w-4 h-4" }}
                     create pull
                     <span id="create-pull-spinner" class="group">

appview/pages/templates/repo/pulls/pulls.html

···
         </div>
         <a
             href="/{{ .RepoInfo.FullName }}/pulls/new"
-            class="btn text-sm flex items-center gap-2 no-underline hover:no-underline"
+            class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"
         >
             {{ i "git-pull-request-create" "w-4 h-4" }}
             <span>new</span>

input.css

···
 
     @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 before:border before:border-gray-200
-            before:bg-white before:drop-shadow-sm
-            before:content-[''] hover:before:border-gray-300
-            hover:before:bg-gray-50
-            hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
-            focus:outline-none focus-visible:before:outline
-            focus-visible:before:outline-4 focus-visible:before:outline-gray-500
-            active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)]
-            disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:before:border-gray-200
-            disabled:hover:before:bg-white disabled:hover:before:shadow-none
-            dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700
-            dark:hover:before:border-gray-600 dark:hover:before:bg-gray-700
-            dark:hover:before:shadow-[0_2px_2px_0_rgba(0,0,0,0.2),inset_0_-2px_0_0_#2d3748]
-            dark:focus-visible:before:outline-gray-400
-            dark:active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.3)]
-            dark:disabled:hover:before:bg-gray-800 dark:disabled:hover:before:border-gray-700;
+            @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center
+          bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900
+          before:absolute before:inset-0 before:-z-10 before:block before:rounded
+          before:border before:border-gray-200 before:bg-white
+          before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)]
+          before:content-[''] before:transition-all before:duration-150 before:ease-in-out
+          hover:before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)]
+          hover:before:bg-gray-50
+          dark:hover:before:bg-gray-700
+          active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)]
+          focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400
+          disabled:cursor-not-allowed disabled:opacity-50
+          dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700;
+        }
+
+        .btn-create {
+            @apply btn text-white
+          before:bg-green-600 hover:before:bg-green-700
+          dark:before:bg-green-700 dark:hover:before:bg-green-800
+          before:border before:border-green-700 hover:before:border-green-800
+          focus-visible:before:outline-green-500
+          disabled:before:bg-green-400 dark:disabled:before:bg-green-600;
         }
 
         .prose img {