diff --git a/src/components/button.rs b/src/components/button.rs index f392e8b..847735f 100644 --- a/src/components/button.rs +++ b/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>, } -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); diff --git a/src/components/button.scss b/src/components/button.scss index c1debfa..4476bf9 100644 --- a/src/components/button.scss +++ b/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); + } } }