From e6a11f50dd21c926648e4eb7255065dd3c37efb5 Mon Sep 17 00:00:00 2001
From: Evan Almloff <ealmlof1@stumail.jccc.edu>
Date: Mon, 5 Dec 2022 14:20:45 -0600
Subject: [PATCH] update more examples

---
 packages/core/src/diff.rs               |  3 +--
 packages/tui/examples/tui_buttons.rs    | 22 +++++++++++-----------
 packages/tui/examples/tui_color_test.rs |  8 ++++----
 packages/tui/examples/tui_margin.rs     | 12 ++++++------
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/packages/core/src/diff.rs b/packages/core/src/diff.rs
index 5f2bccbb1..28ffb2404 100644
--- a/packages/core/src/diff.rs
+++ b/packages/core/src/diff.rs
@@ -167,7 +167,6 @@ impl<'b> VirtualDom {
     ) {
         // Replace components that have different render fns
         if left.render_fn != right.render_fn {
-            dbg!(&left, &right);
             let created = self.create_component_node(right_template, right, idx);
             let head = unsafe {
                 self.scopes[left.scope.get().unwrap().0]
@@ -407,7 +406,7 @@ impl<'b> VirtualDom {
         debug_assert!(!new.is_empty());
         debug_assert!(!old.is_empty());
 
-        match dbg!(old.len().cmp(&new.len())) {
+        match old.len().cmp(&new.len()) {
             Ordering::Greater => self.remove_nodes(&old[new.len()..]),
             Ordering::Less => self.create_and_insert_after(&new[old.len()..], old.last().unwrap()),
             Ordering::Equal => {}
diff --git a/packages/tui/examples/tui_buttons.rs b/packages/tui/examples/tui_buttons.rs
index 5b9199baa..bd9f3da13 100644
--- a/packages/tui/examples/tui_buttons.rs
+++ b/packages/tui/examples/tui_buttons.rs
@@ -23,12 +23,12 @@ fn Button(cx: Scope<ButtonProps>) -> Element {
 
     cx.render(rsx! {
         div{
-            width: "100%",
-            height: "100%",
+            width: "20px",
+            height: "5px",
             background_color: "{color}",
             tabindex: "{cx.props.layer}",
             onkeydown: |e| {
-                if let Code::Space = e.data.code() {
+                if let Code::Space = e.inner().code() {
                     toggle.modify(|f| !f);
                 }
             },
@@ -60,7 +60,7 @@ fn app(cx: Scope) -> Element {
             height: "100%",
 
             (1..8).map(|y|
-                cx.render(rsx!{
+                rsx!{
                     div{
                         display: "flex",
                         flex_direction: "row",
@@ -68,26 +68,26 @@ fn app(cx: Scope) -> Element {
                         height: "100%",
                         (1..8).map(|x|{
                             if (x + y) % 2 == 0{
-                                cx.render(rsx!{
+                                rsx!{
                                     div{
-                                        width: "100%",
-                                        height: "100%",
+                                        width: "20px",
+                                        height: "5px",
                                         background_color: "rgb(100, 100, 100)",
                                     }
-                                })
+                                }
                             }
                             else{
                                 let layer = (x + y) % 3;
-                                cx.render(rsx!{
+                                rsx!{
                                     Button{
                                         color_offset: x * y,
                                         layer: layer as u16,
                                     }
-                                })
+                                }
                             }
                         })
                     }
-                })
+                }
             )
         }
     })
diff --git a/packages/tui/examples/tui_color_test.rs b/packages/tui/examples/tui_color_test.rs
index f3972331e..872fec53e 100644
--- a/packages/tui/examples/tui_color_test.rs
+++ b/packages/tui/examples/tui_color_test.rs
@@ -17,7 +17,7 @@ fn app(cx: Scope) -> Element {
             (0..=steps).map(|x|
                 {
                     let hue = x as f32*360.0/steps as f32;
-                    cx.render(rsx! {
+                    rsx! {
                         div{
                             width: "100%",
                             height: "100%",
@@ -25,7 +25,7 @@ fn app(cx: Scope) -> Element {
                             (0..=steps).map(|y|
                                 {
                                     let alpha = y as f32*100.0/steps as f32;
-                                    cx.render(rsx! {
+                                    rsx! {
                                         div {
                                             left: "{x}px",
                                             top: "{y}px",
@@ -33,11 +33,11 @@ fn app(cx: Scope) -> Element {
                                             height: "100%",
                                             background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
                                         }
-                                    })
+                                    }
                                 }
                             )
                         }
-                    })
+                    }
                 }
             )
         }
diff --git a/packages/tui/examples/tui_margin.rs b/packages/tui/examples/tui_margin.rs
index d86bc116e..6e5634726 100644
--- a/packages/tui/examples/tui_margin.rs
+++ b/packages/tui/examples/tui_margin.rs
@@ -11,13 +11,13 @@ fn app(cx: Scope) -> Element {
             height: "100%",
             flex_direction: "column",
             background_color: "black",
-            // margin_right: "10px",
+            margin_right: "10px",
 
             div {
                 width: "70%",
                 height: "70%",
                 background_color: "green",
-                // margin_left: "4px",
+                margin_left: "4px",
 
                 div {
                     width: "100%",
@@ -34,10 +34,10 @@ fn app(cx: Scope) -> Element {
                     align_items: "center",
                     flex_direction: "column",
 
-                    // padding_top: "2px",
-                    // padding_bottom: "2px",
-                    // padding_left: "4px",
-                    // padding_right: "4px",
+                    padding_top: "2px",
+                    padding_bottom: "2px",
+                    padding_left: "4px",
+                    padding_right: "4px",
 
                     "[A]"
                     "[A]"