More global styling, improved modal form styling

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;

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 {

src/components/utilities/Modal.vue

@@ -275,23 +275,37 @@ function handleResize() {
       display: inline;
 
       .form-fields {
+        .form-field {
           display: flex;
           flex-direction: column;
           margin-bottom: 20px;
 
           label {
-          margin-bottom: 10px;
-          font-family: 'Poppins';
+            margin-bottom: 5px;
+            font-family: $titles;
           }
 
           input {
             max-width: 250px;
-          font-family: 'Poppins';
-          border: 1px solid $cyan;
+            font-family: $titles;
             border-radius: 5px;
-          background-color: rgba($white, 0.8);
             padding: 8px 10px;
           }
+
+          &.two-col {
+            flex-direction: row;
+            gap: 20px;
+            .field {
+              display: flex;
+              flex-direction: column;
+              margin-bottom: 0;
+              input {
+                max-width: 105px;
+              }
+            }
+          }
+        }
+        
       }
     }
   }

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>
+          <div class="form-field two-col">
+            <div class="field">
               <label for="name">Width</label>
-            <input v-model="width" name="name" id="name" type="number" />
+              <input class="input-cyan" v-model="width" name="name" id="name" type="number" />
             </div>
-          <div>
+            <div class="field">
               <label for="name">Height</label>
-            <input v-model="height" name="name" id="name" type="number" />
+              <input class="input-cyan" v-model="height" name="name" id="name" type="number" />
             </div>
-          <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>

src/screens/Characters.vue

@@ -46,8 +46,10 @@
     <template #modalBody>
       <form method="post" @submit.prevent="create" class="modal-form">
         <div class="form-fields">
+          <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>
         <div class="submit">
           <button class="btn-cyan" type="submit">CREATE</button>