fix: improve the slogan button in dark mode

RustLangES · Mar 9, 2024 · d1c5883 · d1c5883
1 parent e4e8157
commit d1c5883
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/components/slogan_button.rs b/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 text-white max-w-lg"
+ class="flex select-none items-center justify-center lg:justify-start group dark:text-white max-w-lg drop-shadow-[7px_7px_2px_rgba(0,0,0,.5)] hover:drop-shadow-none dark:transition-all dark:ease-in-out dark:delay-75 "
  on:click=click_handler
  >
- <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">
+ <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 drop-shadow-sm">
  <span class="motion-safe:animate-spin">"🎲"</span>
  </button>
- <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">
+ <p class="font-work-sans font-light lg:text-left dark:border-double dark:hover:border-solid dark:transition-all dark:ease-in-out dark:delay-100 bg-orange-400 dark:bg-black/30 dark:border-y-4 dark: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 drop-shadow-sm max-w-lg">
  {slogan}
  </p>
  </div>