Give modals the dark app theme and close them on outside click

- Restyle the shared modal styles to the dark app palette with orange accents
- Remove light-theme overrides in Search, Sync and Settings modals
- Add outside-click close and fade transition to the Sync modal
- Use @click.self for outside-click close in all modals
- Let tall modals scroll instead of being cut off
- Darken the mobile menu to match

src/App.vue

@@ -87,14 +87,16 @@ body {
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
-   overflow: hidden;
+   overflow-y: auto; /* Scroll tall modals instead of cutting them off */
    background-color: rgb(0, 0, 0); /* Fallback color */
-   background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
+   background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
 }
 .modalContainer {
-   background-color: #eeeeee;
+   background-color: #333;
+   color: white;
    margin: 10% auto; /* 15% from the top and centered */
-   border: 1px solid #888;
+   border: 1px solid #ff9c00;
+   border-radius: 10px;
    width: 50%; /* Could be more or less, depending on screen size */
 }
 .modalWrapper {
@@ -114,16 +116,29 @@ body {
    top: 8px;
    cursor: pointer;
    opacity: 70%;
+   font-size: 2rem;
+   line-height: 1;
+   color: #ff9c00;
+}
+/* The close icon is a black svg, recolor it to the app's orange */
+img.closeModalImg {
+   filter: invert(66%) sepia(96%) saturate(2783%) hue-rotate(1deg) brightness(105%) contrast(103%);
+}
+.closeModalImg:hover {
+   opacity: 100%;
 }
 .modal h1 {
-   color: black;
+   color: white;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    font-size: 1.9rem;
 }
 .modal p {
-   color: black;
+   color: white;
+}
+.modal a {
+   color: #ff9c00;
 }
 
 @media only screen and (max-width: 1000px) {

src/components/items/SearchModal.vue

@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <span class="closeModalImg" @click="closeModal">&times;</span>
@@ -68,11 +68,6 @@ export default {
             this.searchTimeout = null;
          }
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
       debouncedSearch() {
          // Clear existing timeout
          if (this.searchTimeout) {
@@ -160,7 +155,9 @@ export default {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
-   border: 1px solid #ccc;
+   border: 1px solid #777;
+   background-color: rgb(66, 66, 66);
+   color: white;
    border-radius: 5px;
    box-sizing: border-box;
 }
@@ -178,7 +175,7 @@ export default {
 }
 
 .loading {
-   color: #666;
+   color: #bbb;
    font-style: italic;
    text-align: center;
    padding: 20px;
@@ -191,19 +188,19 @@ export default {
 .resultItem {
    padding: 12px;
    margin-bottom: 8px;
-   background-color: #f8f8f8;
+   background-color: rgb(66, 66, 66);
-   border: 1px solid #ddd;
+   border: 1px solid #555;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
 }
 
 .resultItem:hover {
-   background-color: #e8e8e8;
+   background-color: #555;
 }
 
 .noResults {
-   color: #666;
+   color: #bbb;
    text-align: center;
    padding: 20px;
    font-style: italic;

src/components/items/SyncProgressModal.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="modal" v-if="isOpen">
+    <transition name="modalAni">
+        <div class="modal" v-if="isOpen" @click.self="closeModal">
             <div class="modalContainer syncProgressContainer">
                 <span class="closeModalImg" @click="closeModal">&times;</span>
                 <h1>Sync in Progress</h1>
@@ -62,6 +63,7 @@
                 </div>
             </div>
         </div>
+    </transition>
 </template>
 
 <script>
@@ -211,48 +213,26 @@ export default {
 
 <style scoped>
 .syncProgressContainer {
-    background-color: #eeeeee;
+    position: relative;
-    margin: 10% auto;
-    border: 1px solid #888;
     width: 70%;
     max-width: 800px;
     padding: 20px;
-    border-radius: 10px;
+    box-sizing: border-box;
-}
-
-.closeModalImg {
-    position: absolute;
-    right: 8px;
-    top: 8px;
-    cursor: pointer;
-    opacity: 70%;
-    font-size: 2rem;
-    color: #555;
-}
-
-.closeModalImg:hover {
-    opacity: 100%;
 }
 
 .syncProgressContainer h1 {
-    color: black;
-    margin-left: auto;
-    margin-right: auto;
-    padding-top: 10px;
-    font-size: 1.9rem;
     text-align: center;
     margin-bottom: 20px;
 }
 
 .syncProgressContainer h2 {
-    color: black;
+    color: white;
     text-align: center;
     font-size: 1.5rem;
     margin-bottom: 15px;
 }
 
 .syncProgressContainer p {
-    color: black;
     text-align: center;
 }
 
@@ -266,7 +246,7 @@ export default {
 .progressBarContainer {
     width: 100%;
     height: 30px;
-    background-color: #ddd;
+    background-color: rgb(66, 66, 66);
     border-radius: 15px;
     overflow: hidden;
     margin-bottom: 10px;
@@ -290,7 +270,7 @@ export default {
 
 .timeText {
     font-size: 1rem;
-    color: #666;
+    color: #bbb;
 }
 
 .resultsSection {
@@ -301,7 +281,7 @@ export default {
 .resultItem {
     margin-bottom: 20px;
     padding: 10px;
-    background-color: #f8f8f8;
+    background-color: rgb(66, 66, 66);
     border-radius: 8px;
     border-left: 4px solid #4CAF50;
 }
@@ -311,7 +291,7 @@ export default {
 }
 
 .resultItem h3 {
-    color: #333;
+    color: white;
     font-size: 1.1rem;
     margin-bottom: 8px;
 }
@@ -324,12 +304,12 @@ export default {
 
 .soundtrackList li {
     padding: 3px 0;
-    color: #555;
+    color: #ddd;
 }
 
 .noChanges {
     text-align: center;
-    color: #666;
+    color: #bbb;
     font-style: italic;
     padding: 20px;
 }

src/components/items/aboutModal.vue

@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <img
@@ -46,11 +46,6 @@ export default {
       openModal() {
          this.show = true;
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
    },
 };
 </script>

src/components/items/characterModal.vue

@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <img
@@ -50,11 +50,6 @@ export default {
          this.show = true;
          await this.fetchCharacters();
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
       async fetchCharacters() {
          this.isLoading = true;
          try {
@@ -150,7 +145,7 @@ export default {
    text-align: center;
    padding: 40px;
    font-size: 1.2rem;
-   color: #666;
+   color: #bbb;
 }
 
 @media only screen and (max-width: 1000px) {

src/components/items/mobileMenu.vue

@@ -109,7 +109,8 @@ export default {
 }
 
 .mobileMenuContainer {
-   background-color: #c4c4c4;
+   background-color: #333;
+   color: white;
    width: 80vw;
    height: 100%;
    margin-left: 20%;

src/components/items/settingsModal.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- Round Settings, Stop after current, Don't hide title -->
     <transition name="modalAni">
-        <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+        <div v-if="show" class="modal" @click.self="closeModal">
             <div class="modalContainer">
                 <div class="modalWrapper">
                     <img
@@ -98,11 +98,6 @@ export default {
         openModal() {
             this.show = true;
         },
-        checkIfClickShouldCloseModal(event) {
-            if (event.target.classList[0] === "modal") {
-                this.closeModal();
-            }
-        },
         updateOptionHideTitle() {
             if (this.checkboxHideTitle) {
                 this.$store.dispatch("updateHideNextTitle", true);
@@ -165,6 +160,7 @@ export default {
     margin-top: 20px;
 }
 .checkboxDiv input {
+    accent-color: #ff9c00;
     transform: scale(1.3);
 }
 .checkboxDiv label {
@@ -181,9 +177,6 @@ export default {
     display: flex;
     width: 50px;
     height: 33px;
-    background: rgb(16, 99, 194);
-    color: rgb(235, 235, 235);
-    border-color: rgb(161, 161, 161);
     justify-content: center;
     align-items: center;
     line-height: 0;

src/components/items/statisticsModal.vue

@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <img
@@ -35,11 +35,6 @@ export default {
       openModal() {
          this.show = true;
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
    },
 };
 </script>

src/components/items/winningModal.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="modalAni">
-        <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+        <div v-if="show" class="modal" @click.self="closeModal">
             <div class="modalContainer">
                 <div class="modalWrapper">
                     <img
@@ -38,11 +38,6 @@ export default {
             this.playerName = playerName;
             this.show = true;
         },
-        checkIfClickShouldCloseModal(event) {
-            if (event.target.classList[0] === "modal") {
-                this.closeModal();
-            }
-        },
     },
 };
 </script>