From cb35207c268c096ad79c7245b8db6d42c378e2f8 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 15 Apr 2024 11:39:10 +0530
Subject: [PATCH] feat: Complete basic design

---
 .../dashboard/components/ui/PreviewCard.vue   |  27 +-
 .../dashboard/settings/personal/Index.vue     | 392 +++++++++++++++---
 .../settings/personal/PersonalWrapper.vue     |  16 +-
 .../settings/personal/UserProfilePicture.vue  | 106 +++--
 4 files changed, 428 insertions(+), 113 deletions(-)

diff --git a/app/javascript/dashboard/components/ui/PreviewCard.vue b/app/javascript/dashboard/components/ui/PreviewCard.vue
index c8586ef6e..52a19e653 100644
--- a/app/javascript/dashboard/components/ui/PreviewCard.vue
+++ b/app/javascript/dashboard/components/ui/PreviewCard.vue
@@ -1,19 +1,14 @@
 <template>
   <div
-    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
+    class="flex flex-col min-w-[15rem] max-h-[21.25rem] w-[23rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
     :class="{
-      'bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400':
-        active,
+      'border border-solid border-woot-300 dark:border-woot-400': active,
     }"
   >
     <div
-      class="flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600"
-      :class="{
-        'bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700':
-          active,
-      }"
+      class="flex justify-between items-center px-2 w-full h-10 rounded-t-[5px]"
     >
-      <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
+      <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
       <!-- <fluent-icon
         v-if="active"
         icon="checkmark-circle"
@@ -22,24 +17,16 @@
         class="text-woot-500 dark:text-woot-500"
       /> -->
       <div>
-        <input type="radio" name="hotkey" value="enter" />
+        <input type="radio" name="hotkey" value="enter" :checked="active" />
       </div>
     </div>
     <div
-      class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
+      class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pb-0 text-start"
     >
       {{ content }}
     </div>
     <div v-if="src" class="p-3">
-      <img
-        :src="src"
-        class="border border-solid rounded-md"
-        :class="
-          active
-            ? 'border-woot-75 dark:border-woot-700'
-            : 'border-slate-50 dark:border-slate-600'
-        "
-      />
+      <img :src="src" class="object-cover w-full" />
     </div>
     <slot v-else />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
index 6d473ac55..033f1bc54 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
@@ -1,31 +1,101 @@
 <template>
   <div
-    class="flex h-full flex-col p-5 pt-16 mx-auto my-0 bg-white dark:bg-slate-900 overflow-auto font-inter"
+    class="flex flex-col h-full p-5 pt-16 mx-auto my-0 overflow-auto bg-white dark:bg-slate-900 font-inter"
   >
     <div class="flex flex-col gap-8 sm:max-w-3xl">
-      <h2 class="font-medium text-slate-900 dark:text-white text-2xl">
+      <h2 class="text-2xl font-medium text-slate-900 dark:text-white">
         Profile Settings
       </h2>
       <user-profile-picture username="John Doe" size="72px" />
+
       <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."
+        :show-action-button="true"
+        button-text="Save message signature"
       >
         <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."
+        :show-action-button="false"
+      >
+        <template #settingsItem>
+          <div class="flex flex-row justify-between gap-4">
+            <button
+              v-for="keyOption in keyOptions"
+              :key="keyOption.key"
+              class="p-0 cursor-pointer"
+            >
+              <preview-card
+                :heading="keyOption.heading"
+                :content="keyOption.content"
+                :src="keyOption.src"
+                :active="keyOption.key === 'enter'"
+              />
+            </button>
+          </div>
+        </template>
+      </personal-wrapper>
+
+      <div class="flex flex-col w-full gap-4">
+        <h4 class="text-lg font-medium text-slate-900 dark:text-slate-25">
+          Change password
+        </h4>
+        <div class="flex flex-row items-center justify-between gap-4">
+          <div class="flex-grow h-0.5 bg-slate-50 dark:bg-slate-700" />
+        </div>
+        <form-input
+          name="current_password"
+          class="flex-1"
+          :class="{ error: false }"
+          label="Current password"
+          placeholder="Please enter your current password"
+          :has-error="false"
+          :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+        />
+        <form-input
+          name="new_password"
+          class="flex-1"
+          :class="{ error: false }"
+          label="New password"
+          placeholder="Please enter your new password"
+          :has-error="false"
+          :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+        />
+
+        <form-input
+          name="confirm_password"
+          class="flex-1"
+          :class="{ error: false }"
+          label="Confirm password"
+          placeholder="Please confirm your new password"
+          :has-error="false"
+          :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+        />
+        <woot-button
+          color-scheme="primary"
+          class="rounded-xl w-fit"
+          @click="$emit('click')"
+        >
+          Update password
+        </woot-button>
+      </div>
+
+      <personal-wrapper
+        header="Audio notifications"
+        description="Enable audio notifications in dashboard for new messages and conversations."
+        :show-action-button="false"
+      >
+        <template #settingsItem>
           <form-select
             name="timezone"
             spacing="compact"
-            label="Ding"
+            label="Alert tone"
             placeholder="Ding"
             class="max-w-xl"
           >
@@ -37,59 +107,268 @@
               {{ file.label }}
             </option>
           </form-select>
-          <div
-            class="flex flex-row p-2 justify-between max-w-xl h-10 rounded-md border border-solid border-slate-75 dark:border-slate-600"
-          >
-            <div
-              class="flex flex-row gap-1 border-r border-slate-75 justify-center items-center grow"
+
+          <div>
+            <label
+              class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
             >
-              <input type="radio" name="hotkey" value="enter" />
-              <label>None</label>
-            </div>
+              Alert events for conversations
+            </label>
             <div
-              class="flex flex-row gap-1 border-r border-slate-75 justify-center items-center grow"
+              class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-slate-75 dark:border-slate-600"
             >
-              <input type="radio" name="hotkey" value="enter" />
-              <label>Assigned</label>
-            </div>
-            <div class="flex flex-row gap-1 grow justify-center items-center">
-              <input type="radio" name="hotkey" value="enter" />
-              <label>All</label>
+              <div
+                class="flex flex-row items-center justify-center gap-1 border-r border-slate-75 grow"
+              >
+                <input type="radio" name="hotkey" value="enter" checked />
+                <label>None</label>
+              </div>
+              <div
+                class="flex flex-row items-center justify-center gap-1 border-r border-slate-75 grow"
+              >
+                <input type="radio" name="hotkey" value="enter" />
+                <label>Assigned</label>
+              </div>
+              <div class="flex flex-row items-center justify-center gap-1 grow">
+                <input type="radio" name="hotkey" value="enter" />
+                <label>All</label>
+              </div>
             </div>
           </div>
-          <div class="flex flex-row gap-1 items-center justify-start">
-            <input
-              type="checkbox"
-              name="send"
-              :checked="true"
-              class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            />
-            <label>
-              Send audio alerts only if the browser window is not active
+          <div>
+            <label
+              class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
+            >
+              Alert conditions
             </label>
+            <div class="flex flex-row items-center justify-start gap-2">
+              <input
+                type="checkbox"
+                name="send"
+                :checked="true"
+                class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+              />
+              <label>
+                Send audio alerts only if the browser window is not active
+              </label>
+            </div>
+            <div class="flex flex-row items-center justify-start gap-2">
+              <input
+                type="checkbox"
+                name="send"
+                :checked="false"
+                class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+              />
+              <label>
+                Send alerts every 30s until all the assigned conversations are
+                read
+              </label>
+            </div>
           </div>
         </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."
+        header="Notification preferences"
+        :show-action-button="false"
       >
         <template #settingsItem>
-          <div class="flex gap-4 flex-row">
-            <button
-              v-for="keyOption in keyOptions"
-              :key="keyOption.key"
-              class="cursor-pointer p-0"
+          <div>
+            <!-- Draw a line -->
+            <div class="flex flex-row items-center justify-between gap-4">
+              <div class="flex-grow h-0.5 bg-slate-50 dark:bg-slate-700" />
+            </div>
+            <div
+              class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
             >
-              <preview-card
-                :heading="keyOption.heading"
-                :content="keyOption.content"
-                :src="keyOption.src"
-                :active="true"
-              />
-            </button>
+              <table-header-cell :span="6" label="Notification type" />
+              <table-header-cell :span="3" label="Email" />
+              <table-header-cell :span="3" label="Push notification" />
+            </div>
+            <div
+              class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
+            >
+              <div
+                class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+              >
+                <span class="text-slate-700 dark:text-slate-200">
+                  A new conversation is created
+                </span>
+              </div>
+              <div
+                class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+              >
+                <input
+                  type="checkbox"
+                  name="email"
+                  :checked="true"
+                  class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+                />
+              </div>
+              <div
+                class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+              >
+                <input
+                  type="checkbox"
+                  name="email"
+                  :checked="false"
+                  class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+                />
+              </div>
+            </div>
+            <div
+              class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
+            >
+              <div
+                class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+              >
+                <span class="text-slate-700 dark:text-slate-200">
+                  Conversation is assigned to you
+                </span>
+              </div>
+              <div
+                class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+              >
+                <input
+                  type="checkbox"
+                  name="email"
+                  :checked="true"
+                  class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+                />
+              </div>
+              <div
+                class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+              >
+                <input
+                  type="checkbox"
+                  name="email"
+                  :checked="false"
+                  class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+                />
+              </div>
+            </div>
+            <div
+              class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
+            >
+              <div
+                class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+              >
+                <span class="text-slate-700 dark:text-slate-200">
+                  Conversation is assigned to you
+                </span>
+              </div>
+              <div
+                class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+              >
+                <input
+                  type="checkbox"
+                  name="email"
+                  :checked="true"
+                  class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+                />
+              </div>
+              <div
+                class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+              >
+                <input
+                  type="checkbox"
+                  name="email"
+                  :checked="false"
+                  class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+                />
+              </div>
+            </div>
+            <div
+              class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
+            >
+              <div
+                class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+              >
+                <span class="text-slate-700 dark:text-slate-200">
+                  You are mentioned in a conversation
+                </span>
+              </div>
+              <div
+                class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+              >
+                <input
+                  type="checkbox"
+                  name="email"
+                  :checked="true"
+                  class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+                />
+              </div>
+              <div
+                class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+              >
+                <input
+                  type="checkbox"
+                  name="email"
+                  :checked="false"
+                  class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+                />
+              </div>
+            </div>
+            <div
+              class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
+            >
+              <div
+                class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+              >
+                <span class="text-slate-700 dark:text-slate-200">
+                  New message is created in an assigned conversation
+                </span>
+              </div>
+              <div
+                class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+              >
+                <input
+                  type="checkbox"
+                  name="email"
+                  :checked="true"
+                  class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+                />
+              </div>
+              <div
+                class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+              >
+                <input
+                  type="checkbox"
+                  name="email"
+                  :checked="false"
+                  class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+      </personal-wrapper>
+      <personal-wrapper
+        header="Access Token"
+        description="This token can be used if you are building an API based integration."
+        :show-action-button="false"
+      >
+        <template #settingsItem>
+          <div class="flex flex-row justify-between gap-4">
+            <form-input
+              name="access_token"
+              class="flex-1"
+              type="password"
+              value="1234567890"
+              :class="{ error: false }"
+              placeholder="Please enter your new password"
+              :has-error="false"
+              :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+            />
+            <woot-button
+              icon="copy"
+              variant="hollow"
+              color-scheme="secondary"
+              class="rounded-xl w-fit"
+              @click="$emit('click')"
+            >
+              Copy
+            </woot-button>
           </div>
         </template>
       </personal-wrapper>
@@ -97,6 +376,7 @@
   </div>
 </template>
 <script setup>
+import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
 import MessageSignature from '../profile/MessageSignature.vue';
 import UserProfilePicture from './UserProfilePicture.vue';
 import PersonalWrapper from './PersonalWrapper.vue';
@@ -107,14 +387,16 @@ const keyOptions = [
   {
     key: 'enter',
     src: '/assets/images/dashboard/profile/hot-key-enter.svg',
-    heading: 'Enter key',
-    content: 'Send messages by pressing the Enter key',
+    heading: 'Enter (↵)',
+    content:
+      'Send messages by pressing Enter key instead of clicking send button.',
   },
   {
     key: 'cmd_enter',
     src: '/assets/images/dashboard/profile/hot-key-ctrl-enter.svg',
-    heading: 'Enter key',
-    content: 'Send messages by pressing the Enter key',
+    heading: 'CMD / Ctrl + Enter (⌘ + ↵)',
+    content:
+      'Send messages by pressing Enter key instead of clicking send button.',
   },
 ];
 const audioFiles = [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
index 0d89bf5b4..0a0c10c52 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
@@ -1,22 +1,22 @@
 <template>
-  <div class="flex flex-col gap-6 w-full items-start">
+  <div class="flex flex-col items-start w-full gap-6">
     <div
-      class="flex flex-col gap-4 divide-y divide-slate-200 dark:divide-slate-700"
+      class="flex flex-col w-full 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"
+        class="text-lg font-medium text-slate-900 dark:text-slate-25"
       >
         {{ header }}
       </h4>
       <p
         v-if="description"
-        class="text-slate-600 dark:text-slate-400 text-sm font-normal mb-0 pt-4"
+        class="pt-4 mb-0 text-sm font-normal text-slate-600 dark:text-slate-400"
       >
         {{ description }}
       </p>
     </div>
-    <div v-if="$slots.settingsItem" class="w-full flex flex-col gap-6">
+    <div v-if="$slots.settingsItem" class="flex flex-col w-full gap-6">
       <slot name="settingsItem" />
       <woot-button
         v-if="showActionButton"
@@ -24,7 +24,7 @@
         class="rounded-xl w-fit"
         @click="$emit('click')"
       >
-        Save
+        {{ buttonText }}
       </woot-button>
     </div>
   </div>
@@ -44,5 +44,9 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  buttonText: {
+    type: String,
+    default: 'Save',
+  },
 });
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue
index f7e7b38e7..29e3d36c3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue
@@ -1,43 +1,85 @@
 <template>
-  <div class="flex flex-col gap-2 mt-2">
-    <span class="font-medium text-slate-900 dark:text-slate-25 text-normal">
-      Profile picture
-    </span>
-    <div
-      class="relative rounded-xl h-[72px] w-[72px]"
-      :title="title"
-      @mouse-over="showUpload"
-    >
-      <img
-        class="rounded-xl h-[72px] w-[72px]"
-        src="https://i.pravatar.cc/300"
-        draggable="false"
-        @load="onImgLoad"
-        @error="onImgError"
+  <div>
+    <div class="flex flex-col gap-2 mt-2">
+      <span class="font-medium text-slate-900 dark:text-slate-25 text-normal">
+        Profile picture
+      </span>
+      <div
+        class="relative rounded-xl h-[72px] w-[72px]"
+        :title="title"
+        @mouse-over="showUpload"
+      >
+        <img
+          class="rounded-xl h-[72px] w-[72px]"
+          src="https://i.pravatar.cc/300"
+          draggable="false"
+          @load="onImgLoad"
+          @error="onImgError"
+        />
+        <div
+          class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none -top-2 -right-2 dark:border-white bg-slate-200 dark:bg-slate-700"
+        >
+          <fluent-icon
+            icon="dismiss"
+            size="16"
+            class="text-slate-800 dark:text-slate-200"
+          />
+        </div>
+        <div
+          class="absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
+        >
+          <fluent-icon
+            icon="avatar-upload"
+            size="32"
+            class="text-white dark:text-white"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="pt-6">
+      <form-input
+        name="full_name"
+        class="flex-1"
+        :class="{ error: false }"
+        :label="$t('REGISTER.FULL_NAME.LABEL')"
+        placeholder="Enter your name"
+        :has-error="false"
+        :error-message="$t('REGISTER.FULL_NAME.ERROR')"
       />
-      <div
-        class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none -top-2 -right-2 dark:border-white bg-slate-200 dark:bg-slate-700"
+      <form-input
+        name="display_name"
+        class="flex-1"
+        :class="{ error: false }"
+        label="Display name"
+        placeholder="Enter your display name"
+        :has-error="false"
+        :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+      />
+      <form-input
+        name="email"
+        class="flex-1"
+        :class="{ error: false }"
+        label="Email"
+        placeholder="Enter your email"
+        :has-error="false"
+        :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+      />
+      <woot-button
+        color-scheme="primary"
+        class="rounded-xl w-fit"
+        @click="$emit('click')"
       >
-        <fluent-icon
-          icon="dismiss"
-          size="16"
-          class="text-slate-800 dark:text-slate-200"
-        />
-      </div>
-      <div
-        class="absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
-      >
-        <fluent-icon
-          icon="avatar-upload"
-          size="32"
-          class="text-white dark:text-white"
-        />
-      </div>
+        Update profile
+      </woot-button>
     </div>
   </div>
 </template>
 <script>
+import FormInput from 'v3/components/Form/Input.vue';
 export default {
+  components: {
+    FormInput,
+  },
   props: {
     src: {
       type: String,