Fix version dropdowns and add link hover/active colors in markdown (#398)

* Fix version dropdowns and add link hover/active colors in markdown

* Add 'Clear filters' button to version filtering

* *Actually* fix #394

* semicolon

assets/styles/components.scss

@@ -166,6 +166,14 @@
 
   a {
     color: var(--color-link);
+
+    &:focus-visible,
+    &:hover {
+      color: var(--color-link-hover);
+    }
+    &:active {
+      color: var(--color-link-active);
+    }
   }
 
   img {
@@ -431,6 +439,8 @@
 
 .multiselect--above .multiselect__content-wrapper {
   border-top: none !important;
+  border-top-left-radius: var(--size-rounded-card) !important;
+  border-top-right-radius: var(--size-rounded-card) !important;
 }
 
 .multiselect {
@@ -481,12 +491,6 @@
       line-height: 20px;
     }
   }
-  .multiselect--above {
-    .multiselect__content-wrapper {
-      border-top-left-radius: var(--size-rounded-card);
-      border-top-right-radius: var(--size-rounded-card);
-    }
-  }
   .multiselect__content-wrapper {
     background: var(--color-dropdown-bg);
     border: none;

components/ui/VersionFilterControl.vue

@@ -8,7 +8,7 @@
       v-model="selectedLoader"
       :options="getValidLoaders()"
       :multiple="false"
-      :searchable="true"
+      :searchable="false"
       :show-no-results="false"
       :close-on-select="true"
       :clear-search-on-select="false"
@@ -32,8 +32,8 @@
       :searchable="true"
       :show-no-results="false"
       :close-on-select="false"
-      :clear-search-on-select="false"
       :show-labels="false"
+      :hide-selected="true"
       :selectable="() => selectedGameVersions.length <= 6"
       placeholder="Filter versions..."
       @input="updateVersionFilters()"
@@ -48,18 +48,35 @@
       description="Include snapshots"
       :border="false"
     />
+    <button
+      title="Clear filters"
+      :disabled="
+        selectedLoader === getDefaultLoader() &&
+        selectedGameVersions.length === 0
+      "
+      class="iconified-button"
+      @click="
+        selectedLoader = getDefaultLoader()
+        selectedGameVersions = []
+      "
+    >
+      <CrossIcon />
+      Clear filters
+    </button>
   </div>
 </template>
 
 <script>
 import Multiselect from 'vue-multiselect'
 import Checkbox from '~/components/ui/Checkbox'
+import CrossIcon from '~/assets/images/utils/x.svg?inline'
 
 export default {
   name: 'VersionFilterControl',
   components: {
     Multiselect,
     Checkbox,
+    CrossIcon,
   },
   props: {
     versions: {
@@ -134,11 +151,35 @@ export default {
 
   .multiselect {
     flex: 1;
-    min-width: fit-content;
   }
 
   .checkbox-outer {
     min-width: fit-content;
   }
 }
+
+.circle-button {
+  display: flex;
+  max-width: 2rem;
+  padding: 0.5rem;
+  background-color: var(--color-button-bg);
+  border-radius: var(--size-rounded-max);
+  box-shadow: inset 0px -1px 1px rgba(17, 24, 39, 0.1);
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--color-button-bg-hover);
+    color: var(--color-button-text-hover);
+  }
+
+  &:active {
+    background-color: var(--color-button-bg-active);
+    color: var(--color-button-text-active);
+  }
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
 </style>