updated styling and installation steps

tui/steps/hostname.go

@@ -2,15 +2,16 @@ package steps
 
 import (
 	"miasma-installer/tui/styles"
+	"strings"
 
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
 )
 
 type HostnameModel struct {
-	Hostname  string
-	input     textinput.Model
-	Finished  bool
+	Hostname string
+	input    textinput.Model
+	Finished bool
 }
 
 func NewHostnameModel() HostnameModel {
@@ -18,6 +19,7 @@ func NewHostnameModel() HostnameModel {
 	ti.Placeholder = "miasma"
 	ti.Focus()
 	ti.CharLimit = 63
+	ti.Width = 40
 
 	return HostnameModel{
 		input: ti,
@@ -51,11 +53,21 @@ func (m HostnameModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 }
 
 func (m HostnameModel) View() string {
-	s := styles.TitleStyle.Render("System Hostname")
-	s += "\n\n"
-	s += "Enter a hostname for your system:\n\n"
-	s += m.input.View() + "\n\n"
-	s += styles.HelpStyle.Render("[Enter] Continue")
+	var content strings.Builder
 
-	return styles.MainStyle.Render(s)
+	content.WriteString(styles.TitleStyle.Render("💻 System Hostname"))
+	content.WriteString("\n\n")
+
+	info := "Choose a name for your computer.\nThis will be used to identify your system on the network."
+	content.WriteString(styles.InfoBoxStyle.Render(info))
+	content.WriteString("\n\n")
+
+	content.WriteString(styles.LabelStyle.Render("Hostname:"))
+	content.WriteString("\n")
+	content.WriteString(styles.FocusedInputStyle.Render(m.input.View()))
+	content.WriteString("\n\n")
+
+	content.WriteString(styles.RenderHelp("Enter", "Continue"))
+
+	return styles.AppStyle.Render(content.String())
 }