🎨 Factorize the definition of the Button components

src/components/button.rs

@@ -3,6 +3,59 @@ use dioxus_free_icons::{Icon, IconShape};
 
 turf::style_sheet!("src/components/button.scss");
 
+macro_rules! svg_text_icon {
+    ($name:ident,$text:literal) => {
+        struct $name;
+        impl IconShape for $name {
+            fn view_box(&self) -> String {
+                String::from("0 0 250 50")
+            }
+
+            fn xmlns(&self) -> String {
+                String::from("http://www.w3.org/2000/svg")
+            }
+
+            fn child_elements(&self) -> LazyNodes {
+                rsx! {
+                    text {
+                        x: "50%",
+                        y: "50%",
+                        $text
+                    }
+                }
+            }
+        }
+    };
+}
+
+macro_rules! svg_text_button {
+    ($name:ident,$style:ident,$icon:ident) => {
+        pub fn $name<'a>(cx: Scope<'a, ButtonProps>) -> Element<'a> {
+            cx.render(rsx! {
+                style { STYLE_SHEET },
+
+                Button {
+                    id: cx.props.id.unwrap_or(""),
+
+                    style: ClassName::$style,
+
+                    onclick: |event| {
+                        if let Some(cb) = &cx.props.onclick {
+                            cb.call(event);
+                        }
+                    },
+
+                    focus: cx.props.focus,
+
+                    Icon {
+                        icon: $icon,
+                    }
+                }
+            })
+        }
+    };
+}
+
 #[derive(Props)]
 struct _ButtonProps<'a> {
     children: Element<'a>,
@@ -41,28 +94,6 @@ fn Button<'a>(cx: Scope<'a, _ButtonProps<'a>>) -> Element<'a> {
     })
 }
 
-#[derive(Copy, Clone, Debug)]
-struct RegisterText;
-impl IconShape for RegisterText {
-    fn view_box(&self) -> String {
-        String::from("0 0 250 50")
-    }
-    fn xmlns(&self) -> String {
-        String::from("http://www.w3.org/2000/svg")
-    }
-    fn child_elements(&self) -> LazyNodes {
-        rsx! {
-            text {
-                y: "50%",
-                "dominant-baseline": "central",
-                "font-size": "50",
-                style: "fill: #ffffff",
-                "REGISTER"
-            }
-        }
-    }
-}
-
 #[derive(Props)]
 pub struct ButtonProps<'a> {
     #[props(default = false)]
@@ -73,72 +104,17 @@ pub struct ButtonProps<'a> {
     onclick: Option<EventHandler<'a, MouseEvent>>,
 }
 
-pub fn RegisterButton<'a>(cx: Scope<'a, ButtonProps>) -> Element<'a> {
-    cx.render(rsx! {
-        style { STYLE_SHEET },
+svg_text_icon!(RegisterText, "REGISTER");
+svg_text_button!(RegisterButton, REGISTER_BUTTON, RegisterText);
 
-        Button {
-            id: cx.props.id.unwrap_or(""),
+svg_text_icon!(LoginText, "LOGIN");
+svg_text_button!(LoginButton, LOGIN_BUTTON, LoginText);
 
-            style: ClassName::REGISTER_BUTTON,
+svg_text_icon!(SuccessText, "OK");
+svg_text_button!(SuccessButton, SUCCESS_BUTTON, SuccessText);
 
-            onclick: |event| {
-                if let Some(cb) = &cx.props.onclick {
-                    cb.call(event);
-                }
-            },
+svg_text_icon!(WarningText, "WARNING");
+svg_text_button!(WarningButton, WARNING_BUTTON, WarningText);
 
-            focus: cx.props.focus,
-
-            Icon {
-                icon: RegisterText,
-            }
-        }
-    })
-}
-
-#[derive(Copy, Clone, Debug)]
-struct LoginText;
-impl IconShape for LoginText {
-    fn view_box(&self) -> String {
-        String::from("0 0 150 50")
-    }
-    fn xmlns(&self) -> String {
-        String::from("http://www.w3.org/2000/svg")
-    }
-    fn child_elements(&self) -> LazyNodes {
-        rsx! {
-            text {
-                y: "50%",
-                "dominant-baseline": "central",
-                "font-size": "50",
-                style: "fill: #ffffff",
-                "LOGIN"
-            }
-        }
-    }
-}
-
-pub fn LoginButton<'a>(cx: Scope<'a, ButtonProps>) -> Element<'a> {
-    cx.render(rsx! {
-        style { STYLE_SHEET },
-
-        Button {
-            id: cx.props.id.unwrap_or(""),
-
-            style: ClassName::LOGIN_BUTTON,
-
-            onclick: |event| {
-                if let Some(cb) = &cx.props.onclick {
-                    cb.call(event);
-                }
-            },
-
-            focus: cx.props.focus,
-
-            Icon {
-                icon: LoginText,
-            }
-        }
-    })
-}
+svg_text_icon!(ErrorText, "ERROR");
+svg_text_button!(ErrorButton, ERROR_BUTTON, ErrorText);

src/components/button.scss

@@ -4,7 +4,7 @@
     height: 100%;
     aspect-ratio: 3.5;
 
-    border: $border-big;
+    border: $border-normal;
     border-radius: $border-radius;
 
     color: get-color(greyscale, 0);
@@ -13,8 +13,15 @@
     font-weight: bold;
 
     svg {
-        height: 60%;
+        height: 100%;
         width: 100%;
+
+        text {
+            font-size: 50;
+            text-anchor: middle;
+            dominant-baseline: central;
+            fill: get-color(greyscale, 0);
+        }
     }
 }