From 92103cea9eb58aff352fbdf52a49ed4308db8ef4 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Fri, 14 Jun 2024 22:14:33 +0200
Subject: [PATCH] More global styling, improved modal form styling

---
 src/assets/scss/_variables.scss               |  4 ++
 src/assets/scss/main.scss                     | 23 +++++++++-
 src/components/utilities/Modal.vue            | 42 ++++++++++++-------
 .../utilities/zoneEditor/ZoneSettings.vue     | 26 ++++++------
 src/screens/Characters.vue                    |  6 ++-
 5 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index b7811f5..256e983 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -13,3 +13,7 @@ $cyan: #368f8b;
 $dark-cyan: #376362;
 $light-cyan: #00b3b3;
 $green: #09ad19;
+
+// Fonts
+$titles: 'Poppins', serif;
+$default: 'Inter', serif;
\ No newline at end of file
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 1353186..fd97fb7 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -23,7 +23,7 @@ h5,
 h6,
 button,
 a {
-  font-family: 'Poppins', serif;
+  font-family: $titles;
   color: $white;
   font-weight: 500;
 }
@@ -32,9 +32,10 @@ p,
 span,
 li,
 label {
-  font-family: 'Inter', serif;
+  font-family: $default;
   color: $white;
 }
+
 button,
 a {
   font-weight: 500;
@@ -45,6 +46,24 @@ button,
 input {
   border: none;
   background-color: transparent;
+
+  &[type="number"] {
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+  &[type=number]::-webkit-inner-spin-button,
+  &[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+  }
+}
+
+.input-cyan {
+  border: 1px solid $cyan;
+  background-color: rgba($white, 0.8);
+  &:focus, &:focus-visible {
+    outline: $cyan auto 2px;
+  }
 }
 
 button {
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 9ae5b30..0cc2098 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -275,23 +275,37 @@ function handleResize() {
       display: inline;
 
       .form-fields {
-        display: flex;
-        flex-direction: column;
-        margin-bottom: 20px;
+        .form-field {
+          display: flex;
+          flex-direction: column;
+          margin-bottom: 20px;
 
-        label {
-          margin-bottom: 10px;
-          font-family: 'Poppins';
-        }
+          label {
+            margin-bottom: 5px;
+            font-family: $titles;
+          }
 
-        input {
-          max-width: 250px;
-          font-family: 'Poppins';
-          border: 1px solid $cyan;
-          border-radius: 5px;
-          background-color: rgba($white, 0.8);
-          padding: 8px 10px;
+          input {
+            max-width: 250px;
+            font-family: $titles;
+            border-radius: 5px;
+            padding: 8px 10px;
+          }
+
+          &.two-col {
+            flex-direction: row;
+            gap: 20px;
+            .field {
+              display: flex;
+              flex-direction: column;
+              margin-bottom: 0;
+              input {
+                max-width: 105px;
+              }
+            }
+          }
         }
+        
       }
     }
   }
diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue
index 0066a8e..c789a63 100644
--- a/src/components/utilities/zoneEditor/ZoneSettings.vue
+++ b/src/components/utilities/zoneEditor/ZoneSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()">
+  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-height="440">
     <template #modalHeader>
       <h3 class="modal-title">Zone settings</h3>
     </template>
@@ -7,21 +7,23 @@
     <template #modalBody>
       <form method="post" @submit.prevent="" class="modal-form">
         <div class="form-fields">
-          <div>
+          <div class="form-field">
             <label for="name">Name</label>
-            <input v-model="name" name="name" id="name" />
+            <input class="input-cyan" v-model="name" name="name" id="name" />
           </div>
-          <div>
-            <label for="name">Width</label>
-            <input v-model="width" name="name" id="name" type="number" />
+          <div class="form-field two-col">
+            <div class="field">
+              <label for="name">Width</label>
+              <input class="input-cyan" v-model="width" name="name" id="name" type="number" />
+            </div>
+            <div class="field">
+              <label for="name">Height</label>
+              <input class="input-cyan" v-model="height" name="name" id="name" type="number" />
+            </div>
           </div>
-          <div>
-            <label for="name">Height</label>
-            <input v-model="height" name="name" id="name" type="number" />
-          </div>
-          <div>
+          <div class="form-field">
             <label for="name">PVP enabled</label>
-            <input name="name" id="name" />
+            <input class="input-cyan" name="name" id="name" />
           </div>
         </div>
       </form>
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 3712dab..64e545c 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -46,8 +46,10 @@
     <template #modalBody>
       <form method="post" @submit.prevent="create" class="modal-form">
         <div class="form-fields">
-          <label for="name">Name</label>
-          <input v-model="name" name="name" id="name" />
+          <div class="form-field">
+            <label for="name">Name</label>
+            <input class="input-cyan" v-model="name" name="name" id="name" />
+          </div>
         </div>
         <div class="submit">
           <button class="btn-cyan" type="submit">CREATE</button>