refactor: Improve UI aesthetics with updated tab and card styles, and refactor RenderTree data formatting for hooks. (#89)

Author: JerryWu1234

.changeset/sunny-houses-eat.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/devtools': patch
+---
+
+refactor: Improve UI aesthetics with updated tab and card styles, and refactor RenderTree data formatting for hooks.

.gitignore

@@ -64,4 +64,6 @@ testem.log
 .DS_Store
 Thumbs.db
 .vite-inspect
-.pnpm-store/*
+.pnpm-store/*
+qwik/*
+.cursor/skills/*

packages/devtools/package.json

@@ -29,7 +29,7 @@
     "@tailwindcss/postcss": "^4.2.1",
     "@tailwindcss/vite": "^4.2.1",
     "tailwindcss": "^4.2.1",
-    "vite": "8.0.0"
+    "vite": ">=7.0.0 <9.0.0"
   },
   "dependencies": {
     "birpc": "^4.0.0",

packages/kit/package.json

@@ -22,7 +22,7 @@
     "superjson": "^2.2.6"
   },
   "peerDependencies": {
-    "vite": "8.0.0"
+    "vite": ">=7.0.0 <9.0.0"
   },
   "devDependencies": {
     "@types/eslint": "9.6.1",

packages/ui/src/components/DevtoolsButton/DevtoolsButton.tsx

@@ -7,7 +7,7 @@ interface DevtoolsButtonProps {
 
 export const DevtoolsButton = component$((props: DevtoolsButtonProps) => {
   // Signal for the button's position (distance from bottom-right corner)
-  const position = useSignal({ x: 16, y: 16 });
+  const position = useSignal({ x: 24, y: 24 });
   // Signal to track if the element is currently being dragged
   const isDragging = useSignal(false);
   // Ref for the draggable element
@@ -94,15 +94,13 @@ export const DevtoolsButton = component$((props: DevtoolsButtonProps) => {
   return (
     <div
       ref={elementRef}
-      class={{
-        'border-border bg-background fixed flex h-9 w-9 origin-center select-none items-center justify-center rounded-lg border backdrop-blur-md':
-          true,
-        'border-accent/50 bg-background/95 shadow-accent/35 rotate-90 shadow-lg':
-          props.state?.isOpen && !isDragging.value,
-        'cursor-grab': !isDragging.value,
-        'cursor-grabbing': isDragging.value,
-        'transition-all duration-300 ease-in-out': !isDragging.value,
-      }}
+      class={[
+        'fixed flex h-14 w-14 origin-center select-none items-center justify-center rounded-full z-[9990]',
+        props.state?.isOpen && !isDragging.value
+          ? 'glass-button shadow-accent/20 rotate-90 scale-90 opacity-0 pointer-events-none'
+          : 'glass-button animate-pulsar hover:scale-105 hover:shadow-[0_0_20px_rgba(22,182,246,0.5)] opacity-100',
+        !isDragging.value ? 'cursor-pointer transition-all duration-500 ease-out' : 'cursor-grabbing scale-95 opacity-80',
+      ]}
       style={{
         bottom: `${position.value.y}px`,
         right: `${position.value.x}px`,
@@ -113,12 +111,12 @@ export const DevtoolsButton = component$((props: DevtoolsButtonProps) => {
       onClick$={handleClick}
     >
       <img
-        width={20}
-        height={20}
+        width={28}
+        height={28}
         src="https://qwik.dev/logos/qwik-logo.svg"
         alt="Qwik Logo"
         draggable={false}
-        class="pointer-events-none h-5 w-5 opacity-90 drop-shadow-md"
+        class="pointer-events-none h-7 w-7 opacity-90 drop-shadow-[0_2px_4px_rgba(0,0,0,0.2)]"
       />
     </div>
   );

packages/ui/src/components/DevtoolsPanel/DevtoolsPanel.tsx

@@ -30,18 +30,18 @@ export const DevtoolsPanel = component$(({ state }: DevtoolsPanelProps) => {
   return (
     <>
       <div
-        class="fixed inset-0 bg-black/40 backdrop-blur-[1px]"
+        class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9990] transition-opacity duration-300"
         onMouseDown$={() => {
           state.isOpen = false;
         }}
       />
       <div
-        class="border-border bg-background text-foreground fixed bottom-6 right-6 flex h-[calc(100vh-3rem)] w-[calc(100vw-3rem)] translate-y-0 transform overflow-hidden rounded-lg border-2 backdrop-blur-lg transition-transform duration-300 ease-in-out"
+        class="glass-panel text-foreground fixed bottom-6 right-6 z-[9991] flex h-[calc(100vh-3rem)] w-[calc(100vw-3rem)] md:w-[90vw] lg:w-[85vw] max-w-7xl animate-slide-up-fade overflow-hidden rounded-2xl transition-transform duration-300 ease-out origin-bottom-right"
       >
         <button
           type="button"
           aria-label="Close devtools"
-          class="border-border bg-background/90 text-muted-foreground hover:text-foreground absolute top-3 right-3 z-10 flex h-9 w-9 items-center justify-center rounded-md border shadow-sm transition-colors cursor-pointer"
+          class="bg-card-item-bg hover:bg-card-item-hover-bg border-glass-border text-muted-foreground hover:text-foreground absolute top-4 right-4 z-20 flex h-9 w-9 items-center justify-center rounded-full border backdrop-blur-md transition-all hover:scale-105 active:scale-95 cursor-pointer shadow-sm"
           onClick$={() => {
             state.isOpen = false;
           }}

packages/ui/src/components/Tab/Tab.tsx

@@ -8,18 +8,19 @@ interface TabProps {
 }
 
 export const Tab = component$<TabProps>(({ state, id, title }) => {
+  const isActive = state.activeTab === id;
+
   return (
     <button
       onClick$={() => (state.activeTab = id)}
       title={title}
-      class={{
-        'flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200':
-          true,
-        'hover:bg-foreground/5 text-muted-foreground hover:text-foreground bg-transparent':
-          state.activeTab !== id,
-        'shadow-accent/35 bg-accent text-white shadow-lg':
-          state.activeTab === id,
-      }}
+      class={[
+        'relative flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-300 ease-out cursor-pointer select-none',
+        isActive
+          ? 'bg-primary/15 text-primary'
+          : 'text-muted-foreground hover:bg-foreground/5 hover:text-foreground'
+      ]}
+      style={isActive ? { boxShadow: 'inset 3px 0 0 0 var(--color-primary)' } : {}}
     >
       <Slot />
     </button>

packages/ui/src/components/TabContent/TabContent.tsx

@@ -2,12 +2,12 @@ import { component$, Slot } from '@qwik.dev/core';
 
 export const TabContent = component$(() => {
   return (
-    <div class="flex h-full w-full flex-col space-y-6">
-      <div class="border-border flex items-center justify-between border-b pb-4">
+    <div class="flex h-full w-full flex-col space-y-8 animate-slide-up-fade" style="animation-duration: 0.3s; animation-fill-mode: both; animation-delay: 0.1s;">
+      <div class="border-glass-border flex items-center justify-between border-b pb-4 px-2">
         <Slot name="title" />
       </div>
 
-      <div class="flex-1 overflow-y-auto pb-6">
+      <div class="custom-scrollbar flex-1 overflow-y-auto px-2 pb-8">
         <Slot name="content" />
       </div>
     </div>

packages/ui/src/components/TabTitle/TabTitle.tsx

@@ -5,5 +5,9 @@ interface TabTitleProps {
 }
 
 export const TabTitle = component$(({ title }: TabTitleProps) => {
-  return <h3 class="text-xl font-semibold">{title}</h3>;
+  return (
+    <h3 class="text-2xl font-bold tracking-tight bg-gradient-to-br from-foreground to-muted-foreground bg-clip-text text-transparent">
+      {title}
+    </h3>
+  );
 });