fix: add some of contrats to the button

Author: Phosphorus-M

src/components/slogan_button.rs

@@ -42,13 +42,13 @@ pub fn SloganButton() -> impl IntoView {
 
     view! {
         <div
-            class="flex select-none items-center justify-center lg:justify-start group"
+            class="flex select-none items-center justify-center lg:justify-start group text-white  max-w-lg"
             on:click=click_handler
         >
-            <button class="bg-orange-300 dark:bg-transparent border-4 border-orange-400 group-hover:border-orange-500 flex justify-center items-center rounded-full w-12 h-12 text-xl relative z-10">
+            <button class="bg-orange-200 dark:bg-black/30  border-4 border-orange-400 group-hover:border-orange-500 dark:group-hover:bg-black/60 flex justify-center items-center rounded-full w-12 h-12 text-xl relative z-10">
                 <span class="motion-safe:animate-spin">"🎲"</span>
             </button>
-            <p class="font-work-sans font-light lg:text-left bg-orange-400 dark:bg-transparent h-12 pr-4 pl-10 flex items-center -ml-6 flex-1 rounded-r-full group-hover:bg-orange-500 dark:group-hover:bg-transparent max-w-lg">
+            <p class="font-work-sans font-light lg:text-left bg-orange-400 dark:bg-black/30 border-y-4 border-r-4 border-orange-400 h-12 pr-4 pl-10 flex items-center -ml-6 flex-1 rounded-r-full group-hover:bg-orange-500 dark:group-hover:bg-white/5  max-w-lg">
                 {slogan}
             </p>
         </div>