From 7d11ca79e5724473783eb3b98f6dcdbca15414a6 Mon Sep 17 00:00:00 2001
From: Jet Li <jetli@freeleaps.com>
Date: Thu, 25 Jul 2024 22:26:32 -0700
Subject: [PATCH] Update tooltip for preappending country code for mobile
 verification

---
 frontend/src/lang/en.js                       |   2 +-
 frontend/src/lang/zh.js                       |   4 +-
 .../src/pages/user/account/UserProfile.vue    | 502 +++++-------------
 frontend/src/pages/user/messages/Home.vue     |   2 +-
 frontend/src/pages/user/workspace/Home.vue    |   4 +-
 .../user/workspace/projectIssue/Issue.vue     | 117 ++--
 6 files changed, 212 insertions(+), 419 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index ad57458..1aa74fd 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -212,5 +212,5 @@ export default {
   'Issues management': 'Issues management',
   'Payment progress': 'Payment progress',
   Goal: 'Goal',
-  'Message': 'Message'
+  Message: 'Message'
 }
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 4df72e1..5c07a24 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -201,9 +201,9 @@ export default {
   'Number of projects fulfilled': '完成项目总数',
   'Gross trading value': '完成项目总金额',
   'Delivery time per project': '项目平均交付时长',
-  'Logins': '总登录次数',
+  Logins: '总登录次数',
   'Issued request': '项目请求总数',
   'Open requests': '待处理的项目请求',
   'Lines of code per week': '每周代码产量',
-  'Message': '消息'
+  Message: '消息'
 }
diff --git a/frontend/src/pages/user/account/UserProfile.vue b/frontend/src/pages/user/account/UserProfile.vue
index 142b1cd..fcc4c83 100644
--- a/frontend/src/pages/user/account/UserProfile.vue
+++ b/frontend/src/pages/user/account/UserProfile.vue
@@ -7,63 +7,43 @@
           <span v-if="accountNeedAttention">!</span>
         </div>
         <div class="panel-content-container" id="account-summary">
-          <button
-            class="panel-item-container"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-user-id"
-            aria-expanded="false"
-            aria-controls="collapse-user-id"
-          >
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-id"
+            aria-expanded="false" aria-controls="collapse-user-id">
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-user-id">{{
                 $t('User ID')
-              }}</label>
+                }}</label>
               <span class="profile-item-span" id="account-summary-user-id">
                 {{ userProfile.account.basic.FLID.identity }}
               </span>
             </div>
           </button>
-          <button
-            class="panel-item-container"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-password"
-            aria-expanded="false"
-            aria-controls="collapse-password"
-          >
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-password"
+            aria-expanded="false" aria-controls="collapse-password">
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-password">{{
                 $t('Password')
-              }}</label>
+                }}</label>
               <span class="profile-item-span" id="account-summary-password"> ******** </span>
             </div>
           </button>
-          <button
-            class="panel-item-container"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-user-email"
-            aria-expanded="false"
-            aria-controls="collapse-user-email"
-          >
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-email"
+            aria-expanded="false" aria-controls="collapse-user-email">
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-email">{{
                 $t('Email')
-              }}</label>
+                }}</label>
               <span class="profile-item-span" id="account-summary-email">
                 {{ userProfile.account.basic.email.address }}
               </span>
             </div>
           </button>
-          <button
-            class="panel-item-container"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-user-mobile"
-            aria-expanded="false"
-            aria-controls="collapse-user-mobile"
-          >
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-mobile"
+            aria-expanded="false" aria-controls="collapse-user-mobile">
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-mobile">{{
                 $t('Mobile')
-              }}</label>
+                }}</label>
               <span class="profile-item-span" id="account-summary-mobile">
                 {{ userProfile.account.basic.mobile.number }}
               </span>
@@ -71,61 +51,29 @@
           </button>
         </div>
       </div>
-      <div
-        class="collapse collapse-content-container"
-        id="collapse-user-id"
-        aria-labelledby="account-summary"
-        data-bs-parent="#account-panel"
-      >
+      <div class="collapse collapse-content-container" id="collapse-user-id" aria-labelledby="account-summary"
+        data-bs-parent="#account-panel">
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input
-              type="text"
-              v-model="userProfile.account.basic.FLID.identity"
-              readonly="true"
-              v-tooltip
-              title="Generated automatically"
-              delay='{"show":"500", "hide":"100"}'
-            />
+            <input type="text" v-model="userProfile.account.basic.FLID.identity" readonly="true" v-tooltip
+              title="Generated automatically" delay='{"show":"500", "hide":"100"}' />
           </div>
         </div>
       </div>
-      <div
-        class="collapse collapse-content-container"
-        id="collapse-password"
-        aria-labelledby="account-summary"
-        data-bs-parent="#account-panel"
-      >
+      <div class="collapse collapse-content-container" id="collapse-password" aria-labelledby="account-summary"
+        data-bs-parent="#account-panel">
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input
-              type="password"
-              v-model="passwordOperation.password"
-              :placeholder="passwordOperation.placeholder"
-              readonly="true"
-              v-tooltip
-              title="Click to edit"
-              delay='{"show":"500", "hide":"100"}'
-              @click="edittingPassword($event)"
-              @blur="stopEdittingPassword($event)"
-              @keyup.enter="blurInput($event)"
-            />
+            <input type="password" v-model="passwordOperation.password" :placeholder="passwordOperation.placeholder"
+              readonly="true" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}'
+              @click="edittingPassword($event)" @blur="stopEdittingPassword($event)" @keyup.enter="blurInput($event)" />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
           </div>
           <div class="collapse-item-input">
-            <input
-              type="password"
-              v-model="passwordOperation.password2"
-              :placeholder="passwordOperation.placeholder2"
-              readonly=" true"
-              v-tooltip
-              title="Click to edit"
-              delay='{"show":"500", "hide":"100"}'
-              @click="edittingPassword2($event)"
-              @blur="stopEdittingPassword2($event)"
-              @keyup.enter="blurInput($event)"
-              ref="password2Input"
-            />
+            <input type="password" v-model="passwordOperation.password2" :placeholder="passwordOperation.placeholder2"
+              readonly=" true" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}'
+              @click="edittingPassword2($event)" @blur="stopEdittingPassword2($event)" @keyup.enter="blurInput($event)"
+              ref="password2Input" />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
             <p v-if="passwordOperation.message" class="error-message">
               {{ passwordOperation.message }}
@@ -133,104 +81,51 @@
           </div>
         </div>
       </div>
-      <div
-        class="collapse collapse-content-container"
-        id="collapse-user-email"
-        aria-labelledby="account-summary"
-        data-bs-parent="#account-panel"
-      >
+      <div class="collapse collapse-content-container" id="collapse-user-email" aria-labelledby="account-summary"
+        data-bs-parent="#account-panel">
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input
-              type="text"
-              v-model="emailOperation.email.address"
-              readonly="true"
-              v-tooltip
-              title="Click to update"
-              delay='{"show":"500", "hide":"100"}'
-              @click="edittingEmail($event)"
-              @blur="stopEdittingEmail($event)"
-              @keyup.enter="blurInput($event)"
-            />
+            <input type="text" v-model="emailOperation.email.address" readonly="true" v-tooltip title="Click to update"
+              delay='{"show":"500", "hide":"100"}' @click="edittingEmail($event)" @blur="stopEdittingEmail($event)"
+              @keyup.enter="blurInput($event)" />
           </div>
           <div v-if="emailOperation.verifyingMode" class="collapse-item-input">
-            <input
-              type="text"
-              v-model="emailOperation.verificationCode"
-              placeholder="verification code"
-              v-tooltip
-              title="Put the verification code received in the email"
-              delay='{"show":"500", "hide":"100"}'
-              @blur="stopEdittingEmailVerificationCode($event)"
-              @keyup.enter="blurInput($event)"
-            />
+            <input type="text" v-model="emailOperation.verificationCode" placeholder="verification code" v-tooltip
+              title="Put the verification code received in the email" delay='{"show":"500", "hide":"100"}'
+              @blur="stopEdittingEmailVerificationCode($event)" @keyup.enter="blurInput($event)" />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
             <p v-if="emailOperation.message" class="error-message">{{ emailOperation.message }}</p>
           </div>
 
-          <button
-            v-if="!emailOperation.verifyingMode"
-            class="btn btn-link"
-            :disabled="emailOperation.email.verified"
-            @click="startVerifyingEmail()"
-            v-tooltip
-            :title="
-              emailOperation.email.verified
-                ? 'The email has been verified'
-                : 'The email needs to be verify'
-            "
-            delay='{"show":"500", "hide":"100"}'
-          >
+          <button v-if="!emailOperation.verifyingMode" class="btn btn-link" :disabled="emailOperation.email.verified"
+            @click="startVerifyingEmail()" v-tooltip :title="emailOperation.email.verified
+              ? 'The email has been verified'
+              : 'The email needs to be verify'
+              " delay='{"show":"500", "hide":"100"}'>
             {{ emailOperation.email.verified ? 'Verified' : 'Verify' }}
           </button>
         </div>
       </div>
-      <div
-        class="collapse collapse-content-container"
-        id="collapse-user-mobile"
-        aria-labelledby="account-summary"
-        data-bs-parent="#account-panel"
-      >
+      <div class="collapse collapse-content-container" id="collapse-user-mobile" aria-labelledby="account-summary"
+        data-bs-parent="#account-panel">
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input
-              type="text"
-              v-model="mobileOperation.mobile.number"
-              readonly="true"
-              v-tooltip
-              title="Click to update"
-              @click="edittingMobile($event)"
-              @blur="stopEdittingMobile($event)"
-              @keyup.enter="blurInput($event)"
-            />
+            <input type="text" v-model="mobileOperation.mobile.number" readonly="true" v-tooltip
+              title="Click to update, be sure to preappend country code, i.e. +86 for China"
+              @click="edittingMobile($event)" @blur="stopEdittingMobile($event)" @keyup.enter="blurInput($event)" />
           </div>
           <div v-if="mobileOperation.verifyingMode" class="collapse-item-input">
-            <input
-              type="text"
-              v-model="mobileOperation.verificationCode"
-              placeholder="verification code"
-              v-tooltip
-              title="Put the verification code received in the mobile number"
-              delay='{"show":"500", "hide":"100"}'
-              @blur="stopEdittingMobileVerificationCode($event)"
-              @keyup.enter="blurInput($event)"
-            />
+            <input type="text" v-model="mobileOperation.verificationCode" placeholder="verification code" v-tooltip
+              title="Put the verification code received in the mobile number" delay='{"show":"500", "hide":"100"}'
+              @blur="stopEdittingMobileVerificationCode($event)" @keyup.enter="blurInput($event)" />
             <svg-icon icon="msg-enter" class-name="enter-icon" />
             <p v-if="mobileOperation.message" class="error-input">{{ mobileOperation.message }}</p>
           </div>
-          <button
-            v-if="!mobileOperation.verifyingMode"
-            class="btn btn-link"
-            :disabled="mobileOperation.mobile.verified"
-            @click="startVerifyingMobile()"
-            v-tooltip
-            :title="
-              mobileOperation.mobile.verified
-                ? 'The mobile number has been verified'
-                : 'The mobile number needs to be verify'
-            "
-            delay='{"show":"500", "hide":"100"}'
-          >
+          <button v-if="!mobileOperation.verifyingMode" class="btn btn-link" :disabled="mobileOperation.mobile.verified"
+            @click="startVerifyingMobile()" v-tooltip :title="mobileOperation.mobile.verified
+              ? 'The mobile number has been verified'
+              : 'The mobile number needs to be verify'
+              " delay='{"show":"500", "hide":"100"}'>
             {{ mobileOperation.mobile.verified ? 'Verified' : 'Verify' }}
           </button>
         </div>
@@ -242,73 +137,47 @@
           <label for="personal-summary">{{ $t('Personal') }}</label>
         </div>
         <div class="panel-content-container" id="personal-summary">
-          <button
-            class="panel-item-container"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-user-identity"
-            aria-expanded="false"
-            aria-controls="collapse-user-identity"
-          >
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-user-identity"
+            aria-expanded="false" aria-controls="collapse-user-identity">
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-user-fullname">{{
                 $t('Full name')
-              }}</label>
+                }}</label>
               <span class="profile-item-span" id="account-summary-user-fullname">
                 {{ userProfile.account.basic.first_name }}
                 {{ userProfile.account.basic.last_name }}
               </span>
             </div>
           </button>
-          <button
-            class="panel-item-container"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-personal-user-photo"
-            aria-expanded="false"
-            aria-controls="collapse-personal-user-photo"
-          >
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-personal-user-photo"
+            aria-expanded="false" aria-controls="collapse-personal-user-photo">
             <div class="profile-item-container profile-photo-container">
-              <img
-                class="profile-photo"
-                alt="user portrait"
-                id="personal-photo-operation-image"
-                :src="
-                  userProfile.account.basic.photo.base64
-                    ? userProfile.account.basic.photo.base64
-                    : profileUrl
-                "
-              />
+              <img class="profile-photo" alt="user portrait" id="personal-photo-operation-image" :src="userProfile.account.basic.photo.base64
+                ? userProfile.account.basic.photo.base64
+                : profileUrl
+                " />
               <label class="profile-item-label" for="personal-photo-operation-image">{{
                 $t('Portrait')
-              }}</label>
+                }}</label>
             </div>
           </button>
-          <button
-            class="panel-item-container"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-personal-user-intro"
-            aria-expanded="false"
-            aria-controls="collapse-personal-user-intro"
-          >
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-personal-user-intro"
+            aria-expanded="false" aria-controls="collapse-personal-user-intro">
             <div class="profile-item-container">
               <label class="profile-item-label" for="personal-summary-self-intro">{{
                 $t('Self-intro')
-              }}</label>
+                }}</label>
               <span class="profile-item-span" id="personal-summary-self-intro">
                 {{ userProfile.account.basic.self_intro.summary }}
               </span>
             </div>
           </button>
-          <button
-            class="panel-item-container"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-personal-earning-now"
-            aria-expanded="false"
-            aria-controls="collapse-personal-earning-now"
-          >
+          <button class="panel-item-container" data-bs-toggle="collapse" data-bs-target="#collapse-personal-earning-now"
+            aria-expanded="false" aria-controls="collapse-personal-earning-now">
             <div class="profile-item-container">
               <label class="profile-item-label" for="personal-summary-earning-now">{{
                 $t('Earning now')
-              }}</label>
+                }}</label>
               <span class="profile-item-span" id="personal-summary-earning-now">
                 {{ userProfile.account.provider.accepting_request ? 'Yes' : 'No' }}
               </span>
@@ -316,198 +185,102 @@
           </button>
         </div>
       </div>
-      <div
-        class="collapse collapse-content-container"
-        id="collapse-user-identity"
-        aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel"
-      >
+      <div class="collapse collapse-content-container" id="collapse-user-identity" aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel">
         <div class="collapse-item-container">
           <div class="collapse-item-input">
-            <input
-              type="text"
-              v-model="identityOperation.first_name"
-              placeholder="First Name"
-              v-tooltip
-              title="Click to edit"
-              delay='{"show":"500", "hide":"100"}'
-              readonly="true"
-              @click="edittingFirstname($event)"
-              @blur="stopEdittingFirstname($event)"
-              @keyup.enter="blurInput($event)"
-            />
+            <input type="text" v-model="identityOperation.first_name" placeholder="First Name" v-tooltip
+              title="Click to edit" delay='{"show":"500", "hide":"100"}' readonly="true"
+              @click="edittingFirstname($event)" @blur="stopEdittingFirstname($event)"
+              @keyup.enter="blurInput($event)" />
           </div>
           <div class="collapse-item-input">
-            <input
-              type="text"
-              v-model="identityOperation.last_name"
-              placeholder="Last Name"
-              readonly="true"
-              @click="edittingLastname($event)"
-              @blur="stopEdittingLastname($event)"
-              @keyup.enter="blurInput($event)"
-              v-tooltip
-              title="Click to edit"
-              delay='{"show":"500", "hide":"100"}'
-            />
+            <input type="text" v-model="identityOperation.last_name" placeholder="Last Name" readonly="true"
+              @click="edittingLastname($event)" @blur="stopEdittingLastname($event)" @keyup.enter="blurInput($event)"
+              v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}' />
           </div>
         </div>
       </div>
 
-      <div
-        class="collapse collapse-content-container"
-        id="collapse-personal-user-photo"
-        aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel"
-      >
+      <div class="collapse collapse-content-container" id="collapse-personal-user-photo"
+        aria-labelledby="personal-summary" data-bs-parent="#personal-panel">
         <div class="collapse-item-container">
           <label class="btn btn-link" for="personal-photo-operation-image">
-            <img
-              class="user-portrait-img"
-              id="personal-photo-operation-image"
-              alt="user portrait"
-              :src="
-                userProfile.account.basic.photo.base64
-                  ? userProfile.account.basic.photo.base64
-                  : profileUrl
-              "
-              v-tooltip
-              title="Click to update"
-              @click="selectUserPhoto()"
-            />
+            <img class="user-portrait-img" id="personal-photo-operation-image" alt="user portrait" :src="userProfile.account.basic.photo.base64
+              ? userProfile.account.basic.photo.base64
+              : profileUrl
+              " v-tooltip title="Click to update" @click="selectUserPhoto()" />
           </label>
-          <input
-            ref="uploadUserPhotoInput"
-            type="file"
-            :accept="identityOperation.photo.acceptableType"
-            hidden
-            @change="onUserPhotoChange($event)"
-          />
+          <input ref="uploadUserPhotoInput" type="file" :accept="identityOperation.photo.acceptableType" hidden
+            @change="onUserPhotoChange($event)" />
         </div>
       </div>
-      <div
-        class="collapse collapse-content-container"
-        id="collapse-personal-user-intro"
-        aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel"
-      >
+      <div class="collapse collapse-content-container" id="collapse-personal-user-intro"
+        aria-labelledby="personal-summary" data-bs-parent="#personal-panel">
         <div class="collapse-item-container">
           <div class="collapse-item-editor">
-            <freeleaps-editor
-              v-model:content="personalOperation.self_intro.content_html"
-              :disabled="!personalOperation.self_intro.is_editing"
-            />
+            <freeleaps-editor v-model:content="personalOperation.self_intro.content_html"
+              :disabled="!personalOperation.self_intro.is_editing" />
             <div class="btn-group-container">
-              <button
-                v-if="!personalOperation.self_intro.is_editing"
-                class="btn btn-link"
-                @click="personalOperation.self_intro.is_editing = true"
-              >
+              <button v-if="!personalOperation.self_intro.is_editing" class="btn btn-link"
+                @click="personalOperation.self_intro.is_editing = true">
                 {{ $t('Edit') }}
               </button>
-              <button
-                v-if="personalOperation.self_intro.is_editing"
-                class="btn btn-link"
-                type="button"
-                data-bs-toggle="offcanvas"
-                data-bs-target="#offcanvas-template"
-                aria-controls="offcanvas-template"
-              >
+              <button v-if="personalOperation.self_intro.is_editing" class="btn btn-link" type="button"
+                data-bs-toggle="offcanvas" data-bs-target="#offcanvas-template" aria-controls="offcanvas-template">
                 {{ $t('Templates') }}
               </button>
-              <button
-                v-if="personalOperation.self_intro.is_editing"
-                @click="updateSelfIntro()"
-                class="btn btn-link"
-              >
+              <button v-if="personalOperation.self_intro.is_editing" @click="updateSelfIntro()" class="btn btn-link">
                 {{ $t('Update') }}
               </button>
-              <button
-                v-if="personalOperation.self_intro.is_editing"
-                @click="stopEdittingSelfintro($event)"
-                class="btn btn-link"
-              >
+              <button v-if="personalOperation.self_intro.is_editing" @click="stopEdittingSelfintro($event)"
+                class="btn btn-link">
                 {{ $t('Cancel') }}
               </button>
             </div>
           </div>
         </div>
       </div>
-      <div
-        class="collapse collapse-content-container"
-        id="collapse-personal-earning-now"
-        aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel"
-      >
+      <div class="collapse collapse-content-container" id="collapse-personal-earning-now"
+        aria-labelledby="personal-summary" data-bs-parent="#personal-panel">
         <div class="collapse-checkbox-container">
           <div class="form-check form-switch">
-            <input
-              class="form-check-input"
-              type="checkbox"
-              role="switch"
-              id="personal-earning-now-checkbox"
-              v-model="personalOperation.accepting_request"
-              @click="updateAcceptingRequest($event)"
-              :disabled="!paymentOperation.ready_to_receive_money"
-            />
+            <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox"
+              v-model="personalOperation.accepting_request" @click="updateAcceptingRequest($event)"
+              :disabled="!paymentOperation.ready_to_receive_money" />
             <label class="form-check-label" for="personal-earning-now-checkbox">
               <span>{{ $t('I want to be a service provider and earn money') }}</span>
-              <span v-if="personalOperation.show_stripe_status" style="color: red"
-                >*&nbsp;{{ $t('Stripe account' + 'onboarding is not completed.') }}</span
-              >
+              <span v-if="personalOperation.show_stripe_status" style="color: red">*&nbsp;{{ $t('Stripe account' +
+                'onboarding is not completed.') }}</span>
             </label>
           </div>
           <div class="flex-1" />
           <div class="collapse-item-input">
-            <input
-              id="personal-expected-salary"
-              v-tooltip
-              title="Click to edit"
-              delay='{"show":"500", "hide":"100"}'
-              readonly="true"
-              @click="edittingExpectedSalary($event)"
-              @blur="stopedittingExpectedSalary($event)"
-              @keyup.enter="blurInput($event)"
-              v-model="personalOperation.expected_salary.hourly"
-            />
+            <input id="personal-expected-salary" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}'
+              readonly="true" @click="edittingExpectedSalary($event)" @blur="stopedittingExpectedSalary($event)"
+              @keyup.enter="blurInput($event)" v-model="personalOperation.expected_salary.hourly" />
             <span class="collapse-item-currency">{{
               userProfile.account.provider.expected_salary.currency
-            }}</span>
+              }}</span>
           </div>
         </div>
         <div class="collapse-item-container">
-          <label
-            v-if="Is_Wechat_QR_Code_Payment()"
-            class="collapse-item-uploader"
-            for="qr-uploader"
-          >
-            <img
-              v-if="paymentOperation.wechat_qr_code_img.data"
-              class="uploader-img-show"
-              :src="paymentOperation.wechat_qr_code_img.data"
-            />
-            <img
-              v-if="!paymentOperation.wechat_qr_code_img.data"
-              class="uploader-img-btn"
-              src="@/assets/images/qr-code.png"
-            />
+          <label v-if="Is_Wechat_QR_Code_Payment()" class="collapse-item-uploader" for="qr-uploader">
+            <img v-if="paymentOperation.wechat_qr_code_img.data" class="uploader-img-show"
+              :src="paymentOperation.wechat_qr_code_img.data" />
+            <img v-if="!paymentOperation.wechat_qr_code_img.data" class="uploader-img-btn"
+              src="@/assets/images/qr-code.png" />
             <span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn">{{
               $t('Upload QR code to receive payment')
-            }}</span>
+              }}</span>
           </label>
-          <input
-            v-if="Is_Wechat_QR_Code_Payment()"
-            ref="uploadWechatQRCodePhotoInput"
-            type="file"
-            id="qr-uploader"
-            :accept="paymentOperation.wechat_qr_code_img.acceptableType"
-            hidden
-            @change="onUploadWechatQRCodePhoto($event)"
-          />
+          <input v-if="Is_Wechat_QR_Code_Payment()" ref="uploadWechatQRCodePhotoInput" type="file" id="qr-uploader"
+            :accept="paymentOperation.wechat_qr_code_img.acceptableType" hidden
+            @change="onUploadWechatQRCodePhoto($event)" />
         </div>
         <div v-if="Is_Stripe_Payment()" class="collapse-item-container">
-          <span>{{ $t('Have you linked your strip account?') }}</span
-          ><button class="btn btn-link" @click="visitStripe()">{{ $t('Visit Stripe') }}</button>
+          <span>{{ $t('Have you linked your strip account?') }}</span><button class="btn btn-link"
+            @click="visitStripe()">{{ $t('Visit Stripe') }}</button>
         </div>
         <div v-if="personalOperation.accepting_request" class="collapse-item-container">
           <span>{{
@@ -672,49 +445,26 @@
         </tbody>
       </table>
     </div>
-    <div
-      class="offcanvas offcanvas-end offcanvas-container"
-      tabindex="-1"
-      id="offcanvas-template"
-      aria-labelledby="offcanvas-template"
-    >
+    <div class="offcanvas offcanvas-end offcanvas-container" tabindex="-1" id="offcanvas-template"
+      aria-labelledby="offcanvas-template">
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvas-template">
           {{ $t('Apply self-intro template') }}
         </h5>
-        <button
-          type="button"
-          class="btn-close"
-          data-bs-dismiss="offcanvas"
-          aria-label="Close"
-        ></button>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
       </div>
       <div class="offcanvas-body">
         <div class="accordion" id="template-item-container">
-          <div
-            v-for="(template, index) in availableTemplates"
-            :key="index"
-            :id="'template' + index"
-            class="accordion-item"
-          >
+          <div v-for="(template, index) in availableTemplates" :key="index" :id="'template' + index"
+            class="accordion-item">
             <h2 class="accordion-header" :id="'heading' + index">
-              <button
-                class="accordion-button collapsed"
-                type="button"
-                data-bs-toggle="collapse"
-                :data-bs-target="'#' + 'collapse' + index"
-                aria-expanded="false"
-                :aria-controls="'collapse' + index"
-              >
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                :data-bs-target="'#' + 'collapse' + index" aria-expanded="false" :aria-controls="'collapse' + index">
                 {{ template.title }}
               </button>
             </h2>
-            <div
-              :id="'collapse' + index"
-              class="accordion-collapse collapse"
-              :aria-labelledby="'heading' + index"
-              data-bs-parent="#template-item-container"
-            >
+            <div :id="'collapse' + index" class="accordion-collapse collapse" :aria-labelledby="'heading' + index"
+              data-bs-parent="#template-item-container">
               <div class="accordion-body">
                 <button class="select-template-button" @click="selectTemplate(template)">
                   {{ $t('Apply') }}
diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index dd18076..5bec0ba 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -103,7 +103,7 @@ export default {
     fetchConversations() {
       this.$store.dispatch('basic/updateConversationsPage', {
         token: this.mnx_getUserAuthToken(),
-        cb: error => {
+        cb: (error) => {
           this.mnx_backendErrorHandler(error)
         }
       })
diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index e3e4bf5..c1e8c70 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -1485,8 +1485,8 @@ export default {
 
   &:disabled {
     color: #000000;
-    border-color: #D9D9D9;
-    background-color: #D9D9D9;
+    border-color: #d9d9d9;
+    background-color: #d9d9d9;
     opacity: 1;
   }
 }
diff --git a/frontend/src/pages/user/workspace/projectIssue/Issue.vue b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
index c3e3b92..b6b1ab4 100644
--- a/frontend/src/pages/user/workspace/projectIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/projectIssue/Issue.vue
@@ -4,8 +4,14 @@
       <div class="accordion" id="workspace-project-accordion">
         <div v-if="project.id" class="accordion-item">
           <h2 class="accordion-header">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-              data-bs-target="#collapse-project-issue" aria-expanded="false" aria-controls="collapse-project-issue">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#collapse-project-issue"
+              aria-expanded="false"
+              aria-controls="collapse-project-issue"
+            >
               <div class="project-issue-bar-container dashed-container">
                 <div class="project-issue-open-issues">
                   <label class="project-item-label">{{ $t('Summary') }}</label>
@@ -32,27 +38,41 @@
               </div>
             </button>
           </h2>
-          <div id="collapse-project-issue" class="accordion-collapse collapse" data-bs-parent="#collapse-project-issue">
+          <div
+            id="collapse-project-issue"
+            class="accordion-collapse collapse"
+            data-bs-parent="#collapse-project-issue"
+          >
             <div class="project-invite-collaborator-containter">
-              <button class="accordion-button collapsed" type="button" ref="issueAddBtn" data-bs-toggle="collapse"
-                data-bs-target="#collapse-project-new-issue" aria-expanded="false"
-                aria-controls="collapse-project-issue">
+              <button
+                class="accordion-button collapsed"
+                type="button"
+                ref="issueAddBtn"
+                data-bs-toggle="collapse"
+                data-bs-target="#collapse-project-new-issue"
+                aria-expanded="false"
+                aria-controls="collapse-project-issue"
+              >
                 <div class="project-invite-collaborator">+ {{ $t('Add Issue') }}</div>
               </button>
-              <div id="collapse-project-new-issue" class="accordion-collapse collapse"
-                data-bs-parent="#collapse-project-new-issue">
+              <div
+                id="collapse-project-new-issue"
+                class="accordion-collapse collapse"
+                data-bs-parent="#collapse-project-new-issue"
+              >
                 <div class="project-issue-description-container">
                   <div class="project-issue-description">
-                    <label class="project-item-label">{{
-                      $t('New issue description')
-                      }}</label>
-                    <button class="project-issue-description-btn" @click="
-                      postNewIssue(
-                        project.request.product_id,
-                        project.project_id,
-                        newIssueDescriptions
-                      )
-                      ">
+                    <label class="project-item-label">{{ $t('New issue description') }}</label>
+                    <button
+                      class="project-issue-description-btn"
+                      @click="
+                        postNewIssue(
+                          project.request.product_id,
+                          project.project_id,
+                          newIssueDescriptions
+                        )
+                      "
+                    >
                       {{ $t('Submit') }}
                     </button>
                   </div>
@@ -61,13 +81,22 @@
               </div>
             </div>
             <div>
-              <div class="project-issue-container" v-for="(issue, issue_index) in project.project.issue.open_issues"
-                :key="issue_index" :id="'project-issue-' + issue_index">
+              <div
+                class="project-issue-container"
+                v-for="(issue, issue_index) in project.project.issue.open_issues"
+                :key="issue_index"
+                :id="'project-issue-' + issue_index"
+              >
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                      :data-bs-target="'#collapse-project-issue-details' + issue_index" aria-expanded="false"
-                      aria-controls="collapse-project-issue-details">
+                    <button
+                      class="accordion-button collapsed"
+                      type="button"
+                      data-bs-toggle="collapse"
+                      :data-bs-target="'#collapse-project-issue-details' + issue_index"
+                      aria-expanded="false"
+                      aria-controls="collapse-project-issue-details"
+                    >
                       <div class="project-issue-header dashed-container">
                         <div class="project-issue-title">
                           <label class="project-item-label">{{ $t('Issue title') }}</label>
@@ -88,23 +117,33 @@
                       </div>
                     </button>
                   </h2>
-                  <div :id="'collapse-project-issue-details' + issue_index" class="accordion-collapse collapse"
-                    :data-bs-parent="'#collapse-project-issue-details' + issue_index">
+                  <div
+                    :id="'collapse-project-issue-details' + issue_index"
+                    class="accordion-collapse collapse"
+                    :data-bs-parent="'#collapse-project-issue-details' + issue_index"
+                  >
                     <div class="project-issue-description-container">
                       <div class="project-issue-description">
-                        <label class="project-item-label">{{
-                          $t('Issue description')
-                          }}</label>
-                        <button :hidden="!showIssueActionButton(project.project, issue, 'Resolve')
-                          " class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 1)">
+                        <label class="project-item-label">{{ $t('Issue description') }}</label>
+                        <button
+                          :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
+                          class="project-issue-description-btn"
+                          @click="setProjectIssueStatus(issue.id, 1)"
+                        >
                           {{ $t('Resolve') }}
                         </button>
-                        <button :hidden="!showIssueActionButton(project.project, issue, 'Confirm')
-                          " class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 2)">
+                        <button
+                          :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
+                          class="project-issue-description-btn"
+                          @click="setProjectIssueStatus(issue.id, 2)"
+                        >
                           {{ $t('Confirm') }}
                         </button>
-                        <button :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
-                          class="project-issue-description-btn" @click="setProjectIssueStatus(issue.id, 0)">
+                        <button
+                          :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
+                          class="project-issue-description-btn"
+                          @click="setProjectIssueStatus(issue.id, 0)"
+                        >
                           {{ $t('Reopen') }}
                         </button>
                       </div>
@@ -122,7 +161,11 @@
 </template>
 <script>
 import { DateUtils, WorksapceApi } from '@/utils/index'
-import { projectStatusEnum, convertIntoToProjectIssueStatus, projectIssueStatusEnum } from '@/types/index'
+import {
+  projectStatusEnum,
+  convertIntoToProjectIssueStatus,
+  projectIssueStatusEnum
+} from '@/types/index'
 export default {
   name: 'projectIssue',
   props: {
@@ -209,7 +252,7 @@ export default {
         default:
           return false
       }
-    },
+    }
   }
 }
 </script>
@@ -429,4 +472,4 @@ export default {
   @extend .initiate-button;
   @extend .float-end;
 }
-</style>
\ No newline at end of file
+</style>