Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Melior Image (#15116)

Browse Source 
* 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>
This commit is contained in:
Natalie
2024-02-15 15:48:42 -05:00
committed by GitHub
parent 1a3c2f64e4
commit 1842480088
10 changed files with 77 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/src/components/appFooter.vue
+6 -6
View File
@@ -257,8 +257,8 @@
</div>
<div class="melior">
<div
class="logo svg-icon"
v-html="icons.gryphon"
class="logo svg svg-icon color"
v-html="icons.melior"
></div>
</div>
<!-- DESKTOP PRIVACY & TERMS -->
@@ -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,
website/client/src/components/auth/registerLoginReset.vue
+9 -15
View File
@@ -9,12 +9,9 @@
@submit.prevent.stop="handleSubmit"
>
<div class="text-center">
<div>
<div class="svg-icon gryphon"></div>
</div>
<div>
<div
class="svg-icon habitica-logo"
class="svg-icon svg habitica-logo"
v-html="icons.habiticaIcon"
></div>
</div>
@@ -274,12 +271,9 @@
@keyup.enter="handleSubmit"
>
<div class="text-center">
<div>
<div class="svg-icon gryphon"></div>
</div>
<div>
<div
class="svg-icon habitica-logo"
class="svg-icon habitica-logo color"
v-html="icons.habiticaIcon"
></div>
</div>
@@ -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';
website/client/src/components/header/menu.vue
+19 -12
View File
@@ -17,10 +17,10 @@
aria-label="Habitica"
>
<div
class="logo svg-icon d-none d-xl-block"
v-html="icons.logo"
class="logo svg-icon svg color gryphon"
v-html="icons.melior"
></div>
<div class="svg-icon gryphon d-xs-block d-xl-none"></div>
<div class="svg-icon"></div>
</b-navbar-brand>
<b-navbar-toggle
class="menu-toggle"
@@ -406,12 +406,18 @@ body.modal-open #habitica-menu {
}
.gryphon {
background-image: url('~@/assets/images/melior@3x.png');
width: 30px;
height: 30px;
background-size: cover;
height: 32px;
color: $white;
margin: 0 auto;
width: 32px;
top: -10px;
position: relative;
}
.logo {
padding-top: 12px;
color: $white;
}
.topbar-item {
@@ -462,7 +468,7 @@ body.modal-open #habitica-menu {
.gryphon {
position: absolute;
left: calc(50% - 30px);
top: 10px;
top: -2px;
}
#menu_collapse {
@@ -553,9 +559,10 @@ body.modal-open #habitica-menu {
}
.logo {
padding-left: 10px;
width: 128px;
height: 28px;
color: $white;
height: 32px;
object-fit: contain;
width: 32px;
}
.quick-menu {
@@ -727,7 +734,7 @@ import goldIcon from '@/assets/svg/gold.svg';
import syncIcon from '@/assets/svg/sync.svg';
import svgHourglasses from '@/assets/svg/hourglass.svg';
import chevronDownIcon from '@/assets/svg/chevron-down.svg';
import logo from '@/assets/svg/logo.svg';
import melior from '@/assets/svg/melior.svg';
import creatorIntro from '../creatorIntro';
import notificationMenu from './notificationsDropdown';
@@ -762,7 +769,7 @@ export default {
gold: goldIcon,
hourglasses: svgHourglasses,
sync: syncIcon,
logo,
melior,
chevronDown: chevronDownIcon,
}),
};
website/client/src/components/static/header.vue
+19 -9
View File
@@ -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
+3 -4
View File
@@ -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;
}