update tokens + desktop version

src/components/SacrificeToken.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="sacrifice-wrapper bloodline-wrapper">
+	<div class="sacrifice-wrapper card card--glow bloodline-wrapper">
 		<!-- {{ activeToken.allowance }} -->
 		<div class="sacrifice-inner">
 			<div class="sacrifice-headline">Select Sacrifice</div>
@@ -32,7 +32,7 @@
 						'sacrifice-from-wrapper': true,
 						'bloodline-border': true,
 						'bloodline-border--variant1': true,
-						purple: isMobile,
+						purple: true,
 					}"
 				>
 					<div class="sarcrifice-from-input">
@@ -63,7 +63,7 @@
 						'sacrifice-from-wrapper': true,
 						'bloodline-border': true,
 						'bloodline-border--variant1': true,
-						purple: isMobile && output && output > 0,
+						purple: output && output > 0,
 					}"
 				>
 					<div class="sarcrifice-from-input">
@@ -84,12 +84,16 @@
 								}
 							"
 						>
-							<div class="mid-mid-text">No Staking Bonus</div>
+							<div class="mid-mid-text">+ Staking Bonus</div>
 							<div class="icon">
 								<font-awesome-icon icon="chevron-down" />
 							</div>
 						</div>
-						<stake-component v-if="showStakingMenu" stakeonly class="variant1"></stake-component>
+						<stake-component-v1 :variant="1" v-if="showStakingMenu">
+							<template v-slot:headline> {{ null }}</template>
+						</stake-component-v1>
+
+						<!-- <stake-component v-if="showStakingMenu" stakeonly class="variant1"></stake-component> -->
 					</div>
 				</div>
 				<div class="sacrificed-info" v-if="state === 4">
@@ -112,7 +116,7 @@
 				</div>
 				<div class="sacrifice-buttons-function-wrapper">
 					<template v-if="walletStore.connected">
-						<div class="btn btn-immortal" disabled v-if="state === 0">Enter Amount</div>
+						<div class="btn btn-immortal sub-header" disabled v-if="state === 0">Enter Amount</div>
 						<div
 							class="btn btn-immortal"
 							v-if="
@@ -125,20 +129,19 @@
 							Sacrifce
 						</div>
 						<div
-							class="btn btn-immortal"
+							class="btn btn-immortal sub-header"
 							v-if="
 								(!activeToken.allowance || activeToken.allowance < tokenNumber) &&
 								(state === 1 || state === 4)
 							"
 							@click="approveToken(tokenNumber)"
 						>
-							Approve
+							Approve Token
 						</div>
 						<div class="btn btn-immortal" disabled v-if="state === 2">Sign Transaction</div>
 						<div class="btn btn-immortal" disabled v-if="state === 3">Loading...</div>
 					</template>
 					<template v-else>
-						<!-- <div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div> -->
 						<div class="btn btn-immortal" @click="showPanel = true">Connect</div>
 					</template>
 				</div>
@@ -152,7 +155,8 @@ import { ref, defineProps, watch, inject, computed } from "vue";
 import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useTokenStore } from "@/stores/tokens";
 import { useMemeburnerStore } from "@/stores/memeburner";
-import StakeComponent from "./StakeComponent.vue";
+import StakeComponentV1 from "@/components/StakeComponentV1.vue";
+
 import { storeToRefs } from "pinia";
 import { waitForTransaction } from "@wagmi/core";
 
@@ -285,8 +289,6 @@ async function addTokens(value) {
             justify-content: center
             flex-wrap: wrap
             gap: 12px
-            @media (min-width: 992px)
-                justify-content: space-evenly
 
             .sacrifice-token
                 border-radius: 16px
@@ -325,8 +327,8 @@ async function addTokens(value) {
             border-radius: 16px
             padding: 16px
             font-size: 16px
+            gap: 16px
             .sacrifice-fees-img
-                flex: 0 0 15%
                 img
                     height: 46px
             .sacrifice-fees-body
@@ -344,6 +346,8 @@ async function addTokens(value) {
     display: flex
     flex-direction: column
     gap: 16px
+    @media (min-width: 992px)
+        gap: 32px
     .sacrifice-from-wrapper,.sacrifice-to-wrapper
         .sarcrifice-from-input
             display: flex
@@ -413,7 +417,7 @@ async function addTokens(value) {
 .sacrifice-staking-bonus
     display: flex
     flex-direction: column
-    padding: 4px 8px
+    padding: 8px 16px
     row-gap: 8px
     border-radius: 10px
     background: var(--midnight-black, #0F0F0F)