refactor(tui): Use color instead of bars to distinguish sections of t…

…ask list. (#9365)

### Description

Screen real estate is valuable.

We were using horizontal bars to distinguish the header and footer from
the task list itself. Instead, let's use color, and get rid of the bars.

### Testing Instructions

👀

I checked light mode for color contrast, as well, and did the best I
could. I don't know if there's a way to tell Ratatui to use different
foreground colors for light vs. dark backgrounds? I at least couldn't
find any documentation on it or example in our codebase.

Before:
![CleanShot 2024-10-31 at 22 09
27@2x](https://github.com/user-attachments/assets/5a069863-e75c-45d7-ba13-7deb496713d1)

After:
![CleanShot 2024-10-31 at 22 10
08@2x](https://github.com/user-attachments/assets/10423e98-4107-4fab-a277-78575316b72c)

---------

Co-authored-by: Chris Olszewski <[email protected]>

crates/turborepo-ui/src/tui/table.rs

@@ -1,7 +1,7 @@
 use itertools::Itertools;
 use ratatui::{
     layout::{Constraint, Rect},
-    style::{Color, Style, Stylize},
+    style::{Color, Modifier, Style, Stylize},
     text::Text,
     widgets::{Block, Borders, Cell, Row, StatefulWidget, Table, TableState},
 };
@@ -108,8 +108,6 @@ impl<'a> StatefulWidget for &'a TaskTable<'a> {
     type State = TableState;
 
     fn render(self, area: Rect, buf: &mut ratatui::prelude::Buffer, state: &mut Self::State) {
-        let width = area.width;
-        let bar = "─".repeat(usize::from(width));
         let table = Table::new(
             self.running_rows()
                 .chain(self.planned_rows())
@@ -124,21 +122,24 @@ impl<'a> StatefulWidget for &'a TaskTable<'a> {
         .column_spacing(0)
         .block(Block::new().borders(Borders::RIGHT))
         .header(
-            vec![format!("Tasks\n{bar}"), " \n─".to_owned()]
-                .into_iter()
-                .map(Cell::from)
-                .collect::<Row>()
-                .height(2),
+            vec![Text::styled(
+                "Tasks",
+                Style::default().add_modifier(Modifier::DIM),
+            )]
+            .into_iter()
+            .map(Cell::from)
+            .collect::<Row>()
+            .height(1),
         )
         .footer(
-            vec![
-                format!("{bar}\n{TASK_NAVIGATE_INSTRUCTIONS}\n{HIDE_INSTRUCTIONS}"),
-                format!("─\n "),
-            ]
+            vec![Text::styled(
+                format!("{TASK_NAVIGATE_INSTRUCTIONS}\n{HIDE_INSTRUCTIONS}"),
+                Style::default().add_modifier(Modifier::DIM),
+            )]
             .into_iter()
             .map(Cell::from)
             .collect::<Row>()
-            .height(3),
+            .height(2),
         );
         StatefulWidget::render(table, area, buf, state);
     }