feat: Dark Mode (#7471)

app/javascript/dashboard/components/widgets/InboxName.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="inbox--name">
-    <fluent-icon class="inbox--icon" :icon="computedInboxClass" size="12" />
+  <div
+    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
+  >
+    <fluent-icon
+      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
+      :icon="computedInboxClass"
+      size="12"
+    />
     {{ inbox.name }}
   </div>
 </template>
@@ -23,20 +29,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.inbox--name {
-  align-items: center;
-  display: inline-flex;
-  padding: var(--space-micro) 0;
-  line-height: var(--space-slab);
-  font-weight: var(--font-weight-medium);
-  background: none;
-  color: var(--s-600);
-  font-size: var(--font-size-mini);
-  margin: 0 var(--space-one);
-}
-
-.inbox--icon {
-  margin-right: var(--space-micro);
-}
-</style>