From 474de8b14a4c24aa48f1fef53f6166b4d3395efb Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 12 Oct 2024 21:32:41 +0200
Subject: [PATCH] Changed global styling so its readable

Placeholder changes before new design is implemented
---
 public/assets/shapes/hud-shape-empty.svg      |  2 +-
 .../assets/shapes/select-screen-bg-shape.svg  |  2 +-
 src/assets/scss/main.scss                     |  2 +-
 src/components/gameMaster/GmPanel.vue         |  2 +-
 src/components/gameMaster/GmTools.vue         |  4 +--
 .../zoneEditor/partials/CreateZone.vue        |  2 +-
 .../zoneEditor/partials/ObjectList.vue        |  2 +-
 .../zoneEditor/partials/TeleportModal.vue     |  2 +-
 .../zoneEditor/partials/TileList.vue          |  2 +-
 .../zoneEditor/partials/Toolbar.vue           | 16 ++++++------
 .../zoneEditor/partials/ZoneList.vue          |  2 +-
 .../zoneEditor/partials/ZoneSettings.vue      |  2 +-
 src/components/gui/Chat.vue                   |  2 +-
 src/components/gui/Hud.vue                    | 10 +++----
 .../utilities/ConfirmationModal.vue           |  4 +--
 src/components/utilities/Modal.vue            |  6 ++---
 src/components/utilities/Notifications.vue    |  2 +-
 src/screens/Characters.vue                    | 26 ++++++++++---------
 src/screens/Login.vue                         |  2 +-
 19 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/public/assets/shapes/hud-shape-empty.svg b/public/assets/shapes/hud-shape-empty.svg
index 15761e8..f8fa62b 100644
--- a/public/assets/shapes/hud-shape-empty.svg
+++ b/public/assets/shapes/hud-shape-empty.svg
@@ -1 +1 @@
-<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e9942e24-155b-8096-8004-7eaff9882cd6" viewBox="0 0 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9942e24-155b-8096-8004-7eaff9882cd6"><g class="fills" id="fills-e9942e24-155b-8096-8004-7eaff9882cd6"><path d="M3.485,8.722C7.089,3.457,13.144,0.000,20.000,0.000L270.000,0.000C281.038,0.000,290.000,8.962,290.000,20.000L290.000,67.000C290.000,78.038,281.038,87.000,270.000,87.000L20.000,87.000C13.166,87.000,7.128,83.565,3.520,78.329C21.157,76.589,35.000,61.648,35.000,43.500C35.000,25.390,21.216,10.475,3.485,8.722ZM0.000,67.000L0.000,20.000"/></g><g id="strokes-e9942e24-155b-8096-8004-7eaff9882cd6" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0"><use href="#stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0"/></clipPath><path d="M3.485,8.722C7.089,3.457,13.144,0.000,20.000,0.000L270.000,0.000C281.038,0.000,290.000,8.962,290.000,20.000L290.000,67.000C290.000,78.038,281.038,87.000,270.000,87.000L20.000,87.000C13.166,87.000,7.128,83.565,3.520,78.329C21.157,76.589,35.000,61.648,35.000,43.500C35.000,25.390,21.216,10.475,3.485,8.722ZM0.000,67.000L0.000,20.000" id="stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0" clip-path="url('#inner-stroke-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0')"/></g></g></g></svg>
\ No newline at end of file
+<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e9942e24-155b-8096-8004-7eaff9882cd6" viewBox="0 0 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9942e24-155b-8096-8004-7eaff9882cd6"><g class="fills" id="fills-e9942e24-155b-8096-8004-7eaff9882cd6"><path d="M3.485,8.722C7.089,3.457,13.144,0.000,20.000,0.000L270.000,0.000C281.038,0.000,290.000,8.962,290.000,20.000L290.000,67.000C290.000,78.038,281.038,87.000,270.000,87.000L20.000,87.000C13.166,87.000,7.128,83.565,3.520,78.329C21.157,76.589,35.000,61.648,35.000,43.500C35.000,25.390,21.216,10.475,3.485,8.722ZM0.000,67.000L0.000,20.000"/></g><g id="strokes-e9942e24-155b-8096-8004-7eaff9882cd6" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0"><use href="#stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0"/></clipPath><path d="M3.485,8.722C7.089,3.457,13.144,0.000,20.000,0.000L270.000,0.000C281.038,0.000,290.000,8.962,290.000,20.000L290.000,67.000C290.000,78.038,281.038,87.000,270.000,87.000L20.000,87.000C13.166,87.000,7.128,83.565,3.520,78.329C21.157,76.589,35.000,61.648,35.000,43.500C35.000,25.390,21.216,10.475,3.485,8.722ZM0.000,67.000L0.000,20.000" id="stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0" style="fill: none; stroke-width: 6; stroke: rgb(77 77 77); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0" clip-path="url('#inner-stroke-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0')"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/shapes/select-screen-bg-shape.svg b/public/assets/shapes/select-screen-bg-shape.svg
index ffe951f..9e48c2d 100644
--- a/public/assets/shapes/select-screen-bg-shape.svg
+++ b/public/assets/shapes/select-screen-bg-shape.svg
@@ -1 +1 @@
-<svg width="1508.086" xmlns="http://www.w3.org/2000/svg" height="1511.251" id="screenshot-0d120e2a-8725-8061-8004-79728483f7ea" viewBox="-201.784 -208.012 1508.086 1511.251" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-0d120e2a-8725-8061-8004-79728483f7ea" width="800px" height="800px" rx="0" ry="0" style="opacity: 0.3; fill: rgb(0, 0, 0);"><g id="shape-0d120e2a-8725-8061-8004-79728484b3fe"><g class="fills" id="fills-0d120e2a-8725-8061-8004-79728484b3fe"><path d="M1190.359,745.690L1043.367,575.945L1133.504,630.603C1099.180,585.722,1047.978,532.622,975.722,469.519L780.783,401.898L896.468,404.538C851.234,371.382,797.068,339.090,738.130,311.073L601.350,337.338L689.349,289.039C627.425,263.088,562.143,241.922,497.713,229.160C430.172,215.674,363.453,211.534,303.512,221.641L314.753,151.382C271.664,177.012,239.130,209.992,214.226,251.017L204.390,177.710C166.181,212.950,148.095,250.172,143.131,301.343C69.092,307.974,-2.300,327.925,-73.861,347.005L-63.628,384.898C361.675,238.903,753.109,407.667,987.467,615.054L960.305,643.506C749.259,458.743,490.332,358.712,193.406,380.541C209.110,415.226,228.858,447.126,251.288,474.785L371.998,430.671L277.417,504.449C294.635,521.771,312.591,536.670,331.111,548.765L396.081,470.998L358.366,564.253C377.625,573.924,397.183,580.217,416.674,582.837C534.164,599.232,652.310,618.566,782.785,703.535L773.618,601.955L831.163,737.792C852.261,754.489,876.370,771.191,897.168,782.701L861.169,684.190L960.409,811.519C976.589,817.512,992.991,822.477,1008.953,826.486C1066.083,840.287,1120.015,842.594,1157.256,819.002C1175.975,807.393,1189.205,786.963,1190.791,762.853C1191.080,756.933,1190.907,750.762,1190.359,745.690ZZ" style="fill: rgb(54, 143, 139);"/></g></g></g></svg>
\ No newline at end of file
+<svg width="1508.086" xmlns="http://www.w3.org/2000/svg" height="1511.251" id="screenshot-0d120e2a-8725-8061-8004-79728483f7ea" viewBox="-201.784 -208.012 1508.086 1511.251" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-0d120e2a-8725-8061-8004-79728483f7ea" width="800px" height="800px" rx="0" ry="0" style="opacity: 0.3; fill: rgb(0, 0, 0);"><g id="shape-0d120e2a-8725-8061-8004-79728484b3fe"><g class="fills" id="fills-0d120e2a-8725-8061-8004-79728484b3fe"><path d="M1190.359,745.690L1043.367,575.945L1133.504,630.603C1099.180,585.722,1047.978,532.622,975.722,469.519L780.783,401.898L896.468,404.538C851.234,371.382,797.068,339.090,738.130,311.073L601.350,337.338L689.349,289.039C627.425,263.088,562.143,241.922,497.713,229.160C430.172,215.674,363.453,211.534,303.512,221.641L314.753,151.382C271.664,177.012,239.130,209.992,214.226,251.017L204.390,177.710C166.181,212.950,148.095,250.172,143.131,301.343C69.092,307.974,-2.300,327.925,-73.861,347.005L-63.628,384.898C361.675,238.903,753.109,407.667,987.467,615.054L960.305,643.506C749.259,458.743,490.332,358.712,193.406,380.541C209.110,415.226,228.858,447.126,251.288,474.785L371.998,430.671L277.417,504.449C294.635,521.771,312.591,536.670,331.111,548.765L396.081,470.998L358.366,564.253C377.625,573.924,397.183,580.217,416.674,582.837C534.164,599.232,652.310,618.566,782.785,703.535L773.618,601.955L831.163,737.792C852.261,754.489,876.370,771.191,897.168,782.701L861.169,684.190L960.409,811.519C976.589,817.512,992.991,822.477,1008.953,826.486C1066.083,840.287,1120.015,842.594,1157.256,819.002C1175.975,807.393,1189.205,786.963,1190.791,762.853C1191.080,756.933,1190.907,750.762,1190.359,745.690ZZ" style="fill: rgb(13 109 105);"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index cb151d7..c0c7b6c 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -83,7 +83,7 @@ button {
   @apply text-center;
 
   &.btn-cyan {
-    @apply bg-cyan text-gray-50 text-base rounded py-3 px-0;
+    @apply bg-cyan text-gray-50 text-base rounded py-3;
 
     &.active,
     &:hover {
diff --git a/src/components/gameMaster/GmPanel.vue b/src/components/gameMaster/GmPanel.vue
index f39e048..cdde6af 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">GM Panel</h3>
+      <h3 class="m-0 font-medium shrink-0 text-gray-300">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 923f3c5..26727cb 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">GM tools</h3>
+      <h3 class="m-0 font-medium shrink-0 text-gray-300">GM tools</h3>
     </template>
     <template #modalBody>
       <div class="content flex flex-col gap-2.5 m-4 h-20">
@@ -20,7 +20,7 @@ import { onMounted, ref } from 'vue'
 const zoneEditorStore = useZoneEditorStore()
 const gameStore = useGameStore()
 const modalWidth = ref(200)
-const modalHeight = ref(160)
+const modalHeight = ref(180)
 
 let posXY = ref({ x: 0, y: 0 })
 
diff --git a/src/components/gameMaster/zoneEditor/partials/CreateZone.vue b/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
index 9bf3db7..a8d4747 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">Create new zone</h3>
+      <h3 class="m-0 font-medium shrink-0 text-gray-300">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 7f308d2..7bf784d 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">Objects</h3>
+        <h3 class="text-lg text-gray-300">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 ecfcf48..d21feb5 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">Teleport settings</h3>
+      <h3 class="m-0 font-medium shrink-0 text-gray-300">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 bd51029..5c2d930 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">Tiles</h3>
+        <h3 class="text-lg text-gray-300">Tiles</h3>
         <div class="flex">
           <div class="w-full flex gap-1.5 flex-row">
             <div>
diff --git a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue b/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
index f14bbcc..6c201f1 100644
--- a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="flex justify-center p-5">
-    <div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray-300/80 solid border-solid border-2 border-cyan text-gray-50 p-1.5 px-3 h-10">
+    <div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10">
       <div ref="clickOutsideElement" class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
-        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="handleClick('move')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'move' }" @click="handleClick('move')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
         </button>
 
         <div class="w-px bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handleClick('pencil')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handleClick('pencil')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
           <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
             <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }">
               {{ zoneEditorStore.drawMode }}
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
             </div>
-            <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
+            <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
               <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('tile')">
                 Tile
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
@@ -35,14 +35,14 @@
 
         <div class="w-px bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="handleClick('eraser')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="handleClick('eraser')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
           <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
             <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
               {{ zoneEditorStore.eraserMode }}
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
             </div>
-            <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectEraserOpen">
+            <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
               <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setEraserMode('tile')">
                 Tile
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
@@ -62,7 +62,7 @@
 
         <div class="w-px bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'paint' }" @click="handleClick('paint')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'paint' }" @click="handleClick('paint')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'paint' }">(B)</span>
         </button>
 
@@ -71,7 +71,7 @@
         <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone"><img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="ml-2.5">(Z)</span></button>
       </div>
 
-      <div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray-300/80 solid border-solid border-2 border-cyan text-gray-50 p-1.5 px-3 h-10 space-x-2">
+      <div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
         <button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleZoneListModal()">Load</button>
         <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="zoneEditorStore.zone">Save</button>
         <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="zoneEditorStore.zone">Clear</button>
diff --git a/src/components/gameMaster/zoneEditor/partials/ZoneList.vue b/src/components/gameMaster/zoneEditor/partials/ZoneList.vue
index da53f61..e947bdb 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">Zones</h3>
+        <h3 class="text-lg text-gray-300">Zones</h3>
       </template>
       <template #modalBody>
         <div class="my-4 mx-auto">
diff --git a/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue b/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
index b879139..6e16945 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="300" :modal-height="350" :is-resizable="false">
     <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0">Zone settings</h3>
+      <h3 class="m-0 font-medium shrink-0 text-gray-300">Zone settings</h3>
     </template>
 
     <template #modalBody>
diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index df5eab6..5c4db26 100644
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@@ -8,7 +8,7 @@
     </div>
     <div class="w-full flex">
       <input
-        class="w-full h-12 rounded-lg text-lg px-4 py-0 bg-gray-300/80 border-2 border-solid border-cyan-200 text-gray-50 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-[right_25px_center] bg-[length:30px] focus:outline-none focus:ring-0 focus:border-cyan-800"
+        class="w-full h-12 rounded-lg text-lg px-4 py-0 bg-gray border-2 border-solid border-gray-500 text-gray-300 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-[right_25px_center] bg-[length:30px] focus:outline-none focus:ring-0 focus:border-cyan-800"
         placeholder="Type something..."
         v-model="message"
         @keypress="handleKeyPress"
diff --git a/src/components/gui/Hud.vue b/src/components/gui/Hud.vue
index eb62590..02189e4 100644
--- a/src/components/gui/Hud.vue
+++ b/src/components/gui/Hud.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="hud-wrapper relative left-0 w-[310px] h-[84px]">
-    <div class="absolute w-14 h-14 bg-white/80 rounded-full border-3 border-solid border-white top-1/2 -translate-y-1/2 left-0 z-20">
+    <div class="absolute w-14 h-14 bg-gray rounded-full border-3 border-solid border-gray-500 top-1/2 -translate-y-1/2 left-0 z-20">
       <img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" draggable="false" src="/assets/avatar/default/head.png" />
     </div>
     <div class="hud-bg absolute top-0 left-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-top bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
     <div class="absolute top-0 left-8 w-[280px] h-[84px] z-10 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
       <div class="h-16 flex flex-col items-end py-2.5 pl-12 pr-5">
         <div class="w-full flex items-center justify-between mb-1.5">
-          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm">{{ gameStore.character.name }}</span>
-          <span class="text-sm">lvl. {{ gameStore.character.level }}</span>
+          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm text-white">{{ gameStore.character.name }}</span>
+          <span class="text-sm text-white">lvl. {{ gameStore.character.level }}</span>
         </div>
         <div class="w-full flex items-center justify-between">
-          <label class="text-sm" for="hp">HP</label>
+          <label class="text-sm text-white" for="hp">HP</label>
           <progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>
         </div>
         <div class="w-full flex items-center justify-between">
-          <label class="text-sm" for="mp">MP</label>
+          <label class="text-sm text-white" for="mp">MP</label>
           <progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-blue" id="mp" :value="gameStore.character.mana" max="100">{{ gameStore.character.mana }}%</progress>
         </div>
       </div>
diff --git a/src/components/utilities/ConfirmationModal.vue b/src/components/utilities/ConfirmationModal.vue
index e8715af..53de92a 100644
--- a/src/components/utilities/ConfirmationModal.vue
+++ b/src/components/utilities/ConfirmationModal.vue
@@ -40,12 +40,12 @@ 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-white">
+      <div class="text-gray-300">
         <slot name="modalHeader"></slot>
       </div>
     </template>
     <template #modalBody>
-      <div class="text-white h-full">
+      <div class="text-gray-300 h-full">
         <div class="flex h-full flex-col justify-between">
           <span class="p-2">
             <slot name="modalBody"></slot>
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 850fef9..da64d27 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
-    <div v-if="isModalOpenRef" class="fixed bg-gray-300/80 border-solid border-2 border-cyan-200 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-cyan-200">
+    <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 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">
@@ -16,7 +16,7 @@
         <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-cyan-200">
+      <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>
     </div>
diff --git a/src/components/utilities/Notifications.vue b/src/components/utilities/Notifications.vue
index ffbf519..9e316e7 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">{{ notification.title }}</h3>
+      <h3 class="m-0 font-medium shrink-0 text-gray-300">{{ 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 8056fe4..636d5f8 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-gray-300 relative">
+  <div class="bg-gray-900 relative">
     <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
     <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
       <div class="filler"></div>
@@ -8,14 +8,16 @@
         <div
           v-for="character in characters"
           :key="character.id"
-          class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character"
+          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/login/login-box-outer.svg" class="absolute w-full h-full max-lg:hidden" />
+          <img src="/assets/login/login-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)] max-lg:hidden" />
           <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-5 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>
+          <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>
 
           <button
-            class="delete bg-red w-8 h-8 p-[3px] rounded-full absolute -right-4 top-0 -translate-y-1/2 z-10 border-2 border-solid border-white hover:bg-red-100"
+            class="delete bg-red w-8 h-8 p-[3px] rounded-full absolute -right-4 top-0 -translate-y-1/2 z-10 border-2 border-solid border-white hover:bg-red-300"
             @click="
               () => {
                 deletingCharacter = character
@@ -28,15 +30,15 @@
           <div class="sprite-container flex flex-col items-center m-auto">
             <img class="drop-shadow-20" draggable="false" src="/assets/avatar/default/0.png" />
           </div>
-          <span class="absolute bottom-5 w-full text-center translate-y-1/2 z-10 drop-shadow-text">Lvl. {{ character.level }}</span>
-          <div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-4/6 h-[3px] bg-white rounded-[3px] left-1/2 -bottom-4 -translate-x-1/2 transition-all ease-in-out duration-300"></div>
+          <span class="absolute bottom-6 w-full text-center translate-y-1/2 z-10">Lvl. {{ character.level }}</span>
+          <div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-4/6 h-[3px] bg-gray-500 rounded-[3px] left-1/2 -bottom-4 -translate-x-1/2 transition-all ease-in-out duration-300"></div>
         </div>
 
-        <div class="character new-character first:ml-auto mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-gray-50/50 bg-no-repeat shadow-character" v-if="characters.length < 4">
+        <div class="character new-character first:ml-auto mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-gray-500/50 bg-no-repeat shadow-character" v-if="characters.length < 4">
           <button class="h-full w-full py-10 flex flex-col justify-between" @click="isModalOpen = true">
             <div class="filler"></div>
             <img class="w-24 h-24 m-auto" draggable="false" src="/assets/icons/plus-icon.svg" />
-            <span class="self-center text-base absolute bottom-5 w-full text-center translate-y-1/2 z-10 drop-shadow-text">Create new</span>
+            <span class="self-center text-base absolute bottom-5 w-full text-center translate-y-1/2 z-10">Create new</span>
           </button>
         </div>
       </div>
@@ -46,13 +48,13 @@
 
       <div class="button-wrapper flex gap-8" v-if="!isLoading">
         <button
-          class="btn-red py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
+          class="btn-red py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-red/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
           @click.stop="gameStore.disconnectSocket()"
         >
           <img class="h-8 drop-shadow-20 rotate-180" draggable="false" src="/assets/icons/arrow.svg" alt="Logout icon" />
         </button>
         <button
-          class="btn-cyan py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
+          class="btn-cyan py-2 px-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan-800 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
           :disabled="!selected_character"
           @click="select_character()"
         >
@@ -66,7 +68,7 @@
   <!-- CREATE CHARACTER MODAL -->
   <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
     <template #modalHeader>
-      <h3 class="m-0 font-medium">Create your character</h3>
+      <h3 class="m-0 font-medium text-gray-300">Create your character</h3>
     </template>
 
     <template #modalBody>
@@ -86,7 +88,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">Deleting character</h3>
+      <h3 class="m-0 font-medium text-gray-300">Deleting character</h3>
     </template>
     <template #modalBody>
       You are about to delete <span class="font-extrabold">{{ deletingCharacter.name }}</span
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index bafbd3c..1d31220 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -21,7 +21,7 @@
                 <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
               </div>
               <button class="text-right text-cyan-300 text-base">Forgot password?</button>
-              <button class="btn-cyan xs:w-full" type="submit">Play now</button> 
+              <button class="btn-cyan px-0 xs:w-full" type="submit">Play now</button> 
 
               <!-- Divider shape -->
               <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">