update cycleview, pageview + profileview

src/components/TokenClaim.vue

@@ -1,5 +1,6 @@
 <template>
-	<div class="claim bloodline-border">
+	<div class="claim bloodline-border bloodline-border__thin grey">
+		<div class="claim-headline">You Cycle Rewards</div>
 		<div class="rewards-wrapper" v-if="!isMobile">
 			<rewards-wrapper
 				title="Sacrafice Reward"
@@ -18,16 +19,25 @@
 			/>
 		</div>
 		<div class="rewards-list" v-else>
-			<rewards-wrapper title="Total Sacrafice Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
+			<rewards-wrapper title="Sacrafice Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
 			<rewards-wrapper
-				title="Total Stake Reward"
+				title="Staking Bonus"
 				coin="$BLOOD"
-				amount="0"
+				amount="0 todo"
 				info="max: 312m"
 				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper title="Clan Bonus" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
-			<rewards-wrapper title="Total Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
+		</div>
+		<div class="rewards-total-wrapper">
+			<div class="rewards-total-headline">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">todo</div>
+				</div>
+				<img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" />
+			</div>
 		</div>
 		<div class="claim-button">
 			<div v-if="activeRound === currentRound" class="btn btn-immortal btn--disabled">Cycle Active</div>
@@ -72,10 +82,14 @@ async function claimRewards() {
 <style lang="sass">
 .claim
     display: flex
-    padding: 32px 20px
+    padding: 12px
     flex-direction: column
     @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
@@ -89,4 +103,29 @@ async function claimRewards() {
     margin-bottom: 16px
 .rewards-divider
     text-align: center
+
+.rewards-total-wrapper
+    display: flex
+    flex-direction: column
+    gap: 8px
+    .rewards-total-headline
+        font-size: 16px
+        text-align: left
+    .rewards-total-inner
+        display: flex
+        justify-content: space-between
+        text-align: left
+        .rewards-left
+            display: flex
+            flex-direction: column
+            gap: 8px
+            .name
+                font-size: 16px
+            .amount
+                font-size: 24px
+        .rewards-right
+            img
+                height: 49px
+                width: 49px
+                border-radius: 50%
 </style>