Cleanup styling, added global styling

src/assets/scss/login.scss

@@ -48,9 +48,8 @@
             border-top-left-radius: 3px;
             border-top-right-radius: 3px;
           }
+          
           input {
-            background-color: transparent;
-            border: none;
             padding: 0.3rem 0.25rem;
             font-size: 0.875rem;
 
@@ -70,21 +69,13 @@
       .button {
         padding: 0.6rem 0;
         min-width: 6.25rem;
-        text-align: center;
         position: relative;
         font-size: 0.65rem;
-        background-color: rgba($purple, 0.75);
-        border: rgba($white, 0.35) 1px solid;
         border-radius: 5px;
 
         span {
-          color: $white;
           margin: auto;
         }
-
-        &:hover {
-          background-color: rgba($lilac, 0.75);
-        }
       }
     }
   }
@@ -94,7 +85,6 @@
   margin-top: 7rem;
   text-align: center;
   font-size: 3rem;
-  color: $white;
   text-shadow:
     -1px -1px 0 $gray,
     1px -1px 0 $gray,
@@ -102,18 +92,6 @@
     1px 1px 0 $gray;
 }
 
-p,
-a,
-li,
-label {
-  color: $white;
-}
-
-button {
-  background-color: transparent;
-  border: none;
-}
-
 a {
   text-decoration: none;
 }

src/assets/scss/main.scss

@@ -25,6 +25,7 @@ h4,
 h5,
 h6 {
   font-family: GentiumPlus, serif;
+  color: $white;
 }
 
 p, 
@@ -34,6 +35,24 @@ a,
 button,
 label {
   font-family: Arial, sans-serif;
+  color: $white;
+}
+
+button, input {
+  border: none;
+  background-color: transparent;
+}
+
+button {
+  text-align: center;
+  &.btn-purple {
+    background-color: rgba($purple, 0.75);
+    border: rgba($white, 0.35) 1px solid;
+
+    &:hover {
+      background-color: rgba($lilac, 0.75);
+    }
+  }
 }
 
 button:hover {

src/components/screens/Characters.vue

@@ -25,7 +25,7 @@
       </div>
 
       <div class="button-wrapper">
-        <button :disabled="!selected_character" @click="select_character()">
+        <button class="btn-purple" :disabled="!selected_character" @click="select_character()">
           Play
           <img src="/assets/icons/arrow.svg">
         </button>
@@ -45,10 +45,10 @@
           <input v-model="name" name="name" id="name" />
         </div>
         <div class="submit">
-          <button type="submit">Create</button>
+          <button class="btn-purple" type="submit">Create</button>
         </div>
       </form>
-      <button @click="isModalOpen = false">Cancel</button>
+      <button class="btn-purple" @click="isModalOpen = false">Cancel</button>
     </template>
   </Modal>
 </template>
@@ -138,15 +138,12 @@ function create() {
           background-image: none;
 
           button {
-            background-color: transparent;
-            border: none;
             height: 100%;
             width: 100%;
             padding: 40px 0;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            text-align: center;
             &::before {
               content: '';
             }
@@ -157,7 +154,6 @@ function create() {
             }
             span {
               align-self: center;
-              color: $white;
               font-size: 16px;
             }
           }
@@ -198,7 +194,6 @@ function create() {
         }
 
         label {
-          color: $white;
           font-weight: bold;
           position: absolute;
           top: 20px;
@@ -209,7 +204,6 @@ function create() {
 
         button.delete {
           background-color: $red;
-          border: none;
           width: 30px;
           height: 30px;
           padding: 5px;
@@ -231,7 +225,6 @@ function create() {
           width: 100%;
           text-align: center;
           transform: translateY(50%);
-          color: $white;
           z-index: 1;
         }
 
@@ -251,19 +244,14 @@ function create() {
       button {
         padding: 8px 10px 8px 20px;
         min-width: 6.25rem;
-        text-align: center;
         position: relative;
-        background-color: rgba($purple, 0.75);
-        border: rgba($white, 0.35) 1px solid;
         border-radius: 5px;
-        color: $white;
         font-size: 18px;
         display: flex;
         gap: 10px;
         align-items: center;
 
         span {
-          color: $white;
           margin: auto;
         }
 

src/components/screens/Login.vue

@@ -15,9 +15,9 @@
         </form>
       </div>
       <div class="row-buttons">
-        <button class="button" @click="loginFunc"><span>LOGIN</span></button>
-        <button class="button" @click="registerFunc"><span>REGISTER</span></button>
-        <button class="button"><span>CREDITS</span></button>
+        <button class="button btn-purple" @click="loginFunc"><span>LOGIN</span></button>
+        <button class="button btn-purple" @click="registerFunc"><span>REGISTER</span></button>
+        <button class="button btn-purple"><span>CREDITS</span></button>
       </div>
     </div>
   </div>

src/components/utilities/Modal.vue

@@ -100,7 +100,6 @@ onUnmounted(() => {
   .modal-header {
     cursor: move;
     background-color: rgba($purple, 0.6);
-    color: $white;
     padding: 0 20px;
     border-radius: 20px 20px 0 0;
     height: 3.75rem;
@@ -117,8 +116,6 @@ onUnmounted(() => {
       height: 40px;
       margin: auto 0;
       padding: 0;
-      background-color: transparent;
-      border: none;
       position: relative;
 
       img {
@@ -154,16 +151,8 @@ onUnmounted(() => {
     button {
       padding: 10px 16px;
       min-width: 6.25rem;
-      text-align: center;
       position: relative;
-      background-color: rgba($purple, 0.75);
-      border: rgba($white, 0.35) 1px solid;
       border-radius: 5px;
-      color: $white;
-
-      &:hover {
-        background-color: rgba($lilac, 0.75);
-      }
     }
     .modal-form {
       display: inline;
@@ -173,6 +162,7 @@ onUnmounted(() => {
         margin-bottom: 20px;
         label {
           margin-bottom: 10px;
+          color: $black;
         }
         input {
           max-width: 250px;