feat: Dark Mode (#7471)

app/javascript/dashboard/components/ModalHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="column page-top-bar">
+  <div class="flex flex-col items-start pt-8 px-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
     <h2
       ref="modalHeaderTitle"
@@ -10,10 +10,13 @@
     <p
       v-if="headerContent"
       ref="modalHeaderContent"
-      class="small-12 column wrap-content"
+      class="w-full break-words text-slate-600 mt-2 text-sm dark:text-slate-300"
     >
       {{ headerContent }}
-      <span v-if="headerContentValue" class="content-value">
+      <span
+        v-if="headerContentValue"
+        class="font-semibold text-sm text-slate-600 dark:text-slate-300"
+      >
         {{ headerContentValue }}
       </span>
     </p>
@@ -43,13 +46,3 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-.wrap-content {
-  word-wrap: break-word;
-  margin-top: var(--space-small);
-
-  .content-value {
-    font-weight: var(--font-weight-bold);
-  }
-}
-</style>