Frontend: Result component: Use the stylist crate to apply basic css

3 files changed, 89 insertions, 2 deletions

diff --git a/Cargo.lock b/Cargo.lock
index 72b7a20..4f92603 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -620,6 +620,7 @@ dependencies = [
  "gloo-net",
  "itertools",
  "lib",
+ "stylist",
  "urlencoding",
  "wasm-bindgen",
  "wasm-bindgen-futures",
@@ -1169,6 +1170,9 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7a5bbe824c507c5da5956355e86a746d82e0e1464f65d862cc5e71da70e94b2c"
 dependencies = [
  "cfg-if 1.0.0",
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
 ]
 
 [[package]]
@@ -1273,6 +1277,15 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "68783febc7782c6c5cb401fbda4de5a9898be1762314da0bb2c10ced61f18b0c"
 
 [[package]]
+name = "litrs"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f9275e0933cf8bb20f008924c0cb07a0692fe54d8064996520bf998de9eb79aa"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
 name = "local-channel"
 version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -1372,6 +1385,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "minimal-lexical"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"
+
+[[package]]
 name = "miniz_oxide"
 version = "0.5.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -1497,6 +1516,16 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72ef4a56884ca558e5ddb05a1d1e7e1bfd9a68d9ed024c21704cc98872dae1bb"
 
 [[package]]
+name = "nom"
+version = "7.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a8903e5a29a317527874d0402f867152a3d21c908bb0b933e416c65e301d4c36"
+dependencies = [
+ "memchr",
+ "minimal-lexical",
+]
+
+[[package]]
 name = "num_cpus"
 version = "1.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2255,6 +2284,50 @@ dependencies = [
 ]
 
 [[package]]
+name = "stylist"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7687c91ed89b4f6a80e41a354263555980187b6c9ca6c0408089c6781dca4377"
+dependencies = [
+ "fastrand",
+ "instant",
+ "once_cell",
+ "stylist-core",
+ "stylist-macros",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "stylist-core"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "25355f8d91ef7d250ab53f1f8411b458f54c7dcf76a1cfef47355c0b1d0bfed9"
+dependencies = [
+ "nom",
+ "once_cell",
+ "thiserror",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "stylist-macros"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7930b612c9250dac3735aa35fcc1084e51ca84bf7a270f23856df08598821251"
+dependencies = [
+ "itertools",
+ "litrs",
+ "log",
+ "nom",
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "stylist-core",
+ "syn",
+]
+
+[[package]]
 name = "syn"
 version = "1.0.102"
 source = "registry+https://github.com/rust-lang/crates.io-index"
diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml
index f3d1e6d..5b76828 100644
--- a/frontend/Cargo.toml
+++ b/frontend/Cargo.toml
@@ -16,4 +16,5 @@ gloo-net = "0.2"
 wasm-bindgen-futures = "0.4"
 itertools = "0.10.5"
 urlencoding = "2.1.2"
+stylist = "0.10"
 lib = { path = "../lib" }
\ No newline at end of file
diff --git a/frontend/src/app.rs b/frontend/src/app.rs
index d4ef37c..2389922 100644
--- a/frontend/src/app.rs
+++ b/frontend/src/app.rs
@@ -2,6 +2,7 @@ use crate::Route;
 use gloo_net::http::Request;
 use itertools::Itertools;
 use lib::lib::*;
+use stylist::style;
 use wasm_bindgen::*;
 use web_sys::{EventTarget, HtmlInputElement};
 use yew::prelude::*;
@@ -14,11 +15,23 @@ pub struct ResultComponentProps {
 
 #[function_component(ResultComponent)]
 fn result_component(props: &ResultComponentProps) -> Html {
+    let style = style!(
+        r#"
+        a {
+            text-decoration: none;
+        }
+        .underline-hover:hover {
+            text-decoration: underline;
+        }
+    "#
+    )
+    .unwrap();
+    let style = style.get_class_name().to_owned();
     html! {
-        <div class="my-5">
+        <div class={format!("mb-5 {}", style)}>
             <a href={props.result.url.clone()}>
                 <p class="text-muted">{props.result.url.clone()}</p>
-                <p>{props.result.title.clone()}</p>
+                <p class="underline-hover">{props.result.title.clone()}</p>
             </a>
             <p>//No description if no description
                 {props.result.description.clone()}{format!("PRIO: {}", props.result.priority)}