From 2283c3505f47801a98cec37a565de931236a6064 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Fri, 12 Apr 2024 15:08:42 +0530
Subject: [PATCH] add form

---
 .../dashboard/components/ui/PreviewCard.vue   |   7 +-
 .../dashboard/settings/personal/Index.vue     | 122 ++++++++++--------
 .../settings/personal/PersonalWrapper.vue     |  48 +++++++
 .../settings/profile/MessageSignature.vue     |  48 ++-----
 .../auth/signup/components/Signup/Form.vue    |   2 +-
 .../dashboard/profile/hot-key-ctrl-enter.svg  |  25 ++++
 .../dashboard/profile/hot-key-enter.svg       |  25 ++++
 7 files changed, 186 insertions(+), 91 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
 create mode 100644 public/assets/images/dashboard/profile/hot-key-ctrl-enter.svg
 create mode 100644 public/assets/images/dashboard/profile/hot-key-enter.svg

diff --git a/app/javascript/dashboard/components/ui/PreviewCard.vue b/app/javascript/dashboard/components/ui/PreviewCard.vue
index ec0dd5539..c8586ef6e 100644
--- a/app/javascript/dashboard/components/ui/PreviewCard.vue
+++ b/app/javascript/dashboard/components/ui/PreviewCard.vue
@@ -14,13 +14,16 @@
       }"
     >
       <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
-      <fluent-icon
+      <!-- <fluent-icon
         v-if="active"
         icon="checkmark-circle"
         type="solid"
         size="24"
         class="text-woot-500 dark:text-woot-500"
-      />
+      /> -->
+      <div>
+        <input type="radio" name="hotkey" value="enter" />
+      </div>
     </div>
     <div
       class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
index ac75997ca..91e7d2e2f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
@@ -1,62 +1,82 @@
 <template>
   <div
-    class="flex flex-1 h-full justify-between flex-col m-0 bg-white dark:bg-slate-900 overflow-auto"
+    class="flex h-full flex-col p-5 pt-16 mx-auto my-0 bg-white dark:bg-slate-900 overflow-auto font-inter"
   >
-    <div class="flex p-5 pt-16 mx-auto my-0">
-      <div class="flex flex-col gap-8 min-w-[335px] sm:w-[720px]">
-        <span class="font-medium dark:text-white text-slate-900 text-[24px]">
-          Profile Settings
+    <div class="flex flex-col gap-8 sm:max-w-3xl">
+      <h2 class="font-medium text-slate-900 dark:text-white text-2xl">
+        Profile Settings
+      </h2>
+      <div>
+        <span class="text-slate-900 dark:text-slate-25 text-normal font-medium">
+          Profile picture
         </span>
-        <div>
-          <span
-            class="text-slate-900 dark:text-slate-25 text-normal font-medium"
-          >
-            Profile picture
-          </span>
-          <!-- <thumbnail src="" username="John Doe" size="72px" /> -->
-        </div>
-
-        <div>
-          <span class="text-slate-900 dark:text-slate-25 text-lg font-medium">
-            Personal message signature
-          </span>
-          <div class="w-full h-[1px] bg-slate-200 dark:bg-slate-700 my-2" />
-          <p class="text-slate-600 dark:text-slate-400 text-sm font-normal">
-            Create a unique message signature to appear at the end of every
-            message you send from any inbox. You can also include an inline
-            image, which is supported in live-chat, email, and API inboxes.
-          </p>
-        </div>
-
-        <div>
-          <span class="text-slate-900 dark:text-slate-25 text-lg font-medium">
-            Hot key to send messages
-          </span>
-          <div class="w-full h-[1px] bg-slate-200 dark:bg-slate-700 my-2" />
-          <p class="text-slate-600 dark:text-slate-400 text-sm font-normal">
-            You can select a hotkey (either Enter or Cmd/Ctrl+Enter) based on
-            your preference of writing.
-          </p>
-          <div class="flex flex-col md:flex-row gap-4">
-            <div class="flex-1 p-4 rounded-xl border border-slate-200">
-              <div class="flex flex-row justify-between">
-                <div class="text-sm">Enter (↵)</div>
-                <input type="radio" name="hotkey" value="enter" />
-              </div>
-              <div class="text-xs pt-2">
-                Send messages by pressing Enter key instead of clicking send
-                button.
-              </div>
-              <img class="pt-4" src="/hot-key-enter.png" alt="Enter key" />
-            </div>
-
-            <div class="flex-1 p-4 border">BOX 2</div>
-          </div>
-        </div>
+        <!-- <thumbnail src="" username="John Doe" size="72px" /> -->
       </div>
+      <personal-wrapper
+        header="Personal message signature"
+        description="Create a unique message signature to appear at the end of every message you send from any inbox. You can also include an inline image, which is supported in live-chat, email, and API inboxes."
+      >
+        <template #settingsItem>
+          <message-signature />
+          <form-input
+            name="full_name"
+            class="flex-1"
+            :class="{ error: true }"
+            :label="$t('REGISTER.FULL_NAME.LABEL')"
+            :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
+            :has-error="true"
+            :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+          />
+        </template>
+      </personal-wrapper>
+
+      <personal-wrapper
+        header="Hot key to send messages"
+        description="You can select a hotkey (either Enter or Cmd/Ctrl+Enter) based on your
+          preference of writing."
+      >
+        <template #settingsItem>
+          <div class="flex gap-4 flex-row">
+            <button
+              v-for="keyOption in keyOptions"
+              :key="keyOption.key"
+              class="cursor-pointer p-0"
+            >
+              <preview-card
+                :heading="keyOption.heading"
+                :content="keyOption.content"
+                :src="keyOption.src"
+                :active="true"
+              />
+            </button>
+          </div>
+        </template>
+      </personal-wrapper>
     </div>
   </div>
 </template>
 <script setup>
+import { ref } from 'vue';
+import MessageSignature from '../profile/MessageSignature.vue';
 // import Thumbnail from './Thumbnail.vue';
+import PersonalWrapper from './PersonalWrapper.vue';
+import PreviewCard from 'dashboard/components/ui/PreviewCard.vue';
+import FormInput from 'v3/components/Form/Input.vue';
+const credentials = ref({
+  fullName: '',
+});
+const keyOptions = [
+  {
+    key: 'enter',
+    src: '/assets/images/dashboard/profile/hot-key-enter.svg',
+    heading: 'Enter key',
+    content: 'Send messages by pressing the Enter key',
+  },
+  {
+    key: 'cmd_enter',
+    src: '/assets/images/dashboard/profile/hot-key-ctrl-enter.svg',
+    heading: 'Enter key',
+    content: 'Send messages by pressing the Enter key',
+  },
+];
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
new file mode 100644
index 000000000..0d89bf5b4
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="flex flex-col gap-6 w-full items-start">
+    <div
+      class="flex flex-col gap-4 divide-y divide-slate-200 dark:divide-slate-700"
+    >
+      <h4
+        v-if="header"
+        class="text-slate-900 dark:text-slate-25 text-lg font-medium"
+      >
+        {{ header }}
+      </h4>
+      <p
+        v-if="description"
+        class="text-slate-600 dark:text-slate-400 text-sm font-normal mb-0 pt-4"
+      >
+        {{ description }}
+      </p>
+    </div>
+    <div v-if="$slots.settingsItem" class="w-full flex flex-col gap-6">
+      <slot name="settingsItem" />
+      <woot-button
+        v-if="showActionButton"
+        color-scheme="primary"
+        class="rounded-xl w-fit"
+        @click="$emit('click')"
+      >
+        Save
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  header: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  showActionButton: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
index d2eb246d5..7f5ec0859 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
@@ -1,40 +1,14 @@
 <template>
-  <div
-    class="profile--settings--row text-black-900 dark:text-slate-300 flex items-center"
-  >
-    <div class="w-1/4 py-4 pr-6 ml-0">
-      <h4 class="text-lg text-black-900 dark:text-slate-200">
-        {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE') }}
-      </h4>
-      <p>{{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE') }}</p>
-    </div>
-    <div class="p-4 w-[45%]">
-      <div>
-        <label for="message-signature-input">{{
-          $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.LABEL')
-        }}</label>
-        <woot-message-editor
-          id="message-signature-input"
-          v-model="messageSignature"
-          class="message-editor h-[10rem]"
-          :is-format-mode="true"
-          :placeholder="
-            $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')
-          "
-          :enabled-menu-options="customEditorMenuList"
-          :enable-suggestions="false"
-          :show-image-resize-toolbar="true"
-        />
-      </div>
-      <woot-button
-        :is-loading="isUpdating"
-        type="button"
-        @click.prevent="updateSignature"
-      >
-        {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
-      </woot-button>
-    </div>
-  </div>
+  <woot-message-editor
+    id="message-signature-input"
+    v-model="messageSignature"
+    class="message-editor h-[10rem]"
+    :is-format-mode="true"
+    :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
+    :enabled-menu-options="customEditorMenuList"
+    :enable-suggestions="false"
+    :show-image-resize-toolbar="true"
+  />
 </template>
 
 <script>
@@ -99,7 +73,7 @@ export default {
 
 <style lang="scss" scoped>
 .message-editor {
-  @apply px-3 mb-4;
+  @apply px-3;
 
   ::v-deep {
     .ProseMirror-menubar {
diff --git a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
index 898e26ddd..a8f76ac94 100644
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -83,7 +83,7 @@ import { required, minLength, email } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import alertMixin from 'shared/mixins/alertMixin';
-import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals ';
 import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
 import FormInput from '../../../../../components/Form/Input.vue';
 import SubmitButton from '../../../../../components/Button/SubmitButton.vue';
diff --git a/public/assets/images/dashboard/profile/hot-key-ctrl-enter.svg b/public/assets/images/dashboard/profile/hot-key-ctrl-enter.svg
new file mode 100644
index 000000000..7abfe902a
--- /dev/null
+++ b/public/assets/images/dashboard/profile/hot-key-ctrl-enter.svg
@@ -0,0 +1,25 @@
+<svg width="318" height="100" viewBox="0 0 318 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="318" height="100" rx="8" fill="url(#paint0_linear_487_6953)"/>
+<g filter="url(#filter0_d_487_6953)">
+<rect x="197" y="56" width="105" height="28" rx="6" fill="#456EFF"/>
+<path d="M210.035 74V65.2727H215.507V66.4062H211.352V69.0653H215.221V70.1946H211.352V72.8665H215.558V74H210.035ZM218.437 70.1136V74H217.163V67.4545H218.386V68.5199H218.467C218.618 68.1733 218.854 67.8949 219.175 67.6847C219.498 67.4744 219.906 67.3693 220.398 67.3693C220.844 67.3693 221.234 67.4631 221.569 67.6506C221.905 67.8352 222.165 68.1108 222.349 68.4773C222.534 68.8437 222.626 69.2969 222.626 69.8366V74H221.352V69.9901C221.352 69.5156 221.229 69.1449 220.981 68.8778C220.734 68.608 220.395 68.473 219.963 68.473C219.667 68.473 219.405 68.5369 219.175 68.6648C218.947 68.7926 218.767 68.9801 218.633 69.2273C218.503 69.4716 218.437 69.767 218.437 70.1136ZM227.39 67.4545V68.4773H223.815V67.4545H227.39ZM224.774 65.8864H226.048V72.0781C226.048 72.3253 226.085 72.5114 226.159 72.6364C226.233 72.7585 226.328 72.8423 226.444 72.8878C226.564 72.9304 226.693 72.9517 226.832 72.9517C226.934 72.9517 227.024 72.9446 227.101 72.9304C227.177 72.9162 227.237 72.9048 227.28 72.8963L227.51 73.9489C227.436 73.9773 227.331 74.0057 227.194 74.0341C227.058 74.0653 226.888 74.0824 226.683 74.0852C226.348 74.0909 226.035 74.0312 225.746 73.9062C225.456 73.7812 225.221 73.5881 225.042 73.3267C224.863 73.0653 224.774 72.7372 224.774 72.3423V65.8864ZM231.551 74.1321C230.906 74.1321 230.35 73.9943 229.884 73.7188C229.421 73.4403 229.063 73.0497 228.811 72.5469C228.561 72.0412 228.436 71.4489 228.436 70.7699C228.436 70.0994 228.561 69.5085 228.811 68.9972C229.063 68.4858 229.416 68.0866 229.867 67.7997C230.322 67.5128 230.853 67.3693 231.461 67.3693C231.83 67.3693 232.188 67.4304 232.535 67.5526C232.882 67.6747 233.193 67.8665 233.468 68.1278C233.744 68.3892 233.961 68.7287 234.12 69.1463C234.279 69.5611 234.359 70.0653 234.359 70.6591V71.1108H229.156V70.1562H233.11C233.11 69.821 233.042 69.5241 232.906 69.2656C232.769 69.0043 232.578 68.7983 232.33 68.6477C232.086 68.4972 231.799 68.4219 231.47 68.4219C231.112 68.4219 230.799 68.5099 230.532 68.6861C230.268 68.8594 230.063 69.0866 229.919 69.3679C229.776 69.6463 229.705 69.9489 229.705 70.2756V71.0213C229.705 71.4588 229.782 71.831 229.936 72.1378C230.092 72.4446 230.309 72.679 230.588 72.8409C230.866 73 231.191 73.0795 231.563 73.0795C231.805 73.0795 232.025 73.0455 232.224 72.9773C232.423 72.9062 232.595 72.8011 232.74 72.6619C232.884 72.5227 232.995 72.3509 233.072 72.1463L234.278 72.3636C234.181 72.7187 234.008 73.0298 233.758 73.2969C233.511 73.5611 233.2 73.767 232.825 73.9148C232.453 74.0597 232.028 74.1321 231.551 74.1321ZM235.773 74V67.4545H237.004V68.4943H237.072C237.192 68.142 237.402 67.8651 237.703 67.6634C238.007 67.4588 238.351 67.3565 238.734 67.3565C238.814 67.3565 238.907 67.3594 239.015 67.3651C239.126 67.3707 239.213 67.3778 239.275 67.3864V68.6051C239.224 68.5909 239.133 68.5753 239.003 68.5582C238.872 68.5384 238.741 68.5284 238.611 68.5284C238.309 68.5284 238.041 68.5923 237.805 68.7202C237.572 68.8452 237.388 69.0199 237.251 69.2443C237.115 69.4659 237.047 69.7187 237.047 70.0028V74H235.773ZM243.925 70.3778C243.925 69.3097 244.065 68.3267 244.346 67.429C244.628 66.5312 245.038 65.7031 245.578 64.9446H246.746C246.535 65.2259 246.339 65.571 246.157 65.9801C245.976 66.3892 245.817 66.8381 245.68 67.3267C245.544 67.8125 245.437 68.3168 245.361 68.8395C245.284 69.3594 245.246 69.8722 245.246 70.3778C245.246 71.054 245.312 71.7386 245.446 72.4318C245.579 73.125 245.76 73.7685 245.987 74.3622C246.214 74.956 246.467 75.4403 246.746 75.8153H245.578C245.038 75.0568 244.628 74.2287 244.346 73.331C244.065 72.4332 243.925 71.4489 243.925 70.3778ZM250.509 74.196C250.163 74.196 249.845 74.1108 249.555 73.9403C249.265 73.767 249.035 73.5369 248.865 73.25C248.694 72.9602 248.609 72.642 248.609 72.2955C248.609 71.946 248.694 71.6278 248.865 71.3409C249.035 71.0511 249.265 70.8196 249.555 70.6463C249.845 70.473 250.163 70.3864 250.509 70.3864H251.447V68.8778H250.509C250.163 68.8778 249.845 68.7926 249.555 68.6222C249.265 68.4517 249.035 68.223 248.865 67.9361C248.694 67.6463 248.609 67.3267 248.609 66.9773C248.609 66.6278 248.694 66.3097 248.865 66.0227C249.035 65.7358 249.265 65.5071 249.555 65.3366C249.845 65.1634 250.163 65.0767 250.509 65.0767C250.859 65.0767 251.177 65.1634 251.464 65.3366C251.754 65.5071 251.984 65.7358 252.154 66.0227C252.328 66.3097 252.414 66.6278 252.414 66.9773V67.9062H253.927V66.9773C253.927 66.6278 254.012 66.3097 254.183 66.0227C254.353 65.7358 254.582 65.5071 254.869 65.3366C255.159 65.1634 255.478 65.0767 255.828 65.0767C256.177 65.0767 256.495 65.1634 256.782 65.3366C257.069 65.5071 257.298 65.7358 257.468 66.0227C257.639 66.3097 257.724 66.6278 257.724 66.9773C257.724 67.3267 257.639 67.6463 257.468 67.9361C257.298 68.223 257.069 68.4517 256.782 68.6222C256.495 68.7926 256.177 68.8778 255.828 68.8778H254.894V70.3864H255.828C256.177 70.3864 256.495 70.473 256.782 70.6463C257.069 70.8196 257.298 71.0511 257.468 71.3409C257.639 71.6278 257.724 71.946 257.724 72.2955C257.724 72.642 257.639 72.9602 257.468 73.25C257.298 73.5369 257.069 73.767 256.782 73.9403C256.495 74.1108 256.177 74.196 255.828 74.196C255.478 74.196 255.159 74.1108 254.869 73.9403C254.582 73.767 254.353 73.5369 254.183 73.25C254.012 72.9602 253.927 72.642 253.927 72.2955V71.358H252.414V72.2955C252.414 72.642 252.328 72.9602 252.154 73.25C251.984 73.5369 251.754 73.767 251.464 73.9403C251.177 74.1108 250.859 74.196 250.509 74.196ZM250.509 73.2244C250.683 73.2244 250.839 73.1832 250.978 73.1009C251.12 73.0185 251.234 72.9062 251.319 72.7642C251.404 72.6222 251.447 72.4659 251.447 72.2955V71.358H250.509C250.339 71.358 250.183 71.4006 250.041 71.4858C249.899 71.5682 249.785 71.6804 249.7 71.8224C249.617 71.9645 249.576 72.1222 249.576 72.2955C249.576 72.4659 249.617 72.6222 249.7 72.7642C249.785 72.9062 249.899 73.0185 250.041 73.1009C250.183 73.1832 250.339 73.2244 250.509 73.2244ZM250.509 67.9062H251.447V66.9773C251.447 66.804 251.404 66.6477 251.319 66.5085C251.234 66.3665 251.12 66.2543 250.978 66.1719C250.839 66.0895 250.683 66.0483 250.509 66.0483C250.339 66.0483 250.183 66.0895 250.041 66.1719C249.899 66.2543 249.785 66.3665 249.7 66.5085C249.617 66.6477 249.576 66.804 249.576 66.9773C249.576 67.1506 249.617 67.3082 249.7 67.4503C249.785 67.5895 249.899 67.7003 250.041 67.7827C250.183 67.8651 250.339 67.9062 250.509 67.9062ZM254.894 67.9062H255.828C256.001 67.9062 256.157 67.8651 256.296 67.7827C256.436 67.7003 256.546 67.5895 256.629 67.4503C256.714 67.3082 256.757 67.1506 256.757 66.9773C256.757 66.804 256.714 66.6477 256.629 66.5085C256.546 66.3665 256.436 66.2543 256.296 66.1719C256.157 66.0895 256.001 66.0483 255.828 66.0483C255.654 66.0483 255.497 66.0895 255.355 66.1719C255.213 66.2543 255.1 66.3665 255.018 66.5085C254.936 66.6477 254.894 66.804 254.894 66.9773V67.9062ZM255.828 73.2244C256.001 73.2244 256.157 73.1832 256.296 73.1009C256.436 73.0185 256.546 72.9062 256.629 72.7642C256.714 72.6222 256.757 72.4659 256.757 72.2955C256.757 72.1222 256.714 71.9645 256.629 71.8224C256.546 71.6804 256.436 71.5682 256.296 71.4858C256.157 71.4006 256.001 71.358 255.828 71.358H254.894V72.2955C254.894 72.4659 254.936 72.6222 255.018 72.7642C255.1 72.9062 255.213 73.0185 255.355 73.1009C255.497 73.1832 255.654 73.2244 255.828 73.2244ZM252.414 70.3864H253.927V68.8778H252.414V70.3864ZM265.701 73.446V67.6847H266.847V73.446H265.701ZM263.396 71.1364V69.9901H269.157V71.1364H263.396ZM277.3 72.8324L274.632 70.1818L277.3 67.5312V72.8324ZM276.469 70.7273V69.6364H284.165V70.7273H276.469ZM283.104 70.7273V65.2727H284.19V70.7273H283.104ZM288.695 70.3778C288.695 71.4489 288.555 72.4332 288.274 73.331C287.992 74.2287 287.582 75.0568 287.042 75.8153H285.874C286.085 75.5341 286.281 75.1889 286.463 74.7798C286.644 74.3707 286.803 73.9233 286.94 73.4375C287.076 72.9489 287.183 72.4432 287.259 71.9205C287.336 71.3977 287.374 70.8835 287.374 70.3778C287.374 69.7045 287.308 69.0213 287.174 68.3281C287.041 67.6349 286.86 66.9915 286.633 66.3977C286.406 65.804 286.153 65.3196 285.874 64.9446H287.042C287.582 65.7031 287.992 66.5312 288.274 67.429C288.555 68.3267 288.695 69.3097 288.695 70.3778Z" fill="white"/>
+</g>
+<rect x="8" y="10" width="202" height="12" rx="6" fill="#FDFDFD"/>
+<rect x="8" y="30" width="137" height="12" rx="6" fill="#FDFDFD"/>
+<defs>
+<filter id="filter0_d_487_6953" x="196.167" y="55.5833" width="106.667" height="29.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.416667"/>
+<feGaussianBlur stdDeviation="0.416667"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.214953 0 0 0 0 0.364486 0 0 0 0 0.985047 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_487_6953"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_487_6953" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_487_6953" x1="0" y1="50" x2="318" y2="50" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEEF2"/>
+<stop offset="1" stop-color="#E7EEFF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/profile/hot-key-enter.svg b/public/assets/images/dashboard/profile/hot-key-enter.svg
new file mode 100644
index 000000000..b919c2cf8
--- /dev/null
+++ b/public/assets/images/dashboard/profile/hot-key-enter.svg
@@ -0,0 +1,25 @@
+<svg width="318" height="100" viewBox="0 0 318 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="318" height="100" rx="8" fill="url(#paint0_linear_487_6940)"/>
+<g filter="url(#filter0_d_487_6940)">
+<rect x="223" y="56" width="79" height="28" rx="6" fill="#456EFF"/>
+<path d="M236.142 74V65.2727H241.614V66.4062H237.459V69.0653H241.328V70.1946H237.459V72.8665H241.665V74H236.142ZM244.545 70.1136V74H243.271V67.4545H244.494V68.5199H244.575C244.725 68.1733 244.961 67.8949 245.282 67.6847C245.606 67.4744 246.013 67.3693 246.505 67.3693C246.951 67.3693 247.342 67.4631 247.677 67.6506C248.012 67.8352 248.272 68.1108 248.457 68.4773C248.641 68.8437 248.734 69.2969 248.734 69.8366V74H247.46V69.9901C247.46 69.5156 247.336 69.1449 247.089 68.8778C246.842 68.608 246.502 68.473 246.07 68.473C245.775 68.473 245.512 68.5369 245.282 68.6648C245.055 68.7926 244.874 68.9801 244.741 69.2273C244.61 69.4716 244.545 69.767 244.545 70.1136ZM253.498 67.4545V68.4773H249.923V67.4545H253.498ZM250.881 65.8864H252.156V72.0781C252.156 72.3253 252.192 72.5114 252.266 72.6364C252.34 72.7585 252.435 72.8423 252.552 72.8878C252.671 72.9304 252.8 72.9517 252.94 72.9517C253.042 72.9517 253.131 72.9446 253.208 72.9304C253.285 72.9162 253.344 72.9048 253.387 72.8963L253.617 73.9489C253.543 73.9773 253.438 74.0057 253.302 74.0341C253.165 74.0653 252.995 74.0824 252.79 74.0852C252.455 74.0909 252.143 74.0312 251.853 73.9062C251.563 73.7812 251.329 73.5881 251.15 73.3267C250.971 73.0653 250.881 72.7372 250.881 72.3423V65.8864ZM257.658 74.1321C257.013 74.1321 256.458 73.9943 255.992 73.7188C255.529 73.4403 255.171 73.0497 254.918 72.5469C254.668 72.0412 254.543 71.4489 254.543 70.7699C254.543 70.0994 254.668 69.5085 254.918 68.9972C255.171 68.4858 255.523 68.0866 255.975 67.7997C256.429 67.5128 256.961 67.3693 257.569 67.3693C257.938 67.3693 258.296 67.4304 258.642 67.5526C258.989 67.6747 259.3 67.8665 259.576 68.1278C259.851 68.3892 260.069 68.7287 260.228 69.1463C260.387 69.5611 260.466 70.0653 260.466 70.6591V71.1108H255.263V70.1562H259.218C259.218 69.821 259.15 69.5241 259.013 69.2656C258.877 69.0043 258.685 68.7983 258.438 68.6477C258.194 68.4972 257.907 68.4219 257.577 68.4219C257.219 68.4219 256.907 68.5099 256.64 68.6861C256.375 68.8594 256.171 69.0866 256.026 69.3679C255.884 69.6463 255.813 69.9489 255.813 70.2756V71.0213C255.813 71.4588 255.89 71.831 256.043 72.1378C256.199 72.4446 256.417 72.679 256.695 72.8409C256.973 73 257.299 73.0795 257.671 73.0795C257.912 73.0795 258.132 73.0455 258.331 72.9773C258.53 72.9062 258.702 72.8011 258.847 72.6619C258.992 72.5227 259.103 72.3509 259.179 72.1463L260.385 72.3636C260.289 72.7187 260.115 73.0298 259.865 73.2969C259.618 73.5611 259.307 73.767 258.932 73.9148C258.56 74.0597 258.135 74.1321 257.658 74.1321ZM261.88 74V67.4545H263.112V68.4943H263.18C263.299 68.142 263.509 67.8651 263.81 67.6634C264.114 67.4588 264.458 67.3565 264.842 67.3565C264.921 67.3565 265.015 67.3594 265.123 67.3651C265.234 67.3707 265.32 67.3778 265.383 67.3864V68.6051C265.332 68.5909 265.241 68.5753 265.11 68.5582C264.979 68.5384 264.849 68.5284 264.718 68.5284C264.417 68.5284 264.148 68.5923 263.913 68.7202C263.68 68.8452 263.495 69.0199 263.359 69.2443C263.222 69.4659 263.154 69.7187 263.154 70.0028V74H261.88ZM270.032 70.3778C270.032 69.3097 270.173 68.3267 270.454 67.429C270.735 66.5312 271.146 65.7031 271.685 64.9446H272.853C272.643 65.2259 272.447 65.571 272.265 65.9801C272.083 66.3892 271.924 66.8381 271.788 67.3267C271.651 67.8125 271.545 68.3168 271.468 68.8395C271.391 69.3594 271.353 69.8722 271.353 70.3778C271.353 71.054 271.42 71.7386 271.553 72.4318C271.687 73.125 271.867 73.7685 272.094 74.3622C272.322 74.956 272.575 75.4403 272.853 75.8153H271.685C271.146 75.0568 270.735 74.2287 270.454 73.331C270.173 72.4332 270.032 71.4489 270.032 70.3778ZM277.192 72.8324L274.525 70.1818L277.192 67.5312V72.8324ZM276.361 70.7273V69.6364H284.057V70.7273H276.361ZM282.996 70.7273V65.2727H284.083V70.7273H282.996ZM288.588 70.3778C288.588 71.4489 288.447 72.4332 288.166 73.331C287.885 74.2287 287.474 75.0568 286.935 75.8153H285.767C285.977 75.5341 286.173 75.1889 286.355 74.7798C286.537 74.3707 286.696 73.9233 286.832 73.4375C286.969 72.9489 287.075 72.4432 287.152 71.9205C287.229 71.3977 287.267 70.8835 287.267 70.3778C287.267 69.7045 287.2 69.0213 287.067 68.3281C286.933 67.6349 286.753 66.9915 286.526 66.3977C286.298 65.804 286.045 65.3196 285.767 64.9446H286.935C287.474 65.7031 287.885 66.5312 288.166 67.429C288.447 68.3267 288.588 69.3097 288.588 70.3778Z" fill="white"/>
+</g>
+<rect x="8" y="10" width="202" height="12" rx="6" fill="#FDFDFD"/>
+<rect x="8" y="30" width="137" height="12" rx="6" fill="#FDFDFD"/>
+<defs>
+<filter id="filter0_d_487_6940" x="222.167" y="55.5833" width="80.6667" height="29.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.416667"/>
+<feGaussianBlur stdDeviation="0.416667"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.214953 0 0 0 0 0.364486 0 0 0 0 0.985047 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_487_6940"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_487_6940" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_487_6940" x1="0" y1="50" x2="318" y2="50" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEEF2"/>
+<stop offset="1" stop-color="#E7EEFF"/>
+</linearGradient>
+</defs>
+</svg>