From 5f7e80a1f30171931a2b46bf0618bb69694a25f4 Mon Sep 17 00:00:00 2001
From: Anthony Shew <anthony.shew@vercel.com>
Date: Fri, 1 Nov 2024 11:28:46 -0600
Subject: [PATCH] refactor(tui): Use color instead of bars to distinguish
 sections of task list. (#9365)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### 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 <chris.olszewski@vercel.com>
---
 crates/turborepo-ui/src/tui/table.rs | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/crates/turborepo-ui/src/tui/table.rs b/crates/turborepo-ui/src/tui/table.rs
index 7e22795b67225..9580988600b09 100644
--- a/crates/turborepo-ui/src/tui/table.rs
+++ b/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);
     }