update code formatting

frontend/src/App.vue

@@ -34,7 +34,10 @@ export default {
   margin-top: 0px;
 }
 
-.body-header {width: 100%; height: $header-height;}
+.body-header {
+  width: 100%;
+  height: $header-height;
+}
 
 .body-main {
   margin-top: 0px;

frontend/src/assets/styles/_variables.scss

@@ -2,7 +2,7 @@
 
 $shoutout: #f0783b; //for the shoutout texts
 // First override some or all individual color variables
-$primary: #1748F8; // #0032fd; // #25408f;
+$primary: #1748f8; // #0032fd; // #25408f;
 // $secondary: #8f5325;
 // $success: #3e8d63;
 // $info: #13101c;

frontend/src/assets/styles/containers.scss

@@ -26,6 +26,13 @@
   @extend .container-fluid;
   @extend .flex-row-box;
 }
-.flex-1 {flex: 1;}
+.flex-1 {
-.flex-all-center {align-items: center; justify-content: center;}
+  flex: 1;
-.full-height {height: $body-height;}
+}
+.flex-all-center {
+  align-items: center;
+  justify-content: center;
+}
+.full-height {
+  height: $body-height;
+}

frontend/src/assets/styles/inputs.scss

@@ -6,17 +6,39 @@
   @extend .form-control;
 }
 
-.input-container {width: 460px; height: 62px; border: 2px solid $primary; border-radius: 8px; display: flex; align-items: center; position: relative;
+.input-container {
-  .form-group {width: 100% !important; border: none !important;}
+  width: 460px;
+  height: 62px;
+  border: 2px solid $primary;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  .form-group {
+    width: 100% !important;
+    border: none !important;
+  }
   .input-email {
     @extend .input-control-item;
     @extend .me-1;
-    border: none !important; box-shadow: none !important; outline: none !important
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
   }
   .btn-start {
     @extend .proceed-button;
     @extend .ms-1;
-    margin: 8px !important; border-radius: 12px !important; font-weight: 500; font-size: 16px; color: #F8F8F9;
+    margin: 8px !important;
+    border-radius: 12px !important;
+    font-weight: 500;
+    font-size: 16px;
+    color: #f8f8f9;
+  }
+  .error-msg {
+    position: absolute;
+    bottom: -36px;
+    color: #9ea2af;
+    font-size: 18px;
+    margin: 0;
   }
-  .error-msg {position: absolute; bottom: -36px; color: #9EA2AF; font-size: 18px; margin: 0;}
 }

frontend/src/components/PDFReader.vue

@@ -6,7 +6,7 @@
 
 <script>
 // import { getDocument } from 'pdfjs-dist'
-import * as PDFJS from "pdfjs-dist";
+import * as PDFJS from 'pdfjs-dist'
 // import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
 import { DocumentApi } from '@/utils/index'
 // PDFJS.GlobalWorkerOptions.workerSrc = import('pdfjs-dist/build/pdf.worker')
@@ -58,18 +58,16 @@ export default {
       })
     },
     base64StringToUint8Array(base64String) {
-        var padding = '='.repeat((4 - base64String.length % 4) % 4);
+      var padding = '='.repeat((4 - (base64String.length % 4)) % 4)
-        var base64 = (base64String + padding)
+      var base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/')
-            .replace(/\-/g, '+')
-            .replace(/_/g, '/');
 
-        var rawData = atob(base64);
+      var rawData = atob(base64)
-        var outputArray = new Uint8Array(rawData.length);
+      var outputArray = new Uint8Array(rawData.length)
 
       for (var i = 0; i < rawData.length; ++i) {
-            outputArray[i] = rawData.charCodeAt(i);
+        outputArray[i] = rawData.charCodeAt(i)
       }
-        return outputArray;
+      return outputArray
     }
   }
 }

frontend/src/components/SvgIcon.vue

@@ -6,32 +6,38 @@
 
 <script>
 export default {
-    name: "SvgIcon",
+  name: 'SvgIcon',
   props: {
     icon: {
       type: String,
-            required: true,
+      required: true
     },
     className: {
       type: String,
-            default: "",
+      default: ''
-        },
+    }
   },
   computed: {
     iconName() {
-            return `#icon-${this.icon}`;
+      return `#icon-${this.icon}`
     },
     svgClass() {
       if (this.className) {
-                return "svg-icon " + this.className;
+        return 'svg-icon ' + this.className
       } else {
-                return "svg-icon";
+        return 'svg-icon'
+      }
+    }
+  }
 }
-        },
-    },
-};
 </script>
 
 <style scoped>
-.svg-icon {width: 1rem; height: 1rem; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}
+.svg-icon {
+  width: 1rem;
+  height: 1rem;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
 </style>

frontend/src/components/VueQuill.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="vue-quill-container">
-        <QuillEditor ref="quillRef" v-model:content="quillData" :options="quillOptions" content-type="html" @text-change="quillChange()" />
+    <QuillEditor
+      ref="quillRef"
+      v-model:content="quillData"
+      :options="quillOptions"
+      content-type="html"
+      @text-change="quillChange()"
+    />
   </div>
 </template>
 <script>
 const toolbarOptions = [
   ['bold', 'italic', 'underline', 'strike'],
-    ["blockquote", "code-block"],
+  ['blockquote', 'code-block'],
   [{ list: 'ordered' }, { list: 'bullet' }],
-    [{ script: "sub" }, { script: "super" }],
+  [{ script: 'sub' }, { script: 'super' }],
   [{ indent: '-1' }, { indent: '+1' }],
   [{ direction: 'rtl' }],
   [{ size: ['small', false, 'large', 'huge'] }],
@@ -16,7 +22,7 @@ const toolbarOptions = [
   [{ color: [] }, { background: [] }],
   [{ font: [] }],
   [{ align: [] }],
-    ['clean'],
+  ['clean']
 ]
 import { QuillEditor } from '@vueup/vue-quill'
 import 'quill/dist/quill.core.css'
@@ -24,7 +30,7 @@ import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 
 export default {
-    name: "VueQuill",
+  name: 'VueQuill',
   props: {
     content: {
       type: String,
@@ -43,7 +49,8 @@ export default {
           toolbar: {
             container: toolbarOptions
           }
-                        }}
+        }
+      }
     }
   },
   methods: {
@@ -51,10 +58,13 @@ export default {
       this.$emit('update:content', this.quillData)
     }
   }
-};
+}
-
 </script>
 
 <style>
-.vue-quill-container {width: 100%; height: 100%; min-height: 100px;}
+.vue-quill-container {
+  width: 100%;
+  height: 100%;
+  min-height: 100px;
+}
 </style>

frontend/src/footers/FooterGuest.vue

@@ -24,9 +24,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.bottom-container {height: 110px; align-items: center; justify-content: center;
+.bottom-container {
-  img  {height: 20px; margin-bottom: 10px;}
+  height: 110px;
+  align-items: center;
+  justify-content: center;
+  img {
+    height: 20px;
+    margin-bottom: 10px;
+  }
 }
 
-.bottom-text {color: rgba(0,0,0,.5); @extend .fs-6}
+.bottom-text {
+  color: rgba(0, 0, 0, 0.5);
+  @extend .fs-6;
+}
 </style>

frontend/src/headers/HeaderGuest.vue

@@ -39,14 +39,25 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
+.header-container {
-.header-container {width: 100%; height: 100%; background: white; max-width: 100%;
+  width: 100%;
-  .header-content {display: flex;align-items: center; justify-content: space-between; height: 100%; max-width: $body-width; width: 100%;
+  height: 100%;
+  background: white;
+  max-width: 100%;
+  .header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    max-width: $body-width;
+    width: 100%;
     @extend .flex-row-container;
   }
 }
 
-.company-logo {height: 40px}
+.company-logo {
+  height: 40px;
+}
 
 .company-slogan {
   @extend .text-center;
@@ -60,11 +71,15 @@ export default {
   @extend .align-items-center;
 }
 
-.public-sites {display: flex; align-items: center;
+.public-sites {
+  display: flex;
+  align-items: center;
   .public-site-button {
     @extend .btn;
     @extend .btn-link;
-    color: black; font-size: 16px; text-decoration: none;
+    color: black;
+    font-size: 16px;
+    text-decoration: none;
   }
 }
 </style>

frontend/src/headers/HeaderUser.vue

@@ -23,7 +23,13 @@
         </button>
       </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>
@@ -110,25 +116,72 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.header-container {width: 100%; height: 100%; background: #F8FAFC; max-width: 100%;
+.header-container {
-  .header-content {display: flex;align-items: center; justify-content: space-between; height: 100%; max-width: $body-width; width: 100%;
+  width: 100%;
+  height: 100%;
+  background: #f8fafc;
+  max-width: 100%;
+  .header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    max-width: $body-width;
+    width: 100%;
     @extend .flex-row-container;
   }
 }
 
-.information-bar {width: 52px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; position: relative; background-color: white;
+.information-bar {
-  img {width: 24px; height: 24px;}
+  width: 52px;
-  &::after {content: ''; display: block; width: 8px; height: 8px; border-radius: 4px; position: absolute; right: 0; top: 0; background-color: #F44837;}
+  height: 36px;
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background-color: white;
+  img {
+    width: 24px;
+    height: 24px;
+  }
+  &::after {
+    content: '';
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-color: #f44837;
+  }
 }
 
-.profile-container {position: relative;
+.profile-container {
-  img {width: 56px;}
+  position: relative;
+  img {
+    width: 56px;
+  }
 }
 
-.navigation-container {display: flex; align-items: center; justify-content: center;
+.navigation-container {
-  .navigation-item {@extend .btn; @extend .btn-link; color: #6E7387; text-decoration: none; margin: 0 30px;
+  display: flex;
-    &:hover {color: $primary;}
+  align-items: center;
-    &.active {color: $primary; font-weight: 500;}
+  justify-content: center;
+  .navigation-item {
+    @extend .btn;
+    @extend .btn-link;
+    color: #6e7387;
+    text-decoration: none;
+    margin: 0 30px;
+    &:hover {
+      color: $primary;
+    }
+    &.active {
+      color: $primary;
+      font-weight: 500;
+    }
   }
 }
 

frontend/src/main.js

@@ -38,8 +38,8 @@ app.mixin(userAuthMixin)
 app.directive('tooltip', tooltip)
 
 import 'virtual:svg-icons-register'
-import SvgIcon from "@/components/SvgIcon.vue";
+import SvgIcon from '@/components/SvgIcon.vue'
-app.component("svg-icon", SvgIcon);
+app.component('svg-icon', SvgIcon)
 
 app.mount('#app')
 app.config.warnHandler = (msg, instance, trace) => {

frontend/src/pages/guest/FrontDoor.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="flex-colum-container front-container">
-    <div class="slogen">A platform where our users can find a trustworthy partner, <br/>simplify software development, and secure return.</div>
+    <div class="slogen">
-    <div class="poster"><span class="blue">One stop platform</span> for hiring the best <br/>freelance software development talent</div>
+      A platform where our users can find a trustworthy partner, <br />simplify software
+      development, and secure return.
+    </div>
+    <div class="poster">
+      <span class="blue">One stop platform</span> for hiring the best <br />freelance software
+      development talent
+    </div>
     <div class="input-container">
       <div class="form-group">
         <div class="input-group-container">
@@ -15,7 +21,9 @@
             />
             <label for="inputEmail">Email address</label>
           </div>
-            <button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">GET STARTED</button>
+          <button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">
+            GET STARTED
+          </button>
         </div>
       </div>
       <p class="error-msg">{{ message }}</p>
@@ -80,11 +88,26 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.front-container {padding: 20px 0;
+.front-container {
-  .slogen {font-size: 20px; font-weight: 400; color: rgba(0,0,0,.5); text-align: center; margin-bottom: 24px; line-height: 22px}
+  padding: 20px 0;
-  .poster {font-size: 48px; font-weight: 500; color: black; text-align: center; margin-bottom: 40px; line-height: 52px;
+  .slogen {
-    .blue {color: $primary}
+    font-size: 20px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+    text-align: center;
+    margin-bottom: 24px;
+    line-height: 22px;
+  }
+  .poster {
+    font-size: 48px;
+    font-weight: 500;
+    color: black;
+    text-align: center;
+    margin-bottom: 40px;
+    line-height: 52px;
+    .blue {
+      color: $primary;
+    }
   }
 }
-
 </style>

frontend/src/pages/guest/NewUserSetFlid.vue

@@ -81,5 +81,4 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-</style>

frontend/src/pages/guest/NewUserSetPassword.vue

@@ -93,5 +93,7 @@ export default {
 //   @extend .proceed-button;
 //   @extend .ms-1;
 // }
-.mb-12 {margin-bottom: 12px;}
+.mb-12 {
+  margin-bottom: 12px;
+}
 </style>

frontend/src/pages/guest/SigninWithEmailAndPassword.vue

@@ -20,7 +20,9 @@
         <div class="error-msg flex-row-container">
           <p class="error-p" v-if="message != null">{{ message }}</p>
           <div class="flex-1" />
-          <button type="button" class="btn-forget-password" @click="forgetPassword()">Forget password</button>
+          <button type="button" class="btn-forget-password" @click="forgetPassword()">
+            Forget password
+          </button>
         </div>
       </div>
     </form>
@@ -111,11 +113,16 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.error-p {color: #916AD4; margin: 0}
+.error-p {
+  color: #916ad4;
+  margin: 0;
+}
 .btn-forget-password {
   @extend .btn;
   // @extend .ms-1;
   @extend .btn-link;
-  padding: 0; font-size: 16px; margin-left: 15px;
+  padding: 0;
+  font-size: 16px;
+  margin-left: 15px;
 }
 </style>

frontend/vite.config.js

@@ -38,7 +38,7 @@ export default defineConfig({
   server: {
     proxy: {
       '^/api/': {
-        target: 'https://freeleaps-alpha.com',
+        target: 'https://localhost:8001/',
         ws: true,
         changeOrigin: true
       }