feat: Dark Mode (#7471)

app/javascript/dashboard/components/ui/PreviewCard.vue

@@ -1,20 +1,30 @@
 <template>
-  <div class="preview-card--wrap" :class="{ activecard: active }">
+  <div class="preview-card--wrap" :class="{ 'active-card': active }">
     <div class="header--wrap" :class="{ active: active }">
-      <div class="heading-wrap text-block-title">{{ heading }}</div>
+      <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
       <fluent-icon
         v-if="active"
         icon="checkmark-circle"
         type="solid"
         size="24"
-        class="checkmark"
+        class="text-woot-500 dark:text-woot-500"
       />
     </div>
-    <div class="content-wrap">
+    <div
+      class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
+    >
       {{ content }}
     </div>
-    <div v-if="src" class="image-wrap">
-      <img :src="src" class="image" :class="{ activeimage: active }" />
+    <div v-if="src" class="p-3">
+      <img
+        :src="src"
+        class="border border-solid rounded-md"
+        :class="
+          active
+            ? 'border-woot-75 dark:border-woot-700'
+            : 'border-slate-50 dark:border-slate-600'
+        "
+      />
     </div>
     <slot v-else />
   </div>
@@ -49,66 +59,18 @@ export default {
 
 <style lang="scss" scoped>
 .preview-card--wrap {
-  border-radius: var(--border-radius-normal);
-  border: 1px solid var(--color-border);
-  display: flex;
-  flex-direction: column;
-  max-height: 21.25rem;
-  max-width: 23.75rem;
-  min-width: 15rem;
+  @apply flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600;
 
   .header--wrap {
-    background: var(--s-50);
-    border-bottom: 1px solid var(--color-border);
-    border-top-left-radius: var(--border-radius-normal);
-    border-top-right-radius: var(--border-radius-normal);
-    display: flex;
-    height: 2.5rem;
-    justify-content: space-between;
-    padding: var(--space-small);
-    width: 100%;
+    @apply flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600;
   }
 
   .active {
-    background: var(--w-50);
-    border-bottom: 1px solid var(--w-75);
-  }
-
-  .heading-wrap {
-    align-items: center;
-    display: flex;
-    font-weight: var(--font-weight-medium);
-    padding: var(--space-smaller);
-  }
-
-  .checkmark {
-    color: var(--w-500);
-  }
-
-  .content-wrap {
-    color: var(--s-700);
-    font-size: var(--font-size-mini);
-    line-height: 1.4;
-    padding: var(--space-slab) var(--space-slab) 0 var(--space-slab);
-    text-align: start;
-  }
-
-  .image-wrap {
-    padding: var(--space-slab);
-  }
-
-  .image {
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-normal);
-  }
-
-  .activeimage {
-    border: 1px solid var(--w-75);
+    @apply bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700;
   }
 }
 
-.activecard {
-  background: var(--w-25);
-  border: 1px solid var(--w-300);
+.active-card {
+  @apply bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400;
 }
 </style>