Add modpack badges + improve nav contrast

theseus_gui/package.json

@@ -33,6 +33,7 @@
     "@fontsource/inter": "^4.5.4",
     "@iconify-json/carbon": "^1.1.1",
     "@iconify-json/heroicons-outline": "^1.1.1",
+    "@iconify-json/heroicons-solid": "^1.1.1",
     "@iconify-json/lucide": "^1.1.5",
     "@tauri-apps/api": "^1.0.0-rc.1",
     "autoprefixer": "^10.4.2",

theseus_gui/pnpm-lock.yaml

@@ -4,6 +4,7 @@ specifiers:
   '@fontsource/inter': ^4.5.4
   '@iconify-json/carbon': ^1.1.1
   '@iconify-json/heroicons-outline': ^1.1.1
+  '@iconify-json/heroicons-solid': ^1.1.1
   '@iconify-json/lucide': ^1.1.5
   '@sveltejs/adapter-static': next
   '@sveltejs/kit': next
@@ -38,6 +39,7 @@ dependencies:
   '@fontsource/inter': 4.5.4
   '@iconify-json/carbon': 1.1.1
   '@iconify-json/heroicons-outline': 1.1.1
+  '@iconify-json/heroicons-solid': 1.1.1
   '@iconify-json/lucide': 1.1.5
   '@tauri-apps/api': 1.0.0-rc.1
   autoprefixer: 10.4.2_postcss@8.4.7
@@ -240,6 +242,12 @@ packages:
       '@iconify/types': 1.0.12
     dev: false
 
+  /@iconify-json/heroicons-solid/1.1.1:
+    resolution: {integrity: sha512-yTq+PjF543FEp37gqLLQLMGBhZXaHJOY8wLPsWyQZzIDJ9h773ofvp32fgMh9YlgQT4MaeDH2VULvFBBCRmJgQ==}
+    dependencies:
+      '@iconify/types': 1.0.12
+    dev: false
+
   /@iconify-json/lucide/1.1.5:
     resolution: {integrity: sha512-FOyVw5sdRyDpgR2wVxBxycAOSjVZPlZFaw5umn87JjdXB+L6MIab53Pnz7e/ub79jJTtofHZJ6OBAZ67Cw3Lzg==}
     dependencies:

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%);