feat: update project page styles (#1109)

* add project icon background

* add project icon background to the owner page

* update all vote/stake button background

* fix app height

* move the register button to the assets page

* fix assets page container

* remove the license section from the project page

* made the header scroll

* add small dapp header

* fix v2 style

* remove the register banner from the assets page for now

* fix vote page layout

* fix vote period background

* adjust small header style and heart icon button

* update maintenance mode style

* update

src/components/assets/Assets.vue

@@ -17,14 +17,18 @@
           <staking />
         </template>
 
-        <div v-if="!isLoading" class="container">
+        <div v-if="!isLoading">
           <div v-if="isH160">
-            <evm-asset-list :tokens="evmAssets.assets" />
+            <evm-asset-list :tokens="evmAssets.assets" class="container" />
           </div>
           <div v-else>
             <!-- Memo: hide xvm panel because AA might replace it -->
             <!-- <xvm-native-asset-list v-if="isSupportXvmTransfer" :xvm-assets="xvmAssets.xvmAssets" /> -->
-            <xcm-native-asset-list v-if="isEnableXcm" :xcm-assets="xcmAssets.assets" />
+            <xcm-native-asset-list
+              v-if="isEnableXcm"
+              :xcm-assets="xcmAssets.assets"
+              class="container"
+            />
           </div>
         </div>
       </div>

src/components/assets/styles/account.scss

@@ -4,6 +4,10 @@
   display: flex;
   flex-direction: column;
   gap: 32px;
+  margin-top: -36px;
+  @media (min-width: $lg) {
+    margin-top: 0;
+  }
 }
 
 .row--details-signatory {
@@ -60,8 +64,6 @@
   img {
     width: 32px;
     height: 32px;
-    // object-fit: cover;
-    // border-radius: 9999px;
   }
 }
 
@@ -218,7 +220,7 @@
   background-color: white;
   padding: 16px;
   min-height: 180px;
-  @media (min-width: $sm) {
+  @media (min-width: $lg) {
     border-radius: 16px;
     margin: 0;
   }
@@ -270,7 +272,7 @@
       color: white;
       background: linear-gradient(270deg, #6c6c6c 25%, #b7b7b7 100%);
     }
-    &:not(.active){
+    &:not(.active) {
       cursor: pointer;
     }
   }
@@ -330,7 +332,7 @@
         }
       }
     }
-  }  
+  }
 }
 
 .row--account-rewards {

src/components/dapp-staking/StakingTop.vue

@@ -118,6 +118,8 @@ export default defineComponent({
 .extra-wrapper {
   max-width: $container-max-width;
   margin: 0 auto;
+  z-index: 1;
+  position: relative;
 }
 
 .container--main {

src/components/dapp-staking/my-staking/Register.vue

@@ -65,7 +65,6 @@ export default defineComponent({
   border-radius: 6px;
   padding: 24px;
   cursor: pointer;
-  margin-top: 50px;
   color: $gray-1;
   font-size: 16px;
 }

src/components/dapp-staking/my-staking/styles/top-metric.scss

@@ -2,7 +2,6 @@
 
 .panel {
   background-size: cover;
-  padding-top: 55px;
   padding-left: 16px;
   padding-right: 16px;
   @media (min-width: $md) {

src/components/header/Header.vue

@@ -264,13 +264,10 @@ export default defineComponent({
 @import 'src/css/quasar.variables.scss';
 .wrapper {
   z-index: 100;
+  position: sticky;
+  top: 0;
   @media (min-width: $lg) {
-    border-left: solid 1px $navy-3;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 224px;
-    padding-right: 224px;
+    position: relative;
   }
 }
 

src/components/header/mobile/MobileNav.vue

@@ -167,7 +167,6 @@ export default defineComponent({
   color: $gray-1;
   display: flex;
   flex-direction: column;
-  // gap: 40px;
   padding-top: 40px;
   height: calc(100vh - 64px);
   overflow-y: auto;

src/components/sidenav/styles/sidebar-desktop.scss

@@ -31,6 +31,7 @@
   background: #081029;
   display: flex;
   flex-direction: column;
+  border-right: solid 1px $navy-3;
 }
 
 .menu {

src/i18n/en-US/index.ts

@@ -112,6 +112,7 @@ export default {
     youtube: 'YouTube',
     docs: 'Documentation',
     loading: 'Loading...',
+    comingSoon: 'Coming soon',
     speed: {
       speed: 'Transaction speed',
       speedTip: 'Transaction speed (Tip)',

src/layouts/DashboardLayout.vue

@@ -1,19 +1,11 @@
 <template>
-  <div id="app--main" class="tw-h-screen tw-flex tw-overflow-hidden">
+  <div id="app--main" class="wrapper--dashboard-layout">
     <template v-if="width >= screenSize.lg">
       <sidebar-desktop />
     </template>
-    <div class="tw-flex tw-flex-col tw-w-0 tw-flex-1 tw-overflow-y-auto lg:tw-overflow-hidden">
+    <div class="wrapper--dashboard-layout__inner">
       <portal-header />
-      <main
-        id="assets-top"
-        class="
-          tw-flex-1 tw-relative tw-z-0
-          lg:tw-py-12 lg:tw-overflow-y-auto
-          tw-overflow-x-hidden
-          focus:tw-outline-none
-        "
-      >
+      <main id="assets-top" class="wrapper--main">
         <div class="wrapper--components">
           <slot />
         </div>
@@ -63,12 +55,33 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.wrapper--dashboard-layout {
+  height: 100vh;
+  display: flex;
+  overflow: hidden;
+}
+
+.wrapper--dashboard-layout__inner {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.wrapper--main {
+  flex: 1;
+  position: relative;
+  padding: 0 0 120px 0;
+  &:focus {
+    outline: 0;
+  }
+  @media (min-width: $lg) {
+    padding-top: 36px;
+  }
+}
+
 .wrapper--components {
-  height: 100%;
   @media (min-width: $lg) {
     padding: 0 40px;
-    padding-top: 42px;
-    // padding-top: 12px; without the header warning banner
   }
 }
 </style>

src/pages/AssetsPage.vue

@@ -52,13 +52,12 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 #assets-top {
-  padding: 0 16px 64px 16px;
+  padding: 0 16px;
   @media (min-width: $sm) {
     padding-top: 16px;
   }
   @media (min-width: $lg) {
     padding: 0;
-    margin-top: 74px;
   }
 }
 </style>

src/pages/BridgePage.vue

@@ -25,14 +25,13 @@ export default defineComponent({
 <style lang="scss" scoped>
 #bridge-top {
   @media (min-width: $lg) {
-    margin-top: 50px;
     padding: 0 16px;
   }
 }
 
 .page--bridge {
   @media (min-width: $lg) {
-    height: calc(100vh - 160px);
+    height: calc(100vh - 96px - 36px - 120px);
   }
 }
 </style>

src/pages/DappPage.vue

@@ -32,8 +32,5 @@ export default defineComponent({
 <style lang="scss" scoped>
 .dapp-top {
   padding: 0 16px;
-  @media (min-width: $lg) {
-    margin-top: 50px;
-  }
 }
 </style>

src/pages/DappStaking.vue

@@ -29,7 +29,7 @@ export default defineComponent({
   width: 100%;
   left: 0;
   top: 0;
-  z-index: -1;
+  z-index: 0;
   height: 100vh;
   opacity: 0.8;
 }

src/pages/Dashboard.vue

@@ -29,8 +29,5 @@ export default defineComponent({
 
 .wrapper--dashboard {
   padding: 0 16px;
-  @media (min-width: $lg) {
-    margin-top: 70px;
-  }
 }
 </style>

src/staking-v3/components/DiscoverV3.vue

@@ -1,36 +1,40 @@
 <template>
-  <div class="wrapper--discover">
-    <feature-dapp />
-    <!-- <staking /> -->
-    <leaderboard />
-    <leaderboard-vote />
-    <dynamic-ads-area />
+  <div>
+    <div class="wrapper--discover">
+      <feature-dapp />
+      <!-- <staking /> -->
+      <leaderboard />
+      <leaderboard-vote />
+      <dynamic-ads-area />
 
-    <div class="container--dapps-data">
-      <div class="row--dapps-data-header">
-        <toggle-buttons
-          :captions="[$t('stakingV3.ourDapps'), $t('stakingV3.ourData')]"
-          @button-selected="toggleDapps"
-        />
-        <input
-          v-if="displayIndex === 0"
-          v-model="searchText"
-          type="text"
-          :placeholder="$t('stakingV3.searchDapps')"
-          class="input--search"
-        />
+      <div class="container--dapps-data">
+        <div class="row--dapps-data-header">
+          <toggle-buttons
+            :captions="[$t('stakingV3.ourDapps'), $t('stakingV3.ourData')]"
+            @button-selected="toggleDapps"
+          />
+          <input
+            v-if="displayIndex === 0"
+            v-model="searchText"
+            type="text"
+            :placeholder="$t('stakingV3.searchDapps')"
+            class="input--search"
+          />
+        </div>
+        <div v-if="displayIndex === 0" class="dapps">
+          <dapps category="DeFi" :search="searchText" />
+          <dapps category="NFT" :search="searchText" />
+          <dapps category="Tooling" :search="searchText" />
+          <dapps category="Utility" :search="searchText" />
+          <dapps category="Others" :search="searchText" />
+        </div>
+        <data-list v-if="displayIndex === 1" />
       </div>
-      <div v-if="displayIndex === 0" class="dapps">
-        <dapps category="DeFi" :search="searchText" />
-        <dapps category="NFT" :search="searchText" />
-        <dapps category="Tooling" :search="searchText" />
-        <dapps category="Utility" :search="searchText" />
-        <dapps category="Others" :search="searchText" />
-      </div>
-      <data-list v-if="displayIndex === 1" />
     </div>
-
     <div class="bg--discover" />
+    <div v-if="isVotingPeriod" class="bg--voting-period">
+      <img :src="require('/src/staking-v3/assets/vote_hero_bg.webp')" alt="" />
+    </div>
   </div>
 </template>
 
@@ -44,6 +48,7 @@ import LeaderboardVote from './leaderboard/LeaderboardVote.vue';
 import DataList from './data/DataList.vue';
 import DynamicAdsArea from './DynamicAdsArea.vue';
 import ToggleButtons from './ToggleButtons.vue';
+import { useDappStaking } from '../hooks';
 
 export default defineComponent({
   components: {
@@ -65,7 +70,9 @@ export default defineComponent({
 
     const searchText = ref<string>('');
 
-    return { displayIndex, searchText, toggleDapps };
+    const { isVotingPeriod } = useDappStaking();
+
+    return { displayIndex, searchText, isVotingPeriod, toggleDapps };
   },
 });
 </script>

src/staking-v3/components/FeatureDapp.vue

@@ -25,9 +25,9 @@
         </astar-button>
       </div>
       <div class="row--data">
-        <button v-if="isVotingPeriod" class="button--vote" @click="navigateToVote()">
+        <button v-if="isVotingPeriod" class="button--vote-stake" @click="navigateToVote()">
           <span>{{ $t('stakingV3.voteStakeToday') }}</span>
-          <vote-button-bg />
+          <vote-stake-button-bg />
         </button>
         <kpi-card :title="periodName.toUpperCase()">
           <span class="text--value">{{ periodCurrentDay }}</span>
@@ -39,15 +39,13 @@
           <format-balance :balance="currentEraInfo?.totalLocked?.toString() ?? ''" />
         </kpi-card>
         <div v-if="!isVotingPeriod" class="row--start-staking">
-          <button class="button--staking" @click="navigateToVote()">
-            <span class="text--start-staking">{{ $t('stakingV3.startStakingNow') }}</span>
+          <button class="button--vote-stake" @click="navigateToVote()">
+            <span>{{ $t('stakingV3.startStakingNow') }}</span>
+            <vote-stake-button-bg />
           </button>
         </div>
       </div>
     </div>
-    <div v-if="isVotingPeriod" class="bg--vote">
-      <img :src="require('/src/staking-v3/assets/vote_hero_bg.webp')" alt="" />
-    </div>
   </div>
 </template>
 
@@ -64,13 +62,13 @@ import {
 import { Campaign } from 'src/v2/models';
 import FormatBalance from 'src/components/common/FormatBalance.vue';
 import KpiCard from './KpiCard.vue';
-import VoteButtonBg from './VoteButtonBg.vue';
+import VoteStakeButtonBg from './VoteStakeButtonBg.vue';
 
 export default defineComponent({
   components: {
     FormatBalance,
     KpiCard,
-    VoteButtonBg,
+    VoteStakeButtonBg,
   },
   setup() {
     const { constants, currentEraInfo, isVotingPeriod } = useDappStaking();