update contracts+ desktop version

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, provide, ref } from "vue";
+import { onMounted, onUnmounted, provide, ref, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { useRoute, useRouter } from "vue-router";
 
@@ -56,6 +56,17 @@ onUnmounted(() => {
 	clientClientEvent.value();
 	console.log("unsubscribe");
 });
+
+watch(showPanel, (newValue, oldValue) => {
+	console.log("document.body", document.body);
+	console.log("newValue", newValue);
+	if (newValue) {
+		document.body.classList.add("sideoutpanel-open");
+	} else {
+		document.body.classList.remove("sideoutpanel-open");
+	}
+});
+
 const handleWindowSizeChange = () => {
 	isMobile.value = isMobileFunc();
 	// your code
@@ -139,7 +150,7 @@ onMounted(async () => {
 				<div class="header">
 					<img alt="logo" class="logo" src="/assets/img/vampir.png" />
 				</div>
-				<div class="subheader low-mid-text">
+				<div class="subheader toast-header">
 					Success!<br />
 					You turned your meme into:
 				</div>
@@ -147,7 +158,7 @@ onMounted(async () => {
 					<div class="token-amount number-mobile">{{ tokenStore.activeToken.rewards }}</div>
 					<div class="token-name">$Blood</div>
 				</div>
-				<div class="info low-mid-text">
+				<div class="info toast-body">
 					You can claim once the current cycle is finished and your clan bonus was calculated
 				</div>
 			</div>
@@ -179,7 +190,7 @@ onMounted(async () => {
 			</div>
 		</div>
 	</div>
-	<div class="mobile-navigation-bar" v-if="isMobile && walletStore.connected">
+	<div class="mobile-navigation-bar" v-if="isMobile">
 		<div @click="changeRoute('home')" :class="{ active: route.name === 'home' }">
 			<font-awesome-icon icon="fa-droplet" />
 		</div>
@@ -193,10 +204,6 @@ onMounted(async () => {
 </template>
 
 <style lang="sass">
-header
-    margin-bottom: 100px
-    @media (min-width: 992px)
-        margin-bottom: 200px
 
 .footer
     height: auto
@@ -235,7 +242,12 @@ header
                 .social-bloodline-badge-icon
                     font-size: 16px
 .main
-    padding-top: 24px
+    // padding-top: 24px
+    margin-top: 82px
+    padding: 24px 0
+    @media (min-width: 992px)
+        margin-top: 128px
+        padding: 80px 0
     &.mobile
         &.no-scroll
             overflow: hidden
@@ -263,13 +275,15 @@ header
 .modal-overlay
     background-color: rgb(15, 15, 15, 0.7)
     height: 100vh
+    width: 100vw
     position: fixed
     left: 0
     bottom: 0
-    width: 100%
     z-index: 10
+    @media (min-width: 992px)
+        background-color: unset
     .modal-card
-        min-width: 342px
+        width: 342px
         text-align: center
         position: absolute
         top: 50%
@@ -279,6 +293,11 @@ header
         background: var(--midnight-black, #0F0F0F)
         z-index: 100
         gap: 16px
+        @media (min-width: 992px)
+            top: 142px
+            right: 24px
+            left: unset
+            transform: unset
         .body
             display: flex
             flex-direction: column
@@ -291,4 +310,20 @@ header
             img
                 width: 74px
                 height: 74px
+
+body::-webkit-scrollbar
+  width: 10px
+
+body::-webkit-scrollbar-track
+  background: #202020
+
+body::-webkit-scrollbar-thumb
+  background: #202020
+
+body:hover::-webkit-scrollbar-thumb
+  background: grey
+
+
+.toast-header, .toast-body
+    font-size: 16px
 </style>