fix: adapt dark mode for modal

src/components/Modal.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="shade" @click="close" v-show="show">
+      <div class="description-full" @click.stop>
+        <span>{{ text }}</span>
+        <span class="close" @click="close">
+          {{ $t("modal.close") }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Modal",
+  props: {
+    show: Boolean,
+    close: Function,
+    text: String,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.shade {
+  background: rgba(255, 255, 255, 0.38);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .description-full {
+    background: rgba(255, 255, 255, 0.78);
+    box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    backdrop-filter: blur(12px) opacity(1);
+    padding: 32px;
+    border-radius: 12px;
+    width: 50vw;
+    margin: auto 0;
+    font-size: 14px;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+
+    .close {
+      display: flex;
+      justify-content: flex-end;
+      font-size: 16px;
+      margin-top: 20px;
+      color: var(--color-primary);
+      cursor: pointer;
+    }
+  }
+}
+
+[data-theme="dark"] {
+  .shade {
+    background: rgba(0, 0, 0, 0.38);
+    color: var(--color-text);
+    .description-full {
+      background: rgba(46, 46, 46, 0.68);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+    }
+  }
+}
+</style>

src/views/album.vue

@@ -90,20 +90,11 @@
         />
       </div>
     </div>
-    <transition name="fade">
+    <Modal
-      <div
+      :show="showFullDescription"
-        class="shade"
+      :close="() => (showFullDescription = false)"
-        @click="showFullDescription = false"
+      :text="album.description"
-        v-show="showFullDescription"
+    />
-      >
-        <div class="description-full" @click.stop>
-          <span>{{ album.description }}</span>
-          <span class="close" @click="showFullDescription = false">
-            {{ $t("modal.close") }}
-          </span>
-        </div>
-      </div>
-    </transition>
   </div>
 </template>
 
@@ -122,6 +113,7 @@ import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 import TrackList from "@/components/TrackList.vue";
 import CoverRow from "@/components/CoverRow.vue";
 import Cover from "@/components/Cover.vue";
+import Modal from "@/components/Modal.vue";
 
 export default {
   name: "Album",
@@ -131,6 +123,7 @@ export default {
     TrackList,
     ExplicitSymbol,
     CoverRow,
+    Modal,
   },
   data() {
     return {
@@ -305,49 +298,6 @@ export default {
   }
 }
 
-.shade {
-  background: rgba(255, 255, 255, 0.38);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .description-full {
-    background: rgba(255, 255, 255, 0.78);
-    box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    backdrop-filter: blur(12px);
-    padding: 32px;
-    border-radius: 12px;
-    width: 50vw;
-    margin: auto 0;
-    font-size: 14px;
-    z-index: 100;
-    display: flex;
-    flex-direction: column;
-
-    .close {
-      display: flex;
-      justify-content: flex-end;
-      font-size: 16px;
-      margin-top: 20px;
-      color: #335eea;
-      cursor: pointer;
-    }
-  }
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
-
 .explicit-symbol {
   opacity: 0.28;
   color: var(--color-text);

src/views/playlist.vue

@@ -112,20 +112,11 @@
 
     <TrackList :tracks="tracks" :type="'playlist'" :id="playlist.id" />
 
-    <transition name="fade">
+    <Modal
-      <div
+      :show="showFullDescription"
-        class="shade"
+      :close="() => (showFullDescription = false)"
-        @click="showFullDescription = false"
+      :text="playlist.description"
-        v-show="showFullDescription"
+    />
-      >
-        <div class="description-full" @click.stop>
-          <span>{{ playlist.description }}</span>
-          <span class="close" @click="showFullDescription = false">
-            {{ $t("modal.close") }}
-          </span>
-        </div>
-      </div>
-    </transition>
   </div>
 </template>
 
@@ -140,6 +131,7 @@ import { isAccountLoggedIn } from "@/utils/auth";
 import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 import TrackList from "@/components/TrackList.vue";
 import Cover from "@/components/Cover.vue";
+import Modal from "@/components/Modal.vue";
 
 const specialPlaylist = {
   2829816518: {
@@ -234,6 +226,7 @@ export default {
     Cover,
     ButtonTwoTone,
     TrackList,
+    Modal,
   },
   data() {
     return {
@@ -412,41 +405,6 @@ export default {
   }
 }
 
-.shade {
-  background: rgba(255, 255, 255, 0.38);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .description-full {
-    background: rgba(255, 255, 255, 0.78);
-    box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    backdrop-filter: blur(12px);
-    padding: 32px;
-    border-radius: 12px;
-    width: 50vw;
-    margin: auto 0;
-    font-size: 14px;
-    z-index: 100;
-    display: flex;
-    flex-direction: column;
-
-    .close {
-      display: flex;
-      justify-content: flex-end;
-      font-size: 16px;
-      margin-top: 20px;
-      color: #335eea;
-      cursor: pointer;
-    }
-  }
-}
-
 .special-playlist {
   margin-top: 192px;
   margin-bottom: 128px;
@@ -647,12 +605,4 @@ export default {
     }
   }
 }
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
 </style>