chore: styling changes

demo/vhs.tape

@@ -30,15 +30,23 @@ Type "m"
 Type "v"
 # we're taken to the validate task group page
 Sleep 0.5s
+# enable task info side panel
+Type "I"
 # preview output for several tasks
 Down Sleep 0.5s Down Sleep 0.5s Down Sleep 0.5s
+# disable task info side panel
+Type "I" Sleep 0.5s
 
 # go back to modules
-Type "m"
+Type "m" Sleep 0.5s
+# show help
+Type "?" Sleep 0.5s
 # run plan on all modules
 Type "p"
 # we're taken to the plan task group page
-Sleep 0.5s
+Sleep 1s
+# hide help
+Type "?"
 # preview output for several tasks
 Down Sleep 0.5s Down Sleep 0.5s Down Sleep 0.5s
 
@@ -47,7 +55,7 @@ Ctrl+a Sleep 0.5s Type "a"
 # accept confirmation
 Sleep 0.5s Type "y"
 # preview output for several tasks
-Sleep 1.5s Down Sleep 0.5s Down Sleep 0.5s Down Sleep 0.5s
+Sleep 2s Down Sleep 0.5s Down Sleep 0.5s Down Sleep 0.5s
 
 # go back to modules
 Type "m"

hacks/watch.sh

@@ -2,5 +2,5 @@
 
 # in foreground, continously run app
 while true; do
-    _build/pug -w ./demos -f tasks -d
+    _build/pug -w ./demo/configs -d
 done

internal/tui/color.go

@@ -34,8 +34,19 @@ var (
 
 	LogRecordAttributeKey = lipgloss.AdaptiveColor{Dark: string(White), Light: string(Black)}
 
-	HelpKey  = Grey
-	HelpDesc = LightGrey
+	HelpKey = lipgloss.AdaptiveColor{
+		Dark:  "ff",
+		Light: "",
+	}
+	HelpDesc = lipgloss.AdaptiveColor{
+		Dark:  "248",
+		Light: "246",
+	}
+
+	InactivePreviewBorder = lipgloss.AdaptiveColor{
+		Dark:  "244",
+		Light: "250",
+	}
 
 	CurrentBackground            = Grey
 	CurrentForeground            = White

internal/tui/split/model.go

@@ -62,7 +62,7 @@ type Model[R resource.Resource] struct {
 	width          int
 
 	previewBorder      lipgloss.Border
-	previewBorderColor lipgloss.Color
+	previewBorderColor lipgloss.TerminalColor
 
 	// userListHeightAdjustment is the adjustment the user has requested to the
 	// default height of the list pane.
@@ -185,16 +185,16 @@ func (m Model[R]) previewHeight() int {
 func (m *Model[R]) setBorderStyles() {
 	if m.previewVisible {
 		if m.previewFocused {
-			m.Table.SetBorderStyle(lipgloss.NormalBorder(), tui.LighterGrey)
+			m.Table.SetBorderStyle(lipgloss.NormalBorder(), tui.InactivePreviewBorder)
 			m.previewBorder = lipgloss.ThickBorder()
 			m.previewBorderColor = tui.Blue
 		} else {
-			m.Table.SetBorderStyle(lipgloss.ThickBorder(), tui.Black)
+			m.Table.SetBorderStyle(lipgloss.ThickBorder(), tui.Blue)
 			m.previewBorder = lipgloss.NormalBorder()
-			m.previewBorderColor = tui.LighterGrey
+			m.previewBorderColor = tui.InactivePreviewBorder
 		}
 	} else {
-		m.Table.SetBorderStyle(lipgloss.NormalBorder(), tui.Black)
+		m.Table.SetBorderStyle(lipgloss.NormalBorder(), tui.White)
 	}
 }
 

internal/tui/style.go

@@ -14,9 +14,6 @@ var (
 	Border      = Regular.Copy().Border(lipgloss.NormalBorder())
 	ThickBorder = Regular.Copy().Border(lipgloss.ThickBorder()).BorderForeground(Violet)
 
-	ActiveBorder   = ThickBorder.Copy()
-	InactiveBorder = Border.Copy().BorderForeground(LighterGrey)
-
 	Title          = Bold.Copy().Padding(0, 1).Background(Pink).Foreground(White)
 	TitleCommand   = Padded.Copy().Foreground(White).Background(Blue)
 	TitlePath      = Padded.Copy().Foreground(White).Background(modulePathColor)

internal/tui/table/table.go

@@ -35,7 +35,7 @@ type Model[V resource.Resource] struct {
 	focus       bool
 
 	border      lipgloss.Border
-	borderColor lipgloss.Color
+	borderColor lipgloss.TerminalColor
 
 	cursorRow       int
 	cursorID        resource.ID
@@ -308,7 +308,7 @@ func (m Model[V]) View() string {
 	)
 }
 
-func (m *Model[V]) SetBorderStyle(border lipgloss.Border, color lipgloss.Color) {
+func (m *Model[V]) SetBorderStyle(border lipgloss.Border, color lipgloss.TerminalColor) {
 	m.border = border
 	m.borderColor = color
 }

internal/tui/top/model.go

@@ -361,8 +361,8 @@ func (m model) View() string {
 			Background(tui.EvenLighterGrey).
 			Render(m.info)
 	}
-	workdir := tui.Padded.Copy().Background(tui.Grey).Foreground(tui.White).Render(m.workdir)
-	version := tui.Padded.Copy().Background(tui.Black).Foreground(tui.White).Render(version.Version)
+	workdir := tui.Padded.Copy().Background(tui.LightGrey).Foreground(tui.White).Render(m.workdir)
+	version := tui.Padded.Copy().Background(tui.DarkGrey).Foreground(tui.White).Render(version.Version)
 	// Fill in left over space with background color
 	leftover = m.width - tui.Width(footer) - tui.Width(workdir) - tui.Width(version)
 	footer += tui.Regular.Copy().Width(leftover).Background(tui.EvenLighterGrey).Render()
@@ -437,8 +437,8 @@ func (m model) help() string {
 			descs []string
 		)
 		for j := i; j < min(i+rows, len(bindings)); j++ {
-			keys = append(keys, bindings[j].Help().Key)
-			descs = append(descs, bindings[j].Help().Desc)
+			keys = append(keys, helpKeyStyle.Render(bindings[j].Help().Key))
+			descs = append(descs, helpDescStyle.Render(bindings[j].Help().Desc))
 		}
 		// Render pair of columns; beyond the first pair, render a three space
 		// left margin, in order to visually separate the pairs.
@@ -447,8 +447,8 @@ func (m model) help() string {
 			cols = []string{"   "}
 		}
 		cols = append(cols,
-			helpKeyStyle.Render(strings.Join(keys, "\n")),
-			helpDescStyle.Render(strings.Join(descs, "\n")),
+			strings.Join(keys, "\n"),
+			strings.Join(descs, "\n"),
 		)
 
 		pair := lipgloss.JoinHorizontal(lipgloss.Top, cols...)