feat: Dark Mode (#7471)

app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="showShowCurrentAccountContext"
-    class="rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
+    class="rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
     @mouseover="setShowSwitch"
     @mouseleave="resetShowSwitch"
   >

app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue

@@ -2,24 +2,23 @@
   <woot-modal
     :show="show"
     :on-close="() => $emit('close-account-create-modal')"
-    class="account-selector--modal"
   >
-    <div class="column content-box">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header
         :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
         :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
       />
-      <div v-if="!hasAccounts" class="alert-wrap">
-        <div class="callout alert">
-          <div class="icon-wrap">
+      <div v-if="!hasAccounts" class="text-sm mt-6 mx-8 mb-0">
+        <div class="items-center rounded-md flex alert">
+          <div class="ml-1 mr-3">
             <fluent-icon icon="warning" />
           </div>
           {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
         </div>
       </div>
 
-      <form class="row" @submit.prevent="addAccount">
-        <div class="medium-12 columns">
+      <form class="flex flex-col w-full" @submit.prevent="addAccount">
+        <div class="w-full">
           <label :class="{ error: $v.accountName.$error }">
             {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
             <input
@@ -30,8 +29,8 @@
             />
           </label>
         </div>
-        <div class="modal-footer medium-12 columns">
-          <div class="medium-12 columns">
+        <div class="w-full">
+          <div class="w-full">
             <woot-submit-button
               :disabled="
                 $v.accountName.$invalid ||
@@ -102,20 +101,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.alert-wrap {
-  font-size: var(--font-size-small);
-  margin: var(--space-medium) var(--space-large) var(--space-zero);
-
-  .callout {
-    align-items: center;
-    border-radius: var(--border-radius-normal);
-    display: flex;
-  }
-}
-
-.icon-wrap {
-  margin-left: var(--space-smaller);
-  margin-right: var(--space-slab);
-}
-</style>

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-700 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
+    class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
   >
     <div class="flex flex-col items-center">
       <logo

app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue

@@ -3,7 +3,7 @@
     <a
       v-tooltip.right="$t(`SIDEBAR.${name}`)"
       :href="href"
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isActive || isChildMenuActive,

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="hasSecondaryMenu"
-    class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
+    class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
   >
     <account-context @toggle-accounts="toggleAccountModal" />
     <transition-group

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue

@@ -114,7 +114,9 @@ export default {
   },
   computed: {
     showIcon() {
-      return { 'text-truncate': this.shouldTruncate };
+      return {
+        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
+      };
     },
     isCountZero() {
       return this.childItemCount === 0;