feat: Update dashboard empty state UI (#12990)

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>