feat(megachain): update design

assets/less/style.less

@@ -80,7 +80,7 @@
     //.card__action-title-type, .card__action-stats-caption {color: @c-metagarden-text-muted; opacity: 1;}
     .information {background: transparent; color: #fff; border-color: @c-mega-highlight;}
 
-    .header__controls-mg-user-name {color: @c-mega;}
+    .header__controls-user-name {color: @c-mega;}
 }
 
 
@@ -404,8 +404,8 @@
 .header__controls-user {display: flex; align-items: center; /*max-width: calc(100vw - 220px);*/ /*margin-right: 16px;*/}
 .header__controls-user-avatar {border-radius: 50%; background: @c-black-light; object-fit: cover;
     flex-shrink: 0;}
-.header__controls-mg-user-name {.u-text-small(); color: @c-metagarden-text-muted;}
-.header__controls-mg-user-balance {.u-text-medium(); /*.u-text-small(); color: @c-metagarden-highlight;*/}
+.header__controls-user-name {.u-text-small(); color: @c-metagarden-text-muted;}
+.header__controls-user-balance {.u-text-medium(); /*.u-text-small(); color: @c-metagarden-highlight;*/}
 .header__controls-language {display: flex; align-items: center; /*margin-left: 16px;*/}
 .header__language-container {padding-top: 16px; padding-bottom: 16px; display: flex; justify-content: flex-end;}
 .header__language-button {line-height: 0; display: block;}
@@ -680,6 +680,14 @@
 }
 
 
+.megachain__body {background: url(../img/meganet-bg.svg) no-repeat 50% 0;}
+.megachain__auth-body {
+    background: url(../img/megachain-auth-bg.png) no-repeat 50% 0;
+    background-image: image-set(
+        url(../img/megachain-auth-bg.png) 1x,
+        url(../img/[email protected]) 2x
+    );
+}
 
 .mg-cards {display: flex; margin-inline: -@container-padding-small; padding-inline: @container-padding-small; overflow-y: auto;}
 @media (min-width: @breakpoint-small-up) {

gulpfile.js

@@ -55,6 +55,9 @@ gulp.task('less', function() {
             postcssPresetEnv({
                 stage: 2,
                 features: {
+                    // produce invalid result (improperly scaled images even for supported browsers)
+                    'image-set': false,
+                    'image-set-function': false,
                     // not performant
                     'all-property': false,
                     'case-insensitive-attributes': false,

layouts/_footer-support.vue

@@ -0,0 +1,23 @@
+<script>
+export default {
+};
+</script>
+
+<template>
+    <a class="link--opacity footer-support" href="https://t.me/+hbaB8L1si8diZTNi" target="_blank" v-if="$store.getters.isMegachain">
+        <img class="u-image-center u-mb-025" src="/img/icon-support.png" srcset="/img/[email protected]" width="32" height="32" alt="">
+        {{ $td('Support', 'index.support-button') }}
+    </a>
+</template>
+
+<style>
+.footer-support {
+    position: fixed;
+    bottom: 16px;
+    right: 16px;
+    text-align: center;
+    font-weight: 700;
+    font-size: 12px;
+}
+</style>
+

layouts/_header-megachain.vue

@@ -56,8 +56,8 @@ export default {
 
             <nuxt-link v-if="isAuthorized && !isAccountPage" :to="$i18nGetPreferredPath('/')" class="header__controls-link header__controls-user u-semantic-button">
                 <div class="u-mr-10 u-text-right">
-                    <div class="u-fw-700 header__controls-mg-user-name">{{ $td('Metagarden wallet', 'megachain.header-account') }}</div>
-                    <div class="u-fw-600 header__controls-mg-user-balance">
+                    <div class="u-fw-700 header__controls-user-name">{{ $td('Metagarden wallet', 'megachain.header-account') }}</div>
+                    <div class="u-fw-600 header__controls-user-balance">
                         {{ pretty($store.getters.getBalanceAmount('MEGANET')) }} MEGANET
                     </div>
                 </div>

layouts/_header-metagarden.vue

@@ -54,8 +54,8 @@ export default {
 
             <nuxt-link v-if="isAuthorized && !isAccountPage" :to="$i18nGetPreferredPath('/metagarden/account')" class="header__controls-link header__controls-user u-semantic-button">
                 <div class="u-mr-10 u-text-right">
-                    <div class="u-fw-700 header__controls-mg-user-name">{{ $td('Your account', 'metagarden.your-account') }}</div>
-                    <div class="u-fw-600 header__controls-mg-user-balance">${{ prettyUsd($store.state.totalBalanceSumUsd) }}</div>
+                    <div class="u-fw-700 header__controls-user-name">{{ $td('Your account', 'metagarden.your-account') }}</div>
+                    <div class="u-fw-600 header__controls-user-balance">${{ prettyUsd($store.state.totalBalanceSumUsd) }}</div>
                 </div>
                 <img class="header__controls-user-avatar u-hidden-mini-down" :src="$store.getters.avatar" v-if="$store.getters.avatar" alt="" role="presentation" width="32" height="32"/>
             </nuxt-link>

layouts/_header.vue

@@ -1,6 +1,7 @@
 <script>
 import InlineSvg from 'vue-inline-svg';
 import {HUB_NETWORK_SLUG, DASHBOARD_URL, DASHBOARD_URL_METAGARDEN, ROUTE_NAME_SPLITTER, I18N_ROUTE_NAME_SEPARATOR} from '~/assets/variables.js';
+import {shortHashFilter} from '~/assets/utils.js';
 import Language from '~/components/layout/Language.vue';
 import Modal from '~/components/base/Modal.vue';
 import Topup from '~/components/Topup.vue';
@@ -58,6 +59,9 @@ export default {
                 return undefined;
             }
         },
+        isHonee() {
+            return !this.isMetagarden && !this.$store.getters.isMetagarden && !this.$store.getters.isMegachain;
+        },
         isAuthPage() {
             // match ^auth/.* or ^auth___(en|ru)
             return this.$route.name.indexOf('auth' + ROUTE_NAME_SPLITTER) === 0 || this.$route.name.indexOf('auth' + I18N_ROUTE_NAME_SEPARATOR) === 0;
@@ -73,6 +77,7 @@ export default {
         },
     },
     methods: {
+        shortHashFilter,
         goBack() {
             this.$router.go(-1);
         },
@@ -96,7 +101,7 @@ export default {
             </div>
 
             <!--<div class="header__controls">-->
-            <template v-if="!isPremiumPage && isAuthorized && !simple && !isMetagarden">
+            <template v-if="!isPremiumPage && isAuthorized && !simple && isHonee">
                 <hr class="header__horizontal-divider header__premium-item u-hidden-large-up metagarden-layout__hide"/>
                 <nuxt-link class="header__controls-link u-flex u-flex--align-center header__premium-item metagarden-layout__hide" :to="$i18nGetPreferredPath('/premium')">
                     <img class="u-mr-05 u-hidden-large-down" src="/img/icon-premium-fancy.svg" alt="" role="presentation" width="64" height="42">
@@ -109,10 +114,19 @@ export default {
             </template>
 
             <button v-if="isAuthorized && !simple" type="button" class="header__controls-link header__controls-user u-semantic-button" @click="isTopupModalOpen = true">
-                <img class="header__controls-user-avatar u-mr-05 u-hidden-mini-down" :src="$store.getters.avatar" v-if="$store.getters.avatar" alt="" role="presentation" width="24" height="24"/>
-                <span class="header__controls-user-name">{{ $store.getters.username }}</span>
+                <template v-if="isHonee">
+                    <img class="header__controls-user-avatar u-mr-05 u-hidden-mini-down" :src="$store.getters.avatar" v-if="$store.getters.avatar" alt="" role="presentation" width="24" height="24"/>
+                    <span class="">{{ $store.getters.username }}</span>
+                </template>
+                <template v-else>
+                    <div class="u-mr-10 u-text-right">
+                        <div class="u-fw-700 header__controls-user-name">{{ $td('Your address', 'index.your-address') }}</div>
+                        <div class="u-fw-600 header__controls-user-balance">{{ shortHashFilter($store.getters.address) }}</div>
+                    </div>
+                    <img class="header__controls-user-avatar u-hidden-mini-down" :src="$store.getters.avatar" v-if="$store.getters.avatar" alt="" role="presentation" width="32" height="32"/>
+                </template>
             </button>
-            <button v-if="isAuthorized && !simple && !isMetagarden" type="button" class="header__controls-link link u-semantic-button metagarden-layout__hide" @click="isLogoutModalOpen = true">
+            <button v-if="isAuthorized && !simple && isHonee" type="button" class="header__controls-link link u-semantic-button metagarden-layout__hide" @click="isLogoutModalOpen = true">
                 <img src="/img/icon-logout.svg" width="24" height="24" alt="Logout">
             </button>
             <nuxt-link v-if="!isAuthorized && !simple && !isAuthPage" :to="$i18nGetPreferredPath('/auth')" type="button" class="header__controls-link">

layouts/_splash.vue

@@ -1,12 +1,14 @@
 <script>
 import HeaderBanner from '~/layouts/_header-banner.vue';
 import TheHeader from '~/layouts/_header.vue';
+import FooterSupport from '~/layouts/_footer-support.vue';
 import Snackbar from '~/components/layout/Snackbar.vue';
 
 export default {
     components: {
         HeaderBanner,
         TheHeader,
+        FooterSupport,
         Snackbar,
     },
     head() {
@@ -32,11 +34,12 @@ export default {
 
 <template>
     <div class="splash-layout__wrap">
-        <HeaderBanner/>
+        <HeaderBanner v-if="!$store.getters.isMegachain"/>
         <TheHeader :simple="false" :show-language="true"/>
 
         <slot></slot>
 
+        <FooterSupport/>
         <Snackbar/>
     </div>
 </template>

layouts/default.vue

@@ -6,6 +6,7 @@ import TheHeaderMetagarden from '~/layouts/_header-metagarden.vue';
 import TheHeaderMegachain from '~/layouts/_header-megachain.vue';
 import TheFooter from '~/layouts/_footer.vue';
 import FooterGarden from '~/components/layout/FooterGarden.vue';
+import FooterSupport from '~/layouts/_footer-support.vue';
 import BackButtonFull from '~/components/layout/BackButtonFull.vue';
 import ConnectionNotice from '~/components/layout/ConnectionNotice.vue';
 import Snackbar from '~/components/layout/Snackbar.vue';
@@ -15,9 +16,10 @@ export default {
         HeaderBanner,
         TheHeader,
         TheHeaderMetagarden,
-        TheHeaderMegachain,
+        // TheHeaderMegachain,
         TheFooter,
         FooterGarden,
+        FooterSupport,
         BackButtonFull,
         ConnectionNotice,
         Snackbar,
@@ -68,9 +70,9 @@ export default {
 
 <template>
     <div>
-        <HeaderBanner/>
+        <HeaderBanner v-if="!isMegachain"/>
         <TheHeaderMetagarden v-if="isMetagarden"/>
-        <TheHeaderMegachain v-else-if="isMegachain"/>
+        <!--<TheHeaderMegachain v-else-if="isMegachain"/>-->
         <TheHeader v-else :show-language="false"/>
 
         <BackButtonFull v-if="isHonee"/>
@@ -79,6 +81,7 @@ export default {
 
         <TheFooter/>
         <FooterGarden v-if="isHonee"/>
+        <FooterSupport/>
 
         <ConnectionNotice/>
         <Snackbar/>

pages/auth/index.vue

@@ -12,6 +12,9 @@ export default {
             meta: [
                 { hid: 'og-title', name: 'og:title', content: getTitle(this.$options.PAGE_TITLE) },
             ],
+            bodyAttrs: {
+                class: this.$store.getters.isMegachain ? 'megachain__auth-body layout--hide-header-logo layout--transparent-header' : undefined,
+            },
         };
     },
     methods: {

pages/meganet.vue

@@ -5,6 +5,11 @@ export default {
     components: {
         TopupCoinOptions,
     },
+    head: {
+        bodyAttrs: {
+            class: 'megachain__body',
+        },
+    },
     fetch() {
         // this.$store.commit('SET_METAGARDEN');
     },