From 8eb2a147370f3f3623ce7d7eb807ca2c4d7c3bf3 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 4 Apr 2023 15:40:25 -0700
Subject: [PATCH] Better button styles

---
 src-web/components/Sidebar.tsx        |  8 ++---
 src-web/components/core/StatusTag.tsx | 52 +++++++++------------------
 src-web/components/core/Tabs/Tabs.tsx |  6 ++--
 src-web/lib/theme/window.ts           |  6 ++--
 tailwind.config.cjs                   |  4 +--
 5 files changed, 27 insertions(+), 49 deletions(-)

diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx
index 8146d2e7..50b680dd 100644
--- a/src-web/components/Sidebar.tsx
+++ b/src-web/components/Sidebar.tsx
@@ -195,7 +195,7 @@ const _SidebarItem = forwardRef(function SidebarItem(
         <Button
           tabIndex={0}
           color="custom"
-          size="sm"
+          size="xs"
           to={`/workspaces/${workspaceId}/requests/${requestId}`}
           draggable={false} // Item should drag, not the link
           onDoubleClick={() => setEditing(true)}
@@ -226,11 +226,7 @@ const _SidebarItem = forwardRef(function SidebarItem(
               {isResponseLoading(latestResponse) ? (
                 <Icon spin size="sm" icon="update" />
               ) : (
-                <StatusTag
-                  asBackground
-                  className="px-0.5 rounded-sm font-mono text-2xs"
-                  response={latestResponse}
-                />
+                <StatusTag className="text-2xs" response={latestResponse} />
               )}
             </div>
           )}
diff --git a/src-web/components/core/StatusTag.tsx b/src-web/components/core/StatusTag.tsx
index 2e73647a..472283f7 100644
--- a/src-web/components/core/StatusTag.tsx
+++ b/src-web/components/core/StatusTag.tsx
@@ -4,44 +4,24 @@ import type { HttpResponse } from '../../lib/models';
 interface Props {
   response: Pick<HttpResponse, 'status' | 'error'>;
   className?: string;
-  asBackground?: boolean;
 }
 
-export function StatusTag({ asBackground, response, className }: Props) {
+export function StatusTag({ response, className }: Props) {
   const { status, error } = response;
   const label = error ? 'ERR' : status;
-  if (asBackground) {
-    return (
-      <span
-        className={classnames(
-          className,
-          'text-white bg-opacity-90 dark:bg-opacity-40',
-          status >= 0 && status < 100 && 'bg-red-600',
-          status >= 100 && status < 200 && 'bg-yellow-600',
-          status >= 200 && status < 300 && 'bg-green-600',
-          status >= 300 && status < 400 && 'bg-pink-600',
-          status >= 400 && status < 500 && 'bg-orange-600',
-          status >= 500 && 'bg-red-600',
-        )}
-      >
-        {label}
-      </span>
-    );
-  } else {
-    return (
-      <span
-        className={classnames(
-          className,
-          status >= 0 && status < 100 && 'text-red-600',
-          status >= 100 && status < 200 && 'text-green-600',
-          status >= 200 && status < 300 && 'text-green-600',
-          status >= 300 && status < 400 && 'text-pink-600',
-          status >= 400 && status < 500 && 'text-orange-600',
-          status >= 500 && 'text-red-600',
-        )}
-      >
-        {label}
-      </span>
-    );
-  }
+  return (
+    <span
+      className={classnames(
+        className,
+        status >= 0 && status < 100 && 'text-red-600',
+        status >= 100 && status < 200 && 'text-green-600',
+        status >= 200 && status < 300 && 'text-green-600',
+        status >= 300 && status < 400 && 'text-pink-600',
+        status >= 400 && status < 500 && 'text-orange-600',
+        status >= 500 && 'text-red-600',
+      )}
+    >
+      {label}
+    </span>
+  );
 }
diff --git a/src-web/components/core/Tabs/Tabs.tsx b/src-web/components/core/Tabs/Tabs.tsx
index 7a8f8eb0..c71daf41 100644
--- a/src-web/components/core/Tabs/Tabs.tsx
+++ b/src-web/components/core/Tabs/Tabs.tsx
@@ -81,8 +81,10 @@ export function Tabs({
         <HStack space={1} className="flex-shrink-0">
           {tabs.map((t) => {
             const isActive = t.value === value;
-            // const btnClassName = classnames(isActive ? 'bg-highlightSecondary' : 'text-gray-600');
-            const btnClassName = classnames(isActive ? '' : 'text-gray-600', '!px-0 mr-4 ml-[1px]');
+            const btnClassName = classnames(
+              isActive ? '' : 'text-gray-600 hover:text-gray-800',
+              '!px-0 mr-4 ml-[1px]',
+            );
 
             if ('options' in t) {
               const option = t.options.items.find(
diff --git a/src-web/lib/theme/window.ts b/src-web/lib/theme/window.ts
index 2839d37b..0d7ebdee 100644
--- a/src-web/lib/theme/window.ts
+++ b/src-web/lib/theme/window.ts
@@ -12,11 +12,11 @@ const darkTheme: AppTheme = {
       colors: {
         gray: '#6b5b98',
         red: '#ff417b',
-        orange: '#ff9011',
+        orange: '#fd9014',
         yellow: '#e8d13f',
-        green: '#43e76f',
+        green: '#3fd265',
         blue: '#219dff',
-        pink: '#f670f6',
+        pink: '#ff6dff',
         violet: '#b176ff',
       },
     },
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f9ddab7c..c7bcd692 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -16,13 +16,13 @@ module.exports = {
         "xs": "0.8rem"
       },
       height: {
-        "xs": "1.5rem",
+        "xs": "1.75rem",
         "sm": "2.0rem",
         "md": "2.5rem"
       },
       lineHeight: {
         // HACK: Minus 2 to account for borders inside inputs
-        "xs": "calc(1.5rem - 2px)",
+        "xs": "calc(1.75rem - 2px)",
         "sm": "calc(2.0rem - 2px)",
         "md": "calc(2.5rem - 2px)"
       },