From be3cbf77bf5e8da0aa856aa188e86a287dc1c9d1 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Wed, 16 Oct 2024 20:47:29 +0200
Subject: [PATCH] Added global empty btn styling, adjusted and WIP modal
 styling

---
 public/assets/icons/resize-icon.svg           |  2 +-
 src/assets/scss/main.scss                     |  9 +++++++
 src/components/gameMaster/GmPanel.vue         |  2 +-
 src/components/gameMaster/GmTools.vue         |  2 +-
 .../gameMaster/assetManager/AssetManager.vue  | 20 ++++++++--------
 .../partials/object/ObjectDetails.vue         |  2 +-
 .../partials/object/ObjectList.vue            |  4 ++--
 .../partials/sprite/SpriteDetails.vue         |  2 +-
 .../partials/sprite/SpriteList.vue            |  4 ++--
 .../partials/tile/TileDetails.vue             |  2 +-
 .../assetManager/partials/tile/TileList.vue   |  4 ++--
 .../zoneEditor/partials/CreateZone.vue        |  2 +-
 .../zoneEditor/partials/ObjectList.vue        |  2 +-
 .../zoneEditor/partials/TeleportModal.vue     |  2 +-
 .../zoneEditor/partials/TileList.vue          |  2 +-
 .../zoneEditor/partials/ZoneList.vue          |  8 +++----
 .../zoneEditor/partials/ZoneSettings.vue      |  2 +-
 src/components/gui/UserPanel.vue              |  4 ++--
 .../gui/partials/CharacterScreen.vue          |  2 +-
 src/components/gui/partials/Equipment.vue     | 18 +++++++-------
 src/components/gui/partials/Inventory.vue     |  6 ++---
 src/components/gui/partials/Settings.vue      | 12 +++++-----
 .../utilities/ConfirmationModal.vue           |  2 +-
 src/components/utilities/Modal.vue            | 23 ++++++++++--------
 src/components/utilities/Notifications.vue    |  2 +-
 src/screens/Characters.vue                    | 24 ++++++++++---------
 26 files changed, 89 insertions(+), 75 deletions(-)

diff --git a/public/assets/icons/resize-icon.svg b/public/assets/icons/resize-icon.svg
index abbecc7..7aa9bc2 100644
--- a/public/assets/icons/resize-icon.svg
+++ b/public/assets/icons/resize-icon.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 15L15 21M21 8L8 21" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 15L15 21M21 8L8 21" stroke="#4d4d4d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
\ No newline at end of file
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 8a44b36..08c3837 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -104,6 +104,15 @@ button {
     }
   }
 
+  &.btn-empty {
+    @apply text-gray-50 border-2 border-solid border-gray-500 text-base rounded py-2.5;
+
+    &.active,
+    &:hover {
+      @apply bg-gray-700 border-gray-700;
+    }
+  }
+
   &:hover {
     @apply cursor-pointer;
   }
diff --git a/src/components/gameMaster/GmPanel.vue b/src/components/gameMaster/GmPanel.vue
index cdde6af..b003e8b 100644
--- a/src/components/gameMaster/GmPanel.vue
+++ b/src/components/gameMaster/GmPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :can-full-screen="true">
     <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-gray-300">GM Panel</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">GM Panel</h3>
       <div class="flex gap-1.5 flex-wrap">
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">General</button>
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>
diff --git a/src/components/gameMaster/GmTools.vue b/src/components/gameMaster/GmTools.vue
index 26727cb..565062e 100644
--- a/src/components/gameMaster/GmTools.vue
+++ b/src/components/gameMaster/GmTools.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="modalWidth" :modal-height="modalHeight" :modal-position-x="posXY.x" :modal-position-y="posXY.y">
     <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-gray-300">GM tools</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">GM tools</h3>
     </template>
     <template #modalBody>
       <div class="content flex flex-col gap-2.5 m-4 h-20">
diff --git a/src/components/gameMaster/assetManager/AssetManager.vue b/src/components/gameMaster/assetManager/AssetManager.vue
index ef692f5..24c5274 100644
--- a/src/components/gameMaster/assetManager/AssetManager.vue
+++ b/src/components/gameMaster/assetManager/AssetManager.vue
@@ -4,38 +4,38 @@
       <!-- Asset Categories -->
       <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
         <span>Tiles</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
         <span>Objects</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
         <span>Sprites</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer">
         <span>Items</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer">
         <span>NPC's</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer">
         <span>Characters</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer">
         <span>Mounts</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer">
         <span>Pets</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
     </div>
-    <div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div>
+    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
 
     <!-- Assets list -->
     <div class="overflow-auto h-full w-4/12 flex flex-col relative">
@@ -44,7 +44,7 @@
       <SpriteList v-if="selectedCategory === 'sprites'" />
     </div>
 
-    <div class="absolute w-px bg-cyan-200 h-full top-0 left-1/2"></div>
+    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/2"></div>
 
     <!-- Asset details -->
     <div class="flex w-1/2 after:hidden flex-col relative overflow-auto">
diff --git a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue b/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
index 4660a0f..55afcaf 100644
--- a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
@@ -4,7 +4,7 @@
       <div class="filler"></div>
       <img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
       <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button>
-      <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+      <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
     </div>
     <div class="m-2.5 p-2.5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
diff --git a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
index f2d7422..4d1d51b 100644
--- a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
@@ -7,7 +7,7 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
       </svg>
     </label>
-    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
@@ -18,7 +18,7 @@
           </div>
           <span>{{ object.name }}</span>
         </div>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
     </div>
     <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
diff --git a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue b/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
index 36ee1a4..ed4733c 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
@@ -10,7 +10,7 @@
         <div class="w-full flex gap-2 mt-2 pb-4 relative">
           <button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
           <button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
-          <div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-cyan-200"></div>
+          <div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-gray-500"></div>
         </div>
       </div>
 
diff --git a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
index e33c606..df19e12 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
@@ -6,7 +6,7 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
       </svg>
     </button>
-    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
@@ -14,7 +14,7 @@
         <div class="flex items-center gap-2.5">
           <span>{{ sprite.name }}</span>
         </div>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
     </div>
     <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
diff --git a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
index 7a32f9a..604da92 100644
--- a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
@@ -4,7 +4,7 @@
       <div class="filler"></div>
       <img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
       <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
-      <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+      <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
     </div>
     <div class="m-2.5 p-2.5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
diff --git a/src/components/gameMaster/assetManager/partials/tile/TileList.vue b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
index 2fd2234..6949f91 100644
--- a/src/components/gameMaster/assetManager/partials/tile/TileList.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
@@ -7,7 +7,7 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
       </svg>
     </label>
-    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
@@ -18,7 +18,7 @@
           </div>
           <span>{{ tile.name }}</span>
         </div>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
     </div>
     <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
diff --git a/src/components/gameMaster/zoneEditor/partials/CreateZone.vue b/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
index a8d4747..3909bb8 100644
--- a/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
+++ b/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="400" :is-resizable="false">
     <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-gray-300">Create new zone</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">Create new zone</h3>
     </template>
 
     <template #modalBody>
diff --git a/src/components/gameMaster/zoneEditor/partials/ObjectList.vue b/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
index 7bf784d..6bb3992 100644
--- a/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
@@ -2,7 +2,7 @@
   <Teleport to="body">
     <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)">
       <template #modalHeader>
-        <h3 class="text-lg text-gray-300">Objects</h3>
+        <h3 class="text-lg text-white">Objects</h3>
         <div class="flex">
           <div class="w-full flex gap-1.5 flex-row">
             <div>
diff --git a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue b/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
index d21feb5..ec8d76e 100644
--- a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false">
     <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-gray-300">Teleport settings</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
     </template>
 
     <template #modalBody>
diff --git a/src/components/gameMaster/zoneEditor/partials/TileList.vue b/src/components/gameMaster/zoneEditor/partials/TileList.vue
index 5c2d930..5ebf7b7 100644
--- a/src/components/gameMaster/zoneEditor/partials/TileList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TileList.vue
@@ -2,7 +2,7 @@
   <Teleport to="body">
     <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)">
       <template #modalHeader>
-        <h3 class="text-lg text-gray-300">Tiles</h3>
+        <h3 class="text-lg text-white">Tiles</h3>
         <div class="flex">
           <div class="w-full flex gap-1.5 flex-row">
             <div>
diff --git a/src/components/gameMaster/zoneEditor/partials/ZoneList.vue b/src/components/gameMaster/zoneEditor/partials/ZoneList.vue
index e947bdb..9777283 100644
--- a/src/components/gameMaster/zoneEditor/partials/ZoneList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ZoneList.vue
@@ -4,7 +4,7 @@
   <Teleport to="body">
     <Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="300" :modal-height="360">
       <template #modalHeader>
-        <h3 class="text-lg text-gray-300">Zones</h3>
+        <h3 class="text-lg text-white">Zones</h3>
       </template>
       <template #modalBody>
         <div class="my-4 mx-auto">
@@ -13,14 +13,14 @@
             <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
           </div>
           <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zoneEditorStore.zoneList" :key="zone.id">
-            <div class="absolute left-0 top-0 w-full h-px bg-cyan-200" v-if="index === 0"></div>
+            <div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
             <div class="flex gap-3 items-center w-full" @click="() => loadZone(zone.id)">
               <span>{{ zone.name }}</span>
               <span class="ml-auto gap-1 flex">
-                <button class="btn-red py-0.5 px-2.5 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
+                <button class="btn-red w-11 h-11 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
               </span>
             </div>
-            <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+            <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
           </div>
         </div>
       </template>
diff --git a/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue b/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
index 71791d6..1e8a7e8 100644
--- a/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350">
     <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-gray-300">Zone settings</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
     </template>
 
     <template #modalBody>
diff --git a/src/components/gui/UserPanel.vue b/src/components/gui/UserPanel.vue
index 244f87e..db635a2 100644
--- a/src/components/gui/UserPanel.vue
+++ b/src/components/gui/UserPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.uiSettings.isUserPanelOpen">
-    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
-      <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-cyan-200">
+    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-700 border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
+      <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-gray-500">
         <h3 class="m-0 font-medium shrink-0">Game menu</h3>
         <div class="hidden sm:flex gap-1.5 flex-wrap">
           <button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
diff --git a/src/components/gui/partials/CharacterScreen.vue b/src/components/gui/partials/CharacterScreen.vue
index fae73ca..7df78bc 100644
--- a/src/components/gui/partials/CharacterScreen.vue
+++ b/src/components/gui/partials/CharacterScreen.vue
@@ -39,7 +39,7 @@
           </div>
         </div>
       </div>
-      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
+      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
     </div>
     <div class="m-4">
       <h4 class="font-medium text-lg max-w-[375px]">Character stats</h4>
diff --git a/src/components/gui/partials/Equipment.vue b/src/components/gui/partials/Equipment.vue
index 1414fb8..7205f3f 100644
--- a/src/components/gui/partials/Equipment.vue
+++ b/src/components/gui/partials/Equipment.vue
@@ -13,54 +13,54 @@
         <div class="flex flex-col gap-3 mx-5 mt-2">
           <div class="flex gap-3 justify-center">
             <!-- Helmet -->
-            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
               <img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
             </div>
 
             <!-- Head charm -->
-            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
               <img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
             </div>
           </div>
 
           <div class="flex gap-3 justify-center">
             <!-- Bracers -->
-            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
               <img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
             </div>
 
             <!-- Chestplate -->
-            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
               <img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
             </div>
 
             <!-- Primary Weapon -->
-            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
               <img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
             </div>
           </div>
 
           <div class="flex gap-3 justify-center">
             <!-- Legs -->
-            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
               <img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
             </div>
 
             <div class="flex flex-col gap-3">
               <!-- Belt/pouch -->
-              <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
+              <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
                 <img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
               </div>
 
               <!-- Boots -->
-              <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
+              <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
                 <img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
+      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
     </div>
     <div class="m-4">
       <h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4>
diff --git a/src/components/gui/partials/Inventory.vue b/src/components/gui/partials/Inventory.vue
index 30c28c7..80d23a1 100644
--- a/src/components/gui/partials/Inventory.vue
+++ b/src/components/gui/partials/Inventory.vue
@@ -3,14 +3,14 @@
     <div class="m-4 relative">
       <h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4>
       <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
-        <div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
+        <div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
       </div>
-      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
+      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
     </div>
     <div class="m-4">
       <h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4>
       <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
-        <div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
+        <div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
       </div>
     </div>
   </div>
diff --git a/src/components/gui/partials/Settings.vue b/src/components/gui/partials/Settings.vue
index 500e884..6462610 100644
--- a/src/components/gui/partials/Settings.vue
+++ b/src/components/gui/partials/Settings.vue
@@ -4,26 +4,26 @@
       <!-- Settings Categories -->
       <div class="relative p-2.5">
         <h3>Settings</h3>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </div>
       <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'">
         <span>Character</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'account' }" @click.stop="settingCategory = 'account'">
         <span>Account</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'">
         <span>Audio</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'video' }" @click.stop="settingCategory = 'video'">
         <span>Video</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
     </div>
-    <div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div>
+    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
 
     <!-- Assets list -->
     <div class="overflow-auto h-full w-10/12 flex flex-col relative">
diff --git a/src/components/utilities/ConfirmationModal.vue b/src/components/utilities/ConfirmationModal.vue
index 53de92a..f379fc3 100644
--- a/src/components/utilities/ConfirmationModal.vue
+++ b/src/components/utilities/ConfirmationModal.vue
@@ -40,7 +40,7 @@ const modalOpened = ref(props.modalOpened)
 <template>
   <Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190">
     <template #modalHeader>
-      <div class="text-gray-300">
+      <div class="text-white">
         <slot name="modalHeader"></slot>
       </div>
     </template>
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index fcdd8e1..0b4531f 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -1,8 +1,11 @@
 <template>
   <Teleport to="body">
-    <div v-if="isModalOpenRef" class="fixed bg-gray border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
-      <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500">
-        <slot name="modalHeader" />
+    <div v-if="isModalOpenRef" class="fixed border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
+      <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
+        <div class="rounded-t-xl absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90"></div>
+        <div class="relative z-10">
+          <slot name="modalHeader" />
+        </div>
         <div class="flex gap-2.5">
           <button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
             <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/full-screen.svg'" class="w-full h-full invert" />
@@ -12,12 +15,12 @@
           </button>
         </div>
       </div>
-      <div class="overflow-hidden grow">
-        <slot name="modalBody" />
-        <img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" />
-      </div>
-      <div v-if="$slots.modalFooter" class="px-5 min-h-12 flex justify-end gap-7.5 items-center border-solid border-t border-gray-500">
-        <slot name="modalFooter" />
+      <div class="overflow-hidden grow relative">
+        <div class="rounded-b-xl absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover opacity-90"></div>
+        <div class="relative z-10 h-full">
+          <slot name="modalBody" />
+        </div>
+        <img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute z-10 bottom-0 right-0 w-5 h-5 cursor-nwse-resize" @mousedown="startResize" />
       </div>
     </div>
   </Teleport>
@@ -84,7 +87,7 @@ let startHeight = 0
 let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
 
 const modalStyle = computed(() => ({
-  borderRadius: isFullScreen.value ? '0' : '10px',
+  borderRadius: isFullScreen.value ? '0' : '12px',
   top: isFullScreen.value ? '0' : `${y.value}px`,
   left: isFullScreen.value ? '0' : `${x.value}px`,
   width: isFullScreen.value ? '100vw' : `${width.value}px`,
diff --git a/src/components/utilities/Notifications.vue b/src/components/utilities/Notifications.vue
index 9e316e7..8c0fbd8 100644
--- a/src/components/utilities/Notifications.vue
+++ b/src/components/utilities/Notifications.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal v-for="notification in gameStore.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
     <template #modalHeader v-if="notification.title">
-      <h3 class="m-0 font-medium shrink-0 text-gray-300">{{ notification.title }}</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">{{ notification.title }}</h3>
     </template>
     <template #modalBody v-if="notification.message">
       <p class="m-4">{{ notification.message }}</p>
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 8517c58..326558e 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -11,8 +11,8 @@
           class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character"
           :class="{ active: selected_character == character.id }"
         >
-          <img src="/assets/ui-box-outer.svg" class="absolute w-full h-full max-lg:hidden" />
-          <img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)] max-lg:hidden" />
+          <img src="/assets/ui-box-outer.svg" class="absolute w-full h-full" />
+          <img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
           <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label class="font-bold absolute left-1/2 top-4 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
 
@@ -66,21 +66,23 @@
   </div>
 
   <!-- CREATE CHARACTER MODAL -->
-  <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
+  <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false" :modal-width="430" :modal-height="275">
     <template #modalHeader>
-      <h3 class="m-0 font-medium text-gray-300">Create your character</h3>
+      <h3 class="m-0 font-medium text-white">Create your character</h3>
     </template>
 
     <template #modalBody>
-      <div class="m-4 character-form">
-        <form method="post" @submit.prevent="create" class="inline">
+      <div class="p-4 h-[calc(100%_-_32px)]">
+        <form method="post" @submit.prevent="create" class="h-full flex flex-col justify-between">
           <div class="form-field-full">
-            <label for="name">Name</label>
-            <input class="input-field max-w-64" v-model="name" name="name" id="name" />
+            <label for="name">Nickname</label>
+            <input class="input-field" v-model="name" name="name" id="name" placeholder="Enter a nickname.." />
+          </div>
+          <div class="grid grid-flow-col justify-stretch gap-4">
+            <button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isModalOpen = false">CANCEL</button>
+            <button class="btn-cyan py-1.5 px-4 inline-block" type="submit">CREATE</button>
           </div>
-          <button class="btn-cyan py-1.5 px-4 mr-5 min-w-24 inline-block" type="submit">CREATE</button>
         </form>
-        <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="isModalOpen = false">CANCEL</button>
       </div>
     </template>
   </Modal>
@@ -88,7 +90,7 @@
   <!-- DELETE CHARACTER MODAL -->
   <ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
     <template #modalHeader>
-      <h3 class="m-0 font-medium text-gray-300">Deleting character</h3>
+      <h3 class="m-0 font-medium text-white">Deleting character</h3>
     </template>
     <template #modalBody>
       You are about to delete <span class="font-extrabold">{{ deletingCharacter.name }}</span