Better button styles

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>
           )}

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>
+  );
 }

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(