From a75adbc15dcc36abde724d428ee91af2edce854e Mon Sep 17 00:00:00 2001
From: Dys <50160441+Dystopia-user181@users.noreply.github.com>
Date: Sun, 20 Mar 2022 14:44:26 +0800
Subject: [PATCH] Address PR feedback

Add checkmark to selected glyph effects as well
---
 public/stylesheets/glyphs.css                 |  1 +
 .../tabs/glyphs/sidebar/GlyphFilterPanel.vue  | 12 ++++++------
 .../glyphs/sidebar/SelectedEffectToggle.vue   | 19 ++++++++++++++++++-
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/public/stylesheets/glyphs.css b/public/stylesheets/glyphs.css
index d13e612a3..ca632ffd9 100644
--- a/public/stylesheets/glyphs.css
+++ b/public/stylesheets/glyphs.css
@@ -299,6 +299,7 @@
   border: 0.1rem solid;
   padding: 0.25em 0.5em;
   min-height: 3em;
+  position: relative;
 }
 
 .c-auto-sac-type-tab__effect-desc--active {
diff --git a/src/components/tabs/glyphs/sidebar/GlyphFilterPanel.vue b/src/components/tabs/glyphs/sidebar/GlyphFilterPanel.vue
index 36145ab90..2d98f5093 100644
--- a/src/components/tabs/glyphs/sidebar/GlyphFilterPanel.vue
+++ b/src/components/tabs/glyphs/sidebar/GlyphFilterPanel.vue
@@ -192,9 +192,9 @@ export default {
           :class="optionClass(index)"
           @click="setMode(index)"
         >
-          <span
+          <i
             v-if="mode === index"
-            class="fas fa-check c-glyph-filter-mode-checked"
+            class="fas fa-check"
           />
           <div class="c-glyph-sacrifice-options__option__tooltip">
             {{ filterMode(index) }}
@@ -348,13 +348,13 @@ export default {
 </template>
 
 <style scoped>
-.c-glyph-filter-mode-checked {
+.fa-check {
   background-color: var(--color-reality-light);
   color: black;
-  font-size: 0.6rem;
+  font-size: 0.7rem;
   position: absolute;
   top: -1px;
-  right: 0;
-  border-bottom-left-radius: 0.3rem;
+  right: -1px;
+  border-radius: 0 0.3rem;
 }
 </style>
diff --git a/src/components/tabs/glyphs/sidebar/SelectedEffectToggle.vue b/src/components/tabs/glyphs/sidebar/SelectedEffectToggle.vue
index 5cb71695f..0730a2c1f 100644
--- a/src/components/tabs/glyphs/sidebar/SelectedEffectToggle.vue
+++ b/src/components/tabs/glyphs/sidebar/SelectedEffectToggle.vue
@@ -18,6 +18,9 @@ export default {
     };
   },
   computed: {
+    color() {
+      return GlyphTypes[this.glyphType].color;
+    },
     description() {
       return typeof this.effect.genericDesc === "function"
         ? this.effect.genericDesc()
@@ -77,9 +80,23 @@ export default {
     <span v-else>
       {{ description }}
     </span>
+    <i
+      v-if="isActive"
+      class="fas fa-check"
+      :style="{ 'background-color': color }"
+    />
   </div>
 </template>
 
 <style scoped>
-
+.fa-check {
+  color: black;
+  font-size: 1rem;
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  border-radius: 0 0.3rem;
+  padding: 0.2rem;
+  text-shadow: none;
+}
 </style>