update contracts+ desktop version

src/components/TokenInput.vue

@@ -6,7 +6,11 @@
 				v-model="props.modelValue"
 				:placeholder="0"
 			/>
+			<div class="sacrifice-logo" v-if="props.logo">
+				<img :src="props.logo" alt="vampir" />
+			</div>
 		</div>
+
 		<div class="value-adder">
 			<slot class="value-adder" name="message"></slot>
 		</div>
@@ -16,6 +20,7 @@
 <script setup>
 const props = defineProps({
 	modelValue: Number,
+	logo: String,
 });
 
 const emit = defineEmits(["update:modelValue"]);
@@ -25,7 +30,8 @@ const emit = defineEmits(["update:modelValue"]);
 .sarcrifice-from-input
     display: flex
     margin-bottom: 8px
-    // height: 60px
+    @media (min-width: 992px)
+        height: 60px
     input
         width: 100%
         height: 45px
@@ -33,8 +39,18 @@ const emit = defineEmits(["update:modelValue"]);
         border-radius: 16px
         padding: 0 16px
         @media (min-width: 992px)
-            font-size: 32px
+            font-size: 24px
             height: auto
+    .sacrifice-logo
+        margin-left: 16px
+        img
+            width: 45px
+            height: 45px
+            border-radius: 50%
+            pointer-events: none
+            @media (min-width: 992px)
+                height: 100%
+                width: auto
 .value-adder
     display: flex
     gap: 8px
@@ -46,7 +62,6 @@ const emit = defineEmits(["update:modelValue"]);
         border-color: transparent
         border-style: solid
         &:hover,&:active, &:focus
-            color: var(--white)
-            border-color: var(--white)
-            background-color: var(--black)
+            background-color: var(--grey-light)
+            cursor: pointer
 </style>