update desktop resize

src/components/StakeComponentV1.vue

@@ -22,7 +22,7 @@
 			<div class="connected-stake-headline mid-mid-text">
 				<slot name="headline" v-if="variant !== 2">Staked</slot>
 			</div>
-			<div class="connected-stake-subheadline">
+			<div class="connected-stake-subheadline low-mid-text">
 				<slot name="subheadline"
 					>Stake for a 25% bonus on your sacrifice.<br />
 					Upper limit is your stake.</slot
@@ -176,8 +176,15 @@ function openUnstake() {
 
 async function orderUnstake() {
 	loading.value = true;
-	var result = await rewardLockerStore.orderUnstake();
-	console.log("orderUnstake", result);
+	state.value = 2;
+	var hash = await rewardLockerStore.orderUnstake();
+	state.value = 3;
+	const data = await waitForTransaction({
+		hash: hash,
+	});
+	state.value = 4;
+	await walletStore.loadWalletData();
+	showSuccessToast();
 	loading.value = false;
 }
 
@@ -192,7 +199,12 @@ async function stakeToken() {
 		console.log("data", data);
 		state.value = 4;
 		await walletStore.loadWalletData();
-		showSuccessToast();
+		showSuccessToast(
+			tokenNumber.value,
+			"Success!",
+			"You just staked",
+			"Your next sacrifice will get an extra staking bonus as a reward."
+		);
 		//reload data
 	} catch (error) {
 		state.value = 0;
@@ -215,7 +227,7 @@ const stateStake = computed(() => {
 	return returnState;
 });
 
-function showSuccessToast() {
+function showSuccessToast(value, header, subheader, info) {
 	// Define the content object with the component, props and listeners
 	const content = {
 		component: StakeSuccessToast,
@@ -223,10 +235,10 @@ function showSuccessToast() {
 		props: {
 			// counter: this.counter,
 			// value: tokenStore.activeToken.rewards?.toFixed(5),
-			value: tokenNumber.value,
-			header: "Success!",
-			subheader: "You just staked",
-			info: "Your next sacrifice will get an extra staking bonus as a reward.",
+			value: value,
+			header: header,
+			subheader: subheader,
+			info: info,
 		},
 		// Listen and react to events using callbacks. In this case we listen for
 		// the "click" event emitted when clicking the toast button
@@ -248,20 +260,15 @@ function showSuccessToast() {
 
 <style lang="sass">
 
-.connected-stake-subheadline
-    font-size: 16px
-    @media (min-width: 992px)
-        font-size: 24px
-
 .stake-component--variant2
     border-radius: 16px
     background: var(--darkgrey, #202020)
     display: flex
     flex-direction: column
-    gap: 24px
+    gap: 18px
     padding: 8px
     @media (min-width: 992px)
-        padding: 32px 64px
+        padding: 24px 48px
 .unstake-menu
     display: flex
     flex-direction: column
@@ -275,9 +282,6 @@ function showSuccessToast() {
     .connected-stake
         .connected-stake-headline
             text-align: left
-            font-size: 18px
-        .connected-stake-subheadline
-            font-size: 16px
         .connected-stake-body
             .token-price-wrapper, .stake-reward
                 .token-name