feat: Improve design and UX of Accordion (#382)

crates/components/src/accordion.rs

@@ -1,7 +1,20 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::MouseEvent;
-use freya_hooks::{use_animation, use_get_theme, use_node, AccordionTheme, Animation};
+use freya_hooks::{
+    use_animation, use_get_theme, use_node, use_platform, AccordionTheme, Animation,
+};
+use winit::window::CursorIcon;
+
+/// Indicates the current status of the accordion.
+#[derive(Debug, Default, PartialEq, Clone, Copy)]
+pub enum AccordionStatus {
+    /// Default state.
+    #[default]
+    Idle,
+    /// Mouse is hovering the accordion.
+    Hovering,
+}
 
 /// [`Accordion`] component properties.
 #[derive(Props)]
@@ -26,9 +39,15 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
     let animation = use_animation(cx, || 0.0);
     let open = use_state(cx, || false);
     let (node_ref, size) = use_node(cx);
+    let status = use_state(cx, AccordionStatus::default);
+    let platform = use_platform(cx);
 
     let animation_value = animation.value();
-    let AccordionTheme { background, color } = theme.accordion;
+    let AccordionTheme {
+        background,
+        color,
+        border_fill,
+    } = theme.accordion;
 
     // Adapt the accordion if the body size changes
     use_memo(
@@ -58,16 +77,42 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
         open.set(!*open.get());
     };
 
+    use_on_unmount(cx, {
+        to_owned![status, platform];
+        move || {
+            if *status.get() == AccordionStatus::Hovering {
+                platform.set_cursor(CursorIcon::default());
+            }
+        }
+    });
+
+    let onmouseenter = {
+        to_owned![status, platform];
+        move |_| {
+            platform.set_cursor(CursorIcon::Hand);
+            status.set(AccordionStatus::Hovering);
+        }
+    };
+
+    let onmouseleave = move |_| {
+        platform.set_cursor(CursorIcon::default());
+        status.set(AccordionStatus::default());
+    };
+
     render!(
         rect {
+            onmouseenter: onmouseenter,
+            onmouseleave: onmouseleave,
             overflow: "clip",
             color: "{color}",
             padding: "10",
-            corner_radius: "3",
+            margin: "2 4",
+            corner_radius: "6",
             width: "100%",
             height: "auto",
             background: "{background}",
             onclick: onclick,
+            border: "1 solid {border_fill}",
             &cx.props.summary
             rect {
                 overflow: "clip",

crates/hooks/src/use_theme.rs

@@ -110,6 +110,7 @@ pub struct ExternalLinkTheme {
 pub struct AccordionTheme {
     pub color: &'static str,
     pub background: &'static str,
+    pub border_fill: &'static str,
 }
 
 /// Theming properties for Loader component.
@@ -221,7 +222,8 @@ pub const LIGHT_THEME: Theme = Theme {
     },
     accordion: AccordionTheme {
         color: "black",
-        background: "rgb(215, 215, 215)",
+        background: "rgb(245, 245, 245)",
+        border_fill: "rgb(210, 210, 210)",
     },
     loader: LoaderTheme {
         primary_color: "rgb(50, 50, 50)",
@@ -294,7 +296,8 @@ pub const DARK_THEME: Theme = Theme {
     },
     accordion: AccordionTheme {
         color: "white",
-        background: "rgb(30, 30, 30)",
+        background: "rgb(60, 60, 60)",
+        border_fill: "rgb(80, 80, 80)",
     },
     loader: LoaderTheme {
         primary_color: "rgb(150, 150, 150)",