update desktop resize

src/components/RewardsWrapper.vue

@@ -4,16 +4,16 @@
 			{{ props.title }}
 		</div>
 		<div class="rewards-inner">
-			<div class="rewards-body">
-				<div class="rewards-coin low-mid-text">$BLOOD</div>
-				<div class="rewards-amount">{{ props.amount }}</div>
-			</div>
-			<img class="bloodline-token" :src="props.image" alt="vampir" />
+			<token-name-price name="$BLOOD" :price="props.amount"></token-name-price>
+			<token-logo :img="props.image" :alt="'vampire'"></token-logo>
 		</div>
 	</div>
 </template>
 
 <script setup>
+import TokenNamePrice from "@/components/TokenNamePrice.vue";
+import TokenLogo from "@/components/TokenLogo.vue";
+
 const props = defineProps({
 	title: String,
 	info: String,
@@ -27,20 +27,12 @@ const props = defineProps({
     display: flex
     flex-direction: column
     gap: 8px
-    .rewards-inner, .rewards-clan-wrapper
+    padding: 6px 0
+    .rewards-inner
         display: flex
-        padding: 0 8px 8px 8px
+        padding: 0 6px 6px 6px
         border-bottom: 1px solid var(--grey, #858585)
-        .rewards-body
-            align-self: center
-            .rewards-amount
-                text-align: left
-                font-size: 24px
-                margin-top: 8px
-                @media (min-width: 992px)
-                    font-size: 40px
-                    margin-top: 0
-        img
-            margin-left: auto
-            align-self: center
+        justify-content: space-between
+        height: 56px
+        box-sizing: content-box
 </style>