💄 Add the Bulma CSS patches

src/web.rs

@@ -73,6 +73,7 @@ pub fn create_app(state: AppState) -> Router {
         .route("/icon-192.png", get(r#static::get_icon_192))
         .route("/icon-512.png", get(r#static::get_icon_512))
         .route("/home.png", get(r#static::get_home_icon))
+        .route("/bulma-patches.css/:version", get(r#static::get_bulma_patches))
         .layer(tracing_layer)
         .with_state(state)
 }

src/web/static.rs

@@ -26,6 +26,8 @@ use axum::{
 };
 
 const CACHE_PUBLIC_WEEK: (HeaderName, &str) = (CACHE_CONTROL, "max-age=604800, public");
+
+const CONTENT_TYPE_CSS: (HeaderName, &str) = (CONTENT_TYPE, "text/css");
 const CONTENT_TYPE_MICROSOFT_ICON: (HeaderName, &str) = (CONTENT_TYPE, "image/vnd.microsoft.icon");
 const CONTENT_TYPE_PNG: (HeaderName, &str) = (CONTENT_TYPE, "image/png");
 
@@ -54,3 +56,25 @@ pub async fn get_icon_512() -> impl IntoResponse {
 pub async fn get_home_icon() -> impl IntoResponse {
     ([CONTENT_TYPE_PNG, CACHE_PUBLIC_WEEK], include_bytes!("static/home.png"))
 }
+
+/// Get the patches for [Bulma][1].
+///
+/// Unfortunately, [`bulma-prefers-dark`][2] is not maintained any more,
+/// and the Bulma developer [ignores][3] the dark mode for years,
+/// so, I have to patch some additional colors.
+///
+/// [1]: https://bulma.io/
+/// [2]: https://github.com/jloh/bulma-prefers-dark
+/// [3]: https://github.com/jgthms/bulma/issues/2342
+pub async fn get_bulma_patches() -> impl IntoResponse {
+    // language=css
+    const CSS: &str = r#"
+        @media (prefers-color-scheme: dark) {
+            .has-background-success-light { background-color: hsl(141, 53%, 14%) !important; }
+            .has-background-danger-light { background-color: hsl(348, 86%, 14%) !important; }
+            .has-background-warning-light { background-color: hsl(48, 100%, 14%) !important; }
+            .has-background-info-light { background-color: hsl(204, 71%, 14%) !important; }
+        }
+    "#;
+    ([CONTENT_TYPE_CSS, CACHE_PUBLIC_WEEK], CSS)
+}

src/web/views/partials.rs

@@ -14,6 +14,7 @@ pub fn head() -> Markup {
             link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png";
             link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" integrity="sha512-HqxHUkJM0SYcbvxUw5P60SzdOTy/QVwA1JJrvaXJv4q7lmbDZCmZaqz01UPOaQveoxfYRv1tHozWGPMcuTBuvQ==" crossorigin="anonymous" referrerpolicy="no-referrer";
             link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma-prefers-dark/0.1.0-beta.1/bulma-prefers-dark.min.css" integrity="sha512-8L9NjgWBr9opkijcN9ZZCzzl7T3hVqji0baeKdTvfq1VN119XV4RNCGGI6vAF8ygQkSK0Qew84toTqqpzmbxUw==" crossorigin="anonymous" referrerpolicy="no-referrer";
+            link rel="stylesheet" href=(concat!("/bulma-patches.css/", crate_version!()));
             link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer";
             script src="https://js.sentry-cdn.com/e0851235b23f439aa285aa8f0b431547.min.js" crossorigin="anonymous" {}
             script src="https://cdnjs.cloudflare.com/ajax/libs/htmx/1.9.2/htmx.min.js" integrity="sha512-ULbUWm8wCS6zRoxK/2v51vUHGhKvK8PSiqA02tyUYlYoeQm5wB8xr8lObq5zmNGpYaZsED0NLhaiPAAm2VbhXw==" crossorigin="anonymous" referrerpolicy="no-referrer" {}

src/web/views/profile.rs

@@ -108,6 +108,8 @@ fn vehicle_card(
     let description = state.tankopedia.get(&stats.tank_id);
     let markup = html! {
         div.card {
+            @let is_premium = description.is_some_and(|d| d.is_premium);
+
             div.card-image {
                 figure.image {
                     @let url = description
@@ -122,23 +124,23 @@ fn vehicle_card(
                     div.media-content {
                         p.title."is-5" {
                             @match description {
-                                Some(description) => { (description.name) },
+                                Some(description) => { span.has-text-warning-dark[is_premium] { (description.name) } },
                                 None => { "#" (stats.tank_id) },
                             }
                         }
                         @if let LocalResult::Single(timestamp) = stats.last_battle_time() {
                             p.subtitle."is-6" {
                                 span.has-text-grey { "Last played" }
                                 " "
-                                span title=(timestamp) { (HumanTime::from(timestamp)) }
+                                span.has-text-weight-medium title=(timestamp) { (HumanTime::from(timestamp)) }
                             }
                         }
                     }
                 }
             }
 
             footer.card-footer {
-                (vehicle_card_footer(account_id, stats.tank_id, rating)) // TODO: actual rating.
+                (vehicle_card_footer(account_id, stats.tank_id, rating))
             }
         }
     };
@@ -152,7 +154,7 @@ fn vehicle_card(
 /// It's extracted for HTMX to be able to refresh the rating buttons.
 fn vehicle_card_footer(account_id: u32, tank_id: u16, rating: Option<Rating>) -> Markup {
     html! {
-        a.card-footer-item
+        a.card-footer-item.has-background-success-light[rating == Some(Rating::Like)]
             data-hx-post=(
                 if rating != Some(Rating::Like) {
                     format!("/profile/{account_id}/vehicle/{tank_id}/like")
@@ -167,7 +169,7 @@ fn vehicle_card_footer(account_id: u32, tank_id: u16, rating: Option<Rating>) ->
                 span { "Like" }
             }
         }
-        a.card-footer-item
+        a.card-footer-item.has-background-danger-light[rating == Some(Rating::Dislike)]
             data-hx-post=(
                 if rating != Some(Rating::Dislike) {
                     format!("/profile/{account_id}/vehicle/{tank_id}/dislike")