Adjust danger button colors and add ghost danger button

Author: jpenilla

web/src/app.css

@@ -129,7 +129,10 @@
 
 @utility btn-fill-danger {
     @apply btn-fill text-white;
-    --btn-color: var(--color-red-500);
+    --btn-color: var(--color-red-700);
+    @variant dark {
+        --btn-color: var(--color-red-800);
+    }
 }
 
 @utility btn-fill-primary {
@@ -175,6 +178,27 @@
     }
 }
 
+@utility btn-ghost-danger {
+    @apply border btn-ghost;
+    --btn-color: var(--color-red-700);
+    color: var(--color-red-800);
+    @variant dark {
+        --btn-color: var(--color-red-800);
+        color: var(--color-red-300);
+    }
+    border-color: transparent;
+    &:hover {
+        color: white;
+        border-color: var(--btn-border);
+        @apply shadow-xs;
+    }
+    &:active {
+        color: white;
+        border-color: var(--btn-border);
+        @apply shadow-none;
+    }
+}
+
 .png-bg {
     background: url("/png.gif") right bottom var(--color-gray-300);
 }

web/src/routes/OpenDiffDialog.svelte

@@ -122,7 +122,7 @@
                     <span class="iconify shrink-0 octicon--person-16"></span>
                     {getGithubUsername()}
                 </div>
-                <Button.Root class="flex items-center gap-2 rounded-md btn-fill-danger px-2 py-1" onclick={logoutGithub}>
+                <Button.Root class="flex items-center gap-2 rounded-md btn-ghost-danger px-2 py-1" onclick={logoutGithub}>
                     <span class="iconify shrink-0 octicon--sign-out-16"></span>
                     Sign out
                 </Button.Root>