chore: Some devtools UI adjustements

marc2332 · Oct 7, 2024 · 43f3ba8 · 43f3ba8
1 parent 896b695
commit 43f3ba8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 30 deletions.
diff --git a/crates/devtools/src/property.rs b/crates/devtools/src/property.rs
@@ -13,10 +13,8 @@ pub fn Property(name: String, value: String) -> Element {
     rsx!(
         rect {
             overflow: "clip",
-            height: "30",
             width: "100%",
             direction: "horizontal",
-            padding: "10",
             paragraph {
                 width: "100%",
                 text {
@@ -43,25 +41,22 @@ pub fn Property(name: String, value: String) -> Element {
 #[component]
 pub fn GradientProperty(name: String, fill: Fill) -> Element {
     rsx!(
-        rect {
-            padding: "5 10",
-            paragraph {
-                line_height: "1.9",
-                text {
-                    font_size: "15",
-                    color: "rgb(71, 180, 240)",
-                    "{name}"
-                }
-                text {
-                    font_size: "15",
-                    color: "rgb(215, 215, 215)",
-                    ": "
-                }
-                text {
-                    font_size: "15",
-                    color: "rgb(252,181,172)",
-                    "{fill}",
-                }
+        paragraph {
+            line_height: "1.9",
+            text {
+                font_size: "15",
+                color: "rgb(71, 180, 240)",
+                "{name}"
+            }
+            text {
+                font_size: "15",
+                color: "rgb(215, 215, 215)",
+                ": "
+            }
+            text {
+                font_size: "15",
+                color: "rgb(252,181,172)",
+                "{fill}",
             }
         }
     )
@@ -73,10 +68,8 @@ pub fn ColorProperty(name: String, fill: Fill) -> Element {
     rsx!(
         rect {
             overflow: "clip",
-            height: "30",
             width: "100%",
             direction: "horizontal",
-            padding: "10",
             label {
                 font_size: "15",
                 color: "rgb(71, 180, 240)",
@@ -121,10 +114,8 @@ pub fn ShadowProperty(name: String, shadow: Shadow) -> Element {
     rsx!(
         rect {
             overflow: "clip",
-            height: "30",
             width: "100%",
             direction: "horizontal",
-            padding: "10",
             paragraph {
                 text {
                     font_size: "15",
@@ -177,10 +168,8 @@ pub fn BorderProperty(name: String, border: Border) -> Element {
     rsx!(
         rect {
             overflow: "clip",
-            height: "30",
             width: "100%",
             direction: "horizontal",
-            padding: "10",
             paragraph {
                 text {
                     font_size: "15",
@@ -233,10 +222,8 @@ pub fn TextShadowProperty(name: String, text_shadow: TextShadow) -> Element {
     rsx!(
         rect {
             overflow: "clip",
-            height: "30",
             width: "100%",
             direction: "horizontal",
-            padding: "10",
             paragraph {
                 text {
                     font_size: "15",

diff --git a/crates/devtools/src/tabs/style.rs b/crates/devtools/src/tabs/style.rs
@@ -25,8 +25,10 @@ pub fn NodeInspectorStyle(node_id: String) -> Element {
     rsx!(
         ScrollView {
             show_scrollbar: true,
-            height : "calc(100% - 35)",
+            height : "fill",
             width: "100%",
+            spacing: "6",
+            padding: "8 16",
             {node.state.attributes().into_iter().enumerate().map(|(i, (name, attr))| {
                 match attr {
                     AttributeType::Measure(measure) => {