Address PR feedback

Add checkmark to selected glyph effects as well

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 {

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>

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>