colored buttons

Author: Vanawy

src/button.rs

@@ -1,37 +1,46 @@
 use yew::prelude::*;
 
 pub struct Button {
-    action: ButtonAction
+    action: Action,
 }
 
 
 impl Button {
     fn content(&self) -> Html {
         match self.action {
-            ButtonAction::Add(n) => html! {format!("{}", n)},
-            ButtonAction::Reset => html!{
+            Action::Add(n) => html! {format!("{}", n)},
+            Action::Reset => html!{
                 <sl-icon name="x-lg" />
             },
-            ButtonAction::Delete => html!{
+            Action::Delete => html!{
                 <sl-icon name="chevron-left" />
             },
         }
     }
+
+    fn variant(&self) -> AttrValue {
+        match self.action {
+            Action::Add(_) => AttrValue::from("default"),
+            Action::Reset => AttrValue::from("danger"),
+            Action::Delete => AttrValue::from("warning"),
+        }
+    }
 }
 
 #[derive(Properties, PartialEq)]
 pub struct Props {
-    pub action: ButtonAction,
-    pub onclick: Callback<ButtonAction>
+    pub action: Action,
+    pub onclick: Callback<Action>,
 }
 
 #[derive(PartialEq, Clone)]
-pub enum ButtonAction {
+pub enum Action {
     Add(u8),
     Reset,
     Delete,
 }
 
+
 impl Component for Button {
     type Message = ();
     type Properties = Props;
@@ -47,10 +56,15 @@ impl Component for Button {
     fn view(&self, ctx: &Context<Self>) -> Html {
 
         let action = self.action.clone();
+        let variant = self.variant();
         let onclick = ctx.props().onclick.reform(move |_| action.clone());
+        let outline = match self.action {
+            Action::Reset | Action::Delete => Some("outline"),
+            _ => None
+        };
 
         html! {
-            <sl-button {onclick}>{self.content()}</sl-button>
+            <sl-button {onclick} {variant} {outline}>{self.content()}</sl-button>
         }
     }
 }

src/calculator.rs

@@ -1,6 +1,6 @@
 use std::ops::Range;
 use yew::prelude::*;
-use crate::button::{Button, ButtonAction};
+use crate::button::{Button, Action};
 const WEBSITE_URL: &str = "https://vanawy.dev";
 
 pub struct Calculator {
@@ -11,7 +11,7 @@ pub struct Calculator {
 }
 
 pub enum CalculatorMsg {
-    ButtonClicked(ButtonAction),
+    ButtonClicked(Action),
 }
 
 impl Calculator {
@@ -39,13 +39,13 @@ impl Component for Calculator {
         match msg {
             CalculatorMsg::ButtonClicked(action) => {
                 match action {
-                    ButtonAction::Add(n) => {
+                    Action::Add(n) => {
                         self.scores.push(n as u64);
                     },
-                    ButtonAction::Reset => {
+                    Action::Reset => {
                         self.scores = Vec::new();
                     },
-                    ButtonAction::Delete => {
+                    Action::Delete => {
                         self.scores.pop();
                     },
                 };
@@ -72,10 +72,10 @@ impl Component for Calculator {
 
         let mut actions = Vec::new();
 
-        Range::from(1..10).for_each(|i| actions.push(ButtonAction::Add(i)));
-        actions.push(ButtonAction::Reset);
-        actions.push(ButtonAction::Add(10));
-        actions.push(ButtonAction::Delete);
+        Range::from(1..10).for_each(|i| actions.push(Action::Add(i)));
+        actions.push(Action::Reset);
+        actions.push(Action::Add(10));
+        actions.push(Action::Delete);
 
         let buttons = actions.iter().map(|action| {
             html! {