feat: fix issue with css in tabs of ignored settings component

Author: akinsey

src/components/settings/IgnoredSettings.vue

@@ -103,3 +103,33 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.tabs {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: .5rem;
+  margin-top: .4rem;
+  margin-bottom: .5rem;
+  a.button {
+    display: inline-block;
+    background-color: transparent;
+    color: $secondary-font-color;
+    height: 2.5rem;
+    padding: 0 1rem;
+    line-height: 2.5rem;
+    font-size: 1rem;
+    &.selected {
+      border: 1px solid $color-primary;
+      border-radius: 3px;
+      color: $color-primary;
+      &:hover { background-color: transparent; }
+    }
+    &:hover { background-color: transparent; }
+  }
+  @include break-mobile-sm {
+    grid-template-columns: 1fr;
+  }
+}
+.tabs-content { min-height: 29rem }
+</style>

src/views/Settings.vue

@@ -238,33 +238,6 @@ export default {
   }
 }
 
-
-.tabs {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  column-gap: .5rem;
-  margin-top: .4rem;
-  margin-bottom: .5rem;
-  a.button {
-    display: inline-block;
-    background-color: #fff;
-    color: #222236;
-    height: 2.5rem;
-    padding: 0 1rem;
-    line-height: 2.5rem;
-    font-size: 1rem;
-    &.selected {
-      border: 1px solid #ff6400;
-      border-radius: 3px;
-      color: #ff6400;
-    }
-  }
-  @include break-mobile-sm {
-    grid-template-columns: 1fr;
-  }
-}
-.tabs-content { min-height: 29rem }
-
 .boards-check-list {
   @include pad(0.5rem);
   margin-top: 0.25rem;