Improves darkmode colors

apis/src/components/atoms/direct_challenge_button.rs

@@ -33,7 +33,7 @@ pub fn DirectChallengeButton(user: StoredValue<UserResponse>) -> impl IntoView {
             <button
                 title="Challenge to a game"
                 on:click=move |_| open.update(move |b| *b = true)
-                class="mx-2 bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 rounded p-1 text-white"
+                class="mx-2 bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 rounded p-1 text-white"
             >
                 <Icon icon=icondata::RiSwordOthersLine class="h-6 w-6"/>
             </button>

apis/src/components/atoms/download_pgn.rs

@@ -42,7 +42,7 @@ pub fn DownloadPgn(
     view! {
         <Show when=move || maybe_game().is_some()>
             <button
-                class="aspect-square bg-ant-blue hover:bg-pillbug-teal rounded-sm transform transition-transform duration-300 active:scale-95 flex items-center justify-center z-20 m-1 text-white"
+                class="aspect-square bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal rounded-sm transform transition-transform duration-300 active:scale-95 flex items-center justify-center z-20 m-1 text-white"
                 on:click=download
             >
                 <Icon icon=icondata::AiDownloadOutlined class="h-7 w-7 py-1"/>

apis/src/components/atoms/history_button.rs

@@ -18,7 +18,7 @@ pub fn HistoryButton(
     #[prop(optional)] node_ref: Option<NodeRef<html::Button>>,
 ) -> impl IntoView {
     let cloned_action = action.clone();
-    let nav_buttons_style = "flex place-items-center justify-center hover:bg-grasshopper-green transform transition-transform duration-300 active:scale-95 m-1 h-6 rounded-md border-cyan-500 border-2 drop-shadow-lg disabled:opacity-25 disabled:cursor-not-allowed disabled:hover:bg-transparent";
+    let nav_buttons_style = "flex place-items-center justify-center hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 m-1 h-7 rounded-md border-cyan-500 dark:border-button-twilight border-2 drop-shadow-lg disabled:opacity-25 disabled:cursor-not-allowed disabled:hover:bg-transparent";
     let icon = match action {
         HistoryNavigation::First => icondata::AiFastBackwardFilled,
         HistoryNavigation::Last | HistoryNavigation::MobileLast => icondata::AiFastForwardFilled,

apis/src/components/atoms/profile_link.rs

@@ -11,9 +11,9 @@ pub fn ProfileLink(
     let profile_link = format!("/@/{}", username);
     let hover_show = RwSignal::new(false);
     view! {
-        <div class="relative">
+        <div class="w-full relative">
             <a
-                class="z-20 relative font-bold duration-300 hover:text-pillbug-teal"
+                class="z-20 font-bold duration-300 hover:text-pillbug-teal"
                 on:mouseover=move |_| {
                     if user_is_hoverable.is_some() {
                         hover_show.set(true);

apis/src/components/layouts/base_layout.rs

@@ -23,7 +23,7 @@ lazy_static! {
     static ref NANOID: Regex =
         Regex::new(r"/game/(?<nanoid>.*)").expect("This regex should compile");
 }
-pub const COMMON_LINK_STYLE: &str = "bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-2 px-4 m-1 rounded";
+pub const COMMON_LINK_STYLE: &str = "bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-2 px-4 m-1 rounded";
 pub const DROPDOWN_BUTTON_STYLE: &str= "h-full p-2 hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 whitespace-nowrap block";
 
 #[component]
@@ -113,7 +113,7 @@ pub fn BaseLayout(children: Children) -> impl IntoView {
         <Meta name="color-scheme" content=color_scheme_meta/>
         <Meta
             name="viewport"
-            content="width=device-width, initial-scale=1, interactive-widget=resizes-content, virtual-keyboard=resize-layout"
+            content="width=device-width, initial-scale=1, interactive-widget=resizes-content, user-scalable=no"
         />
         <Html class=move || {
             match (color_scheme.prefers_dark)() {
@@ -123,7 +123,7 @@ pub fn BaseLayout(children: Children) -> impl IntoView {
         }/>
 
         <Body/>
-        <main class="min-h-screen w-full bg-light dark:bg-dark text-xs sm:text-sm md:text-md touch-manipulations">
+        <main class="min-h-screen w-full bg-light dark:bg-gray-950 text-xs sm:text-sm md:text-md touch-manipulations">
             <Header/>
             <Alert/>
             {children()}

apis/src/components/molecules/alert.rs

@@ -18,7 +18,7 @@ pub fn Alert() -> impl IntoView {
     };
     let color_and_text = move || match (alerts.last_alert)() {
         Some(AlertType::Error(_)) => ("bg-red-100 border-ladybug-red", "Error! "),
-        Some(AlertType::Warn(_)) => ("bg-yellow-100 border-queen-orange", "Warning! "),
+        Some(AlertType::Warn(_)) => ("bg-yellow-100 border-orange-twilight", "Warning! "),
         Some(AlertType::Notification(_)) => ("bg-blue-100 border-pillbug-teal", "Notification: "),
         None => ("", ""),
     };

apis/src/components/molecules/analysis_and_download.rs

@@ -17,7 +17,7 @@ pub fn AnalysisAndDownload() -> impl IntoView {
             <div class="flex items-center justify-center mt-1">
                 <a
                     href="/analysis"
-                    class="bg-ant-blue hover:bg-pillbug-teal duration-300 text-white rounded m-1 place-self-center justify-self-end"
+                    class="bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal duration-300 text-white rounded m-1 place-self-center justify-self-end"
                     on:click=analysis_setup
                 >
                     <Icon icon=icondata::TbMicroscope class="h-7 w-7 py-1"/>

apis/src/components/molecules/banner.rs

@@ -13,7 +13,7 @@ pub fn Banner(
     );
     view! {
         <div class=format!(
-            "flex flex-col items-center justify-center bg-gradient-to-r from-pillbug-teal to-ant-blue text-dark p-8 mb-4 rounded-sm {extend_tw_classes}",
+            "flex flex-col items-center justify-center bg-gradient-to-r from-pillbug-teal to-button-dawn text-black p-8 mb-4 rounded-sm {extend_tw_classes}",
         )>
             <h1 class="text-4xl font-bold mb-4 flex items-center">{logo} {title}</h1>
             <div class=text_class>{text}</div>

apis/src/components/molecules/challenge_row.rs

@@ -57,7 +57,11 @@ pub fn ChallengeRow(challenge: StoredValue<ChallengeResponse>, single: bool) ->
             .expect("div_ref to be loaded by now")
             .class_list();
         class_list
-            .remove_2("bg-ant-blue", "hover:bg-pillbug-teal")
+            .remove_3(
+                "dark:bg-button-twilight",
+                "bg-button-dawn",
+                "hover:bg-pillbug-teal",
+            )
             .expect("tw classes to exist");
         class_list
             .add_2("bg-grasshopper-green", "hover:bg-green-500")
@@ -119,7 +123,7 @@ pub fn ChallengeRow(challenge: StoredValue<ChallengeResponse>, single: bool) ->
     };
 
     view! {
-        <tr class="dark:odd:bg-odd-dark dark:even:bg-even-dark odd:bg-odd-light even:bg-even-light text-center items-center cursor-pointer max-w-fit">
+        <tr class="dark:odd:bg-header-twilight dark:even:bg-reserve-twilight odd:bg-odd-light even:bg-even-light text-center items-center cursor-pointer max-w-fit">
             <td class=td_class>
                 <div>{icon}</div>
             </td>
@@ -166,7 +170,7 @@ pub fn ChallengeRow(challenge: StoredValue<ChallengeResponse>, single: bool) ->
                                     <button
                                         ref=button_ref
                                         on:click=copy
-                                        class="bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white py-1 px-1 rounded focus:outline-none focus:shadow-outline m-1"
+                                        class="bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white py-1 px-1 rounded focus:outline-none focus:shadow-outline m-1"
                                     >
                                         <Icon icon=icondata::AiCopyOutlined class="w-6 h-6"/>
                                     </button>
@@ -199,7 +203,7 @@ pub fn ChallengeRow(challenge: StoredValue<ChallengeResponse>, single: bool) ->
                                 }
                             }
 
-                            class="bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 px-1 rounded focus:outline-none focus:shadow-outline m-1"
+                            class="bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 px-1 rounded focus:outline-none focus:shadow-outline m-1"
                         >
                             <Icon icon=icondata::AiCheckOutlined class="w-6 h-6"/>
 

apis/src/components/molecules/control_buttons.rs

@@ -111,7 +111,7 @@ pub fn ControlButtons() -> impl IntoView {
                 }
             }
         }
-        "bg-ant-blue hover:bg-pillbug-teal"
+        "bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal"
     };
 
     let rematch_text = move || {
@@ -242,7 +242,7 @@ pub fn ControlButtons() -> impl IntoView {
                     {rematch_text}
                 </button>
                 <button
-                    class="h-7 m-1 grow bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 px-2 rounded flex-shrink-0"
+                    class="h-7 m-1 grow bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 px-2 rounded flex-shrink-0"
                     on:click=new_opponent
                 >
                     New Game

apis/src/components/molecules/game_row.rs

@@ -87,7 +87,7 @@ pub fn GameRow(game: StoredValue<GameResponse>) -> impl IntoView {
     };
 
     view! {
-        <article class="flex h-72 px-2 py-4 duration-300 dark:odd:bg-odd-dark dark:even:bg-even-dark odd:bg-odd-light even:bg-even-light relative mx-2 w-full hover:bg-blue-light hover:dark:bg-blue-dark">
+        <article class="flex h-72 px-2 py-4 duration-300 dark:odd:bg-header-twilight dark:even:bg-reserve-twilight odd:bg-odd-light even:bg-even-light relative mx-2 w-full hover:bg-blue-light hover:dark:bg-teal-900">
             <div class="h-60 w-60 mx-2">
                 <ThumbnailPieces game=game()/>
             </div>

apis/src/components/molecules/hover_ratings.rs

@@ -16,7 +16,7 @@ pub fn HoverRating(user: StoredValue<UserResponse>) -> impl IntoView {
         })
         .collect_view();
     view! {
-        <div class="absolute z-40 bg-even-light dark:bg-even-dark rounded p-2 bottom-0 right-12">
+        <div class="absolute z-40 bg-even-light dark:bg-gray-950 rounded p-2 bottom-0 -left-24">
             {ratings}
         </div>
     }

apis/src/components/molecules/live_timer.rs

@@ -69,7 +69,7 @@ pub fn LiveTimer(side: Color) -> impl IntoView {
         if time_left() == Duration::from_secs(0) {
             String::from("bg-ladybug-red")
         } else {
-            String::new()
+            String::from("dark:bg-reserve-twilight")
         }
     });
     let ticks = create_rw_signal(0);

apis/src/components/molecules/ping.rs

@@ -29,5 +29,5 @@ pub fn Ping() -> impl IntoView {
         }
     };
 
-    view! { <div class="m-1 text-dark dark:text-white">{signal}</div> }
+    view! { <div class="m-1 text-black dark:text-white">{signal}</div> }
 }

apis/src/components/molecules/time_row.rs

@@ -39,8 +39,7 @@ pub fn TimeRow(
     };
     view! {
         <div class="flex items-center gap-1 justify-start">
-            {icon}
-            <p class=extend_tw_classes>{text}</p>
+            {icon} <p class=extend_tw_classes>{text}</p>
         </div>
     }
 }

apis/src/components/molecules/user_row.rs

@@ -12,6 +12,7 @@ use shared_types::game_speed::GameSpeed;
 pub fn UserRow(
     user: StoredValue<UserResponse>,
     #[prop(optional)] game_speed: Option<StoredValue<GameSpeed>>,
+    #[prop(optional)] on_profile: bool,
 ) -> impl IntoView {
     let rating = move || {
         if let Some(speed) = game_speed {
@@ -20,17 +21,30 @@ pub fn UserRow(
             None
         }
     };
+    let color = if on_profile {
+        "bg-light dark:bg-gray-950"
+    } else {
+        "dark:odd:bg-header-twilight dark:even:bg-reserve-twilight odd:bg-odd-light even:bg-even-light"
+    };
+    let profile_link = move || {
+        if on_profile {
+            view! { <ProfileLink username=user().username extend_tw_classes="truncate max-w-[120px]"/> }
+        } else {
+            view! {
+                <ProfileLink
+                    username=user().username
+                    extend_tw_classes="truncate max-w-[120px]"
+                    user_is_hoverable=user
+                />
+            }
+        }
+    };
     view! {
-        <div class="flex p-1 dark:odd:bg-odd-dark dark:even:bg-even-dark odd:bg-odd-light even:bg-even-light items-center justify-between h-10">
+        <div class=format!("flex p-1 items-center justify-between h-10 {color}")>
             <div class="flex w-48 mr-2 justify-between">
-
                 <div class="flex items-center">
                     <StatusIndicator username=user().username/>
-                    <ProfileLink
-                        username=user().username
-                        extend_tw_classes="truncate max-w-[120px]"
-                        user_is_hoverable=user
-                    />
+                    {profile_link()}
                 </div>
                 <Show when=move || { rating().is_some() }>
                     <Rating rating=rating().expect("Rating is some")/>

apis/src/components/organisms/confirm_mode_toggle.rs

@@ -6,7 +6,7 @@ use leptos_router::ActionForm;
 #[component]
 pub fn ConfirmModeToggle() -> impl IntoView {
     view! {
-        <p class="text-dark dark:text-white m-1">Move confirmation:</p>
+        <p class="text-black dark:text-white m-1">Move confirmation:</p>
         <div class="flex">
             <ConfirmModeButton move_confirm=MoveConfirm::Single/>
             <ConfirmModeButton move_confirm=MoveConfirm::Double/>
@@ -28,7 +28,7 @@ pub fn ConfirmModeButton(move_confirm: MoveConfirm) -> impl IntoView {
         if (config.confirm_mode.preferred_confirm)() == move_confirm() {
             "bg-pillbug-teal"
         } else {
-            "bg-ant-blue hover:bg-pillbug-teal"
+            "bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal"
         }
     };
 

apis/src/components/organisms/darkmode_toggle.rs

@@ -9,7 +9,7 @@ pub fn DarkModeToggle() -> impl IntoView {
     view! {
         <ActionForm
             action=color_scheme.action
-            class="max-h-6 md:max-h-7 inline-flex items-center border border-transparent text-base font-medium rounded-md shadow dark:bg-queen-orange bg-hive-black justify-center"
+            class="max-h-6 md:max-h-7 inline-flex items-center border border-transparent text-base font-medium rounded-md shadow dark:bg-orange-twilight bg-gray-950 justify-center"
         >
             <input
                 type="hidden"
@@ -22,12 +22,12 @@ pub fn DarkModeToggle() -> impl IntoView {
                 value=move || { if (color_scheme.prefers_dark)() { "dark" } else { "light" } }
                 inner_html=move || {
                     if (color_scheme.prefers_dark)() {
-                        r#"<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-6 text-hive-black bg-queen-orange dark:text-text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                        r#"<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-6 text-hive-black bg-orange-twilight dark:text-text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                                 <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                             </svg>
                         "#
                     } else {
-                        r#"<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-6 text-queen-orange bg-hive-black" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                        r#"<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-6 text-orange-twilight bg-gray-950" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                                 <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                             </svg>
                         "#

apis/src/components/organisms/display_profile.rs

@@ -31,7 +31,7 @@ pub fn DisplayProfile(user: StoredValue<UserResponse>) -> impl IntoView {
         <div class="m-1">
             <div class="flex flex-col items-start ml-3">
                 <div class="max-w-fit">
-                    <UserRow user=user/>
+                    <UserRow user=user on_profile=true/>
                 </div>
                 <div class="flex gap-1 flex-wrap">{ratings}</div>
             </div>

apis/src/components/organisms/display_timer.rs

@@ -59,12 +59,12 @@ pub fn DisplayTimer(placement: Placement, vertical: bool) -> impl IntoView {
     };
     let timer = expect_context::<TimerSignal>();
     let active_side = create_memo(move |_| match timer.signal.get().finished {
-        true => "bg-stone-200 dark:bg-dark",
+        true => "bg-stone-200 dark:reserve-twilight",
         false => {
             if (side() == Color::White) == (timer.signal.get().turn % 2 == 0) {
                 "bg-grasshopper-green"
             } else {
-                "bg-stone-200 dark:bg-dark"
+                "bg-stone-200 dark:reserve-twilight"
             }
         }
     });
@@ -116,7 +116,12 @@ pub fn DisplayTimer(placement: Placement, vertical: bool) -> impl IntoView {
                 {move || {
                     match timer.signal.get().time_mode {
                         TimeMode::Untimed => {
-                            view! { <Icon icon=icondata::BiInfiniteRegular class="h-full w-full"/> }
+                            view! {
+                                <Icon
+                                    icon=icondata::BiInfiniteRegular
+                                    class="h-full w-full dark:bg-reserve-twilight"
+                                />
+                            }
                         }
                         TimeMode::Correspondence | TimeMode::RealTime => {
                             view! { <LiveTimer side=side()/> }