[RS-FE] Icons for navrail

rs-front/Dioxus.toml

@@ -16,7 +16,7 @@ asset_dir = "public"
 [web.app]
 
 # HTML title tag content
-title = "EEGRust"
+title = "🦀 EEGRust"
 
 [web.watcher]
 
@@ -31,7 +31,7 @@ watch_path = ["src", "public"]
 
 # CSS style file
 
-style = ["tailwind.css", "colors.css"]
+style = ["tailwind.css", "colors.css", "https://fonts.googleapis.com/css2?family=Fira+Sans&family=Josefin+Sans&family=Roboto+Slab&display=swap"]
 
 # Javascript code file
 script = ["colors.js"]

rs-front/input.css

@@ -23,7 +23,7 @@
 body {
     background-color: var(--c-background);
     color: var(--c-on-background);
-    font-family: Inter, "Inter Nerd Font", sans-serif;
+    font-family: "Fira Sans", sans-serif;
 }
 
 

rs-front/src/components/navrail.rs

@@ -4,6 +4,7 @@ use crate::icons::{
     HomeIcon,
     DocxIcon,
     KeyIcon,
+    ScanIcon,
 };
 
 
@@ -31,6 +32,12 @@ pub fn NavRail(cx: Scope) -> Element {
                     name: "Accesos",
                     icon: render! {KeyIcon {}}
                 }
+
+                NavRailButton {
+                    path: "/escaneo",
+                    name: "Escaneo",
+                    icon: render! {ScanIcon {}}
+                }
             }
         }
     }

rs-front/src/icons/mod.rs

@@ -1,7 +1,9 @@
 mod home_icon;
 mod docx_icon;
 mod key_icon;
+mod scan_icon;
 
 pub use home_icon::HomeIcon;
 pub use docx_icon::DocxIcon;
 pub use key_icon::KeyIcon;
+pub use scan_icon::ScanIcon;

rs-front/src/icons/scan_icon.rs

@@ -0,0 +1,16 @@
+use dioxus::prelude::*;
+
+pub fn ScanIcon(cx: Scope) -> Element {
+    render! {
+        svg {
+            xmlns: "http://www.w3.org/2000/svg",
+            class: "inline-block w-6",
+            fill: "var(--c-on-surface-variant)",
+            "viewBox": "0 0 256 256",
+            path {
+                d: "M224,40V80a8,8,0,0,1-16,0V48H176a8,8,0,0,1,0-16h40A8,8,0,0,1,224,40ZM80,208H48V176a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H80a8,8,0,0,0,0-16Zm136-40a8,8,0,0,0-8,8v32H176a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V176A8,8,0,0,0,216,168ZM40,88a8,8,0,0,0,8-8V48H80a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8V80A8,8,0,0,0,40,88Zm128,96H88a16,16,0,0,1-16-16V88A16,16,0,0,1,88,72h80a16,16,0,0,1,16,16v80A16,16,0,0,1,168,184ZM88,168h80V88H88Z"
+            }
+        }
+    }
+}
+

rs-front/src/main.rs

@@ -57,17 +57,15 @@ fn Home(cx: Scope) -> Element {
             }
             div {
                 h1 { 
-                    class: "text-red-400 text-2xl py-2 px-4 border border-red-400 rounded-md",
+                    class: "bg-c-primary text-c-on-primary text-2xl py-2 px-4 border-2 border-c-outline rounded-md",
                     "High-Five counter: {count} :D (Are classes slow?)"
                 }
                 button { onclick: move |_| count += 1, "Up high!" }
                 button { onclick: move |_| count -= 1, "Down low!" }
                 br {}
                 p {
-                    "Huh, it looks like using a project using dx makes it slower. We'll have to see how it goes..."
+                    class: "text-4xl inline-block bg-c-primary p-4 rounded-full h-18 w-18",
-                }
+                    "🦀"
-                p {
-                    "Or maybe not?"
                 }
             }
         }