Each section in the client (network/frequency/member/chat) now has a

different background color, similar to how discord has it

8 files changed, 52 insertions, 41 deletions

diff --git a/internal/client/ui/colors/colors.go b/internal/client/ui/colors/colors.go
index ad8c2ba..bf467eb 100644
--- a/internal/client/ui/colors/colors.go
+++ b/internal/client/ui/colors/colors.go
@@ -14,7 +14,7 @@ var (
 	Blue               = lipgloss.Color("#0029f5")
 	DarkCyan           = lipgloss.Color("#007E8A")
 	DarkerCyan         = lipgloss.Color("#005d66")
-	DarkerMidnightBlue = lipgloss.Color("#161622")
+	DarkerMidnightBlue = lipgloss.Color("#0e0e16")
 	DarkMidnightBlue   = lipgloss.Color("#181825")
 	MidnightBlue       = lipgloss.Color("#1E1E2E")
 	LightMidnightBlue  = lipgloss.Color("#3c3c5d")
@@ -31,6 +31,7 @@ var (
 	Background          = MidnightBlue
 	BackgroundHighlight = LightMidnightBlue
 	BackgroundDim       = DarkMidnightBlue
+	BackgroundDimmer    = DarkerMidnightBlue
 	Error               = Red
 	Focus               = LightBlue
 )
diff --git a/internal/client/ui/core/chat/chat.go b/internal/client/ui/core/chat/chat.go
index 2aba2d3..c650c04 100644
--- a/internal/client/ui/core/chat/chat.go
+++ b/internal/client/ui/core/chat/chat.go
@@ -70,7 +70,7 @@ var (
 	WidthWithoutVi = PaddingCount*2 + lipgloss.Width(LeftCorner) + lipgloss.Width(RightCorner)
 
 	FrequencyNameStyle = lipgloss.NewStyle().
-				Background(colors.BackgroundDim).
+				Background(colors.Background).
 				AlignHorizontal(lipgloss.Center).
 				Border(lipgloss.ThickBorder(), false, false, true)
 
diff --git a/internal/client/ui/core/frequencylist/frequencylist.go b/internal/client/ui/core/frequencylist/frequencylist.go
index 843290c..7c58817 100644
--- a/internal/client/ui/core/frequencylist/frequencylist.go
+++ b/internal/client/ui/core/frequencylist/frequencylist.go
@@ -42,6 +42,8 @@ var (
 	widthWithoutFrequency = ((margin + padding) * 2) + symbolWidth
 
 	ellipsis = "…"
+
+	BackgroundStyle = lipgloss.NewStyle().Background(colors.BackgroundDim)
 )
 
 type Model struct {
@@ -75,6 +77,7 @@ func (m Model) View() string {
 	}
 
 	frequencyStyle := frequencyStyle.Width(m.width - (margin * 2))
+	backgroundStyle := BackgroundStyle.Width(m.width)
 	maxFrequencyWidth := m.width - widthWithoutFrequency
 
 	isAdmin := state.State.Members[*networkId][*state.UserID].IsAdmin
@@ -117,7 +120,8 @@ func (m Model) View() string {
 				Render(frequency.Name) + ellipsis
 		}
 
-		builder.WriteString(frequencyStyle.Render(symbol + frequencyName))
+		frequency := frequencyStyle.Render(symbol + frequencyName)
+		builder.WriteString(backgroundStyle.Render(frequency))
 		builder.WriteString("\n")
 	}
 
@@ -128,7 +132,7 @@ func (m Model) View() string {
 	}
 	result := lipgloss.JoinHorizontal(lipgloss.Top, sidebar, sep.String())
 
-	return result
+	return BackgroundStyle.Render(result)
 }
 
 func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
diff --git a/internal/client/ui/core/memberlist/memberlist.go b/internal/client/ui/core/memberlist/memberlist.go
index 5dfd6f2..9adb562 100644
--- a/internal/client/ui/core/memberlist/memberlist.go
+++ b/internal/client/ui/core/memberlist/memberlist.go
@@ -17,10 +17,10 @@ import (
 )
 
 var (
-	sepStyle = lipgloss.NewStyle().Width(0).
+	sepStyle = lipgloss.NewStyle().Width(0).Background(colors.BackgroundDim).
 			Border(lipgloss.ThickBorder(), false, true, false, false)
 
-	headerStyle = lipgloss.NewStyle().
+	headerStyle = lipgloss.NewStyle().Background(colors.BackgroundDim).
 			Margin(0, 0, 1).Padding(1).Align(lipgloss.Center).
 			Border(lipgloss.ThickBorder(), false, false, true)
 
@@ -39,6 +39,8 @@ var (
 	widthWithoutMember = ((margin + padding) * 2) + symbolWidth
 
 	ellipsis = "…"
+
+	BackgroundStyle = lipgloss.NewStyle().Background(colors.BackgroundDim)
 )
 
 type Model struct {
@@ -74,6 +76,7 @@ func (m Model) View() string {
 	}
 
 	memberStyle := memberStyle.Width(m.width - (margin * 2))
+	backgroundStyle := BackgroundStyle.Width(m.width)
 	maxMemberWidth := m.width - widthWithoutMember
 	ownerId := state.State.Networks[*networkId].OwnerID
 
@@ -130,11 +133,11 @@ func (m Model) View() string {
 				Render(memberName) + ellipsis
 		}
 
-		builder.WriteString(memberStyle.Render(memberName))
+		builder.WriteString(backgroundStyle.Render(memberStyle.Render(memberName)))
 		builder.WriteString("\n")
 	}
 
-	sidebar := builder.String()
+	sidebar := BackgroundStyle.Height(ui.Height).Render(builder.String())
 	sep := sepStyle.Height(ui.Height)
 	if m.focus {
 		sep = sep.BorderForeground(colors.Focus)
diff --git a/internal/client/ui/core/networkcreation/networkcreation.go b/internal/client/ui/core/networkcreation/networkcreation.go
index bf09306..80dcb57 100644
--- a/internal/client/ui/core/networkcreation/networkcreation.go
+++ b/internal/client/ui/core/networkcreation/networkcreation.go
@@ -8,8 +8,8 @@ import (
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
 	"github.com/kyren223/eko/internal/client/gateway"
+	"github.com/kyren223/eko/internal/client/ui"
 	"github.com/kyren223/eko/internal/client/ui/colors"
-	"github.com/kyren223/eko/internal/client/ui/core/networklist"
 	"github.com/kyren223/eko/internal/client/ui/field"
 	"github.com/kyren223/eko/internal/client/ui/layouts/flex"
 	"github.com/kyren223/eko/internal/packet"
@@ -156,7 +156,7 @@ func (m Model) Init() tea.Cmd {
 func (m Model) View() string {
 	name := m.name.View()
 
-	iconPreview := networklist.IconStyle(m.icon.Value(), m.lastFg, m.lastBg).String()
+	iconPreview := ui.IconStyle(m.icon.Value(), m.lastFg, m.lastBg, colors.Background).String()
 	iconPreview = lipgloss.NewStyle().Width(m.nameWidth).Align(lipgloss.Center).Render(iconPreview)
 
 	color := colors.Gray
diff --git a/internal/client/ui/core/networklist/networklist.go b/internal/client/ui/core/networklist/networklist.go
index c308886..47d44d3 100644
--- a/internal/client/ui/core/networklist/networklist.go
+++ b/internal/client/ui/core/networklist/networklist.go
@@ -13,39 +13,20 @@ import (
 )
 
 var (
-	sepStyle = lipgloss.NewStyle().Width(0).
+	sepStyle = lipgloss.NewStyle().Width(0).BorderBackground(colors.BackgroundDimmer).
 			Border(lipgloss.ThickBorder(), false, true, false, false)
 
 	selectedIndicator   = "🭀\n▌\n🭛"
-	trustedUsersIcon    = IconStyle(" ", colors.Turquoise, colors.DarkerCyan)
-	peersButton         = trustedUsersIcon.Margin(0, 1, 1).String()
+	peersIcon           = ui.IconStyle(" ", colors.Turquoise, colors.DarkerCyan, colors.BackgroundDimmer)
+	peersButton         = peersIcon.Background(colors.BackgroundDimmer).Padding(0, 1, 1).String()
 	peersButtonSelected = lipgloss.JoinHorizontal(
 		ui.Center,
 		selectedIndicator,
-		trustedUsersIcon.Margin(0, 1, 1, 0).String(),
+		peersIcon.Background(colors.BackgroundDimmer).Padding(0, 1, 1, 0).String(),
 	)
-)
-
-/*
-🭊🭂██🭍🬿
-██████
-🭥🭓██🭞🭚
-
-🭠🭘  🭣🭕
 
-🭏🬽  🭈🭄
-*/
-
-func IconStyle(icon string, fg, bg lipgloss.Color) lipgloss.Style {
-	bgStyle := lipgloss.NewStyle().Background(bg).Foreground(colors.Background)
-	top := bgStyle.Render("🭠🭘  🭣🭕")
-	middle := lipgloss.NewStyle().Width(6).Align(lipgloss.Center).
-		Background(bg).Foreground(fg).Render(icon)
-	bgStyle2 := lipgloss.NewStyle().Foreground(bg)
-	bottom := bgStyle2.Render("🭥🭓██🭞🭚")
-	combined := lipgloss.JoinVertical(lipgloss.Left, top, middle, bottom)
-	return lipgloss.NewStyle().SetString(combined)
-}
+	backgroundStyle = lipgloss.NewStyle().Background(colors.BackgroundDimmer)
+)
 
 const PeersIndex = -1
 
@@ -85,18 +66,19 @@ func (m Model) View() string {
 	for i, networkId := range networks {
 		network := state.State.Networks[networkId]
 
-		icon := IconStyle(network.Icon,
+		icon := ui.IconStyle(network.Icon,
 			lipgloss.Color(network.FgHexColor),
 			lipgloss.Color(network.BgHexColor),
+			colors.BackgroundDimmer,
 		)
 		if m.index == m.base+i {
 			builder.WriteString(lipgloss.JoinHorizontal(
 				ui.Center,
 				selectedIndicator,
-				icon.Margin(0, 1, 1, 0).String(),
+				icon.Background(colors.BackgroundDimmer).Padding(0, 1, 1, 0).String(),
 			))
 		} else {
-			builder.WriteString(icon.Margin(0, 1, 1).String())
+			builder.WriteString(icon.Background(colors.BackgroundDimmer).Padding(0, 1, 1).String())
 		}
 		builder.WriteString("\n")
 	}
@@ -109,7 +91,7 @@ func (m Model) View() string {
 	}
 	result = lipgloss.JoinHorizontal(lipgloss.Top, result, sep.String())
 
-	return result
+	return backgroundStyle.Render(result)
 }
 
 func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
diff --git a/internal/client/ui/core/networkupdate/networkupdate.go b/internal/client/ui/core/networkupdate/networkupdate.go
index 9bea5ff..d7df00a 100644
--- a/internal/client/ui/core/networkupdate/networkupdate.go
+++ b/internal/client/ui/core/networkupdate/networkupdate.go
@@ -8,8 +8,8 @@ import (
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
 	"github.com/kyren223/eko/internal/client/gateway"
+	"github.com/kyren223/eko/internal/client/ui"
 	"github.com/kyren223/eko/internal/client/ui/colors"
-	"github.com/kyren223/eko/internal/client/ui/core/networklist"
 	"github.com/kyren223/eko/internal/client/ui/core/state"
 	"github.com/kyren223/eko/internal/client/ui/field"
 	"github.com/kyren223/eko/internal/client/ui/layouts/flex"
@@ -166,7 +166,7 @@ func (m Model) Init() tea.Cmd {
 func (m Model) View() string {
 	name := m.name.View()
 
-	iconPreview := networklist.IconStyle(m.icon.Value(), m.lastFg, m.lastBg).String()
+	iconPreview := ui.IconStyle(m.icon.Value(), m.lastFg, m.lastBg, colors.Background).String()
 	iconPreview = lipgloss.NewStyle().Width(m.nameWidth).Align(lipgloss.Center).Render(iconPreview)
 
 	color := colors.Gray
diff --git a/internal/client/ui/ui.go b/internal/client/ui/ui.go
index 61bf7bf..12af548 100644
--- a/internal/client/ui/ui.go
+++ b/internal/client/ui/ui.go
@@ -196,3 +196,24 @@ func getLines(s string) (lines []string, widest int) {
 func clamp(v, lower, upper int) int {
 	return min(max(v, lower), upper)
 }
+
+/*
+🭊🭂██🭍🬿
+██████
+🭥🭓██🭞🭚
+
+🭠🭘  🭣🭕
+
+🭏🬽  🭈🭄
+*/
+
+func IconStyle(icon string, iconFg, iconBg, bg lipgloss.Color) lipgloss.Style {
+	bgStyle := lipgloss.NewStyle().Background(iconBg).Foreground(bg)
+	top := bgStyle.Render("🭠🭘  🭣🭕")
+	middle := lipgloss.NewStyle().Width(6).Align(lipgloss.Center).
+		Background(iconBg).Foreground(iconFg).Render(icon)
+	bgStyle2 := lipgloss.NewStyle().Foreground(iconBg)
+	bottom := bgStyle2.Render("🭥🭓██🭞🭚")
+	combined := lipgloss.JoinVertical(lipgloss.Left, top, middle, bottom)
+	return lipgloss.NewStyle().SetString(combined)
+}