feat: Make styling consistent (#47)

Make styling consistent for setup wizard
launchdarkly · Mar 21, 2024 · c46c510 · c46c510
1 parent ac3b5c3
commit c46c510
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 14 deletions.
diff --git a/internal/setup/flag_toggle.go b/internal/setup/flag_toggle.go
@@ -39,7 +39,7 @@ func (m flagToggleModel) View() string {
 	margin := 1
 	if m.enabled {
 		bgColor = "#3d9c51"
-		furtherInstructions = "\n\nCheck your [browser|application logs] to see the change!"
+		furtherInstructions = "\n\nCheck your [browser|application logs] to see the change."
 		margin = 2
 		toggle = "ON"
 	}

diff --git a/internal/setup/flags.go b/internal/setup/flags.go
@@ -2,6 +2,7 @@ package setup
 
 import (
 	"fmt"
+
 	"github.com/charmbracelet/bubbles/key"
 	"github.com/charmbracelet/bubbles/list"
 	"github.com/charmbracelet/bubbles/textinput"
@@ -27,7 +28,6 @@ func (p flag) FilterValue() string { return "" }
 
 type flagModel struct {
 	input     string
-	err       error
 	textInput textinput.Model
 }
 
@@ -69,9 +69,11 @@ func (m flagModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 }
 
 func (m flagModel) View() string {
+	style := lipgloss.NewStyle().
+		MarginLeft(2)
+
 	return fmt.Sprintf(
-		"Name your first feature flag (enter for default value):\n\n%s\n\n%s",
-		m.textInput.View(),
-		"(esc to quit)",
+		"Name your first feature flag (enter for default value):\n\n%s",
+		style.Render(m.textInput.View()),
 	) + "\n"
 }
diff --git a/internal/setup/sdk_instructions.go b/internal/setup/sdk_instructions.go
@@ -7,6 +7,7 @@ import (
 
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/glamour"
+	"github.com/charmbracelet/lipgloss"
 	"github.com/muesli/reflow/wordwrap"
 )
 
@@ -30,11 +31,13 @@ func (m sdkInstructionModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 }
 
 func (m sdkInstructionModel) View() string {
+	style := lipgloss.NewStyle().Border(lipgloss.NormalBorder())
+
 	return wordwrap.String(
 		fmt.Sprintf(
-			"Set up your application. Here are the steps to incorporate the LaunchDarkly %s SDK into your code. \n\n%s",
+			"Set up your application. Here are the steps to incorporate the LaunchDarkly %s SDK into your code.\n%s",
 			m.name,
-			m.renderMarkdown(),
+			style.Render(m.renderMarkdown()),
 		),
 		m.width,
 	)

diff --git a/internal/setup/sdks.go b/internal/setup/sdks.go
@@ -26,10 +26,8 @@ type sdk struct {
 func (s sdk) FilterValue() string { return "" }
 
 type sdkModel struct {
-	choice       sdk
-	instructions string
-	err          error
-	list         list.Model
+	choice sdk
+	list   list.Model
 }
 
 const sdkInstructionsFilePath = "internal/setup/sdk_build_instructions/"
@@ -75,7 +73,11 @@ func NewSdk() tea.Model {
 	}
 
 	l := list.New(sdksToItems(sdks), sdkDelegate{}, 30, 14)
-	l.Title = "Select your SDK."
+	l.Title = "Select your SDK:\n"
+	// reset title styles
+	l.Styles.Title = lipgloss.NewStyle()
+	l.Styles.TitleBar = lipgloss.NewStyle()
+	l.SetShowPagination(true)
 	l.SetShowStatusBar(false)
 	l.SetFilteringEnabled(false)
 	l.Paginator.PerPage = 5
@@ -111,7 +113,7 @@ func (m sdkModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 }
 
 func (m sdkModel) View() string {
-	return "\n" + m.list.View()
+	return m.list.View()
 }
 
 type sdkDelegate struct{}

diff --git a/internal/setup/wizard.go b/internal/setup/wizard.go
@@ -130,7 +130,7 @@ func (m WizardModel) View() string {
 		return fmt.Sprintf("ERROR: %s", m.err)
 	}
 
-	return fmt.Sprintf("\nstep %d of %d\n"+m.steps[m.currStep].View(), m.currStep+1, len(m.steps))
+	return fmt.Sprintf("\nStep %d of %d\n"+m.steps[m.currStep].View(), m.currStep+1, len(m.steps))
 }
 
 type keyMap struct {