➕💄 adds yew bootstrap

app/Cargo.toml

@@ -14,3 +14,4 @@ wasm-bindgen = "0.2.86"
 wasm-bindgen-futures = "0.4"
 web-sys = { version = "0.3", features = ['Location'] }
 yew = { version = "0.20", features = ["csr"] }
+yew-bootstrap = "0.5.18"

app/index.html

@@ -9,7 +9,7 @@
     <meta name="author" content="chriamue">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <link data-trunk href="./styles/index.css" rel="css" />
+    <link data-trunk href="styles/index.css" rel="css" />
     <link data-trunk rel="icon" href="favicon.ico" />
     <link data-trunk rel="copy-file" href="src/assets/github-brands.svg" />
 </head>

app/src/about.rs

@@ -1,9 +1,11 @@
 use yew::prelude::*;
+use yew_bootstrap::component::{Container, ContainerSize};
 
 #[function_component(About)]
 pub fn comp() -> Html {
     html! {
       <div class="about">
+        <Container class="bg-info" size={ContainerSize::ExtraLarge}>
           <p>{"
             The goal of this project is a raspberry pi device with a camera, that
             films your garden. If it detects a bird, it takes a picture and identifies
@@ -15,6 +17,7 @@ pub fn comp() -> Html {
             pictures.
             "}
           </p>
+        </Container>
       </div>
     }
 }

app/src/app.rs

@@ -1,4 +1,6 @@
 use yew::prelude::*;
+use yew_bootstrap::component::*;
+use yew_bootstrap::util::*;
 
 use crate::about::About;
 use crate::contexts::ApiUrlProvider;
@@ -15,8 +17,11 @@ pub fn app() -> Html {
         <ApiUrlProvider>
             <Header />
             <ServerInput />
+            <Line style={Color::Primary} />
             <Webcam />
+            <Line style={Color::Primary} />
             <SightingsContainer />
+            <Line style={Color::Primary} />
             <About />
             <Footer />
         </ApiUrlProvider>

app/src/contexts/api_url_ctx.rs

@@ -15,12 +15,12 @@ impl Default for ApiUrl {
             .protocol()
             .unwrap_or_else(|_| String::from("http:"));
         let host = web_sys::window()
-        .unwrap()
-        .location()
-        .host()
-        .unwrap_or_else(|_| String::from("localhost:8080"));
+            .unwrap()
+            .location()
+            .host()
+            .unwrap_or_else(|_| String::from("localhost:8080"));
         Self {
-            inner: format!("{}//{}/", protocol, host)
+            inner: format!("{}//{}/", protocol, host),
         }
     }
 }

app/src/server_input.rs

@@ -2,6 +2,7 @@ use crate::contexts::ApiUrlContext;
 use wasm_bindgen::JsCast;
 use web_sys::{EventTarget, HtmlInputElement};
 use yew::prelude::*;
+use yew_bootstrap::{component::{Button, Container, ContainerSize}, util::Color};
 
 #[function_component(ServerInput)]
 pub fn server_input() -> Html {
@@ -22,12 +23,14 @@ pub fn server_input() -> Html {
 
     html! {
         <div>
+        <Container class="bg-primary" size={ContainerSize::Medium}>
             <input type="text" value={input_value.clone()} onchange={on_input} placeholder="Enter server URL" />
-            <button onclick={Callback::from(move |_| {
+            <Button style={Color::Secondary} onclick={Callback::from(move |_| {
                 web_sys::console::log_1(&format!("Server URL set to: {}", api_url.inner).into());
             })}>
                 {"Set Server URL"}
-            </button>
+            </Button>
+        </Container>
         </div>
     }
 }

app/src/sightings.rs

@@ -2,6 +2,8 @@ use chrono::{DateTime, NaiveDateTime, Utc};
 use serde::{Deserialize, Serialize};
 use std::sync::{Arc, Mutex};
 use yew::prelude::*;
+use yew_bootstrap::component::Button;
+use yew_bootstrap::util::Color;
 
 use crate::contexts::{ApiUrl, ApiUrlContext};
 
@@ -112,14 +114,6 @@ impl Component for Sightings {
     }
 
     fn changed(&mut self, ctx: &Context<Self>, _old_props: &Self::Properties) -> bool {
-        web_sys::console::log_1(
-            &format!(
-                "Changed sightings {} : {}",
-                self.api_url,
-                ctx.props().api_url
-            )
-            .into(),
-        );
         if self.api_url != ctx.props().api_url {
             self.api_url = ctx.props().api_url.clone();
             self.fetch();
@@ -129,7 +123,7 @@ impl Component for Sightings {
         }
     }
 
-    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::ClickLeft => {
                 self.prev();
@@ -162,17 +156,17 @@ impl Component for Sightings {
         html! {
                     <>
         <div class="nav">
-        <button class="btn btn-primary" onclick={onleftclick.clone()}>
-        {"<-"} </button>
-        <button class="btn btn-primary" onclick={onrightclick.clone()}>{"->"}</button>
+        <Button style={Color::Primary} onclick={onleftclick.clone()}>
+        {"<-"} </Button>
+        <Button style={Color::Primary} onclick={onrightclick.clone()}>{"->"}</Button>
         </div>
         <div id="images" class="row card justify-content-center d-grid gap-3">
             {details}
         </div>
         <div class="nav">
-        <button class="btn btn-primary" onclick={onleftclick}>
-        {"<-"} </button>
-        <button class="btn btn-primary" onclick={onrightclick}>{"->"}</button>
+        <Button style={Color::Primary} onclick={onleftclick}>
+        {"<-"} </Button>
+        <Button style={Color::Primary} onclick={onrightclick}>{"->"}</Button>
         </div>
                     </>
                 }

app/styles/index.css

@@ -12,4 +12,5 @@
     text-align: center;
     width: 400px;
     background: #42b983;
-}
+    border-radius: 10px;
+}