From 600a82d3f2da85f70fcb834e9adae7ad0990e331 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 20 Jan 2023 00:49:40 +0100
Subject: [PATCH] refactor: migrate NsfwWarning component

---
 src/components/NsfwWarning.vue | 122 ---------------------------------
 src/components/RefModal.vue    | 100 +++++++++++++++++++++++++++
 2 files changed, 100 insertions(+), 122 deletions(-)
 delete mode 100644 src/components/NsfwWarning.vue
 create mode 100644 src/components/RefModal.vue

diff --git a/src/components/NsfwWarning.vue b/src/components/NsfwWarning.vue
deleted file mode 100644
index 78225a7..0000000
--- a/src/components/NsfwWarning.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <div class="nsfw-warning">
-    <div class="nsfw-warning__background"></div>
-    <div class="nsfw-warning__message">
-      <div>
-        <h2><slot name="heading"></slot></h2>
-        <p><slot name="message"></slot></p>
-
-        <div class="btn-container">
-          <btn href="#" class="positive" @click.prevent="confirmNsfw(true)">
-            <slot name="yes"></slot>
-          </btn>
-
-          <btn href="#" class="negative" @click.prevent="confirmNsfw(false)">
-            <slot name="no"></slot>
-          </btn>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import btn from "@/components/Button.vue";
-
-export default {
-  components: { btn },
-  methods: {
-    confirmNsfw(input) {
-      this.$root.nsfw = input;
-      this.$root.isConfirmedHorny = input;
-      this.$root.isWarn = false;
-      document.body.classList.toggle("scroll-lock");
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import "@/scss/_variables.scss";
-@import "@/scss/_mixins.scss";
-
-.nsfw-warning {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  z-index: 9001;
-
-  backdrop-filter: blur(1em);
-  background-color: rgba(#000, 0.5);
-
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-
-  padding: 2em;
-  text-align: center;
-  overflow: auto;
-
-  &__background {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  &__message {
-    flex: 0 1 30em;
-
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-    align-content: center;
-
-    margin: auto;
-    border: 0.25em solid $sebin-secondary;
-    border-radius: 1em;
-    padding: 1em;
-
-    z-index: 9002;
-
-    @include theme(light) {
-      @include radial-background($bg-color-light, $bg-color-dark);
-    }
-
-    @include theme(dark) {
-      @include radial-background(
-        darken($bg-color-light, 20%),
-        darken($bg-color-dark, 5%)
-      );
-    }
-
-    > * {
-      flex: 0 1 100%;
-    }
-  }
-}
-
-.btn-container {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-around;
-  align-items: center;
-}
-
-.btn {
-  flex: 0 1 100%;
-  margin: 0.75em 0;
-
-  &.positive {
-    @include button(darken($sebin-eyes, 10%));
-  }
-
-  &.negative {
-    @include button(darken($bg-color-lighter, 20%));
-  }
-}
-</style>
diff --git a/src/components/RefModal.vue b/src/components/RefModal.vue
new file mode 100644
index 0000000..6b0d6ce
--- /dev/null
+++ b/src/components/RefModal.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { modalResultKey } from "@/keys";
+import Button from "@/components/RefButton.vue";
+
+const modalResult = inject(modalResultKey, Function);
+</script>
+
+<template>
+  <div class="modal">
+    <div class="modal__background"></div>
+    <div class="modal__message">
+      <div>
+        <h2><slot name="heading"></slot></h2>
+        <p><slot name="message"></slot></p>
+
+        <div class="modal__buttons">
+          <Button
+            class="modal__button positive"
+            @click.prevent="modalResult(true)"
+          >
+            <slot name="yes"></slot>
+          </Button>
+          <Button
+            class="modal__button negative"
+            @click.prevent="modalResult(false)"
+          >
+            <slot name="no"></slot>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.modal {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  text-align: center;
+
+  padding: 2rem;
+
+  backdrop-filter: blur(1rem);
+  background-color: rgba(0, 0, 0, 0.5);
+
+  overflow: auto;
+  z-index: 9001;
+
+  &__background {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &__message {
+    flex: 0 1 30rem;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-content: center;
+
+    background: var(--modal-background);
+
+    margin: auto;
+    border: 0.25rem solid var(--color-modal-border);
+    border-radius: 1rem;
+    padding: 1rem;
+
+    z-index: 9002;
+
+    > * {
+      flex: 0 1 100%;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  &__button {
+    flex: 0 1 100%;
+    margin: 0.75em 0;
+  }
+}
+</style>