style of button

src/lib/components/models/drawer/Drawer.svelte

@@ -83,6 +83,13 @@
         </header>
         <main class="grid grid-cols-1 gap-6">
           <div class="justify-start items-center gap-4 flex">
+            <a
+              href="/generate?model={model?.id}"
+              class="bg-pink-500 hover:brightness-110 transition-all duration-200 border border-pink-500 md:px-4 md:py-2 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 md:gap-2 font-medium text-sm md:text-base"
+            >
+              <Icon icon="fluent:glance-horizontal-sparkles-16-filled" class="lg:w-5 lg:h-5 w-4 h-4 text-pink-500" />
+              Generate Image
+            </a>
             <div class="bg-red-500 bg-opacity-20 border border-red-500 md:px-4 md:py-2 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 md:gap-2 font-medium text-sm md:text-base">
               <Icon icon="solar:heart-bold" class="lg:w-5 lg:h-5 w-4 h-4 text-red-500" />
               {model?.likes ?? 0}
@@ -95,13 +102,6 @@
               <Icon icon="solar:download-square-bold" class="lg:w-5 lg:h-5 w-4 h-4 text-blue-500" />
               View files
             </a>
-            <a
-              href="/generate?model={model?.id}"
-              class="bg-pink-500 bg-opacity-20 hover:bg-opacity-60 transition-all duration-200 border border-pink-500 md:px-4 md:py-2 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 md:gap-2 font-medium text-sm md:text-base"
-            >
-              <Icon icon="fluent:glance-horizontal-sparkles-16-filled" class="lg:w-5 lg:h-5 w-4 h-4 text-pink-500" />
-              Generate
-            </a>
           </div>
           {#if model?.gallery && model?.gallery?.length > 0}
             <div class="-mr-8 relative">