update cycleview, pageview + profileview

src/components/RewardsWrapper.vue

@@ -1,12 +1,9 @@
 <template>
 	<div class="rewards-wrapper">
-		<div class="rewards-header">
-			<div class="rewards-header-title">
-				{{ props.title }}
-			</div>
-			<div class="rewards-header-info">{{ props.info }}</div>
+		<div class="rewards-headline">
+			{{ props.title }}
 		</div>
-		<div class="rewards-sacrifice-wrapper bloodline-border bloodline-border--variant1">
+		<div class="rewards-inner">
 			<div class="rewards-body">
 				<div class="rewards-coin">$BLOOD</div>
 				<div class="rewards-amount">{{ props.amount }}</div>
@@ -26,29 +23,30 @@ const props = defineProps({
 </script>
 
 <style lang="sass">
-.rewards-header
-    font-size: 16px
-    padding: 8px
+.rewards-wrapper
     display: flex
-    @media (min-width: 992px)
-        font-size: 24px
-    .rewards-header-info
-        margin-left: auto
-.rewards-sacrifice-wrapper, .rewards-clan-wrapper
-    display: flex
-    .rewards-body
-        align-self: center
-        .rewards-coin
-            font-size: 16px
-            @media (min-width: 992px)
+    flex-direction: column
+    gap: 8px
+    .rewards-headline
+        font-size: 16px
+    .rewards-inner, .rewards-clan-wrapper
+        display: flex
+        padding: 0 8px 8px 8px
+        border-bottom: 1px solid var(--grey, #858585)
+        .rewards-body
+            align-self: center
+            .rewards-coin
+                font-size: 16px
+                @media (min-width: 992px)
+                    font-size: 24px
+            .rewards-amount
+                text-align: left
                 font-size: 24px
-        .rewards-amount
-            font-size: 24px
-            margin-top: 8px
-            @media (min-width: 992px)
-                font-size: 40px
-                margin-top: 0
-    img
-        margin-left: auto
-        align-self: center
+                margin-top: 8px
+                @media (min-width: 992px)
+                    font-size: 40px
+                    margin-top: 0
+        img
+            margin-left: auto
+            align-self: center
 </style>