Use new aviary icon

And just simplify mobile styling to use smaller heading text

README.md

@@ -30,4 +30,4 @@
 ### start local services
 
 - `just supabase-up`: Start up local supabase with some seed data
-- `just watch-server`: Start dioxus app running at `localhost:3000` with hot reload
+- `just watch`: Start dioxus app running at `localhost:3000` with hot reload

app/src/main.rs

@@ -16,17 +16,13 @@ mod utils;
 fn main() {
     // Init storage
     dioxus_sdk::set_dir!();
+
     // Init logger
     let log_level = option_env!("RUST_LOG")
         .and_then(|level| level.parse().ok())
         .unwrap_or(Level::INFO);
     dioxus_logger::init(log_level).expect("failed to init logger");
-    // launch(App)
-    // use below until --port 3000 supported on fullstack
-    #[allow(clippy::let_unit_value)]
-    // let cfg = server_only!(
-    //     dioxus::fullstack::Config::new().addr(std::net::SocketAddr::from(([0, 0, 0, 0], 3000)))
-    // );
-    // LaunchBuilder::fullstack().with_cfg(cfg).launch(ui::App)
+
+    // Launch the app
     launch(ui::App)
 }

app/src/ui/mod.rs

@@ -69,33 +69,29 @@ enum Route {
 #[component]
 fn HeaderFooter() -> Element {
     let route: Route = use_route();
-    let is_index = matches!(route, Route::Index {});
+    const AVIARY: &str = asset!("assets/aviary.png");
+    const AVIARY_ACTIVE: &str = asset!("assets/aviary_active.png");
+    let aviary_src = if matches!(route, Route::Birds {}) {
+        AVIARY_ACTIVE
+    } else {
+        AVIARY
+    };
     rsx! {
         div {
             class: "flex flex-col sm:h-dvh selection:bg-purple-dark overflow-x-clip sm:overflow-x-visible",
             header {
                 id: "header",
-                class: "text-green-dark grow-0 shrink-0 px-1 py-2 w-full flex flex-row justify-between sm:justify-center items-center gap-4",
-                class: if is_index {
-                    "h-20 text-5xl"
-                } else {
-                    "h-16 sm:h-20 text-4xl sm:text-5xl"
-                },
-                // TODO: hambuger menu for mobile (with nice animation 3 bars to X)
+                class: "text-green-dark grow-0 shrink-0 px-1 py-2 w-full flex flex-row justify-between sm:justify-center items-center gap-8",
+                class: "h-16 sm:h-20 text-4xl sm:text-5xl",
                 div {
                     class: "shrink-0",
                     Link {
-                        class: "outline-purple-dark",
+                        class: "outline-none focus-visible:ring",
                         to: Route::Birds {},
-                        // TODO: use hover:bg-url-[highlighted] to use the yellow fill on hover
-                        img {
-                            class: if is_index {
-                                "h-12"
-                            } else {
-                                "h-10 sm:h-12"
-                            },
-                            src: asset!("assets/aviary.png"),
-                            alt: "Your Aviary",
+                        div {
+                            class: "bg-contain bg-no-repeat bg-center",
+                            class: "h-10 w-8 sm:h-12 sm:w-10",
+                            background_image: "url({aviary_src})",
                         }
                         span { class: "sr-only", "Your Aviary" }
                     }
@@ -111,12 +107,7 @@ fn HeaderFooter() -> Element {
                 }
                 // Just jank until another icon is here
                 div {
-                    class: "shrink-0",
-                    class: if is_index {
-                        "w-[41px]"
-                    } else {
-                        "w-[34px] sm:w-[41px]"
-                    },
+                    class: "shrink-0 h-10 w-8 sm:h-12 sm:w-10",
                 }
             }
             div {

app/src/ui/pages/index.rs

@@ -13,7 +13,7 @@ pub fn Index() -> Element {
                     // screen-lg == 1024px, 5/10 of the lg-screen is 512px
                     class: "lg:ml-auto lg:max-w-[512px] flex flex-col justify-between gap-5",
                     div {
-                        class: "text-4xl text-center uppercase",
+                        class: "text-3xl sm:text-4xl text-center uppercase",
                         "10 new birds every day"
                     }
                     PackOfTheDay { }
@@ -25,17 +25,17 @@ pub fn Index() -> Element {
                     // screen-lg == 1024px, 5/10 of the lg-screen is 512px
                     class: "lg:mr-auto lg:ml-48 lg:max-w-[512px] uppercase",
                     div {
-                        class: "w-full sm:w-56 text-5xl text-left text-bold leading-normal sm:leading-tight",
+                        class: "w-full sm:w-56 text-4xl sm:text-5xl text-left text-bold leading-normal sm:leading-tight",
                         "A game that helps you memorize bird calls."
                     }
                 }
             }
             div {
-                class: "text-5xl col-span-10 text-left bg-yellow-dark text p-8 sm:p-16",
+                class: "text-4xl sm:text-5xl col-span-10 text-left bg-yellow-dark text p-8 sm:p-16",
                 div {
                     class: "max-w-screen-lg mx-auto",
                     span {
-                        class: "text-5xl",
+                        class: "text-4xl sm:text-5xl",
                         "The wild speaks. "
                     }
                     span {

justfile

@@ -1,13 +1,13 @@
 set dotenv-load
 
-# watch server
+# run initial setup
 initial-setup:
   #!/usr/bin/env bash
   cd app
   npm install
 
-# watch server
-watch-server platform='web':
+# watch app w/ hotreload
+watch platform='web':
   #!/usr/bin/env bash
   set -euxo pipefail
   cd app