✨ Add SearchIcon, SpacesIcon, ChatsIcon and RoomsIcon elements

Cargo.toml

@@ -10,8 +10,8 @@ web = ["dioxus/web"]
 
 [dependencies]
 dioxus = "0.5.*"
-dioxus-free-icons = { version = "0.8", features = ["material-design-icons-navigation", "ionicons"] }
 dioxus-sdk = { version = "0.5.*", features = ["utils"] }
+dioxus-free-icons = { version = "0.8.*", features = ["ionicons", "font-awesome-solid", "material-design-icons-navigation"] }
 
 # matrix-sdk = { git = "https://github.com/matrix-org/matrix-rust-sdk.git", branch = "main", default-features = false, features = ["js", "rustls-tls"] }
 matrix-sdk = { version = "0.7.*", default-features = false, features = ["js", "rustls-tls"] }

src/ui/components/_panel.scss

@@ -1,14 +1,12 @@
 @import "../base.scss";
 
 $panel-aspect-ratio: 1/1.618;
-$panel-padding-v: 5%;
-$panel-padding-h: 5%;
 
-%panel {
+@mixin panel($padding-v: 2%, $padding-h: 2%) {
-    padding: $panel-padding-v $panel-padding-h;
+    padding: $padding-v $padding-h;
 
-    height: calc(100% - $panel-padding-v - (2 * $border-big-width));
+    height: calc(100% - (2 * $padding-v) - (2 * $border-big-width));
-    width: calc(100% - $panel-padding-h - (2 * $border-big-width));
+    width: calc(100% - (2 * $padding-h) - (2 * $border-big-width));
     flex-shrink: 0;
 
     border: $border-big;

src/ui/components/button.rs

@@ -77,7 +77,7 @@ pub struct ButtonProps {
     children: Element,
 }
 
-fn Button(props: ButtonProps) -> Element {
+pub fn Button(props: ButtonProps) -> Element {
     rsx! {
         style { {STYLE_SHEET} },
 

src/ui/components/button.scss

@@ -5,16 +5,22 @@
     aspect-ratio: 3.5;
 
     border: $border-normal;
-    border-radius: $border-radius;
+    border-radius: 5%;
 
     color: get-color(greyscale, 0);
 
     font-family: "Geist";
     font-weight: bold;
 
+    // To center the inner svg
+    // TODO: Find a more efficient way to center
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     svg {
-        height: 100%;
+        height: 85%;
-        width: 100%;
+        width: 85%;
 
         text {
             font-size: 50;

src/ui/components/icons.rs

@@ -1,5 +1,8 @@
 use const_format::formatcp;
 use dioxus::prelude::*;
+use dioxus_free_icons::icons::fa_solid_icons::{
+    FaComments, FaLayerGroup, FaMagnifyingGlass, FaPeopleGroup,
+};
 use dioxus_free_icons::icons::md_navigation_icons::MdArrowDropDown;
 use dioxus_free_icons::{Icon, IconShape};
 
@@ -9,13 +12,54 @@ include!(concat!(env!("OUT_DIR"), "/style_vars.rs"));
 
 use style::{COLOR_PRIMARY_100, COLOR_TERNARY_100};
 
-pub fn DownArrowIcon() -> Element {
+macro_rules! transparent_icon {
+    ($name:ident, $icon:ident) => {
+        pub fn $name() -> Element {
+            rsx! {
+                style { {STYLE_SHEET} },
+                Icon {
+                    class: ClassName::TRANSPARENT_ICON,
+                    icon: $icon,
+                }
+            }
+        }
+    };
+}
+
+// TODO: Remove this icon once the conversation panel finished
+transparent_icon!(DownArrowIcon, MdArrowDropDown);
+
+transparent_icon!(SearchIcon, FaMagnifyingGlass);
+transparent_icon!(SpacesIcon, FaLayerGroup);
+transparent_icon!(ChatsIcon, FaComments);
+transparent_icon!(RoomsIcon, FaPeopleGroup);
+
+#[derive(Clone, PartialEq)]
+pub(crate) struct LogoShape;
+impl IconShape for LogoShape {
+    fn view_box(&self) -> &str {
+        "0 0 184 94"
+    }
+    fn xmlns(&self) -> &str {
+        "http://www.w3.org/2000/svg"
+    }
+    fn child_elements(&self) -> Element {
+        rsx! {
+            path {
+                "stroke-linejoin": "round",
+                "stroke-width": "6",
+                d: "M121.208 2 2 57.011l70.927-.265L61.363 92 182 36.724h-69.498L121.208 2Z"
+            }
+        }
+    }
+}
+
+pub fn LogoIcon() -> Element {
     rsx! {
         style { {STYLE_SHEET} },
 
         Icon {
-            class: ClassName::DOWN_ARROW_ICON,
+            icon: LogoShape,
-            icon: MdArrowDropDown,
         }
     }
 }

src/ui/components/icons.scss

@@ -1,4 +1,4 @@
-.down-arrow-icon {
+.transparent-icon {
 	color: transparent;
 
     path:last-child {

src/ui/components/login.scss

@@ -3,7 +3,8 @@
 @import "./spinner.scss";
 
 .login {
-    @extend %panel;
+    $padding: 5%;
+    @include panel($padding, $padding);
 
     $aspect-ratio: var(--aspect-ratio);
 

src/ui/components/spinner.rs

@@ -1,28 +1,10 @@
 use dioxus::prelude::*;
-use dioxus_free_icons::{Icon, IconShape};
+use dioxus_free_icons::Icon;
+
+use crate::ui::components::icons::LogoShape;
 
 turf::style_sheet!("src/ui/components/spinner.scss");
 
-#[derive(Clone, PartialEq)]
-struct _Spinner;
-impl IconShape for _Spinner {
-    fn view_box(&self) -> &str {
-        "0 0 184 94"
-    }
-    fn xmlns(&self) -> &str {
-        "http://www.w3.org/2000/svg"
-    }
-    fn child_elements(&self) -> Element {
-        rsx! {
-            path {
-                "stroke-linejoin": "round",
-                "stroke-width": "6",
-                d: "M121.208 2 2 57.011l70.927-.265L61.363 92 182 36.724h-69.498L121.208 2Z"
-            }
-        }
-    }
-}
-
 #[derive(PartialEq, Clone, Props)]
 pub struct SpinnerProps {
     #[props(default = true)]
@@ -38,7 +20,7 @@ pub fn Spinner(props: SpinnerProps) -> Element {
 
             Icon {
                 class: if props.animate { "" } else { ClassName::PAUSED },
-                icon: _Spinner,
+                icon: LogoShape,
             }
         }
     }