Clean up layout of text_input example

Author: alice-i-cecile

examples/ui/text/text_input.rs

@@ -45,44 +45,38 @@ fn main() {
 struct TextOutput;
 
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
-    // Set up a camera
-    // We need a camera to see the UI
     commands.spawn(Camera2d);
 
-    // Create a root UI node, so we can place the input above the output in a column
     let root = commands
         .spawn(Node {
-            display: Display::Block,
+            display: Display::Flex,
+            flex_direction: FlexDirection::Column,
+            padding: px(20).all(),
+            row_gap: px(16),
             ..default()
         })
         .id();
 
     let text_instructions = commands
         .spawn((
-            Node {
-                width: px(400),
-                height: px(100),
-                ..Default::default()
-            },
-            BorderColor::from(Color::from(SLATE_300)),
             Text::new("Ctrl+Enter to submit text"),
             TextFont {
                 font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                 font_size: FontSize::Px(30.0),
                 ..default()
             },
-            UiTransform::from_translation(Val2::ZERO),
         ))
         .id();
 
-    let text_input_left = build_input_text(&mut commands, true, 30.0);
-    let text_input_right = build_input_text(&mut commands, false, 50.0);
+    let text_input_left = build_input_text(&mut commands, true, 24.0);
+    let text_input_right = build_input_text(&mut commands, false, 24.0);
 
     let input_container = commands
         .spawn((
             Node {
                 display: Display::Flex,
                 align_items: AlignItems::Start,
+                column_gap: px(16),
                 ..default()
             },
             AutoFocus,
@@ -94,23 +88,21 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     let text_output = commands
         .spawn((
             Node {
-                width: px(400),
-                height: px(100),
-                border: px(5).all(),
+                width: px(416),
+                border: px(2).all(),
+                padding: px(8).all(),
                 ..Default::default()
             },
             BorderColor::from(Color::from(SLATE_300)),
-            Text::new("testing"),
+            Text::new(""),
             TextOutput,
             TextFont {
-                font_size: FontSize::Px(70.0),
+                font_size: FontSize::Px(24.0),
                 ..default()
             },
-            UiTransform::from_translation(Val2::px(5.0, 200.0)),
         ))
         .id();
 
-    // Assemble our hierarchy
     commands
         .entity(input_container)
         .add_children(&[text_input_left, text_input_right]);
@@ -125,8 +117,8 @@ fn build_input_text(commands: &mut Commands, is_left: bool, font_size: f32) -> E
         .spawn((
             Node {
                 width: px(200),
-                border: px(5).all(),
-                padding: px(5).all(),
+                border: px(2).all(),
+                padding: px(8).all(),
                 ..Default::default()
             },
             BorderColor::from(Color::from(SLATE_300)),
@@ -142,7 +134,6 @@ fn build_input_text(commands: &mut Commands, is_left: bool, font_size: f32) -> E
             TextCursorStyle::default(),
             TabIndex(if is_left { 0 } else { 1 }),
             BackgroundColor(DARK_GREY.into()),
-            UiTransform::from_translation(Val2::px(if is_left { 0.0 } else { 300.0 }, 50.0)),
         ))
         .id()
 }