Fix Waterfall icon being black with light mode (#236)

Author: Strokkur424

src/assets/brand/waterfall-white.svg

@@ -7,7 +7,7 @@
   import PaperIconUrl from "@/assets/brand/paper.svg?url";
   import VelocityIconUrl from "@/assets/brand/velocity.svg?url";
   import FoliaIconUrl from "@/assets/brand/folia.svg?url";
-  import WaterfallIconUrl from "@/assets/brand/waterfall.svg?url";
+  import WaterfallIconUrl from "@/assets/brand/waterfall-white.svg?url";
   import type { Snippet } from "svelte";
   import { type ProjectBuildsOrError } from "@/utils/download";
 

src/components/data/SoftwareDownload.svelte

@@ -24,7 +24,7 @@ const { id, name, icon, description, type, eol } = Astro.props;
     <article class="btn btn-outline btn-gray group h-full flex-col items-start justify-start rounded-md p-4 text-left">
       <div class="flex flex-row items-center gap-4">
         <div class="h-12 w-12 rounded-lg bg-gray-800 p-3">
-          <Icon name={icon} class:list={["h-full w-full", eol && "group-hover:stroke-red-400 group-hover:text-red-400"]} />
+          <Icon name={icon} class:list={["h-full w-full text-white", eol && "group-hover:stroke-red-400 group-hover:text-red-400"]} />
         </div>
         <h3 class:list={["flex flex-1 items-center gap-4 text-lg font-medium", eol && "group-hover:text-red-400"]}>
           {name}

src/components/data/SoftwarePreview.astro

@@ -25,7 +25,7 @@ const { id, name, icon, github, eol } = Astro.props;
     <div class="flex-1">
       <div class="mb-6 flex flex-row items-center gap-4">
         <div class="h-12 w-12 rounded-lg bg-gray-800 p-3">
-          {icon && <Icon name={icon} class="h-full w-full" />}
+          {icon && <Icon name={icon} class="h-full w-full text-white" />}
         </div>
         <h1 class="flex items-center gap-4 text-xl font-medium">
           {name}