update tokens + desktop version

src/components/TokenClaim.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="claim bloodline-border bloodline-border__thin grey">
-		<div class="claim-headline">You Cycle Rewards</div>
+		<div class="claim-headline sub-header">You Cycle Rewards</div>
 
-		<div class="rewards-wrapper" v-if="!isMobile">
+		<!-- <div class="rewards-wrapper" v-if="!isMobile">
 			<rewards-wrapper
 				title="Sacrafice Reward"
 				coin="$BLOOD"
@@ -18,8 +18,8 @@
 				:amount="getCurrentRoundData?.rewards_clan"
 				image="/assets/img/vampir.png"
 			/>
-		</div>
-		<div class="rewards-list" v-else>
+		</div> -->
+		<div class="rewards-list">
 			<rewards-wrapper
 				title="Sacrafice Reward"
 				coin="$BLOOD"
@@ -41,12 +41,12 @@
 			/>
 		</div>
 		<div class="rewards-total-wrapper">
-			<div class="rewards-total-headline">Total Reward</div>
+			<div class="rewards-total-headline low-mid-text">Total Reward</div>
 			<div class="rewards-total-inner bloodline-border bloodline-border--variant1">
 				<div class="rewards-body">
-					<div class="rewards-coin">$BLOOD</div>
-					<div class="rewards-amount" v-if="activeRound === currentRound">0</div>
-					<div class="rewards-amount" v-else>{{ getCurrentRoundData?.rewards_total }}</div>
+					<div class="rewards-coin low-mid-text">$BLOOD</div>
+					<div class="rewards-amount header" v-if="activeRound === currentRound">0</div>
+					<div class="rewards-amount header" v-else>{{ getCurrentRoundData?.rewards_total }}</div>
 				</div>
 				<img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" />
 			</div>
@@ -63,7 +63,7 @@
 		</div> -->
 		<div class="claim-button">
 			<template v-if="activeRound === currentRound">
-				<button class="btn btn-immortal" @click="router.push({ name: 'home' })">Sacrifice</button>
+				<button class="btn btn-immortal sub-header" @click="router.push({ name: 'home' })">Sacrifice</button>
 			</template>
 			<template v-else-if="getCurrentRoundData?.rewards_total > 0">
 				<Transition name="smooth">
@@ -151,15 +151,13 @@ async function claimRewards() {
     display: flex
     padding: 12px
     flex-direction: column
+    gap: 16px
     @media (min-width: 992px)
         padding: 32px 40px
     .claim-headline
-        font-size: 18px
         text-align: left
-        margin-bottom: 16px
     .claim-button
         text-align: center
-        margin: 32px 0
     .stake-buttons
         display: flex
         text-align: center
@@ -176,7 +174,6 @@ async function claimRewards() {
     flex-direction: column
     gap: 8px
     .rewards-total-headline
-        font-size: 16px
         text-align: left
     .rewards-total-inner
         display: flex