From 8a4b57daef8a1941308c0f67e02bd93e1ef8978b Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Thu, 11 Jul 2024 19:16:03 +0200
Subject: [PATCH] Updated Tailwind config and styling

---
 src/assets/scss/main.scss                     |  6 ++---
 src/components/gui/Chat.vue                   |  2 +-
 src/components/gui/Hud.vue                    |  4 ++--
 src/components/gui/Menu.vue                   |  8 +++----
 src/components/utilities/Modal.vue            |  6 ++---
 .../utilities/assetManager/AssetManager.vue   |  6 ++---
 .../assetManager/partials/ObjectList.vue      |  4 ++--
 .../assetManager/partials/TileList.vue        |  4 ++--
 .../utilities/zoneEditor/Toolbar.vue          | 22 +++++++++----------
 src/screens/Characters.vue                    |  4 ++--
 src/screens/Login.vue                         |  8 +++----
 tailwind.config.js                            |  3 +--
 12 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index ae84f94..745079c 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -59,7 +59,7 @@ input {
 }
 
 .input-cyan {
-  @apply py-2 px-2.5 font-titles border border-solid border-cyan bg-white bg-opacity-80 rounded;
+  @apply py-2 px-2.5 font-titles border border-solid border-cyan bg-white/80 rounded;
   &:focus,
   &:focus-visible {
     @apply outline-2 outline-cyan;
@@ -70,7 +70,7 @@ button {
   @apply text-center;
 
   &.btn-cyan {
-    @apply bg-cyan bg-opacity-50 border border-solid border-white border-opacity-25 rounded drop-shadow-20;
+    @apply bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20;
 
     &.active,
     &:hover {
@@ -79,7 +79,7 @@ button {
   }
 
   &.btn-bordeaux {
-    @apply bg-bordeaux bg-opacity-50 border border-solid border-white border-opacity-25 rounded drop-shadow-20;
+    @apply bg-bordeaux/50 border border-solid border-white/25 rounded drop-shadow-20;
 
     &.active,
     &:hover {
diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index 14b7a42..3845a18 100644
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@@ -1,5 +1,5 @@
 <template>
   <div class="chat-wrapper w-full h-full flex justify-start items-center">
-    <input class="bg-[calc(100%_-_25px)_center] max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white bg-opacity-85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
+    <input class="bg-[calc(100%_-_25px)_center] max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white/85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
   </div>
 </template>
diff --git a/src/components/gui/Hud.vue b/src/components/gui/Hud.vue
index d79c141..8c50f63 100644
--- a/src/components/gui/Hud.vue
+++ b/src/components/gui/Hud.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="hud-wrapper relative left-0 w-[310px] h-[84px]">
-    <div class="absolute w-[54px] h-[54px] bg-white bg-opacity-80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] left-0 z-20">
+    <div class="absolute w-[54px] h-[54px] bg-white/80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] left-0 z-20">
       <img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%]" draggable="false" src="/assets/avatar/default/head.png" />
     </div>
     <div class="hud-bg absolute top-0 left-[30px] 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>
@@ -24,7 +24,7 @@
 
   <!-- TODO: Replace socket.character with other (selected) player's -->
   <div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">
-    <div class="absolute w-[54px] h-[54px] bg-white bg-opacity-80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] right-0 z-20">
+    <div class="absolute w-[54px] h-[54px] bg-white/80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] right-0 z-20">
       <img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] scale-x-[-1]" draggable="false" src="/assets/avatar/default/head.png" />
     </div>
     <div class="hud-bg absolute top-0 right-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
diff --git a/src/components/gui/Menu.vue b/src/components/gui/Menu.vue
index 81d8a3a..2945a86 100644
--- a/src/components/gui/Menu.vue
+++ b/src/components/gui/Menu.vue
@@ -5,7 +5,7 @@
         <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Chat</p>
         <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
       </div>
-      <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
         <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/chat.png" />
       </a>
     </li>
@@ -14,7 +14,7 @@
         <p class="absolute w-full bottom-0 m-0 text-sm leading-6">World</p>
         <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
       </div>
-      <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
         <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/world.png" />
       </a>
     </li>
@@ -23,7 +23,7 @@
         <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Users</p>
         <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
       </div>
-      <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
         <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/users.png" />
       </a>
     </li>
@@ -32,7 +32,7 @@
         <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Inventory</p>
         <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
       </div>
-      <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
         <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
       </a>
     </li>
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index a8cbc68..4912cc2 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <div v-if="isModalOpenRef" class="fixed bg-opacity-80 bg-gray-300 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg" :style="modalStyle">
+    <div v-if="isModalOpenRef" class="fixed bg-gray-300/80 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg 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">
         <slot name="modalHeader" />
         <div class="flex gap-2.5">
@@ -9,9 +9,9 @@
           </button>
         </div>
       </div>
-      <div class="overflow-auto flex-grow">
+      <div class="overflow-auto grow">
         <slot name="modalBody" />
-        <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]" @mousedown="startResize" />
+        <img v-if="isResizable" 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-[50px] flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
         <slot name="modalFooter" />
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index e4ec3a8..737ea8d 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -2,11 +2,11 @@
   <div class="flex h-full w-full relative">
     <div class="w-[15%] flex flex-col relative">
       <!-- Asset Categories -->
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan bg-opacity-80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
+      <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-[1px] bg-cyan-200"></div>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan bg-opacity-80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
+      <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-[1px] bg-cyan-200"></div>
       </a>
@@ -27,7 +27,7 @@
       <ObjectList v-if="selectedCategory === 'objects'" />
     </div>
 
-    <button class="left-[calc(50%_-_60px)] absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan bg-opacity-50 p-0 hover:bg-opacity-80" v-show="hasScrolled" @click="toTop">
+    <button class="left-[calc(50%_-_60px)] absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
       <img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
     </button>
     <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index be331f1..3d15820 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
-    <label for="upload-asset" class="bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload object(s)
     </label>
     <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </div>
-  <a class="relative p-2.5 cursor-pointer" :class="{ 'bg-cyan bg-opacity-80': assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in filteredObjects" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)">
+  <a class="relative p-2.5 cursor-pointer" :class="{ 'bg-cyan/80': assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in filteredObjects" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)">
     <div class="flex items-center gap-2.5">
       <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
         <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 2de7bc8..1e35dc8 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
-    <label for="upload-asset" class="bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload tile(s)
     </label>
@@ -8,7 +8,7 @@
     <div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div>
   </div>
   <div>
-    <a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap w-full" :class="{ 'bg-cyan bg-opacity-80': assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
+    <a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap w-full" :class="{ 'bg-cyan/80': assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
       <div class="flex items-center gap-2.5">
         <img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
         <span class="">{{ tile }}</span>
diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue
index 5077a52..7252d40 100644
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/src/components/utilities/zoneEditor/Toolbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex justify-center">
-    <div class="toolbar fixed top-0 left-0 right-0 flex bg-gray-300 bg-opacity-80 solid border-solid border-b-2 border-b-cyan border-t-0 border-r-0 border-l-0 text-gray-50 p-1.5 px-3 p min-w-[90%] h-10">
+    <div class="toolbar fixed top-0 left-0 right-0 flex bg-gray-300/80 solid border-solid border-b-2 border-b-cyan border-t-0 border-r-0 border-l-0 text-gray-50 p-1.5 px-3 p min-w-[90%] h-10">
       <div 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="zoneEditorStore.setTool('move')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2': zoneEditorStore.tool !== 'move' }">(M)</span>
@@ -15,20 +15,20 @@
               {{ 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 top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
+            <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300/80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('tile')">
                 Tile
                 <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('object')">
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('object')">
                 Object
                 <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('teleport')">
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
                 Teleport
                 <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('blocking tile')">Blocking tile</span>
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
             </div>
           </div>
         </button>
@@ -42,20 +42,20 @@
               {{ 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 top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectEraserOpen">
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
+            <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300/80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectEraserOpen">
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('tile')">
                 Tile
                 <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('object')">
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('object')">
                 Object
                 <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('teleport')">
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
                 Teleport
                 <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('blocking tile')">Blocking tile</span>
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
             </div>
           </div>
         </button>
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 6ca095a..c6d3898 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -19,7 +19,7 @@
           <div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-[65%] h-[3px] bg-white rounded-[3px] left-1/2 bottom-[-15px] translate-x-[-50%] transition-all ease-in-out duration-300"></div>
         </div>
 
-        <div class="character new-character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-gray-50 bg-opacity-50 bg-no-repeat shadow-character" v-if="characters.length < 4">
+        <div class="character new-character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-gray-50/50 bg-no-repeat shadow-character" v-if="characters.length < 4">
           <button class="h-full w-full py-[40px] flex flex-col justify-between" @click="isModalOpen = true">
             <div class="filler"></div>
             <img class="w-[100px] h-[100px] m-auto" draggable="false" src="/assets/icons/plus-icon.svg" />
@@ -33,7 +33,7 @@
 
       <div class="button-wrapper flex gap-[30px]" v-if="!isLoading">
         <button
-          class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan disabled:hover:bg-opacity-50 disabled:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
+          class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
           :disabled="!selected_character"
           @click="select_character()"
         >
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index 1a994d4..f3799a6 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -7,12 +7,12 @@
       <form @submit.prevent="loginFunc">
         <div class="my-[80px] mx-0 w-full flex flex-col gap-[24px]">
           <div class="w-full grid gap-[15px]">
-            <div class="flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
-              <label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
+            <div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
+              <label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
               <input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
             </div>
-            <div class="flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
-              <label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
+            <div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
+              <label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
               <input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
             </div>
           </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 334344e..c7cc2f9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [],
-  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     fontFamily: {
       'titles': ['Poppins', 'serif'],