code styling

frontend/src/headers/HeaderGuest.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="header-container">
     <div class="header-content">
-      <img class="company-logo" alt="freeleaps logo" src="@/assets/freeleaps.png" @click="gotoFrontdoor()" />
+      <img
+        class="company-logo"
+        alt="freeleaps logo"
+        src="@/assets/freeleaps.png"
+        @click="gotoFrontdoor()"
+      />
       <!-- <div class="content-area">
         <span class="company-slogan"
           >Freeleaps: A trustworthy platform to find a software development partner</span
@@ -24,18 +29,18 @@ export default {
   components: {},
   computed: {
     getContactText() {
-      if (this.getRegion === "CN") {
-        return "联系我们"
+      if (this.getRegion === 'CN') {
+        return '联系我们'
       }
-      return "Contact"
+      return 'Contact'
     },
     getRegion() {
       // To be consistent with Region definition
       // For now, region is only China and non-China
       if (window.location.href.includes('localhost') || window.location.href.includes('com.cn')) {
-        return "CN"
+        return 'CN'
       }
-      return "Other"
+      return 'Other'
     }
   },
   methods: {

frontend/src/headers/HeaderUser.vue

@@ -1,28 +1,54 @@
 <template>
   <div class="header-container">
     <div class="header-content">
-      <div class="information-bar" @click="gotoMessages" :class="activePath == 'message' ? 'active' : ''">
+      <div
+        class="information-bar"
+        @click="gotoMessages"
+        :class="activePath == 'message' ? 'active' : ''"
+      >
         <img alt="freeleaps logo" src="@/assets/message.png" />
       </div>
       <div class="navigation-container" role="navigation">
-        <button class="navigation-item" @click="gotoWorkspace" :class="activePath == 'Workspace' ? 'active' : ''">
+        <button
+          class="navigation-item"
+          @click="gotoWorkspace"
+          :class="activePath == 'Workspace' ? 'active' : ''"
+        >
           <svg-icon icon="workspace" class-name="icon" />
           Workspace
         </button>
-        <button class="navigation-item" @click="gotoRequests" :class="activePath == 'Requests' ? 'active' : ''">
+        <button
+          class="navigation-item"
+          @click="gotoRequests"
+          :class="activePath == 'Requests' ? 'active' : ''"
+        >
           <svg-icon icon="requests" class-name="icon" />
           Requests
         </button>
-        <button class="navigation-item" @click="gotoProviders" :class="activePath == 'Providers' ? 'active' : ''">
+        <button
+          class="navigation-item"
+          @click="gotoProviders"
+          :class="activePath == 'Providers' ? 'active' : ''"
+        >
           <svg-icon icon="providers" class-name="icon" />
           Providers
         </button>
-        <button class="navigation-item" @click="gotoIssueRequest" :class="activePath == 'Post' ? 'active' : ''">
+        <button
+          class="navigation-item"
+          @click="gotoIssueRequest"
+          :class="activePath == 'Post' ? 'active' : ''"
+        >
           <svg-icon icon="post" class-name="icon" />
           Post
         </button>
         <div class="form-check form-switch header-switch-container">
-          <input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" disabled />
+          <input
+            class="form-check-input"
+            type="checkbox"
+            role="switch"
+            id="personal-earning-now-checkbox"
+            disabled
+          />
           <label class="form-check-label" for="personal-earning-now-checkbox">
             <span>Providing service</span>
           </label>
@@ -32,8 +58,13 @@
         </div>
       </div>
       <div class="profile-container">
-        <img alt="freeleaps logo" data-bs-toggle="dropdown" aria-expanded="false" id="accountButton"
-          src="@/assets/profile.png" />
+        <img
+          alt="freeleaps logo"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
+          id="accountButton"
+          src="@/assets/profile.png"
+        />
         <ul class="dropdown-menu" aria-labelledby="accountButton">
           <li>
             <button class="account-menu-button" @click="gotoProfile">Profile</button>

frontend/src/pages/guest/FrontDoor.vue

@@ -12,7 +12,13 @@
       <div class="form-group">
         <div class="input-group-container">
           <div class="form-floating">
-            <input class="input-email" id="inputEmail" type="text" placeholder="name@example.com" v-model="email" />
+            <input
+              class="input-email"
+              id="inputEmail"
+              type="text"
+              placeholder="name@example.com"
+              v-model="email"
+            />
             <label for="inputEmail">Email address</label>
           </div>
           <button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">

frontend/src/pages/guest/SigninWithEmailAndCode.vue

@@ -5,8 +5,13 @@
         <div class="form-group">
           <div class="input-group-container">
             <div class="form-floating">
-              <input class="input-email" id="inputCode" type="text" :placeholder="'Code sent to your email'"
-                v-model="code" />
+              <input
+                class="input-email"
+                id="inputCode"
+                type="text"
+                :placeholder="'Code sent to your email'"
+                v-model="code"
+              />
               <label for="inputCode">Authenticaion Code Sent To Your Email</label>
             </div>
             <button type="submit" class="btn-start">SIGN IN</button>
@@ -40,7 +45,7 @@ export default {
 
   components: {},
 
-  created() { },
+  created() {},
   mounted() {
     if (this.mnx_IsKeepUserSignedIn() && this.mnx_isUserAuthenticated()) {
       this.mnx_navAfterSignedin()
@@ -100,4 +105,5 @@ export default {
 // .btn-start {
 //   @extend .proceed-button;
 //   @extend .ms-1;
-// }</style>
+// }
+</style>