Some more cleanup to prepare for 2.1.0 release (#395)

* Make syntax highlighting green match the brand color

* Fix version filter control wrapping and not obeying snapshot filter

* Fix checkbox hover state Closes #390

* Update components/ui/VersionFilterControl.vue

Co-authored-by: Emma Pointer-Null <emmaffle@modrinth.com>

* Fix missing hover and active states for various buttons

Co-authored-by: Emma Pointer-Null <emmaffle@modrinth.com>

assets/styles/components.scss

@@ -39,6 +39,12 @@
   &: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 {
@@ -464,6 +470,15 @@
       background: var(--color-button-bg-hover);
     }
   }
+
+  &.multiselect--disabled {
+    background: none;
+
+    .multiselect__current,
+    .multiselect__select {
+      background: none;
+    }
+  }
 }
 
 label {
@@ -584,6 +599,10 @@ label {
     background-color: var(--color-brand-hover);
   }
 
+  &:active {
+    background-color: var(--color-brand-active);
+  }
+
   svg {
     width: 1.25rem;
     margin: auto;

assets/styles/global.scss

@@ -94,7 +94,7 @@ html {
   --color-bg-inverted: var(--color-text);
 
   --color-brand: #1bd96a;
-  --color-brand-hover: #30b366;
+  --color-brand-hover: #2de391;
   --color-brand-active: #55f5ae;
   --color-brand-inverted: #000;
 

assets/styles/highlightjs.scss

@@ -25,7 +25,7 @@
 .hljs-quote,
 .hljs-template-tag,
 .hljs-deletion {
-  color: #06b800
+  color: var(--color-brand)
 }
 
 .hljs-title,

components/ui/Checkbox.vue

@@ -84,6 +84,30 @@ export default {
     padding: 0.2rem 0rem;
     margin: 0;
   }
+
+  &:focus-visible,
+  &:hover {
+    color: var(--color-heading);
+
+    button {
+      background-color: var(--color-button-bg-hover);
+
+      &.checked {
+        background-color: var(--color-brand-hover);
+      }
+    }
+  }
+  &:active {
+    color: var(--color-text-dark);
+
+    button {
+      background-color: var(--color-button-bg-active);
+
+      &.checked {
+        background-color: var(--color-brand-active);
+      }
+    }
+  }
 }
 
 .checkbox {

components/ui/VersionFilterControl.vue

@@ -5,22 +5,29 @@
   >
     <Multiselect
       v-if="getValidLoaders().length > 1"
-      v-model="selectedLoaders"
+      v-model="selectedLoader"
       :options="getValidLoaders()"
-      :multiple="true"
+      :multiple="false"
       :searchable="true"
       :show-no-results="false"
-      :close-on-select="false"
+      :close-on-select="true"
       :clear-search-on-select="false"
       :show-labels="false"
-      :selectable="() => selectedLoaders.length <= 6"
-      placeholder="Filter loaders..."
+      :allow-empty="false"
+      :disabled="getValidLoaders().length === 1"
+      placeholder="Filter loader..."
       @input="updateVersionFilters()"
     ></Multiselect>
     <Multiselect
       v-if="getValidVersions().length > 1"
       v-model="selectedGameVersions"
-      :options="getValidVersions()"
+      :options="
+        showSnapshots
+          ? getValidVersions().map((x) => x.version)
+          : getValidVersions()
+              .filter((it) => it.version_type === 'release')
+              .map((x) => x.version)
+      "
       :multiple="true"
       :searchable="true"
       :show-no-results="false"
@@ -39,7 +46,6 @@
       v-model="showSnapshots"
       label="Include snapshots"
       description="Include snapshots"
-      style="margin-bottom: 0.5rem"
       :border="false"
     />
   </div>
@@ -68,17 +74,23 @@ export default {
       cachedValidVersions: null,
       cachedValidLoaders: null,
       selectedGameVersions: [],
-      selectedLoaders: [],
+      selectedLoader: this.getDefaultLoader(),
     }
   },
   methods: {
+    getDefaultLoader() {
+      const loaders = this.getValidLoaders()
+      if (loaders.includes('fabric')) {
+        return 'fabric'
+      } else {
+        return loaders[0]
+      }
+    },
     getValidVersions() {
       if (!this.cachedValidVersions) {
-        this.cachedValidVersions = this.$tag.gameVersions
-          .map((x) => x.version)
-          .filter((gameVer) =>
+        this.cachedValidVersions = this.$tag.gameVersions.filter((gameVer) =>
           this.versions.some((projVer) =>
-              projVer.game_versions.includes(gameVer)
+            projVer.game_versions.includes(gameVer.version)
           )
         )
       }
@@ -104,10 +116,7 @@ export default {
             this.selectedGameVersions.some((gameVersion) =>
               projectVersion.game_versions.includes(gameVersion)
             )) &&
-          (this.selectedLoaders.length === 0 ||
-            this.selectedLoaders.some((loader) =>
-              projectVersion.loaders.includes(loader)
-            ))
+          projectVersion.loaders.includes(this.selectedLoader)
       )
       this.$emit('updateVersions', temp)
     },
@@ -124,11 +133,12 @@ export default {
   flex-wrap: wrap;
 
   .multiselect {
-    flex-grow: 1;
+    flex: 1;
+    min-width: fit-content;
   }
 
   .checkbox-outer {
-    margin-bottom: 0 !important;
+    min-width: fit-content;
   }
 }
 </style>

layouts/default.vue

@@ -533,12 +533,14 @@ export default {
             box-shadow: inset 0px -1px 1px rgba(17, 24, 39, 0.1);
 
             &:hover,
-            &:active {
+            &:focus-visible {
               background-color: var(--color-button-bg-hover);
-
-              svg {
               color: var(--color-button-text-hover);
             }
+
+            &:active {
+              background-color: var(--color-button-bg-active);
+              color: var(--color-button-text-active);
             }
 
             svg {
@@ -697,6 +699,10 @@ export default {
             &:focus {
               background-color: var(--color-brand-hover);
             }
+
+            &:active {
+              background-color: var(--color-brand-active);
+            }
           }
         }
       }

pages/_type/_id.vue

@@ -891,6 +891,10 @@ export default {
       background-color: var(--color-brand-hover);
     }
 
+    &:active {
+      background-color: var(--color-brand-active);
+    }
+
     svg {
       width: 1.5rem;
       margin: auto;

pages/_type/_id/gallery.vue

@@ -502,6 +502,10 @@ export default {
       &:hover {
         background-color: var(--color-brand-hover);
       }
+
+      &:active {
+        background-color: var(--color-brand-active);
+      }
     }
   }
 }