update all vote/stake button background

AstarNetwork · Jan 3, 2024 · e1fe0d7 · e1fe0d7
1 parent 5439d02
commit e1fe0d7
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 38 deletions.
diff --git a/src/staking-v3/components/FeatureDapp.vue b/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,8 +39,9 @@
           <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>
@@ -63,13 +64,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();

diff --git a/src/staking-v3/components/VoteButtonBg.vue → ...aking-v3/components/VoteStakeButtonBg.vue b/src/staking-v3/components/VoteButtonBg.vue → ...aking-v3/components/VoteStakeButtonBg.vue
diff --git a/src/staking-v3/components/dapp/DappStatistics.vue b/src/staking-v3/components/dapp/DappStatistics.vue
@@ -2,7 +2,8 @@
   <div class="wrapper--dapp-statistics">
     <div class="row--data">
       <button class="button--vote-stake" @click="navigateToVote(dapp.extended?.address)">
-        {{ $t('stakingV3.dapp.voteAndStake') }}
+        <span>{{ $t('stakingV3.dapp.voteAndStake') }}</span>
+        <vote-stake-button-bg />
       </button>
 
       <kpi-card :title="$t('dappStaking.dappPage.totalStaked')">
@@ -29,11 +30,13 @@ import { useDappStaking, useDappStakingNavigation } from 'src/staking-v3/hooks';
 import { CombinedDappInfo } from 'src/staking-v3/logic';
 import { defineComponent, PropType } from 'vue';
 import KpiCard from '../KpiCard.vue';
+import VoteStakeButtonBg from '../VoteStakeButtonBg.vue';
 
 export default defineComponent({
   components: {
     TokenBalanceNative,
     KpiCard,
+    VoteStakeButtonBg,
   },
   props: {
     dapp: {

diff --git a/src/staking-v3/components/dapp/styles/dapp-statistics.scss b/src/staking-v3/components/dapp/styles/dapp-statistics.scss
@@ -16,20 +16,39 @@
 }
 
 .button--vote-stake {
-  background-color: $astar-pink;
+  position: relative;
+  overflow: hidden;
   border-radius: 16px;
   padding: 16px;
-  transition: all 0.2s ease;
-  display: none;
-  color: white;
   font-size: 16px;
   font-weight: 700;
+  box-shadow: 0px 0px 6.88px 1.376px rgba(0, 0, 0, 0.3);
+  color: white;
+  line-height: 1.25;
+  transition: all 0.2s ease;
+  background-color: #0048e6;
+  width: 100%;
+  height: 80px;
   @media (min-width: $sm) {
-    display: block;
+    max-width: 134px;
     height: 110px;
-    min-width: 134px;
   }
   &:hover {
-    background-color: lighten($astar-pink, 10%);
+    filter: brightness(1.2);
+  }
+  span {
+    position: relative;
+    z-index: 1;
+  }
+  iframe {
+    position: absolute;
+    z-index: 0;
+    transform-origin: top left;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    @media (min-width: $sm) {
+      scale: 30%;
+    }
   }
 }
diff --git a/src/staking-v3/components/styles/feature-dapp.scss b/src/staking-v3/components/styles/feature-dapp.scss
@@ -132,30 +132,7 @@
   }
 }
 
-.button--staking {
-  background-color: $astar-pink;
-  border-radius: 16px;
-  padding: 16px;
-  transition: all 0.2s ease;
-  width: 100%;
-  height: 80px;
-  line-height: 1.25;
-  @media (min-width: $sm) {
-    height: 110px;
-    max-width: 134px;
-  }
-  &:hover {
-    background-color: lighten($astar-pink, 10%);
-  }
-}
-
-.text--start-staking {
-  font-weight: 700;
-  font-size: 16px;
-  color: white;
-}
-
-.button--vote {
+.button--vote-stake {
   position: relative;
   overflow: hidden;
   border-radius: 16px;