Update Melior Image (#15116)

* add melior.svg

* update melior on header (app & static), footer, and loading

* update loading screen

* update static screens, fix double meliors

* update melior + wordmark size and adjust static page menu spacing

* update package.json

* update index.html, forgot password page, and the static header

* various updates

* static header update

* update mobile web view

* update login page menu bar

* updated purple logo

* removed extraneous class

* update bottom padding on login page(s)

* fix(lint): remove unneeded rule escape

---------

Co-authored-by: Sabe Jones <sabe@habitica.com>
Co-authored-by: Sabe Jones <sabrecat@gmail.com>

website/client/src/components/static/header.vue

@@ -7,13 +7,13 @@
       >
         <div
           v-if="$route.name === 'plans'"
-          class="logo svg-icon"
+          class="habitica-logo svg-icon"
           v-html="icons.purpleLogo"
         ></div>
         <div
           v-else
-          class="logo svg-icon"
-          v-html="icons.logo"
+          class="habitica-logo svg-icon"
+          v-html="icons.habiticaLogo"
         ></div>
       </router-link>
     </div>
@@ -142,10 +142,17 @@
   @media only screen and (max-width : 750px) {
     .login-button {
       margin: 0 auto !important;
-      margin-top: 1.8em !important;
+      margin-top: 18px !important;
     }
   }
 
+  .habitica-logo {
+    height: 64px;
+    margin: 28px auto 0px auto;
+    width: 175px;
+    z-index: 0;
+  }
+
   .home-header, .home-header .btn {
     font-family: 'Varela Round', sans-serif;
     font-weight: normal;
@@ -168,8 +175,9 @@
     margin-right: 48px;
 
     .logo {
-      width: 128px;
-      height: 28px;
+      color: $white;
+      height: 32px;
+      object-fit: contain;
     }
   }
 
@@ -260,15 +268,17 @@
 </style>
 
 <script>
-import logo from '@/assets/svg/logo.svg';
-import purpleLogo from '@/assets/svg/purple-logo.svg';
+import habiticaLogo from '@/assets/svg/logo-horizontal.svg';
+import purpleLogo from '@/assets/svg/logo-horizontal-purple.svg';
+import melior from '@/assets/svg/melior.svg';
 
 export default {
   data () {
     return {
       icons: Object.freeze({
-        logo,
+        habiticaLogo,
         purpleLogo,
+        melior,
       }),
     };
   },

website/client/src/components/static/staticWrapper.vue

@@ -42,13 +42,13 @@
     padding-right: 5em !important;
 
     .logo.svg-icon {
-      width: 200px !important;
+      width: 175px !important;
     }
 
     .nav-item a {
       font-size: 14px !important;
       color: $purple-600 !important;
-      padding-top: 2.8em !important;
+      padding-top: 16px !important;
     }
 
     .nav-item a:hover {
@@ -62,8 +62,7 @@
 
     .login-button {
       padding-right: 1em;
-      margin-top: 1.8em !important;
-      border-radius: 2px;
+      border-radius: 4px;
       background-color: #9a62ff;
     }