From 1842480088972c5ca06bb0ba628a6b7d89c13d83 Mon Sep 17 00:00:00 2001 From: Natalie <78037386+CuriousMagpie@users.noreply.github.com> Date: Thu, 15 Feb 2024 15:48:42 -0500 Subject: [PATCH] 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 Co-authored-by: Sabe Jones --- website/client/public/index.html | 6 ++-- website/client/src/app.vue | 18 ++++++++--- .../src/assets/svg/logo-horizontal-purple.svg | 1 + .../client/src/assets/svg/logo-horizontal.svg | 1 + website/client/src/assets/svg/melior.svg | 3 ++ website/client/src/components/appFooter.vue | 12 +++---- .../components/auth/registerLoginReset.vue | 24 ++++++-------- website/client/src/components/header/menu.vue | 31 ++++++++++++------- .../client/src/components/static/header.vue | 28 +++++++++++------ .../src/components/static/staticWrapper.vue | 7 ++--- 10 files changed, 77 insertions(+), 54 deletions(-) create mode 100644 website/client/src/assets/svg/logo-horizontal-purple.svg create mode 100644 website/client/src/assets/svg/logo-horizontal.svg create mode 100644 website/client/src/assets/svg/melior.svg diff --git a/website/client/public/index.html b/website/client/public/index.html index d0af431092..a93d62df6b 100644 --- a/website/client/public/index.html +++ b/website/client/public/index.html @@ -27,9 +27,9 @@
- - - + + +
diff --git a/website/client/src/app.vue b/website/client/src/app.vue index 44d9b543e0..b157a0d565 100644 --- a/website/client/src/app.vue +++ b/website/client/src/app.vue @@ -9,14 +9,19 @@ + // eslint-disable-next-line vue/html-self-closing + > + @@ -91,8 +96,11 @@ #loading-screen-inapp { #melior { + color: $white; + height: 80px; margin: 0 auto; - width: 70.9px; + object-fit: contain; + width: 80px; } .row { diff --git a/website/client/src/assets/svg/logo-horizontal-purple.svg b/website/client/src/assets/svg/logo-horizontal-purple.svg new file mode 100644 index 0000000000..8c6202e948 --- /dev/null +++ b/website/client/src/assets/svg/logo-horizontal-purple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/client/src/assets/svg/logo-horizontal.svg b/website/client/src/assets/svg/logo-horizontal.svg new file mode 100644 index 0000000000..8f64912a76 --- /dev/null +++ b/website/client/src/assets/svg/logo-horizontal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/client/src/assets/svg/melior.svg b/website/client/src/assets/svg/melior.svg new file mode 100644 index 0000000000..415351082f --- /dev/null +++ b/website/client/src/assets/svg/melior.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/client/src/components/appFooter.vue b/website/client/src/components/appFooter.vue index 13160dea65..fa90719f14 100644 --- a/website/client/src/components/appFooter.vue +++ b/website/client/src/components/appFooter.vue @@ -257,8 +257,8 @@
@@ -521,10 +521,10 @@ h3 { } .logo { - width: 24px; + color: $gray-200; height: 24px; margin: 0px auto 5px; - color: $gray-200; + width: 24px; } .terms { @@ -774,7 +774,7 @@ import axios from 'axios'; import moment from 'moment'; // images -import gryphon from '@/assets/svg/gryphon.svg'; +import melior from '@/assets/svg/melior.svg'; import twitter from '@/assets/svg/twitter.svg'; import facebook from '@/assets/svg/facebook.svg'; import instagram from '@/assets/svg/instagram.svg'; @@ -795,7 +795,7 @@ export default { data () { return { icons: Object.freeze({ - gryphon, + melior, twitter, facebook, instagram, diff --git a/website/client/src/components/auth/registerLoginReset.vue b/website/client/src/components/auth/registerLoginReset.vue index b2cb3c5fc0..ede3895ebe 100644 --- a/website/client/src/components/auth/registerLoginReset.vue +++ b/website/client/src/components/auth/registerLoginReset.vue @@ -9,12 +9,9 @@ @submit.prevent.stop="handleSubmit" >
-
-
-
@@ -274,12 +271,9 @@ @keyup.enter="handleSubmit" >
-
-
-
@@ -432,18 +426,18 @@ } .gryphon { - background-image: url('~@/assets/images/melior@3x.png'); - width: 63.2px; - height: 69.4px; background-size: cover; color: $white; + height: 69.4px; margin: 0 auto; + width: 63.2px; } .habitica-logo { - width: 144px; - height: 31px; - margin: 2em auto; + width: 175px; + height: 64px; + margin: 2em auto 0; + z-index: 0; } label { @@ -620,7 +614,7 @@ import { buildAppleAuthUrl } from '../../libs/auth'; import exclamation from '@/assets/svg/exclamation.svg'; import gryphon from '@/assets/svg/gryphon.svg'; -import habiticaIcon from '@/assets/svg/habitica-logo.svg'; +import habiticaIcon from '@/assets/svg/logo-horizontal.svg'; import googleIcon from '@/assets/svg/google.svg'; import appleIcon from '@/assets/svg/apple_black.svg'; diff --git a/website/client/src/components/header/menu.vue b/website/client/src/components/header/menu.vue index 4a249b107e..900cf0ec93 100644 --- a/website/client/src/components/header/menu.vue +++ b/website/client/src/components/header/menu.vue @@ -17,10 +17,10 @@ aria-label="Habitica" > -
+
@@ -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 @@