Improved contrast of inventory

ui/src/components/HotbarItemContainer.vue

@@ -10,7 +10,7 @@ defineProps<IProps>();
 
 <template>
   <div
-    class="w-28 h-28 p-2 flex flex-col z-0 relative cursor-pointer ease-in-out transition-transform duration-75 transform text-white bg-gray-200/20"
+    class="w-28 h-28 p-2 flex flex-col z-0 relative cursor-pointer ease-in-out transition-transform duration-75 transform text-white bg-gray-800/60"
   >
     <div
       v-if="item instanceof Weapon"

ui/src/components/InventoryContainer.vue

@@ -16,15 +16,15 @@
         <div class="flex flex-col px-4">
           <span class="h-9" />
           <input
-            class="h-12 w-20 bg-gray-200/20 text-center no-spinner border outline-none"
+            class="h-12 w-20 bg-gray-800/60 text-center no-spinner border outline-none"
             type="number"
             v-model="moveAmount"
             min="0"
             max="1000"
             @keyup="enforceMinMax"
           />
           <button
-            class="w-20 h-16 mt-4 border bg-gray-200/20 disabled:bg-black/20 disabled:cursor-default"
+            class="w-20 h-16 mt-4 border bg-gray-800/60 disabled:bg-black/20 disabled:cursor-default"
             @click="modifyWeapon"
             :disabled="!canModifyWeapon"
             v-text="canModifyWeapon ? 'Modify' : 'Can\'t modify'"

ui/src/components/ItemBox.vue

@@ -3,7 +3,7 @@
     <Transition name="fade">
       <div
         v-if="item"
-        class="text-white mb-32 flex flex-col bg-gray-200/20 w-fit p-3"
+        class="text-white mb-32 flex flex-col bg-gray-800/60 w-fit p-3"
       >
         <img
           class="w-28 h-28 object-contain p-3"

ui/src/components/ItemContainer.vue

@@ -23,7 +23,7 @@ function onMouseLeave() {
   <div
     :class="[
       'w-28 h-28 p-2 flex flex-col z-0 relative cursor-pointer ease-in-out transition-transform duration-75 transform text-white',
-      selectedItem === item ? 'bg-gray-400/20 scale-105' : 'bg-gray-200/20',
+      selectedItem === item ? 'bg-gray-400/20 scale-105' : 'bg-gray-800/60',
       hoveredItem === item ? 'z-10' : '',
     ]"
     @mouseenter="onMouseEnter"

ui/src/components/ItemDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="fixed top-0 left-0 z-50" ref="dropdown" v-show="show">
-    <ItemInfo class="p-1 border rounded bg-gray-800/80" />
+    <ItemInfo class="p-1 border rounded bg-gray-800/60" />
   </div>
 </template>
 

ui/src/components/RequiredItemsBox.vue

@@ -4,14 +4,14 @@
       v-if="isVisible"
       class="fixed bottom-0 left-0 right-0 flex justify-center items-center flex-col"
     >
-      <h3 class="text-white text-xl p-1 px-2 mb-2 bg-gray-200/20 w-fit">
+      <h3 class="text-white text-xl p-1 px-2 mb-2 bg-gray-800/60 w-fit">
         Items required:
       </h3>
       <div class="flex justify-center items-center space-x-4">
         <div
           v-for="item in items"
           :key="item.item"
-          class="text-white mb-32 flex flex-col bg-gray-200/20 w-fit p-3"
+          class="text-white mb-32 flex flex-col bg-gray-800/60 w-fit p-3"
         >
           <img
             class="w-28 h-28 object-contain p-3"

ui/src/components/WeaponPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col items-center relative">
     <button
-      class="absolute top-0 right-0 w-8 h-8 bg-gray-200/20 hover:bg-gray-200/40 border"
+      class="absolute top-0 right-0 w-8 h-8 bg-gray-800/60 hover:bg-gray-200/40 border"
       @click="$emit('close-panel')"
     >
       X
@@ -19,7 +19,7 @@
         :alt="weapon.label"
         class="w-max"
       />
-      <div class="relative bg-gray-200/20 w-full h-4">
+      <div class="relative bg-gray-800/60 w-full h-4">
         <div
           :style="{
             width: weapon.info.quality + '%',

ui/src/components/WeightBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-6 mb-4 bg-gray-200/20 relative">
+  <div class="w-full h-6 mb-4 bg-gray-800/60 relative">
     <div class="h-full bg-gray-200/40" ref="bar" />
 
     <span