From 88361c95bfd63c4a2c91f0417c2fc60e8b48d51d Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 28 Jan 2022 23:54:58 +0100
Subject: [PATCH] feat: new paint job

---
 src/components/NsfwWarning.vue | 17 +++++++++++++----
 src/components/QuickFacts.vue  | 29 +++++++++++++++++++++++------
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/components/NsfwWarning.vue b/src/components/NsfwWarning.vue
index e74ff99..78225a7 100644
--- a/src/components/NsfwWarning.vue
+++ b/src/components/NsfwWarning.vue
@@ -77,13 +77,22 @@ export default {
     align-content: center;
 
     margin: auto;
-    border: 0.25em solid $bg-color-warning;
+    border: 0.25em solid $sebin-secondary;
     border-radius: 1em;
     padding: 1em;
 
     z-index: 9002;
 
-    background-color: $bg-color-dark;
+    @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%;
@@ -103,11 +112,11 @@ export default {
   margin: 0.75em 0;
 
   &.positive {
-    @include button($btn-color-positive);
+    @include button(darken($sebin-eyes, 10%));
   }
 
   &.negative {
-    @include button($btn-color-negative);
+    @include button(darken($bg-color-lighter, 20%));
   }
 }
 </style>
diff --git a/src/components/QuickFacts.vue b/src/components/QuickFacts.vue
index e89b9c3..51ef1cc 100644
--- a/src/components/QuickFacts.vue
+++ b/src/components/QuickFacts.vue
@@ -25,12 +25,34 @@ export default {
 
 <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%);
+
+  @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%
+      );
+  }
 
   &:before {
     position: absolute;
@@ -55,18 +77,14 @@ export default {
   }
 
   &.open & {
-    &__head {
-      background-color: $bg-color-light;
-    }
-
     &__list {
       max-height: 25em;
+      border-top: 0.125em solid $sebin-secondary;
       padding: 1.5rem;
     }
   }
 
   &__head {
-    background-color: $bg-color-dark;
     margin: 0;
     border: 0;
     padding: 0.75rem 1.5rem;
@@ -75,7 +93,6 @@ export default {
   }
 
   &__list {
-    background-color: rgba($bg-color-dark, 0.5);
     max-height: 0em;
     padding: 0 1.5rem;
     transition: 0.3s all ease-in-out;