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

---
 src/components/QuickFacts.vue | 85 +++++++++++++----------------------
 1 file changed, 31 insertions(+), 54 deletions(-)

diff --git a/src/components/QuickFacts.vue b/src/components/QuickFacts.vue
index 51ef1cc..7e8f165 100644
--- a/src/components/QuickFacts.vue
+++ b/src/components/QuickFacts.vue
@@ -1,74 +1,50 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const isExpanded = ref(false);
+
+const toggle = () => {
+  isExpanded.value = !isExpanded.value;
+};
+</script>
+
 <template>
   <div class="quickfacts" :class="{ open: isExpanded }">
-    <h4 class="quickfacts__head" @click.prevent="toggle">Quickfacts</h4>
-
+    <h3 class="quickfacts__head" @click.prevent="toggle">Quickfacts</h3>
     <div class="quickfacts__list">
       <slot></slot>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      isExpanded: false,
-    };
-  },
-  methods: {
-    toggle() {
-      this.isExpanded = !this.isExpanded;
-    },
-  },
-};
-</script>
-
 <style lang="scss">
-@import "@/scss/_variables.scss";
-@import "@/scss/_mixins.scss";
-
 .quickfacts {
-  border-radius: 1em;
-  overflow: hidden;
-  margin: 1em 0;
   position: relative;
-  box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
 
-  background: radial-gradient(
-      circle at bottom right,
-      $bg-color-lighter 5%,
-      transparent 50%
-    ),
-    radial-gradient(circle at top left, $bg-color-light 5%, $bg-color-dark 100%);
+  background: var(--quickfacts-background);
 
-  @include theme(dark) {
-    background: radial-gradient(
-        circle at bottom right,
-        darken($bg-color-lighter, 30%) 5%,
-        transparent 50%
-      ),
-      radial-gradient(
-        circle at top left,
-        darken($bg-color-light, 10%) 5%,
-        darken($bg-color-dark, 10%) 100%
-      );
-  }
+  margin: 1rem 0;
+  border-radius: 1rem;
+
+  box-shadow: var(--container-box-shadow);
+
+  overflow: hidden;
 
   &:before {
-    position: absolute;
-    content: "";
     display: block;
 
-    top: 1em;
-    right: 1em;
+    content: "";
+    position: absolute;
+    top: 1.375rem;
+    right: 1.375rem;
 
     transform: rotate(180deg);
     transition: 0.3s all ease-in-out;
 
     border: {
-      right: 0.625em solid transparent;
-      bottom: 0.625em solid #fff;
-      left: 0.625em solid transparent;
+      right: 0.625rem solid transparent;
+      bottom: 0.625rem solid #fff;
+      left: 0.625rem solid transparent;
     }
   }
 
@@ -78,13 +54,14 @@ export default {
 
   &.open & {
     &__list {
-      max-height: 25em;
-      border-top: 0.125em solid $sebin-secondary;
+      max-height: 25rem;
+      border-top: 0.125rem solid var(--color-quickfacts-border);
       padding: 1.5rem;
     }
   }
 
   &__head {
+    font-size: 1.125rem;
     margin: 0;
     border: 0;
     padding: 0.75rem 1.5rem;
@@ -93,17 +70,17 @@ export default {
   }
 
   &__list {
-    max-height: 0em;
+    max-height: 0rem;
     padding: 0 1.5rem;
     transition: 0.3s all ease-in-out;
 
     ul {
       margin: 0;
-      padding: 0 0.5em;
+      padding: 0 0.5rem;
     }
 
     li {
-      margin: 0 0 0 1em;
+      margin: 0 0 0 1rem;
       padding: 0;
     }
   }