Initial style changes for UI

assets/styles/app.scss

@@ -16,8 +16,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background: url('../img/bg.png') repeat;
-  background-size: 40px 164px;
+  background: #03283d url('../img/mountains.png') no-repeat bottom center;
 
   > .main-content {
     flex: 1;

assets/styles/components/_base.scss

@@ -4,11 +4,11 @@ $control-padding-vertical: calc(0.429em - #{$control-border-width});
 $control-padding-horizontal: calc(1.25em - #{$control-border-width});
 
 $white: #eee;
-$primary: #94febf;
-$primary-invert: #000403;
-$warning: #ff8a00;
-$black: #2c4538;
-$danger: #FF0658;
+$primary: #138198;
+$primary-invert: #03283d;
+$warning: #FF8F50;
+$black: #08252b;
+$danger: #F44C6A;
 $dark: #242424;
 $pre: $white;
 $info: $primary-invert;
@@ -19,7 +19,7 @@ $block-spacing: 2rem;
 
 @import '~bulma/sass/utilities/_all';
 
-$body-family: 'PT Mono', monospace;
+$body-family: 'Arial', monospace;
 $body-background-color: $primary-invert;
 $body-color: $white;
 $body-size: 14px;

assets/styles/components/_ceremony.scss

@@ -1,5 +1,11 @@
 .ceremony {
   text-align: center;
+  backdrop-filter: blur( 13.5px );
+  -webkit-backdrop-filter: blur( 13.5px );
+  background: rgba( 74, 144, 226, 0.20 );
+  margin:10px;
+  padding: 20px;
+  border-radius: 10px;
 
   .title {
     color: $white;
@@ -47,7 +53,7 @@
 
     &:hover, &.is-hovered {
       color: $primary;
-      border-color: #94febf;
+      border-color: $primary-invert;
 
       .title {
         color: $primary;

assets/styles/components/_header.scss

@@ -25,10 +25,21 @@
     height: 40px;
   }
 
-  .navbar-menu {
-    .navbar-item {
-      padding-left: 1.25rem;
-      padding-right: 1.25rem;
-    }
+  .navbar-item {
+    font-size: 20px;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    line-height: 30px;
+    font-weight: bold;
+  }
+
+  img {
+    max-height: 75px;
+  }
+
+  .sherpa-header-label {
+    padding-right: 1.5rem;
+    color: #ff3a44;
+    font-size: 50px;
   }
 }

components/Form.vue

@@ -4,7 +4,7 @@
       <button @click="logOut" class="button is-icon logout">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
           <path
-            fill="#94febf"
+            fill="#138198"
             d="M14.08,15.59L16.67,13H7V11H16.67L14.08,8.41L15.5,7L20.5,12L15.5,17L14.08,15.59M19,3A2,2 0 0,1 21,5V9.67L19,7.67V5H5V19H19V16.33L21,14.33V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H19Z"
           />
         </svg>

components/Logo.vue

@@ -1,9 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" class="logo" viewBox="0 0 155 40">
-    <path
-      fill="#94febf"
-      fill-rule="evenodd"
-      d="M29.4,8.6A11.5,11.5,0,0,1,39.9,19.4,17.1,17.1,0,0,0,8.5,10.5,11.5,11.5,0,0,1,19.3,0a17.2,17.2,0,0,0-8.9,31.4A11.5,11.5,0,0,1,0,20.6a17.1,17.1,0,0,0,31.3,9.1A11.4,11.4,0,0,1,20.6,40,17.1,17.1,0,0,0,29.4,8.6ZM19.9,27.2a6.9,6.9,0,0,1-5-2.1,7.1,7.1,0,1,1,5,2.1Zm36.6-9.7v7.4c0,1.3.5,1.6,1.8,1.6a4.8,4.8,0,0,0,1.8-.3v2.9a6.4,6.4,0,0,1-2.4.5c-3,0-4.8-1.9-4.8-5V17.5H50.4V14.4h2.5V9.9h3.6v4.5h3.6v3.1ZM77,21.9c0,5-2.5,7.7-7,7.7s-7.1-2.7-7.1-7.7,2.5-7.7,7.1-7.7S77,16.9,77,21.9Zm-3.6,0c0-4-1.3-4.8-3.4-4.8s-3.5.8-3.5,4.8,1.3,4.7,3.5,4.7S73.4,25.8,73.4,21.9ZM88,14.1v3.2a11.5,11.5,0,0,0-3.8.5V29.4H80.6V15.7A20.4,20.4,0,0,1,88,14.1Zm16.9,6.3v9h-3.6V20.1c0-1.4-.2-2.8-3.5-2.8a12,12,0,0,0-2.8.3V29.4H91.4V15.8a15,15,0,0,1,6.9-1.7C102.4,14.1,104.9,16.5,104.9,20.4Zm16.2.1v4.1c0,2.4-1.6,5-6.3,5s-6.4-2.6-6.4-5.1.5-4.7,6.5-4.7a11,11,0,0,1,2.6.2c0-1.7-.8-2.9-3.2-2.9a11.2,11.2,0,0,0-4.4.8V15a12.5,12.5,0,0,1,4.6-.9C118.8,14.1,121.1,16.4,121.1,20.5Zm-3.6,1.7h-2.1c-2.5,0-3.4.7-3.4,1.9s.9,2.4,2.8,2.4,2.7-.9,2.7-2.3Zm13.9-8.1,2.5.3V8.7h3.6V24.6c0,2.4-1.7,5-6.4,5-2,0-6.7-.8-6.7-7.9C124.4,16.8,126.9,14.1,131.4,14.1Zm-.3,12.4c1.6,0,2.8-.4,2.8-1.6V17.2l-2.4-.2c-2.1,0-3.5,1-3.5,4.5S128.8,26.5,131.1,26.5ZM155,21.9c0,5-2.5,7.7-7.1,7.7s-7.1-2.7-7.1-7.7,2.5-7.7,7.1-7.7S155,16.9,155,21.9Zm-3.6,0c0-4-1.4-4.8-3.5-4.8s-3.5.8-3.5,4.8,1.4,4.7,3.5,4.7S151.4,25.8,151.4,21.9Z"
-    />
-  </svg>
-</template>

components/Navbar.vue

@@ -2,7 +2,8 @@
   <b-navbar wrapper-class="container" class="header">
     <template slot="brand">
       <b-navbar-item :to="{ path: '/' }" tag="router-link">
-        <Logo />
+        <img src="../assets/img/sherpalogo.png" />
+        <div class="sherpa-header-label">Sherpa</div>
       </b-navbar-item>
     </template>
     <template slot="end">
@@ -12,13 +13,3 @@
     </template>
   </b-navbar>
 </template>
-
-<script>
-import Logo from '@/components/Logo'
-
-export default {
-  components: {
-    Logo
-  }
-}
-</script>

plugins/i18n.js

@@ -0,0 +1,157 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import messages from '../langs/index'
+/**
+ * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`
+ * @param choicesLength {number} an overall amount of available choices
+ * @returns a final choice index to select plural word by
+ **/
+VueI18n.prototype.getChoiceIndex = function (choice, choicesLength) {
+  // this === VueI18n instance, so the locale property also exists here
+  // add the word "only" if the value is greater than 1 and less than 5
+  if (this.locale !== 'ru') {
+    if (choice === 0 || choice === 1) {
+      return choice
+    }
+
+    if (choice > 1 && choice < 5) {
+      return 2
+    }
+
+    return 3
+  }
+
+  // comply with the rules of the Russian language
+
+  if (choice === 0) {
+    return 0
+  }
+
+  const teen = choice > 10 && choice < 20
+  const endsWithOne = choice % 10 === 1
+
+  if (!teen && endsWithOne) {
+    return 1
+  }
+
+  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
+    return 2
+  }
+
+  return choicesLength < 4 ? 2 : 3
+}
+
+Vue.use(VueI18n)
+
+let lang = 'en'
+
+if (process.browser) {
+  const locale =
+    localStorage.getItem('lang') ||
+    navigator.language.substr(0, 2).toLowerCase()
+  lang = !messages[locale] ? 'en' : locale
+}
+
+const dateTimeFormats = {
+  en: {
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true,
+    },
+  },
+  fr: {
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true,
+    },
+  },
+  tr: {
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true,
+    },
+  },
+  jp: {
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true,
+    },
+  },
+  kr: {
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true,
+    },
+  },
+}
+
+const numberFormats = {
+  en: {
+    compact: {
+      notation: 'compact',
+    },
+  },
+  fr: {
+    compact: {
+      notation: 'compact',
+    },
+  },
+  jp: {
+    compact: {
+      notation: 'compact',
+    },
+  },
+  kr: {
+    compact: {
+      notation: 'compact',
+    },
+  },
+  tr: {
+    compact: {
+      notation: 'compact',
+    },
+  },
+}
+
+// Create VueI18n instance with options
+export default ({ app, route, store }) => {
+  app.i18n = new VueI18n({
+    locale: lang,
+    fallbackLocale: 'en',
+    messages,
+    silentFallbackWarn: true,
+    dateTimeFormats,
+    numberFormats,
+  })
+
+  if (lang === 'zh') {
+    lang += '-cn'
+  }
+
+  // app.$moment.locale(lang)
+}