Update v3 styles (#1150)

* add basic style * add anchor links * update condition * Revert "add basic style" This reverts commit 8b84aa3. * clean up * change links position and update dark theme style * add condition for dapp owner * italic font style * update dapps category styles * update data list styles * update top page styles * update dapp card stats * add grid background to the top page * adjust leaderbord title position for wide schreen * remove flip animation for no description * format token balance on the project page status * update owner page style * update project page style * update project page style * update register banner style * dapp border color navy * refactoring * add text animation * move logo svg to component * adjust wording * remove the importing line not to use * remove text animation
AstarNetwork · Jan 30, 2024 · 40f3912 · 40f3912
1 parent 906e40b
commit 40f3912
Show file tree

Hide file tree

Showing 35 changed files with 896 additions and 461 deletions.
diff --git a/src/components/assets/Assets.vue b/src/components/assets/Assets.vue
@@ -3,6 +3,7 @@
     <div class="assets-page-bg" :style="{ backgroundImage: `url(${bg})` }" />
     <div class="container--assets">
       <div class="column--main">
+        <register-banner v-if="isDappStakingV3" />
         <account
           :ttl-erc20-amount="evmAssets.ttlEvmUsdAmount"
           :ttl-native-xcm-usd-amount="ttlNativeXcmUsdAmount"
@@ -87,6 +88,7 @@ import EvmNativeToken from 'src/components/assets/EvmNativeToken.vue';
 import NativeAssetList from 'src/components/assets/NativeAssetList.vue';
 import ZkAstr from 'src/components/assets/ZkAstr.vue';
 import AnchorLinks from 'src/components/assets/AnchorLinks.vue';
+import RegisterBanner from 'src/staking-v3/components/RegisterBanner.vue';
 
 export default defineComponent({
   components: {
@@ -101,6 +103,7 @@ export default defineComponent({
     NativeAssetList,
     ZkAstr,
     AnchorLinks,
+    RegisterBanner,
   },
   setup() {
     const token = ref<Asset | null>(null);

diff --git a/src/components/common/Logo.vue b/src/components/common/Logo.vue
@@ -1,11 +1,36 @@
 <template>
-  <img src="~assets/img/astar_logo_v2.svg" class="icon--logo" />
+  <svg
+    v-if="flat && symbol"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.9812 8.45711C16.6814 4.04923 12.865 0.718928 8.45711 1.01876C6.26127 1.16811 4.33324 2.1905 2.9878 3.7236L2.98781 3.72359L2.98406 3.72088C2.97499 3.73342 2.96652 3.7458 2.95752 3.75833C1.62107 5.29892 0.869411 7.34735 1.01875 9.54288C1.03298 9.75208 1.0576 9.95798 1.08736 10.1621C1.08737 10.1621 1.08737 10.1622 1.08738 10.1622C1.08872 10.1714 1.09009 10.1806 1.09138 10.1898C1.1115 10.3245 1.13486 10.4579 1.16151 10.5901C1.16152 10.5902 1.16153 10.5903 1.16155 10.5903C1.16204 10.5927 1.1625 10.5952 1.16297 10.5976C1.18723 10.7173 1.21419 10.8359 1.24368 10.9535L1.24373 10.9538C1.24376 10.9539 1.24378 10.954 1.2438 10.954C2.16771 14.6386 5.61985 17.2481 9.54288 16.9812C13.9508 16.6814 17.2811 12.865 16.9812 8.45711V8.45711ZM15.2399 8.57557C15.2768 9.11825 15.2426 9.64959 15.146 10.1608C15.1448 10.1579 15.1439 10.1548 15.1427 10.1519V10.1519C14.5627 8.73421 13.4155 7.71071 12.4066 7.14532C12.6108 4.74319 11.7958 3.7312 10.8735 3.56654C10.8485 3.56171 10.8232 3.55759 10.7976 3.55441C10.0655 3.46052 9.39611 3.97795 9.30234 4.70993C9.20845 5.44195 9.72589 6.11139 10.4578 6.20532C10.5217 6.2134 10.5849 6.21564 10.6474 6.21466C10.6515 6.29574 10.654 6.38188 10.6547 6.47196C9.8019 6.26062 9.00471 6.21926 8.27787 6.2846C8.00606 6.30272 7.73407 6.33697 7.46356 6.38751C7.55428 5.57638 7.85861 4.66573 8.44911 3.9993C9.01997 3.35507 9.86864 2.98582 10.7944 3.08058C10.97 3.09854 11.1572 3.14163 11.3258 3.19825C11.3336 3.20085 11.3418 3.20306 11.3495 3.20572C11.3496 3.20557 11.3497 3.20536 11.3498 3.20521C13.4943 4.07879 15.0724 6.11396 15.2399 8.57557ZM9.66398 9.79748C9.66339 9.79835 9.66278 9.79921 9.6622 9.80009C9.47131 10.0754 9.24428 10.3469 8.97778 10.6094C8.57828 10.1844 8.25736 9.72661 8.01386 9.25307C8.00139 9.22771 7.98807 9.20355 7.97588 9.17777C7.97542 9.17683 7.97499 9.17587 7.97452 9.17493C7.83149 8.87185 7.70987 8.53938 7.61572 8.17716C8.18419 8.0434 8.74168 7.99422 9.27408 8.02015C9.30229 8.02202 9.32986 8.02257 9.35829 8.0249C9.35933 8.02497 9.36038 8.02507 9.36143 8.02513C9.69489 8.05277 10.0431 8.11355 10.4032 8.21285C10.2348 8.7718 9.99875 9.27899 9.7102 9.72695C9.69447 9.75043 9.68021 9.77404 9.66397 9.79748H9.66398ZM6.93037 3.09916C6.92888 3.10109 6.92718 3.10291 6.92569 3.10484L6.92568 3.10484C5.98842 4.31533 5.67551 5.8197 5.68998 6.97589C3.50771 8.00013 3.03879 9.21182 3.35736 10.0929C3.3657 10.117 3.37477 10.1409 3.38482 10.1647C3.66953 10.8456 4.45235 11.1667 5.13315 10.8819C5.81404 10.5972 6.13508 9.81433 5.85044 9.13347C5.82551 9.07413 5.79587 9.0183 5.76374 8.96462C5.83271 8.92006 5.90678 8.87428 5.98542 8.82809C6.22881 9.6725 6.58888 10.3867 7.00895 10.9836C7.16025 11.2095 7.32556 11.4275 7.50418 11.6361C6.75628 11.9632 5.81526 12.1551 4.94267 11.9769C4.09933 11.8046 3.35522 11.2543 2.97437 10.4051C2.90218 10.2442 2.84589 10.0605 2.81061 9.88617C2.7889 9.73387 2.77071 9.58035 2.76011 9.42444C2.56518 6.55875 4.34308 4.00759 6.93037 3.09916V3.09916ZM9.42443 15.2399C7.72271 15.3556 6.132 14.7752 4.92977 13.7434C6.44673 13.9499 7.906 13.4687 8.90007 12.8781C10.879 14.257 12.1634 14.0573 12.7673 13.3407C12.784 13.3214 12.8002 13.3016 12.8158 13.281C13.2631 12.694 13.1497 11.8556 12.5627 11.4084C11.9756 10.961 11.1372 11.0744 10.6899 11.6614C10.6509 11.7126 10.6174 11.7662 10.587 11.8209C10.5144 11.7837 10.4382 11.7426 10.3594 11.698C10.9695 11.0647 11.4043 10.3945 11.7113 9.73197C11.8315 9.4875 11.9379 9.23482 12.0294 8.97527C12.687 9.45941 13.3242 10.1787 13.6064 11.024C13.8789 11.8405 13.7743 12.76 13.2293 13.5144C13.126 13.6575 12.9951 13.7981 12.8617 13.9158C12.8598 13.9175 12.8579 13.9193 12.856 13.9211C11.9026 14.6704 10.7229 15.1516 9.42443 15.2399H9.42443Z"
+      fill="currentColor"
+    />
+  </svg>
+  <img v-else src="~assets/img/astar_logo_v2.svg" class="icon--logo" />
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  setup() {
+  props: {
+    flat: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    symbol: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  setup(props) {
     return {};
   },
 });

diff --git a/src/css/markdown.scss b/src/css/markdown.scss
@@ -1,3 +1,5 @@
+@import 'src/css/quasar.variables.scss';
+
 .markdown {
   h1 {
     font-size: 2rem!important;
@@ -45,5 +47,6 @@
 
   a {
     text-decoration: underline;
+    color: $astar-blue;
   }
-}
+}
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
@@ -743,6 +743,8 @@ export default {
       ZeroAmount: 'Amount must be greater than 0.',
       LockedAmountBelowThreshold: 'Minimum staking amount is {amount} tokens per dApp.',
     },
+    innovativeWayOfStaking:
+      'Innovative way of staking, only at Astar. Where ecosystem grow together',
     successfullyStaked: 'You successfully staked to {contractAddress}',
     voteTitle: 'Vote!',
     voteText: 'I would like to vote my tokens with',
@@ -772,7 +774,6 @@ export default {
     done: 'Done',
     search: 'Search',
     buildAndEarn: 'Build&Earn',
-    newDappPromotion: 'New dApp promotion',
     votingNow: 'Voting Now',
     voteNow: 'Vote now',
     voteStakeToday: 'Vote / Stake today',
@@ -849,8 +850,13 @@ export default {
     blocks: 'blocks',
     back: 'Back',
     era: 'Era',
+    day: 'Day',
     numberOfDapps: 'Number of dApps',
+    general: 'General',
+    totalValueLocked: 'Total Value Locked ({token})',
     tvl: 'TVL',
+    builderRewards: 'Builder Rewards',
+    stakerRewards: 'Staker Rewards',
     tvv: 'TVV',
     bonusEligibleTokens: 'Bonus eligible tokens',
     bonusPool: 'Bonus pool',
@@ -876,17 +882,19 @@ export default {
     noEntry: 'No entry',
     burn: 'Burn',
     availableToWithdraw: 'Available to withdraw',
-    dappRegistered: 'Congrats!! your contract is approved. Please submit the details',
+    congrats: 'Congrats!!',
+    dappRegistered:
+      'Your contract is whitelisted on dApp Staking. Please submit details and you will be listed.',
     registerNow: 'Register now',
     willUnstakeAll:
       'The operation will unstake all of your staked tokens because the minimum staking amount is {amount} tokens.',
     loyalStakerWarningAmount:
       'You will loose eligibility for bonus reward at the end of current period if you unstake more than {amount} tokens.',
     loyalStakerWarning:
       'You will loose eligibility for bonus reward at the end of current period if you unstake tokens now.',
-    unbondFrom: 'Unbond from {name}',
-    startUnbonding: 'Start unbonding',
-    unbondingEra: 'Unbonding takes {unbondingPeriod} eras before you can withdraw',
+    unlockFrom: 'Unlock from {name}',
+    startUnlocking: 'Start unlocking',
+    unlockingDay: 'Unlocking takes {unbondingPeriod} days before you can withdraw',
   },
   bridge: {
     bridge: 'Bridge',

diff --git a/src/pages/DappPage.vue b/src/pages/DappPage.vue
@@ -1,7 +1,7 @@
 <template>
-  <div v-if="isReady" class="dapp-top">
+  <div v-if="isReady">
     <dapp-v3 v-if="isDappStakingV3" />
-    <dapp v-else />
+    <div v-else class="dapp-top"><dapp /></div>
   </div>
   <div v-else />
 </template>