feat(tracker): add surface color to instrument editor

tracker/instruments.go

@@ -5,6 +5,9 @@ import (
 	"sort"
 
 	"gioui.org/layout"
+	"gioui.org/op/clip"
+	"gioui.org/op/paint"
+	"gioui.org/unit"
 	"gioui.org/widget"
 	"gioui.org/widget/material"
 )
@@ -43,13 +46,21 @@ func (t *Tracker) layoutInstrumentNames() layout.Widget {
 				t.CurrentInstrument = index
 			}
 			btnStyle := material.Button(t.Theme, t.InstrumentBtns[index], fmt.Sprintf("%v", index))
-			btnStyle.Background = transparent
+			btnStyle.CornerRadius = unit.Dp(0)
+			if t.CurrentInstrument == index {
+				btnStyle.Background = instrumentSurfaceColor
+			} else {
+				btnStyle.Background = transparent
+			}
 			return btnStyle.Layout(gtx)
 		})
 	}
 }
 func (t *Tracker) layoutInstrumentEditor() layout.Widget {
 	return func(gtx C) D {
+		paint.FillShape(gtx.Ops, instrumentSurfaceColor, clip.Rect{
+			Max: gtx.Constraints.Max,
+		}.Op())
 		return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
 			layout.Rigid(t.layoutUnitList()),
 			layout.Rigid(t.layoutUnitControls()))

tracker/layout.go

@@ -149,8 +149,8 @@ func (t *Tracker) layoutTracker(gtx layout.Context) layout.Dimensions {
 }
 
 func (t *Tracker) layoutControls(gtx layout.Context) layout.Dimensions {
-	gtx.Constraints.Min.Y = 200
-	gtx.Constraints.Max.Y = 200
+	gtx.Constraints.Min.Y = 250
+	gtx.Constraints.Max.Y = 250
 
 	playPat := t.PlayPattern
 	if !t.Playing {

tracker/theme.go

@@ -79,3 +79,5 @@ var patternFont = fontCollection[6].Font
 var patternFontSize = unit.Px(12)
 
 var inactiveBtnColor = color.RGBA{R: 61, G: 55, B: 55, A: 255}
+
+var instrumentSurfaceColor = color.RGBA{R: 31, G: 31, B: 31, A: 31}