fix(browser): browser actions icons colors (#5816)

userquin · web-flow · commit f9d9b3bef61a · 2024-06-02T02:12:50.000+02:00
diff --git a/packages/ui/client/components/IconAction.vue b/packages/ui/client/components/IconAction.vue
@@ -5,11 +5,14 @@ defineProps({
 </script>
 
 <template>
-  <div 
-    bg="gray-200" 
-    rounded-1 
+  <button
+    type="button"
+    dark="op75"
+    bg="gray-200 dark:#111"
+    hover="op100"
+    rounded-1
     p-0.5
   >
-    <div :class="icon" op50></div>
-  </div>
-</template>
+    <span block :class="icon" op65 class="dark:op85 hover:op100"></span>
+  </button>
+</template>
diff --git a/packages/ui/client/components/TaskItem.vue b/packages/ui/client/components/TaskItem.vue
@@ -62,7 +62,7 @@ const duration = computed(() => {
         icon="i-carbon-result-old"
         @click.prevent.stop="emit('fixSnapshot')"
       />
-      <IconAction 
+      <IconAction
         v-tooltip.bottom="'Open test details'"
         data-testid="btn-open-details"
         title="Open test details"
@@ -74,8 +74,8 @@ const duration = computed(() => {
         v-tooltip.bottom="'Run current test'"
         data-testid="btn-run-test"
         title="Run current test"
-        icon="i-carbon-play-filled-alt"
-        text="green-500"
+        icon="i-carbon:play-filled-alt"
+        text-green5
         @click.prevent.stop="emit('run')"
       />
     </div>
