Visual improvements to log_layers_ecs example (#15949)

# Objective

Beautify this example, and make adjustments for [example visual
guidelines](https://bevyengine.org/learn/contribute/helping-out/creating-examples/#visual-guidelines).

Also make the example less flaky in CI by removing system info and
window entity logs from the visual output.

## Solution

- Add padding to text container
- Add colors
- Other small tweaks

## Before
<img width="1280" alt="Screenshot 2024-10-16 at 7 04 00 AM"
src="https://github.com/user-attachments/assets/82886a31-e916-4ae1-a134-b95e8e12a052">

## After
<img width="1280" alt="Screenshot 2024-10-16 at 7 03 41 AM"
src="https://github.com/user-attachments/assets/5fa7ccda-971a-4b25-be50-3fcee4d3f967">


## Testing

`cargo run --example log_layer_ecs_improvements`

examples/app/log_layers_ecs.rs

@@ -16,16 +16,31 @@ use std::sync::mpsc;
 use bevy::{
     log::{
         tracing_subscriber::{self, Layer},
-        BoxedLayer,
+        BoxedLayer, Level,
     },
     prelude::*,
-    utils::{tracing, tracing::Subscriber},
+    utils::tracing::{self, Subscriber},
 };
 
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins.set(bevy::log::LogPlugin {
+            // Show logs all the way up to the trace level, but only for logs
+            // produced by this example.
+            level: Level::TRACE,
+            filter: "warn,log_layers_ecs=trace".to_string(),
+            custom_layer,
+        }))
+        .add_systems(Startup, (log_system, setup))
+        .add_systems(Update, print_logs)
+        .run();
+}
+
 /// A basic message. This is what we will be sending from the [`CaptureLayer`] to [`CapturedLogEvents`] non-send resource.
 #[derive(Debug, Event)]
 struct LogEvent {
     message: String,
+    level: Level,
 }
 
 /// This non-send resource temporarily stores [`LogEvent`]s before they are
@@ -59,10 +74,13 @@ impl<S: Subscriber> Layer<S> for CaptureLayer {
         let mut message = None;
         event.record(&mut CaptureLayerVisitor(&mut message));
         if let Some(message) = message {
-            // You can obtain metadata like this, but we wont use it for this example.
-            let _metadata = event.metadata();
+            let metadata = event.metadata();
+
             self.sender
-                .send(LogEvent { message })
+                .send(LogEvent {
+                    message,
+                    level: *metadata.level(),
+                })
                 .expect("LogEvents resource no longer exists!");
         }
     }
@@ -91,25 +109,14 @@ fn custom_layer(app: &mut App) -> Option<BoxedLayer> {
     Some(layer.boxed())
 }
 
-fn main() {
-    App::new()
-        .add_plugins(DefaultPlugins.set(bevy::log::LogPlugin {
-            custom_layer,
-            ..default()
-        }))
-        .add_systems(Startup, (log_system, setup))
-        .add_systems(Update, print_logs)
-        .run();
-}
-
 fn log_system() {
-    // here is how you write new logs at each "log level" (in "most important" to
+    // Here is how you write new logs at each "log level" (in "most important" to
     // "least important" order)
-    error!("something failed");
-    warn!("something bad happened that isn't a failure, but thats worth calling out");
-    info!("helpful information that is worth printing by default");
-    debug!("helpful for debugging");
-    trace!("very noisy");
+    error!("Something failed");
+    warn!("Something bad happened that isn't a failure, but thats worth calling out");
+    info!("Helpful information that is worth printing by default");
+    debug!("Helpful for debugging");
+    trace!("Very noisy");
 }
 
 #[derive(Component)]
@@ -124,6 +131,7 @@ fn setup(mut commands: Commands) {
                 width: Val::Vw(100.0),
                 height: Val::Vh(100.0),
                 flex_direction: FlexDirection::Column,
+                padding: UiRect::all(Val::Px(12.)),
                 ..default()
             },
             ..default()
@@ -143,7 +151,24 @@ fn print_logs(
 
     commands.entity(root_entity).with_children(|child| {
         for event in events.read() {
-            child.spawn(Text::new(&event.message));
+            child.spawn(Text::default()).with_children(|child| {
+                child.spawn((
+                    TextSpan::new(format!("{:5} ", event.level)),
+                    TextColor(level_color(&event.level)),
+                ));
+                child.spawn(TextSpan::new(&event.message));
+            });
         }
     });
 }
+
+fn level_color(level: &Level) -> Color {
+    use bevy::color::palettes::tailwind::*;
+    Color::from(match *level {
+        Level::WARN => ORANGE_400,
+        Level::ERROR => RED_400,
+        Level::INFO => GREEN_400,
+        Level::TRACE => PURPLE_400,
+        Level::DEBUG => BLUE_400,
+    })
+}