examples: Make background of backward example black

Author: preiter93

examples/tapes/variants.gif

@@ -35,7 +35,7 @@ impl BackwardListView {
             };
 
             let text = Text::from(vec![
-                Line::from(author).style(ratatui::style::Style::default().fg(author_color)),
+                Line::from(author).style(ratatui::style::Style::default().fg(author_color).bold()),
                 Line::from(body),
             ]);
 
@@ -51,6 +51,8 @@ impl BackwardListView {
             (item, 2)
         });
 
-        ListView::new(builder, MESSAGES.len()).scroll_direction(ScrollDirection::Backward)
+        ListView::new(builder, MESSAGES.len())
+            .scroll_direction(ScrollDirection::Backward)
+            .bg(Colors::BLACK)
     }
 }

examples/variants/backward.rs

@@ -1,6 +1,10 @@
 use crate::common::{item_container::ListItemContainer, Colors};
 use ratatui::widgets::Scrollbar;
-use ratatui::{layout::Alignment, style::Stylize, text::Line, widgets::Padding};
+use ratatui::{
+    style::Stylize,
+    text::{Line, Span},
+    widgets::Padding,
+};
 use tui_widget_list::{ListBuilder, ListView};
 
 pub(crate) const TRACKS: &[(&str, &str)] = &[
@@ -26,12 +30,14 @@ impl InfiniteListView {
     pub(crate) fn new<'a>() -> ListView<'a, ListItemContainer<'a, Line<'a>>> {
         let builder = ListBuilder::new(|context| {
             let (artist, title) = TRACKS[context.index];
-            let label = format!(" {:>2}. {} — {}", context.index + 1, artist, title);
 
-            let mut item = ListItemContainer::new(
-                Line::from(label).alignment(Alignment::Left),
-                Padding::vertical(1),
-            );
+            let line = Line::from(vec![
+                Span::from(format!(" {:>2}. ", context.index + 1)),
+                Span::from(artist).bold(),
+                Span::from(format!(" — {title}")),
+            ]);
+
+            let mut item = ListItemContainer::new(line, Padding::vertical(1));
             item = match context.is_selected {
                 true => item.bg(Colors::ORANGE).fg(Colors::CHARCOAL),
                 false if context.index % 2 == 0 => item.bg(Colors::CHARCOAL),

examples/variants/infinite.rs

@@ -1,7 +1,11 @@
 use crate::common::{item_container::ListItemContainer, Colors};
 use crate::infinite::TRACKS;
 use ratatui::widgets::Scrollbar;
-use ratatui::{layout::Alignment, style::Stylize, text::Line, widgets::Padding};
+use ratatui::{
+    style::Stylize,
+    text::{Line, Span},
+    widgets::Padding,
+};
 use tui_widget_list::{ListBuilder, ListView};
 
 pub(crate) struct ScrollPaddingListView;
@@ -10,12 +14,14 @@ impl ScrollPaddingListView {
     pub(crate) fn new<'a>() -> ListView<'a, ListItemContainer<'a, Line<'a>>> {
         let builder = ListBuilder::new(|context| {
             let (artist, title) = TRACKS[context.index];
-            let label = format!(" {:>2}. {} — {}", context.index + 1, artist, title);
 
-            let mut item = ListItemContainer::new(
-                Line::from(label).alignment(Alignment::Left),
-                Padding::vertical(1),
-            );
+            let line = Line::from(vec![
+                Span::from(format!(" {:>2}. ", context.index + 1)),
+                Span::from(artist).bold(),
+                Span::from(format!(" — {title}")),
+            ]);
+
+            let mut item = ListItemContainer::new(line, Padding::vertical(1));
             item = match context.is_selected {
                 true => item.bg(Colors::ORANGE).fg(Colors::CHARCOAL),
                 false if context.index % 2 == 0 => item.bg(Colors::CHARCOAL),