Add modpack badges + improve nav contrast

theseus_gui/src/components/components/Instance.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import IconPlayFilled from "virtual:icons/carbon/play-filled-alt"
+    import IconBadgeCheck from "virtual:icons/heroicons-solid/badge-check"
 
     export let title: string;
     export let id: string;
@@ -10,7 +11,7 @@
 
 <a class="instance" href="/library/instance/{id}"
    style:background-image="linear-gradient(5deg, hsla(0,0%,0%,0.8) 0%, hsla(0,0%,0%,0) 100%), url('{image}')">
-    <div class="instance__version">{version}</div>
+    <div class="instance__version">{version}{#if modpack}<IconBadgeCheck />{/if}</div>
     <div class="instance__title">{title}</div>
     <button class="play-button">
        <IconPlayFilled />
@@ -42,6 +43,12 @@
         &__version {
             color: var(--color-text);
             font-size: var(--font-size-sm);
+            display: flex;
+            align-items: center;
+            grid-gap: 0.15rem;
+            :global(svg) {
+                margin-bottom: 0.05rem;
+            }
         }
 
         &:hover .play-button {

theseus_gui/src/styles/global.postcss

@@ -53,7 +53,7 @@
     /* Launcher added */
     --status-bg: hsl(216, 5%, 29%);
     --sidebar-bg: hsl(216, 10%, 3%);
-    --nav-active-bg: hsla(0,0%,100%,0.1);
+    --nav-active-bg: hsl(217, 9%, 25%);
     --font-size-sm: 0.75rem;
     --color-bg: hsl(217, 9%, 18%);
     --color-brand: hsl(145, 78%, 48%);