feat: Update dashboard empty state UI (#12990)

app/javascript/dashboard/components/base/Hotkey.vue

@@ -10,13 +10,10 @@ export default {
 </script>
 
 <template>
-  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
+  <kbd
+    class="hotkey px-1.5 py-1 min-w-9 font-420 h-8 uppercase inline-flex rounded-lg outline outline-1 outline-n-weak bg-n-surface-2 text-sm flex-shrink-0 items-center select-none justify-center"
+    :class="customClass"
+  >
     <slot />
   </kbd>
 </template>
-
-<style lang="scss">
-kbd.hotkey {
-  @apply inline-flex leading-[0.625rem] rounded tracking-wide flex-shrink-0 items-center select-none justify-center;
-}
-</style>

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -184,7 +184,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="border rounded-xl shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-10 bg-n-alpha-3 backdrop-blur-[100px] absolute block left-auto top-full mt-0.5 start-0 lg:start-auto lg:end-0 max-w-[12.5rem] min-w-[9.75rem] [&_ul>li]:mb-0"
+      class="border rounded-xl shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-10 bg-n-alpha-3 backdrop-blur-[100px] absolute block left-auto top-full mt-0.5 start-0 xl:start-auto xl:end-0 max-w-[12.5rem] min-w-[9.75rem] [&_ul>li]:mb-0"
     >
       <Button
         v-if="!isPending"

app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue

@@ -1,33 +1,35 @@
-<script>
+<script setup>
 import FeaturePlaceholder from './FeaturePlaceholder.vue';
-export default {
-  components: { FeaturePlaceholder },
-  props: {
-    message: {
-      type: String,
-      required: true,
-    },
+
+defineProps({
+  message: {
+    type: String,
+    required: true,
   },
-};
+});
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center h-full">
-    <img
-      class="m-4 w-32 hidden dark:block"
-      src="dashboard/assets/images/no-chat-dark.svg"
-      alt="No Chat dark"
-    />
-    <img
-      class="m-4 w-32 block dark:hidden"
-      src="dashboard/assets/images/no-chat.svg"
-      alt="No Chat"
-    />
-    <span class="text-sm text-n-slate-12 font-medium text-center">
-      {{ message }}
-      <br />
-    </span>
+  <div class="flex flex-col items-center h-full">
+    <div class="flex-[2]" />
+    <div class="flex flex-col items-center">
+      <img
+        class="m-6 w-[7.5rem] hidden dark:block"
+        src="dashboard/assets/images/no-chat-dark.svg"
+        alt="No Chat dark"
+      />
+      <img
+        class="m-6 w-[7.5rem] block dark:hidden"
+        src="dashboard/assets/images/no-chat.svg"
+        alt="No Chat"
+      />
+      <span class="text-sm text-n-slate-11 font-420 text-center">
+        {{ message }}
+      </span>
+    </div>
+    <div class="flex-[2]" />
     <!-- Cmd bar, keyboard shortcuts placeholder -->
     <FeaturePlaceholder />
+    <div class="flex-[2]" />
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue

@@ -1,49 +1,44 @@
-<script>
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import Hotkey from 'dashboard/components/base/Hotkey.vue';
 
-export default {
-  components: {
-    Hotkey,
+const { t } = useI18n();
+
+const keyShortcuts = computed(() => [
+  {
+    key: 'K',
+    description: t('CONVERSATION.EMPTY_STATE.CMD_BAR'),
   },
-  data() {
-    return {
-      keyShortcuts: [
-        {
-          key: 'K',
-          description: this.$t('CONVERSATION.EMPTY_STATE.CMD_BAR'),
-        },
-        {
-          key: '/',
-          description: this.$t('CONVERSATION.EMPTY_STATE.KEYBOARD_SHORTCUTS'),
-        },
-      ],
-    };
+  {
+    key: '/',
+    description: t('CONVERSATION.EMPTY_STATE.KEYBOARD_SHORTCUTS'),
   },
-};
+]);
 </script>
 
 <template>
-  <div class="flex flex-col gap-2 mt-9">
-    <div
-      v-for="keyShortcut in keyShortcuts"
+  <div class="flex xl:flex-row flex-col items-center gap-3 mt-9">
+    <template
+      v-for="(keyShortcut, index) in keyShortcuts"
       :key="keyShortcut.key"
-      class="flex items-center gap-2"
     >
       <div class="flex items-center gap-2">
-        <Hotkey
-          custom-class="w-8 h-6 text-lg font-medium text-n-slate-12 outline outline-n-container outline-1 bg-n-alpha-3"
-        >
-          ⌘
-        </Hotkey>
-        <Hotkey
-          custom-class="w-8 h-6 text-xs font-medium text-n-slate-12 outline outline-n-container outline-1 bg-n-alpha-3"
-        >
-          {{ keyShortcut.key }}
-        </Hotkey>
+        <div class="flex items-center gap-2">
+          <Hotkey custom-class="!text-lg"> ⌘ </Hotkey>
+          <Hotkey>
+            {{ keyShortcut.key }}
+          </Hotkey>
+        </div>
+        <span class="text-sm font-420 text-center text-n-slate-11">
+          {{ keyShortcut.description }}
+        </span>
       </div>
-      <span class="text-sm font-medium text-center text-n-slate-12">
-        {{ keyShortcut.description }}
-      </span>
-    </div>
+      <div
+        v-if="index < keyShortcuts.length - 1"
+        class="xl:block hidden w-px h-4 rounded-lg bg-n-strong ltr:ml-1 ltr:mr-2 rtl:mr-1 rtl:ml-2"
+      />
+    </template>
   </div>
 </template>

app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue

@@ -97,6 +97,6 @@ onMounted(async () => {
 
 <style scoped>
 .key {
-  @apply py-2 px-2.5 font-semibold text-xs text-n-slate-12 bg-n-slate-4 dark:bg-n-slate-2 shadow border-b-2 rtl:border-l-2 ltr:border-r-2 border-n-strong;
+  @apply py-2 px-2.5 font-semibold text-xs text-n-slate-12;
 }
 </style>