chore: update styles

Author: antfu

plugins/messages/src/client/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { DevframeMessageEntry } from '@devframes/hub/types'
 import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/client'
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import FormSearchField from '@antfu/design/components/Form/FormSearchField.vue'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
 import { computed, onBeforeUnmount, ref } from 'vue'
@@ -92,13 +93,23 @@ async function onOpenFile(entry: DevframeMessageEntry): Promise<void> {
       </div>
 
       <template #search>
-        <FormSearchField
-          v-if="!connState"
-          v-model="filters.search"
-          size="sm"
-          placeholder="Search messages…"
-          class="max-w-64"
-        />
+        <div class="flex gap-2 items-center">
+          <FormSearchField
+            v-if="!connState"
+            v-model="filters.search"
+            size="sm"
+            placeholder="Search messages…"
+            class="max-w-64"
+          />
+          <DisplayBadge v-if="filters.totalCount > 0" :color="false" class="text-xs font-mono">
+            <template v-if="filters.filteredCount !== filters.totalCount">
+              {{ filters.filteredCount }}/{{ filters.totalCount }}
+            </template>
+            <template v-else>
+              {{ filters.totalCount }}
+            </template>
+          </DisplayBadge>
+        </div>
       </template>
 
       <template #end>

plugins/messages/src/client/components/FilterToggles.vue

@@ -27,11 +27,11 @@ function isDimmed(active: Set<string>, item: string): boolean {
       v-for="item of items"
       :key="item"
       type="button"
-      class="rounded flex items-center transition hover:bg-active"
+      class="rounded flex items-center transition"
       :class="[
         badge ? 'p-0.5' : 'px-1.5 py-0.5 gap-0.5 text-xs',
         !badge && !isDimmed(active, item) ? (styles?.[item]?.color || '') : '',
-        isDimmed(active, item) ? 'op30' : '',
+        isDimmed(active, item) ? 'op30 saturate-50' : '',
       ]"
       @click="$emit('toggle', item)"
     >

plugins/messages/src/client/components/MessageToolbarActions.vue

@@ -2,7 +2,6 @@
 import type { MessageFilters } from '../composables/useMessageFilters'
 import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
-import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import LayoutSeparator from '@antfu/design/components/Layout/LayoutSeparator.vue'
 
 const props = defineProps<{
@@ -28,15 +27,6 @@ const { filters } = props
     @click="filters.cycleSortMode"
   />
 
-  <DisplayBadge v-if="filters.totalCount > 0" :color="false" class="text-xs font-mono">
-    <template v-if="filters.filteredCount !== filters.totalCount">
-      {{ filters.filteredCount }}/{{ filters.totalCount }}
-    </template>
-    <template v-else>
-      {{ filters.totalCount }}
-    </template>
-  </DisplayBadge>
-
   <template v-if="filters.hasActiveFilter">
     <ActionButton
       variant="text"

plugins/messages/src/client/components/message-styles.ts

@@ -16,16 +16,16 @@ export interface FromStyle {
 }
 
 export const levels: Record<DevframeMessageLevel, LevelStyle> = {
-  info: { icon: 'i-ph:info-duotone', color: 'text-blue', bg: 'bg-blue', label: 'Info' },
-  warn: { icon: 'i-ph:warning-duotone', color: 'text-amber', bg: 'bg-amber', label: 'Warning' },
-  error: { icon: 'i-ph:x-circle-duotone', color: 'text-red', bg: 'bg-red', label: 'Error' },
-  success: { icon: 'i-ph:check-circle-duotone', color: 'text-green', bg: 'bg-green', label: 'Success' },
-  debug: { icon: 'i-ph:bug-duotone', color: 'text-gray', bg: 'bg-gray', label: 'Debug' },
+  info: { icon: 'i-ph:info-duotone', color: 'dark:text-blue-200 text-blue-600', bg: 'bg-blue', label: 'Info' },
+  warn: { icon: 'i-ph:warning-duotone', color: 'dark:text-amber-200 text-amber-600', bg: 'bg-amber', label: 'Warning' },
+  error: { icon: 'i-ph:x-circle-duotone', color: 'dark:text-red-200 text-red-600', bg: 'bg-red', label: 'Error' },
+  success: { icon: 'i-ph:check-circle-duotone', color: 'dark:text-green-200 text-green-600', bg: 'bg-green', label: 'Success' },
+  debug: { icon: 'i-ph:bug-duotone', color: 'dark:text-gray-200 text-gray-600', bg: 'bg-gray', label: 'Debug' },
 }
 
 export const fromEntries: Record<DevframeMessageEntryFrom, FromStyle> = {
-  server: { icon: 'i-ph:hexagon-duotone', color: 'text-green-800 dark:text-green-200', label: 'Server' },
-  browser: { icon: 'i-ph:globe-simple-duotone', color: 'text-amber-800 dark:text-amber-200', label: 'Browser' },
+  server: { icon: 'i-ph:hexagon-duotone', color: 'text-green-600 dark:text-green-200', label: 'Server' },
+  browser: { icon: 'i-ph:globe-simple-duotone', color: 'text-amber-600 dark:text-amber-200', label: 'Browser' },
 }
 
 /** Ordering used by the "By severity" sort mode. */