From 538e8410b8a4dc18bf75b6515176011af2212235 Mon Sep 17 00:00:00 2001
From: Nico Burns <nico@nicoburns.com>
Date: Thu, 2 Nov 2023 00:03:07 +0000
Subject: [PATCH] Update taffy example to use background colours

---
 examples/taffy.rs | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/examples/taffy.rs b/examples/taffy.rs
index f7333b4b3..d310b2227 100644
--- a/examples/taffy.rs
+++ b/examples/taffy.rs
@@ -1,7 +1,8 @@
-use xilem::view::{button, flex_column, flex_row};
+use xilem::view::{button, flex_column, flex_row, div};
 use xilem::{view::View, App, AppLauncher};
+use vello::peniko::Color;
 
-use taffy::style::{AlignItems, AlignSelf};
+use taffy::style::{AlignItems, JustifyContent};
 use taffy::style_helpers::length;
 
 fn app_logic(data: &mut i32) -> impl View<i32> {
@@ -18,6 +19,7 @@ fn app_logic(data: &mut i32) -> impl View<i32> {
             println!("clicked");
             *data += 1;
         }),
+
         flex_row((
             button("decrease", |data| {
                 println!("clicked decrease");
@@ -28,13 +30,27 @@ fn app_logic(data: &mut i32) -> impl View<i32> {
                 *data = 0;
             }),
         ))
+        .with_background_color(Color::BLUE_VIOLET)
         .with_style(|s| {
+            s.gap.width = length(20.0);
             s.flex_grow = 1.0;
-            s.align_self = Some(AlignSelf::Center);
+            s.justify_content = Some(JustifyContent::Center);
             s.align_items = Some(AlignItems::Center);
         }),
+
+        div(())
+            .with_background_color(Color::RED)
+            .with_style(|s| s.flex_grow = 1.0),
+
     ))
-    .with_style(|s| s.gap.height = length(20.0))
+    .with_style(|s| {
+        s.gap.height = length(20.0);
+        s.padding.left = length(20.0);
+        s.padding.right = length(20.0);
+        s.padding.top = length(20.0);
+        s.padding.bottom = length(20.0);
+    })
+    .with_background_color(Color::WHITE)
 }
 
 fn main() {