feat: Dark Mode (PR -12) (#7590)

app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue

@@ -152,7 +152,7 @@ export default {
   }
 }
 .contact--panel {
-  @apply border-r border-slate-50 dark:border-slate-700 h-full text-sm overflow-y-auto relative;
+  @apply border-r border-slate-50 dark:border-slate-800/50 h-full text-sm overflow-y-auto relative;
 }
 
 .list-group {

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="view-box columns bg-white">
+  <div
+    class="flex justify-between flex-col h-full m-0 flex-1 bg-white dark:bg-slate-900"
+  >
     <settings-header
       button-route="new"
       :header-title="contact.name"
@@ -13,28 +15,22 @@
         :src="contact.thumbnail"
         :username="contact.name"
         size="32px"
-        class="margin-right-1"
+        class="mr-2 rtl:mr-0 rtl:ml-2"
       />
     </settings-header>
 
-    <div
-      v-if="uiFlags.isFetchingItem"
-      class="text-center p-normal fs-default h-full"
-    >
+    <div v-if="uiFlags.isFetchingItem" class="text-center p-4 text-base h-full">
       <spinner size="" />
       <span>{{ $t('CONTACT_PROFILE.LOADING') }}</span>
     </div>
-    <div
-      v-else-if="contact.id"
-      class="overflow-hidden column contact--dashboard-content"
-    >
-      <div class="row h-full">
+    <div v-else-if="contact.id" class="overflow-hidden flex-1 min-w-0">
+      <div class="flex flex-wrap ml-auto mr-auto max-w-full h-full">
         <contact-info-panel
           :show-close-button="false"
           :show-avatar="false"
           :contact="contact"
         />
-        <div class="small-12 medium-9 h-full">
+        <div class="w-[75%] h-full">
           <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
             <woot-tabs-item
               v-for="tab in tabs"
@@ -43,7 +39,9 @@
               :show-badge="false"
             />
           </woot-tabs>
-          <div class="tab-content overflow-auto">
+          <div
+            class="bg-slate-25 dark:bg-slate-800 h-[calc(100%-40px)] p-4 overflow-auto"
+          >
             <contact-notes
               v-if="selectedTabIndex === 0"
               :contact-id="Number(contactId)"
@@ -119,22 +117,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-@import '~dashboard/assets/scss/mixins';
-
-.left {
-  @apply border-r border-slate-50 dark:border-slate-700;
-  overflow: auto;
-}
-
-.right {
-  padding: var(--space-normal);
-}
-
-.tab-content {
-  background: var(--color-background-light);
-  height: calc(100% - 40px);
-  padding: var(--space-normal);
-}
-</style>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="category-list--container">
-    <header>
-      <div class="header-left--wrap">
-        <label class="sub-block-title header-text">{{
-          $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TITLE')
-        }}</label>
+  <div class="w-full pl-4">
+    <header class="flex justify-between items-center mb-4">
+      <div class="flex items-center w-full gap-3">
+        <label
+          class="font-normal mb-0 text-base text-slate-800 dark:text-slate-100"
+        >
+          {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TITLE') }}
+        </label>
         <select
           :value="currentLocaleCode"
-          class="row small-2 select-locale"
+          class="w-[15%] select-locale"
           @change="changeCurrentCategory"
         >
           <option
@@ -19,7 +21,7 @@
           </option>
         </select>
       </div>
-      <div class="header-right--wrap">
+      <div class="flex-none items-center">
         <woot-button
           size="small"
           variant="smooth"
@@ -168,38 +170,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.category-list--container {
-  width: 100%;
-  padding-left: var(--space-normal);
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--space-normal);
-
-    .header-left--wrap {
-      display: flex;
-      align-items: center;
-      width: 100%;
-
-      .header-text {
-        font-weight: var(--font-weight-normal);
-        margin-right: var(--space-slab);
-        margin-bottom: 0;
-      }
-    }
-
-    .header-right--wrap {
-      flex: none;
-      align-items: center;
-    }
-    .select-locale {
-      height: var(--space-large);
-      margin-bottom: 0;
-      padding-top: var(--space-micro);
-      padding-bottom: var(--space-micro);
-    }
-  }
+.select-locale {
+  @apply h-8 mb-0 py-0.5;
 }
 </style>