From 4293ec63b643c8f1b3e5b4bbd9c4602db4a81b04 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Wed, 9 Oct 2024 21:46:12 +0200
Subject: [PATCH] Adjusted global style classes

---
 src/assets/scss/main.scss                        | 16 ++++++----------
 src/components/forms/ChipsInput.vue              |  2 +-
 .../partials/object/ObjectDetails.vue            | 14 +++++++-------
 .../assetManager/partials/object/ObjectList.vue  |  2 +-
 .../partials/sprite/SpriteDetails.vue            | 14 +++++++-------
 .../assetManager/partials/sprite/SpriteList.vue  |  2 +-
 .../assetManager/partials/tile/TileDetails.vue   |  2 +-
 .../assetManager/partials/tile/TileList.vue      |  2 +-
 .../zoneEditor/partials/CreateZone.vue           |  8 ++++----
 .../zoneEditor/partials/ObjectList.vue           |  4 ++--
 .../zoneEditor/partials/SelectedZoneObject.vue   |  2 +-
 .../zoneEditor/partials/TeleportModal.vue        |  8 ++++----
 .../gameMaster/zoneEditor/partials/TileList.vue  |  2 +-
 .../zoneEditor/partials/ZoneSettings.vue         |  8 ++++----
 .../gui/partials/settings/CharacterSettings.vue  |  4 ++--
 src/screens/Characters.vue                       |  2 +-
 src/screens/Login.vue                            | 12 ++++++------
 tailwind.config.js                               |  2 +-
 18 files changed, 51 insertions(+), 55 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index cb35631..cb151d7 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -56,12 +56,8 @@ input {
   }
 }
 
-.input-cyan {
-  @apply py-2 px-2.5 font-titles border border-solid border-cyan bg-white/70 rounded;
-  &:focus,
-  &:focus-visible {
-    @apply outline-2 outline-cyan;
-  }
+.input-field {
+  @apply px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300;
   &.inactive {
     @apply bg-gray-600/50 hover:cursor-not-allowed;
     &::placeholder {
@@ -87,20 +83,20 @@ button {
   @apply text-center;
 
   &.btn-cyan {
-    @apply bg-cyan drop-shadow-20 text-gray-50;
+    @apply bg-cyan text-gray-50 text-base rounded py-3 px-0;
 
     &.active,
     &:hover {
-      @apply bg-cyan/50;
+      @apply bg-cyan-800;
     }
   }
 
   &.btn-red {
-    @apply bg-red drop-shadow-20;
+    @apply bg-red text-gray-50;
 
     &.active,
     &:hover {
-      @apply bg-red/50;
+      @apply bg-red-300;
     }
   }
 
diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index 61f435c..04c70d3 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-wrap items-center input-cyan gap-1">
+  <div class="flex flex-wrap items-center input-field gap-1">
     <div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
       <span class="text-xs">{{ chip }}</span>
       <button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)" aria-label="Remove chip">×</button>
diff --git a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue b/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
index 49104b2..4660a0f 100644
--- a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
@@ -10,15 +10,15 @@
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
         <div class="form-field-full">
           <label for="name">Name</label>
-          <input v-model="objectName" class="input-cyan" type="text" name="name" placeholder="Wall #1" />
+          <input v-model="objectName" class="input-field" type="text" name="name" placeholder="Wall #1" />
         </div>
         <div class="form-field-half">
           <label for="origin-x">Origin X</label>
-          <input v-model="objectOriginX" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
+          <input v-model="objectOriginX" class="input-field" type="number" step="any" name="origin-x" placeholder="Origin X" />
         </div>
         <div class="form-field-half">
           <label for="origin-y">Origin Y</label>
-          <input v-model="objectOriginY" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
+          <input v-model="objectOriginY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
         </div>
         <div class="form-field-full">
           <label for="origin-x">Tags</label>
@@ -26,22 +26,22 @@
         </div>
         <div class="form-field-full">
           <label for="origin-x">Is animated</label>
-          <select v-model="objectIsAnimated" class="input-cyan" name="is-animated">
+          <select v-model="objectIsAnimated" class="input-field" name="is-animated">
             <option :value="false">No</option>
             <option :value="true">Yes</option>
           </select>
         </div>
         <div class="form-field-full">
           <label for="frame-speed">Frame speed</label>
-          <input v-model="objectFrameSpeed" class="input-cyan" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
+          <input v-model="objectFrameSpeed" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
         </div>
         <div class="form-field-half">
           <label for="frame-width">Frame width</label>
-          <input v-model="objectFrameWidth" class="input-cyan" type="number" step="any" name="frame-width" placeholder="Frame width" />
+          <input v-model="objectFrameWidth" class="input-field" type="number" step="any" name="frame-width" placeholder="Frame width" />
         </div>
         <div class="form-field-half">
           <label for="frame-height">Frame height</label>
-          <input v-model="objectFrameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" />
+          <input v-model="objectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
         </div>
         <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
       </form>
diff --git a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
index b02b5b2..6adf5f1 100644
--- a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative p-2.5 flex items-center gap-x-2.5">
-    <input v-model="searchQuery" class="input-cyan flex-grow" placeholder="Search..." @input="handleSearch" />
+    <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
     <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
diff --git a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue b/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
index 267be35..36ee1a4 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
@@ -4,7 +4,7 @@
       <div class="flex flex-wrap gap-2">
         <div class="w-full flex flex-col">
           <label class="mb-1.5 font-titles" for="name">Name</label>
-          <input v-model="spriteName" class="input-cyan" type="text" name="name" placeholder="New sprite" />
+          <input v-model="spriteName" class="input-field" type="text" name="name" placeholder="New sprite" />
         </div>
 
         <div class="w-full flex gap-2 mt-2 pb-4 relative">
@@ -26,33 +26,33 @@
           <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveSprite">
             <div class="form-field-full">
               <label for="action">Action</label>
-              <input v-model="action.action" class="input-cyan" type="text" name="action" placeholder="Action" />
+              <input v-model="action.action" class="input-field" type="text" name="action" placeholder="Action" />
             </div>
             <div class="form-field-half">
               <label for="origin-x">Origin X</label>
-              <input v-model.number="action.originX" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
+              <input v-model.number="action.originX" class="input-field" type="number" step="any" name="origin-x" placeholder="Origin X" />
             </div>
             <div class="form-field-half">
               <label for="origin-y">Origin Y</label>
-              <input v-model.number="action.originY" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
+              <input v-model.number="action.originY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
             </div>
             <div class="form-field-half">
               <label for="is-animated">Is animated</label>
-              <select v-model="action.isAnimated" class="input-cyan" name="is-animated">
+              <select v-model="action.isAnimated" class="input-field" name="is-animated">
                 <option :value="false">No</option>
                 <option :value="true">Yes</option>
               </select>
             </div>
             <div class="form-field-half" v-if="action.isAnimated">
               <label for="is-looping">Is looping</label>
-              <select v-model="action.isLooping" class="input-cyan" name="is-looping">
+              <select v-model="action.isLooping" class="input-field" name="is-looping">
                 <option :value="false">No</option>
                 <option :value="true">Yes</option>
               </select>
             </div>
             <div class="form-field-full" v-if="action.isAnimated">
               <label for="frame-speed">Frame speed</label>
-              <input v-model.number="action.frameSpeed" class="input-cyan" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
+              <input v-model.number="action.frameSpeed" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
             </div>
             <div class="form-field-full">
               <SpriteActionsInput v-model="action.sprites" />
diff --git a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
index 1be0214..558516a 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative p-2.5 flex items-center gap-x-2.5">
-    <input v-model="searchQuery" class="input-cyan flex-grow" placeholder="Search..." @input="handleSearch" />
+    <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
     <button @click.prevent="newButtonClickHandler" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
diff --git a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
index b6b1a84..7a32f9a 100644
--- a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
@@ -10,7 +10,7 @@
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
         <div class="form-field-full">
           <label for="name">Name</label>
-          <input v-model="tileName" class="input-cyan" type="text" name="name" placeholder="Tile #1" />
+          <input v-model="tileName" class="input-field" type="text" name="name" placeholder="Tile #1" />
         </div>
         <div class="form-field-full">
           <label for="origin-x">Tags</label>
diff --git a/src/components/gameMaster/assetManager/partials/tile/TileList.vue b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
index 8ee8d7b..7967b89 100644
--- a/src/components/gameMaster/assetManager/partials/tile/TileList.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative p-2.5 flex items-center gap-x-2.5">
-    <input v-model="searchQuery" class="input-cyan flex-grow" placeholder="Search..." @input="handleSearch" />
+    <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
     <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
diff --git a/src/components/gameMaster/zoneEditor/partials/CreateZone.vue b/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
index 496b434..9bf3db7 100644
--- a/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
+++ b/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
@@ -10,19 +10,19 @@
           <div class="gap-2.5 flex flex-wrap">
             <div class="form-field-full">
               <label for="name">Name</label>
-              <input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
+              <input class="input-field max-w-64" v-model="name" name="name" id="name" />
             </div>
             <div class="form-field-half">
               <label for="name">Width</label>
-              <input class="input-cyan max-w-64" v-model="width" name="name" id="name" type="number" />
+              <input class="input-field max-w-64" v-model="width" name="name" id="name" type="number" />
             </div>
             <div class="form-field-half">
               <label for="name">Height</label>
-              <input class="input-cyan max-w-64" v-model="height" name="name" id="name" type="number" />
+              <input class="input-field max-w-64" v-model="height" name="name" id="name" type="number" />
             </div>
             <div class="form-field-full">
               <label for="name">PVP enabled</label>
-              <select class="input-cyan" name="pvp" id="pvp">
+              <select class="input-field" name="pvp" id="pvp">
                 <option :value="false">No</option>
                 <option :value="true">Yes</option>
               </select>
diff --git a/src/components/gameMaster/zoneEditor/partials/ObjectList.vue b/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
index 8fc5592..7f308d2 100644
--- a/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
@@ -7,11 +7,11 @@
           <div class="w-full flex gap-1.5 flex-row">
             <div>
               <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
-              <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+              <input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
             </div>
             <!--            <div>-->
             <!--              <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>-->
-            <!--              <input v-model="objectDepth" @mousedown.stop class="input-cyan" type="number" name="depth" placeholder="Depth" />-->
+            <!--              <input v-model="objectDepth" @mousedown.stop class="input-field" type="number" name="depth" placeholder="Depth" />-->
             <!--            </div>-->
           </div>
         </div>
diff --git a/src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue b/src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
index 058a6e7..0d7734d 100644
--- a/src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
+++ b/src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
@@ -3,7 +3,7 @@
     <div class="self-end mt-2 flex gap-2">
       <div>
         <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" />
+        <input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-field max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" />
       </div>
       <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" />
diff --git a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue b/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
index bb45963..ecfcf48 100644
--- a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
@@ -10,15 +10,15 @@
           <div class="gap-2.5 flex flex-wrap">
             <div class="form-field-half">
               <label for="positionX">Position X</label>
-              <input class="input-cyan" v-model="toPositionX" name="positionX" id="positionX" type="number" />
+              <input class="input-field" v-model="toPositionX" name="positionX" id="positionX" type="number" />
             </div>
             <div class="form-field-half">
               <label for="positionY">Position Y</label>
-              <input class="input-cyan" v-model="toPositionY" name="positionY" id="positionY" type="number" />
+              <input class="input-field" v-model="toPositionY" name="positionY" id="positionY" type="number" />
             </div>
             <div class="form-field-full">
               <label for="rotation">Rotation</label>
-              <select v-model="toRotation" class="input-cyan" name="rotation" id="rotation">
+              <select v-model="toRotation" class="input-field" name="rotation" id="rotation">
                 <option :value="0">North</option>
                 <option :value="2">East</option>
                 <option :value="4">South</option>
@@ -27,7 +27,7 @@
             </div>
             <div class="form-field-full">
               <label for="toZoneId">Zone to teleport to</label>
-              <select v-model="toZoneId" class="input-cyan" name="toZoneId" id="toZoneId">
+              <select v-model="toZoneId" class="input-field" name="toZoneId" id="toZoneId">
                 <option :value="0">Select zone</option>
                 <option v-for="zone in zoneEditorStore.zoneList" :key="zone.id" :value="zone.id">{{ zone.name }}</option>
               </select>
diff --git a/src/components/gameMaster/zoneEditor/partials/TileList.vue b/src/components/gameMaster/zoneEditor/partials/TileList.vue
index e6c060b..bd51029 100644
--- a/src/components/gameMaster/zoneEditor/partials/TileList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TileList.vue
@@ -7,7 +7,7 @@
           <div class="w-full flex gap-1.5 flex-row">
             <div>
               <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
-              <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+              <input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
             </div>
           </div>
         </div>
diff --git a/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue b/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
index 2777bce..b879139 100644
--- a/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
@@ -10,19 +10,19 @@
           <div class="gap-2.5 flex flex-wrap">
             <div class="form-field-full">
               <label for="name">Name</label>
-              <input class="input-cyan" v-model="name" name="name" id="name" />
+              <input class="input-field" v-model="name" name="name" id="name" />
             </div>
             <div class="form-field-half">
               <label for="name">Width</label>
-              <input class="input-cyan" v-model="width" name="name" id="name" type="number" />
+              <input class="input-field" v-model="width" name="name" id="name" type="number" />
             </div>
             <div class="form-field-half">
               <label for="name">Height</label>
-              <input class="input-cyan" v-model="height" name="name" id="name" type="number" />
+              <input class="input-field" v-model="height" name="name" id="name" type="number" />
             </div>
             <div class="form-field-full">
               <label for="pvp">PVP enabled</label>
-              <select v-model="pvp" class="input-cyan" name="pvp" id="pvp">
+              <select v-model="pvp" class="input-field" name="pvp" id="pvp">
                 <option :value="false">No</option>
                 <option :value="true">Yes</option>
               </select>
diff --git a/src/components/gui/partials/settings/CharacterSettings.vue b/src/components/gui/partials/settings/CharacterSettings.vue
index 13ff820..e3f3ab2 100644
--- a/src/components/gui/partials/settings/CharacterSettings.vue
+++ b/src/components/gui/partials/settings/CharacterSettings.vue
@@ -6,11 +6,11 @@
       <form class="flex gap-2.5 flex-wrap">
         <div class="form-field-half max-w-[300px]">
           <label for="name">Name</label>
-          <input class="input-cyan" :class="{ inactive: !editCharacter }" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" />
+          <input class="input-field" :class="{ inactive: !editCharacter }" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" />
         </div>
         <div class="form-field-half max-w-[300px] relative">
           <label for="class">Class</label>
-          <select class="input-cyan" v-model="characterClass" :class="{ inactive: !editCharacter }" name="class" :disabled="!editCharacter">
+          <select class="input-field" v-model="characterClass" :class="{ inactive: !editCharacter }" name="class" :disabled="!editCharacter">
             <option value="Knight" :selected="characterClass == 'Knight'" :disabled="characterClass == 'Knight'">Knight</option>
             <option value="Paladin" :selected="characterClass == 'Paladin'" :disabled="characterClass == 'Paladin'">Paladin</option>
           </select>
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 7d81465..8056fe4 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -74,7 +74,7 @@
         <form method="post" @submit.prevent="create" class="inline">
           <div class="form-field-full">
             <label for="name">Name</label>
-            <input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
+            <input class="input-field max-w-64" v-model="name" name="name" id="name" />
           </div>
           <button class="btn-cyan py-1.5 px-4 mr-5 min-w-24 inline-block" type="submit">CREATE</button>
         </form>
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index be4871a..bafbd3c 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -13,15 +13,15 @@
           <form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative px-6 py-11">
             <div class="flex flex-col gap-5 p-2 mb-8 relative">
               <div class="w-full grid gap-3 relative">
-                <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 xs:min-w-[350px] min-w-64" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
+                <input class="input-field xs:min-w-[350px] min-w-64" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
                 <div class="relative">
-                  <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 xs:min-w-[350px] min-w-64" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
+                  <input class="input-field xs:min-w-[350px] min-w-64" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
                   <button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
                 </div>
                 <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 py-3 px-0 xs:w-full text-base rounded" type="submit">Play now</button> 
+              <button class="btn-cyan 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">
@@ -39,14 +39,14 @@
           <form v-show="switchForm === 'register'" @submit.prevent="registerFunc" class="relative px-6 py-11">
             <div class="flex flex-col gap-5 p-2 mb-8 relative">
               <div class="w-full grid gap-3 relative">
-                <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 xs:min-w-[350px] min-w-64" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
+                <input class="input-field xs:min-w-[350px] min-w-64" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
                 <div class="relative">
-                  <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 xs:min-w-[350px] min-w-64" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
+                  <input class="input-field xs:min-w-[350px] min-w-64" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
                   <button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
                 </div>
                 <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
               </div>
-              <button class="btn-cyan py-3 px-0 xs:w-full text-base rounded" type="submit">Register now</button> 
+              <button class="btn-cyan xs:w-full" type="submit">Register now</button> 
 
               <!-- Divider shape -->
               <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
diff --git a/tailwind.config.js b/tailwind.config.js
index 2e004a6..419d584 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -61,7 +61,7 @@ export default {
           950: '#0f2324'
         },
         red: {
-          DEFAULT: '#b73f54',
+          DEFAULT: '#e15970',
           100: '#ffefef',
           200: '#e15970',
           300: '#b73f54',