feat: Replace sidebar items margin with sidebar spacing

marc2332 · Aug 31, 2024 · 78014a7 · 78014a7
1 parent d44034c
commit 78014a7
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 2 deletions.
diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs
@@ -130,6 +130,7 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
     let theme = use_applied_theme!(&props.theme, scroll_view);
     let scrollbar_theme = use_applied_theme!(&props.scrollbar_theme, scroll_bar);
 
+    let spacing = &theme.spacing;
     let padding = &theme.padding;
     let user_container_width = &theme.width;
     let user_container_height = &theme.height;
@@ -359,6 +360,7 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
                 height: "{container_height}",
                 rect {
                     overflow: "clip",
+                    spacing: "{spacing}",
                     padding: "{padding}",
                     height: "100%",
                     width: "100%",

diff --git a/crates/components/src/sidebar.rs b/crates/components/src/sidebar.rs
@@ -29,6 +29,7 @@ pub fn Sidebar(
     sidebar: Element,
 ) -> Element {
     let SidebarTheme {
+        spacing,
         font_theme,
         background,
     } = use_applied_theme!(&theme, sidebar);
@@ -48,6 +49,7 @@ pub fn Sidebar(
                 ScrollView {
                     theme: theme_with!(ScrollViewTheme {
                         padding: "8".into(),
+                        spacing: spacing,
                     }),
                     {sidebar}
                 }
@@ -74,6 +76,7 @@ pub fn SidebarItem(
     onclick: Option<EventHandler<()>>,
 ) -> Element {
     let SidebarItemTheme {
+        margin,
         hover_background,
         background,
         font_theme,
@@ -113,7 +116,7 @@ pub fn SidebarItem(
     rsx!(
         rect {
             overflow: "clip",
-            margin: "4 0",
+            margin: "{margin}",
             onclick,
             onmouseenter,
             onmouseleave,

diff --git a/crates/hooks/src/theming/dark.rs b/crates/hooks/src/theming/dark.rs
@@ -66,6 +66,7 @@ pub const DARK_THEME: Theme = Theme {
         height: LIGHT_THEME.scroll_view.height,
         width: LIGHT_THEME.scroll_view.width,
         padding: LIGHT_THEME.scroll_view.padding,
+        spacing: LIGHT_THEME.scroll_view.spacing,
     },
     tooltip: TooltipTheme {
         background: cow_borrowed!("rgb(35,35,35)"),
@@ -142,12 +143,14 @@ pub const DARK_THEME: Theme = Theme {
         margin: LIGHT_THEME.icon.margin,
     },
     sidebar: SidebarTheme {
+        spacing: LIGHT_THEME.sidebar.spacing,
         background: cow_borrowed!("rgb(20, 20, 20)"),
         font_theme: FontTheme {
             color: cow_borrowed!("white"),
         },
     },
     sidebar_item: SidebarItemTheme {
+        margin: LIGHT_THEME.sidebar_item.margin,
         background: cow_borrowed!("transparent"),
         hover_background: cow_borrowed!("rgb(45, 45, 45)"),
         font_theme: FontTheme {

diff --git a/crates/hooks/src/theming/light.rs b/crates/hooks/src/theming/light.rs
@@ -47,7 +47,7 @@ pub const LIGHT_THEME: Theme = Theme {
         shadow: cow_borrowed!("0 4 5 0 rgb(0, 0, 0, 0.1)"),
     },
     switch: SwitchTheme {
-        margin: cow_borrowed!("2"),
+        margin: cow_borrowed!("0"),
         background: cow_borrowed!("rgb(121, 116, 126)"),
         thumb_background: cow_borrowed!("rgb(231, 224, 236)"),
         enabled_background: cow_borrowed!("rgb(103, 80, 164)"),
@@ -66,6 +66,7 @@ pub const LIGHT_THEME: Theme = Theme {
         height: cow_borrowed!("fill"),
         width: cow_borrowed!("fill"),
         padding: cow_borrowed!("0"),
+        spacing: cow_borrowed!("0"),
     },
     tooltip: TooltipTheme {
         background: cow_borrowed!("rgb(245, 245, 245)"),
@@ -142,12 +143,14 @@ pub const LIGHT_THEME: Theme = Theme {
         margin: cow_borrowed!("0"),
     },
     sidebar: SidebarTheme {
+        spacing: cow_borrowed!("4"),
         background: cow_borrowed!("rgb(245, 245, 245)"),
         font_theme: FontTheme {
             color: cow_borrowed!("rgb(10, 10, 10)"),
         },
     },
     sidebar_item: SidebarItemTheme {
+        margin: cow_borrowed!("0"),
         background: cow_borrowed!("transparent"),
         hover_background: cow_borrowed!("rgb(230, 230, 230)"),
         font_theme: FontTheme {

diff --git a/crates/hooks/src/theming/mod.rs b/crates/hooks/src/theming/mod.rs
@@ -325,6 +325,7 @@ define_theme! {
         %[cows]
         height: str,
         width: str,
+        spacing: str,
         padding: str,
     }
 }
@@ -457,6 +458,7 @@ define_theme! {
     %[component]
     pub Sidebar {
         %[cows]
+        spacing: str,
         background: str,
         %[subthemes]
         font_theme: FontTheme,
@@ -467,6 +469,7 @@ define_theme! {
     %[component]
     pub SidebarItem {
         %[cows]
+        margin: str,
         background: str,
         hover_background: str,
         %[subthemes]