Update style of trace details (#154)

.changeset/dull-pandas-exercise.md

@@ -0,0 +1,5 @@
+---
+'@envyjs/webui': patch
+---
+
+Update style of trace detail

packages/webui/src/components/Authorization.tsx

@@ -91,7 +91,7 @@ export default function Authorization({ value }: AuthorizationProps) {
                   {type} {token}
                 </div>
                 <div className="flex items-center justify-end ml-auto">
-                  <ChevronDown className="w-6 h-6" />
+                  <ChevronDown className="w-4 h-4" />
                 </div>
               </div>
             );

packages/webui/src/components/Badge.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Badge from './Badge';
+
+const meta = {
+  title: 'Components/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Standard: Story = {
+  args: {
+    children: 'Label',
+    className: 'bg-gray-100',
+  },
+};

packages/webui/src/components/Badge.tsx

@@ -0,0 +1,14 @@
+import { tw } from '@/utils';
+
+export default function Badge({ className, children }: { className?: string; children: React.ReactNode }) {
+  return (
+    <span
+      className={tw(
+        'inline-flex items-center rounded-full bg-gray-400 px-3 py-1 text-sm font-medium text-white',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}

packages/webui/src/components/Button.stories.ts

@@ -9,8 +9,12 @@ const meta = {
     layout: 'centered',
   },
   argTypes: {
-    type: {
-      options: ['standard', 'action', 'ghost', 'danger'],
+    size: {
+      options: ['small', 'standard', 'large'],
+      control: { type: 'select' },
+    },
+    border: {
+      options: ['standard', 'ghost'],
       control: { type: 'select' },
     },
   },
@@ -22,5 +26,7 @@ type Story = StoryObj<typeof meta>;
 export const Standard: Story = {
   args: {
     children: 'Standard Button',
+    size: 'standard',
+    border: 'standard',
   },
 };

packages/webui/src/components/Button.tsx

@@ -2,9 +2,15 @@ import { MouseEvent, Ref, RefObject, forwardRef, useRef } from 'react';
 
 import { tw } from '@/utils';
 
-export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  size?: 'small' | 'standard' | 'large';
+  border?: 'standard' | 'ghost';
+};
 
-function Button({ onClick, className, children, ...props }: ButtonProps, ref: Ref<HTMLButtonElement>) {
+function Button(
+  { onClick, className, size = 'standard', border = 'standard', children, ...props }: ButtonProps,
+  ref: Ref<HTMLButtonElement>,
+) {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const finalRef = (ref || buttonRef) as RefObject<HTMLButtonElement>;
 
@@ -17,7 +23,10 @@ function Button({ onClick, className, children, ...props }: ButtonProps, ref: Re
     <button
       ref={finalRef}
       className={tw(
-        'flex gap-2 items-center p-2 text-secondary bg-primary border border-solid border-primary rounded-md shadow-sm hover:bg-gray-50',
+        'p-2 text-secondary bg-primary border border-solid border-primary rounded-md shadow-sm hover:bg-gray-50',
+        border === 'ghost' && 'bg-transparent border-transparent shadow-none',
+        size === 'small' && 'text-sm h-7 p-1',
+        size === 'large' && 'h-10',
         className,
       )}
       onClick={handleClick}