Added new colors, adjusted login styling

public/assets/icons/eye.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00004 0C11.5948 0 14.5854 2.58651 15.2124 6C14.5854 9.41347 11.5948 12 8.00004 12C4.40525 12 1.4146 9.41347 0.787598 6C1.4146 2.58651 4.40525 0 8.00004 0ZM8.00004 10.6667C10.8238 10.6667 13.24 8.70133 13.8516 6C13.24 3.29869 10.8238 1.33333 8.00004 1.33333C5.17624 1.33333 2.75998 3.29869 2.14836 6C2.75998 8.70133 5.17624 10.6667 8.00004 10.6667ZM8.00004 9C6.34316 9 5.00001 7.65687 5.00001 6C5.00001 4.34315 6.34316 3 8.00004 3C9.65684 3 11 4.34315 11 6C11 7.65687 9.65684 9 8.00004 9ZM8.00004 7.66667C8.92051 7.66667 9.66671 6.92047 9.66671 6C9.66671 5.07953 8.92051 4.33333 8.00004 4.33333C7.07957 4.33333 6.33334 5.07953 6.33334 6C6.33334 6.92047 7.07957 7.66667 8.00004 7.66667Z" fill="#808080"/>
+</svg>

src/assets/scss/main.scss

@@ -26,14 +26,14 @@ h5,
 h6,
 button,
 a {
-  @apply font-default text-gray-500 font-medium m-0;
+  @apply font-default text-gray-200 font-medium m-0;
 }
 
 p,
 span,
 li,
 label {
-  @apply font-default text-gray-500;
+  @apply font-default text-gray-200;
 }
 
 button,
@@ -87,7 +87,7 @@ button {
   @apply text-center;
 
   &.btn-cyan {
-    @apply bg-cyan drop-shadow-20 text-white;
+    @apply bg-cyan drop-shadow-20 text-gray-50;
 
     &.active,
     &:hover {
@@ -95,12 +95,12 @@ button {
     }
   }
 
-  &.btn-bordeaux {
+  &.btn-red {
-    @apply bg-bordeaux drop-shadow-20;
+    @apply bg-red drop-shadow-20;
 
     &.active,
     &:hover {
-      @apply bg-bordeaux/50;
+      @apply bg-red/50;
     }
   }
 

src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue

@@ -3,7 +3,7 @@
     <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
       <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-bordeaux px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button>
+      <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>
     <div class="m-2.5 p-2.5 block">

src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue

@@ -9,7 +9,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-bordeaux px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</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>
       </div>
@@ -19,7 +19,7 @@
         <template #header>
           <div class="flex justify-between items-center">
             {{ action.action }}
-            <button class="btn-bordeaux px-4 py-1.5 min-w-24" type="button" @click.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Delete</button>
+            <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Delete</button>
           </div>
         </template>
         <template #content>

src/components/gameMaster/assetManager/partials/tile/TileDetails.vue

@@ -3,7 +3,7 @@
     <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
       <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-bordeaux px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
+      <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>
     <div class="m-2.5 p-2.5 block">

src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue

@@ -5,7 +5,7 @@
         <label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
         <input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-cyan max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" />
       </div>
-      <button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-4">
+      <button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
         <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
       </button>
       <button @mousedown.stop @click="handleRotate" class="btn-cyan py-1.5 px-4">Rotate</button>

src/components/gameMaster/zoneEditor/partials/ZoneList.vue

@@ -17,7 +17,7 @@
             <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-bordeaux py-0.5 px-2.5 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
+                <button class="btn-red py-0.5 px-2.5 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>

src/screens/Characters.vue

@@ -46,7 +46,7 @@
 
       <div class="button-wrapper flex gap-8" v-if="!isLoading">
         <button
-          class="btn-bordeaux 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-cyan/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" />

src/screens/Login.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="relative">
-    <div class="bg-gradient-to-r from-gray-50 to-transparent w-1/2 h-dvh absolute right-0 top-0 z-10"></div>
+    <div class="bg-gradient-to-r from-gray-900 to-transparent w-1/2 h-dvh absolute right-0 top-0 z-10"></div>
     <div class="bg-[url('/assets/login/login-bg.png')] w-1/2 h-dvh absolute right-0 top-0 bg-no-repeat bg-cover bg-center"></div>
-    <div class="bg-gray-50 z-20 w-1/2 h-dvh relative">
+    <div class="bg-gray-900 z-20 w-1/2 h-dvh relative">
       <div class="w-full h-dvh flex items-center justify-center flex-col px-8">
         <img src="/assets/login/nq-logo-v1.png" class="mb-10" />
         <div class="relative">
@@ -10,25 +10,25 @@
           <img src="/assets/login/login-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" />
 
           <!-- Login Form -->
-          <form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative p-10">
+          <form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative px-6 py-11">
-            <div class="flex flex-col gap-6 p-2 mb-8 relative">
+            <div class="flex flex-col gap-5 p-2 mb-8 relative">
-              <div class="w-full grid gap-2 mb-9 relative">
+              <div class="w-full grid gap-3 relative">
-                <input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
+                <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 min-w-[350px]" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
-                <input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
+                <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
                 <span v-if="gameStore.loginMessage" class="text-red-200 text-sm absolute top-full mt-1">{{ gameStore.loginMessage }}</span>
               </div>
-              <button class="text-right text-cyan-50 text-base">Forgot password?</button>
+              <button class="text-right text-cyan-300 text-base">Forgot password?</button>
-              <button class="btn-cyan py-2 px-0 w-full text-xl" type="submit">Play now</button> 
+              <button class="btn-cyan py-3 px-0 w-full text-base rounded" 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">
-                <div class="w-0.5 h-full bg-white/30"></div>
+                <div class="w-0.5 h-full bg-gray-300"></div>
-                <div class="w-36 h-full bg-white/30"></div>
+                <div class="w-36 h-full bg-gray-300"></div>
-                <div class="w-0.5 h-full bg-white/30"></div>
+                <div class="w-0.5 h-full bg-gray-300"></div>
               </div>
             </div>
             <div class="pt-8">
-              <p class="m-0 text-center">Don't have an account? <button ref="toggleRegister" class="text-cyan-50 text-base p-0" @click.prevent="switchForm = 'register'">Sign up</button></p>
+              <p class="m-0 text-center">Don't have an account? <button ref="toggleRegister" class="text-cyan-300 text-base p-0" @click.prevent="switchForm = 'register'">Sign up</button></p>
             </div>
           </form>
 
@@ -37,8 +37,8 @@
             <div class="flex flex-col gap-6 p-2 mb-8 relative">
               <div class="w-full grid gap-2 mb-9 relative">
                 <input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
-                <input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
+                <input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px] bg-[url('/assets/icons/eye.svg')] bg-no-repeat" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
-                <span v-if="gameStore.loginMessage" class="text-red-200 text-sm absolute top-full mt-1">{{ gameStore.loginMessage }}</span>
+                <span v-if="gameStore.loginMessage" class="text-red-200 text-xs absolute top-full mt-1">{{ gameStore.loginMessage }}</span>
               </div>
               <button class="text-right text-cyan-50 text-base">Forgot password?</button>
               <button class="btn-cyan py-2 px-0 w-full text-xl" type="submit">Register</button> 

tailwind.config.js

@@ -49,17 +49,23 @@ export default {
         'character': '0 4px 30px rgba(0, 0, 0, 0.1)',
       },
       colors: {
-        red: {
+        cyan: {
-          DEFAULT: '#d50000',
+          DEFAULT: '#0D6d69',
-          50: '#d50000',
+          50: '#f3faf8',
-          100: '#b30000',
+          100: '#D7F0EC',
-          200: '#F44747'
+          200: '#b1dfd9',
+          300: '#80c8c1',
+          600: '#0D6D69',
+          800: '#244b4c',
+          900: '#204040',
+          950: '#0f2324'
         },
-        bordeaux: {
+        red: {
-          DEFAULT: '#800020',
+          DEFAULT: '#b73f54',
-          50: '#cc0033',
+          100: '#ffefef',
-          100: '#800020',
+          200: '#e15970',
-          200: '#4c0000'
+          300: '#b73f54',
+          400: '#332426'
         },
         blue: {
           DEFAULT: '#00c2ff'
@@ -70,20 +76,20 @@ export default {
         purple: {
           DEFAULT: '#9841e6'
         },
-        cyan: {
-          DEFAULT: '#0D6D69',
-          50: '#5AA39F',
-          100: '#0D6D69',
-          200: '#376362'
-        },
         gray: {
-          DEFAULT: '#282828',
+          DEFAULT: '#262626',
-          50: '#0C0C0C',
+          50: '#fcfcfd',
-          100: '#282828',
+          100: '#f7f7f8',
-          200: '#454442',
+          150: '#f1f1f3',
-          300: '#888888',
+          175: '#e4e4e7',
-          500: '#B4B4B4',
+          200: '#999999',
-          600: '#B1B2B5'
+          300: '#808080',
+          400: '#666666',
+          500: '#4d4d4d',
+          600: '#333333',
+          700: '#262626',
+          800: '#1a1a1a',
+          900: '#0d0d0d'
         }
       }
     },