refactor(ui): consolidate unocss style to use class (#11206)

Co-authored-by: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Co-authored-by: Codex (GPT-6) <noreply@openai.com>

Author: hi-ogawa

packages/ui/client/components/BrowserIframe.vue

@@ -58,18 +58,18 @@ const scale = computed(() =>
 </script>
 
 <template>
-  <div id="browser-frame" h="full" flex="~ col">
-    <div p="3" h-10 flex="~ gap-2" items-center bg-header border="b base">
+  <div id="browser-frame" class="h-full flex flex-col">
+    <div class="p-3 h-10 flex gap-2 items-center bg-header border-b border-base">
       <IconButton
         v-show="panels.navigation <= 15"
         v-tooltip.bottom="'Show Navigation Panel'"
         title="Show Navigation Panel"
-        rotate-180
+        class="rotate-180"
         icon="i-carbon:side-panel-close"
         @click="showNavigationPanel()"
       />
       <div class="i-carbon-content-delivery-network" />
-      <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>Browser UI</span>
+      <span class="pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate">Browser UI</span>
       <IconButton
         v-show="detailsPosition === 'right' && !detailsPanelVisible"
         v-tooltip.bottom="'Show Details Panel'"
@@ -78,7 +78,7 @@ const scale = computed(() =>
         @click="detailsPanelVisible = true"
       />
     </div>
-    <div p="l3 y2 r2" flex="~ gap-2" items-center bg-header border="b-2 base">
+    <div class="pl-3 py-2 pr-2 flex gap-2 items-center bg-header border-base border-b-2">
       <!-- TODO: these are only for preview (thank you Storybook!), we need to support more different and custom sizes (as a dropdown) -->
       <IconButton
         v-tooltip.bottom="'Small mobile'"
@@ -101,7 +101,7 @@ const scale = computed(() =>
         :active="isViewport('tablet')"
         @click="changeViewport('tablet')"
       />
-      <span class="pointer-events-none" text-sm>
+      <span class="pointer-events-none text-sm">
         {{ viewport[0] }}x{{ viewport[1] }}px
         <span v-if="scale < 100">({{ scale }}%)</span>
       </span>

packages/ui/client/components/ClosedDetailsHeader.vue

@@ -4,13 +4,9 @@ import DetailsHeaderButtons from '~/components/DetailsHeaderButtons.vue'
 
 <template>
   <div
-    p="2"
-    flex="~ gap-2"
-    items-center
-    bg-header
-    border="b base"
+    class="p-2 flex gap-2 items-center bg-header border-b border-base"
   >
-    <div flex-1 />
+    <div class="flex-1" />
     <DetailsHeaderButtons />
   </div>
 </template>

packages/ui/client/components/CodeMirrorContainer.vue

@@ -71,10 +71,7 @@ onMounted(async () => {
 
 <template>
   <div
-    relative
-    font-mono
-    text-sm
-    class="codemirror-scrolls"
+    class="codemirror-scrolls relative font-mono text-sm"
     :class="{
       'codemirror-busy': saving,
       'codemirror-hide-cursor': readOnly,

packages/ui/client/components/ConnectionOverlay.vue

@@ -10,36 +10,25 @@ import {
 <template>
   <template v-if="!isConnected">
     <div
-      fixed
-      inset-0
-      p2
-      z-10
-      select-none
-      text="center sm"
-      bg="overlay"
-      backdrop-blur-sm
-      backdrop-saturate-0
+      class="fixed inset-0 p2 z-10 select-none text-center text-sm bg-overlay backdrop-blur-sm backdrop-saturate-0"
       @click="client.reconnect"
     >
       <div
-        h-full
-        flex="~ col gap-2"
-        items-center
-        justify-center
+        class="h-full flex flex-col gap-2 items-center justify-center"
         :class="isConnecting ? 'animate-pulse' : ''"
       >
         <div
-          text="5xl"
+          class="text-5xl"
           :class="
             isConnecting
               ? 'i-carbon:renew animate-spin animate-reverse'
               : 'i-carbon-wifi-off'
           "
         />
-        <div text-2xl>
+        <div class="text-2xl">
           {{ isConnecting ? "Connecting..." : "Disconnected" }}
         </div>
-        <div text-lg op50>
+        <div class="text-lg op50">
           Check your terminal or start a new server with `{{
             browserState
               ? `vitest --browser=${browserState.config.browser.name}`

packages/ui/client/components/Coverage.vue

@@ -4,13 +4,13 @@ import { browserState } from '~/composables/client'
 </script>
 
 <template>
-  <div h="full" flex="~ col">
-    <div p="3" h-10 flex="~ gap-2" items-center bg-header border="b base">
+  <div class="h-full flex flex-col">
+    <div class="p-3 h-10 flex gap-2 items-center bg-header border-b border-base">
       <div class="i-carbon:folder-details-reference" />
-      <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>Coverage</span>
+      <span class="pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate">Coverage</span>
       <DetailsHeaderButtons v-if="browserState" />
     </div>
-    <div flex-auto py-1 bg-white>
+    <div class="flex-auto py-1 bg-white">
       <iframe id="vitest-ui-coverage" src="./coverage/index.html" />
     </div>
   </div>

packages/ui/client/components/Dashboard.vue

@@ -5,13 +5,13 @@ import TestsFilesContainer from './dashboard/TestsFilesContainer.vue'
 </script>
 
 <template>
-  <div h="full" flex="~ col">
-    <div p="3" h-10 flex="~ gap-2" items-center bg-header border="b base">
+  <div class="h-full flex flex-col">
+    <div class="p-3 h-10 flex gap-2 items-center bg-header border-b border-base">
       <div class="i-carbon-dashboard" />
-      <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>Dashboard</span>
+      <span class="pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate">Dashboard</span>
       <DetailsHeaderButtons v-if="browserState" />
     </div>
-    <div class="scrolls" flex-auto py-1>
+    <div class="scrolls flex-auto py-1">
       <TestsFilesContainer />
     </div>
   </div>

packages/ui/client/components/FailureScreenshot.vue

@@ -40,7 +40,7 @@ function openScreenshot() {
 
 <template>
   <template v-if="screenshotUrl">
-    <div flex="~ gap-2 items-center">
+    <div class="flex gap-2 items-center">
       <IconButton
         v-tooltip.bottom="'View screenshot error'"
         class="!op-100"

packages/ui/client/components/FileDetails.vue

@@ -95,41 +95,33 @@ const tags = computed(() => {
 <template>
   <div
     v-if="current"
-    flex
-    flex-col
-    h-full
-    max-h-full
-    overflow-hidden
+    class="flex flex-col h-full max-h-full overflow-hidden"
     data-testid="file-detail"
   >
     <div>
-      <div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
+      <div class="p-2 h-10 flex gap-2 items-center bg-header border-b border-base">
         <StatusIcon :state="current.result?.state" :mode="current.mode" :failed-snapshot="failedSnapshot" />
-        <div v-if="isTypecheck" v-tooltip.bottom="'This is a typecheck test. It won\'t report results of the runtime tests'" class="i-logos:typescript-icon" flex-shrink-0 />
-        <span v-if="label" class="rounded-sm px-1 text-xs font-light bg-cyan-500/20 text-cyan-700 dark:text-cyan-300" flex-shrink-0>{{ label }}</span>
+        <div v-if="isTypecheck" v-tooltip.bottom="'This is a typecheck test. It won\'t report results of the runtime tests'" class="i-logos:typescript-icon flex-shrink-0" />
+        <span v-if="label" class="rounded-sm px-1 text-xs font-light bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 flex-shrink-0">{{ label }}</span>
         <span
           v-if="current?.file.projectName"
-          class="rounded-full py-0.5 px-2 text-xs font-light"
+          class="rounded-full py-0.5 px-2 text-xs font-light cursor-default"
           :style="projectBadgeStyle"
-          cursor-default
         >
           {{ current.file.projectName }}
         </span>
-        <div flex-1 font-light overflow-hidden text-sm flex>
-          <span op-50 truncate>
+        <div class="flex-1 font-light overflow-hidden text-sm flex">
+          <span class="op-50 truncate">
             {{ testTitle }}
           </span>
 
           <span
             v-for="tag of tags"
             :key="tag.name"
             v-tooltip.bottom="tag.description"
-            class="rounded-full ml-2 px-2 text-xs font-light"
+            class="rounded-full ml-2 px-2 text-xs font-light cursor-default flex items-center"
             :style="{ backgroundColor: tag.bg, color: tag.text, border: `1px solid ${tag.border}` }"
             :title="tag.description"
-            cursor-default
-            flex
-            items-center
           >
             {{ tag.name }}
           </span>
@@ -146,10 +138,9 @@ const tags = computed(() => {
           <DetailsHeaderButtons v-if="browserState" />
         </div>
       </div>
-      <div flex="~" items-center bg-header border="b-2 base" text-sm h-41px>
+      <div class="flex items-center bg-header border-base border-b-2 text-sm h-41px">
         <button
-          tab-button
-          class="flex items-center gap-2"
+          class="flex items-center gap-2 tab-button"
           :class="{ 'tab-button-active': viewMode == null }"
           data-testid="btn-report"
           @click="changeViewMode(null)"
@@ -158,29 +149,26 @@ const tags = computed(() => {
           Report
         </button>
         <button
-          tab-button
           data-testid="btn-graph"
-          class="flex items-center gap-2"
+          class="flex items-center gap-2 tab-button"
           :class="{ 'tab-button-active': viewMode === 'graph' }"
           @click="changeViewMode('graph')"
         >
           <span class="block w-1.4em h-1.4em i-carbon:chart-relationship" />
           Module Graph
         </button>
         <button
-          tab-button
           data-testid="btn-code"
-          class="flex items-center gap-2"
+          class="flex items-center gap-2 tab-button"
           :class="{ 'tab-button-active': viewMode === 'editor' }"
           @click="changeViewMode('editor')"
         >
           <span class="block w-1.4em h-1.4em i-carbon:code" />
           {{ draft ? "*&#160;" : "" }}Code
         </button>
         <button
-          tab-button
           data-testid="btn-console"
-          class="flex items-center gap-2"
+          class="flex items-center gap-2 tab-button"
           :class="{
             'tab-button-active': viewMode === 'console',
             'op20': viewMode !== 'console' && consoleCount === 0,
@@ -193,7 +181,7 @@ const tags = computed(() => {
       </div>
     </div>
 
-    <div flex flex-col flex-1 overflow="hidden">
+    <div class="flex flex-col flex-1 overflow-hidden">
       <FileDetailsModuleGraph
         v-if="viewMode === 'graph'"
         :key="`graph:${current.id}`"

packages/ui/client/components/FileDetailsModuleGraph.vue

@@ -40,8 +40,8 @@ const graph = computed(() => {
 </script>
 
 <template>
-  <div flex-1 overflow-hidden>
-    <div v-if="isLoading" h-full flex items-center justify-center op-70>
+  <div class="flex-1 overflow-hidden">
+    <div v-if="isLoading" class="h-full flex items-center justify-center op-70">
       Loading module graph...
     </div>
     <ViewModuleGraph

packages/ui/client/components/FilterStatus.vue

@@ -25,17 +25,16 @@ function toggle() {
       :class="[
         modelValue ? 'i-carbon:checkbox-checked-filled' : 'i-carbon:checkbox',
       ]"
-      text-lg
-      flex-shrink-0
+      class="text-lg flex-shrink-0"
       aria-hidden="true"
     />
     <input
       v-model="modelValue"
       type="checkbox"
       :disabled="disabled"
-      sr-only
+      class="sr-only"
     >
-    <span flex-1 ms-2 select-none whitespace-nowrap truncate>{{ label }}</span>
+    <span class="flex-1 ms-2 select-none whitespace-nowrap truncate">{{ label }}</span>
   </label>
 </template>