Update staking layout

ui/cryptomaterial/progressbar.go

@@ -38,13 +38,13 @@ type ProgressBarItem struct {
 type MultiLayerProgressBar struct {
 	t *Theme
 
-	items            []ProgressBarItem
-	Radius           CornerRadius
-	Height           unit.Dp
-	Width            unit.Dp
-	total            float64
-	ShowLedger       bool
-	ShowOverLayValue bool
+	items                []ProgressBarItem
+	Radius               CornerRadius
+	Height               unit.Dp
+	Width                unit.Dp
+	total                float64
+	ShowOverLayValue     bool
+	ShowOtherWidgetFirst bool
 }
 
 func (t *Theme) ProgressBar(progress int) ProgressBarStyle {
@@ -221,18 +221,35 @@ func (mp *MultiLayerProgressBar) progressBarLayout(gtx C) D {
 	)
 }
 
-func (mp *MultiLayerProgressBar) Layout(gtx C, labelWdg layout.Widget) D {
-	return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
-		layout.Rigid(func(gtx C) D {
-			return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, mp.progressBarLayout)
-		}),
+func (mp *MultiLayerProgressBar) Layout(gtx C, additionalWidget layout.Widget) D {
+	if additionalWidget == nil {
+		// We're only displaying the progress bar, no need for flex layout to wrap it.
+		// TODO: Verify if a top padding is necessary if we're only displaying the progressbar.
+		return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, mp.progressBarLayout)
+	}
+
+	progressBarTopPadding, otherWidget := values.MarginPadding24, additionalWidget
+	if !mp.ShowOtherWidgetFirst {
+		// reduce the top padding if we're showing the progress bar before the other widget
+		progressBarTopPadding = values.MarginPadding5
+		otherWidget = func(gtx C) D {
+			return layout.Center.Layout(gtx, additionalWidget)
+		}
+	}
+
+	flexWidgets := []layout.FlexChild{
 		layout.Rigid(func(gtx C) D {
-			if mp.ShowLedger {
-				return layout.Center.Layout(gtx, labelWdg)
-			}
-			return D{}
+			return layout.Inset{Top: progressBarTopPadding}.Layout(gtx, mp.progressBarLayout)
 		}),
-	)
+		layout.Rigid(otherWidget),
+	}
+
+	if mp.ShowOtherWidgetFirst {
+		// Swap the label and progress bar...
+		flexWidgets[0], flexWidgets[1] = flexWidgets[1], flexWidgets[0]
+	}
+
+	return layout.Flex{Axis: layout.Vertical}.Layout(gtx, flexWidgets...)
 }
 
 func (t *Theme) ProgressBarCirle(progress int) ProgressCircleStyle {

ui/page/components/coinformat.go

@@ -21,8 +21,13 @@ var (
 	noDecimal                 = regexp.MustCompile(`([0-9]{1,3},*)+`)
 )
 
-func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, scale float32, col color.NRGBA, displayUnitText bool) D {
-
+func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, col color.NRGBA, weight font.Weight, displayUnitText bool) D {
+	if amount == "" {
+		txt := l.Theme.Label(mainTextSize, "0")
+		txt.Color = col
+		txt.Font.Weight = weight
+		return txt.Layout(gtx)
+	}
 	startIndex := 0
 	stopIndex := 0
 
@@ -45,24 +50,30 @@ func formatBalance(gtx C, l *load.Load, amount string, mainTextSize unit.Sp, sca
 
 	mainText, subText, unitText := amount[:startIndex], amount[startIndex:stopIndex], amount[stopIndex:]
 
-	subTextSize := unit.Sp(float32(mainTextSize) * scale)
+	subTextSize := unit.Sp(float32(mainTextSize) * defaultScale)
 
 	return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Baseline}.Layout(gtx,
 		layout.Rigid(func(gtx C) D {
 			txt := l.Theme.Label(mainTextSize, mainText)
 			txt.Color = col
+			txt.Font.Weight = weight
 			return txt.Layout(gtx)
 		}),
 		layout.Rigid(func(gtx C) D {
 			txt := l.Theme.Label(subTextSize, subText)
 			txt.Color = col
+			txt.Font.Weight = weight
 			return txt.Layout(gtx)
 		}),
 		layout.Rigid(func(gtx C) D {
 			if displayUnitText {
-				return l.Theme.Label(mainTextSize, unitText).Layout(gtx)
+				txt := l.Theme.Label(mainTextSize, unitText)
+				txt.Font.Weight = weight
+				return txt.Layout(gtx)
 			}
-			return l.Theme.Label(subTextSize, unitText).Layout(gtx)
+			txt := l.Theme.Label(subTextSize, unitText)
+			txt.Font.Weight = weight
+			return txt.Layout(gtx)
 		}),
 	)
 }
@@ -109,27 +120,31 @@ func getIndexUnit(amount string) int {
 // LayoutBalance aligns the main and sub DCR balances horizontally, putting the sub
 // balance at the baseline of the row.
 func LayoutBalance(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize20, defaultScale, l.Theme.Color.Text, false)
+	return formatBalance(gtx, l, amount, values.TextSize20, l.Theme.Color.Text, font.Normal, false)
 }
 
 func LayoutBalanceWithUnit(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize20, defaultScale, l.Theme.Color.PageNavText, true)
+	return formatBalance(gtx, l, amount, values.TextSize20, l.Theme.Color.PageNavText, font.Normal, true)
 }
 
 func LayoutBalanceWithUnitSize(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, defaultScale, l.Theme.Color.PageNavText, true)
+	return formatBalance(gtx, l, amount, mainTextSize, l.Theme.Color.PageNavText, font.Normal, true)
 }
 
 func LayoutBalanceSize(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, defaultScale, l.Theme.Color.Text, false)
+	return formatBalance(gtx, l, amount, mainTextSize, l.Theme.Color.Text, font.Normal, false)
+}
+
+func LayoutBalanceBold(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
+	return formatBalance(gtx, l, amount, values.TextSize16, l.Theme.Color.Text, font.Bold, false)
 }
 
-func LayoutBalanceSizeScale(gtx layout.Context, l *load.Load, amount string, mainTextSize unit.Sp, scale float32) layout.Dimensions {
-	return formatBalance(gtx, l, amount, mainTextSize, scale, l.Theme.Color.Text, false)
+func LayoutBalanceSemiBold(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {
+	return formatBalance(gtx, l, amount, values.TextSize16, l.Theme.Color.Text, font.SemiBold, false)
 }
 
 func LayoutBalanceColor(gtx layout.Context, l *load.Load, amount string, color color.NRGBA) layout.Dimensions {
-	return formatBalance(gtx, l, amount, values.TextSize20, defaultScale, color, false)
+	return formatBalance(gtx, l, amount, values.TextSize20, color, font.Normal, false)
 }
 
 func LayoutBalanceWithState(gtx layout.Context, l *load.Load, amount string) layout.Dimensions {

ui/page/components/utils.go

@@ -111,23 +111,24 @@ func checksumByte(data []byte) byte {
 	return sha256.Sum256(intermediateHash[:])[0]
 }
 
-func LayoutIconAndText(l *load.Load, gtx C, title string, val string, col color.NRGBA) D {
+func LayoutIconAndTextWithSize(l *load.Load, gtx C, text string, col color.NRGBA, size unit.Sp, iconSize unit.Dp) D {
+	return layoutIconAndText(l, gtx, text, col, size, iconSize)
+}
+
+func layoutIconAndText(l *load.Load, gtx C, text string, col color.NRGBA, size unit.Sp, iconSize unit.Dp) D {
 	return layout.Inset{Right: values.MarginPadding12}.Layout(gtx, func(gtx C) D {
-		return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
+		return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
 			layout.Rigid(func(gtx C) D {
-				return layout.Inset{Right: values.MarginPadding5, Top: values.MarginPadding5}.Layout(gtx, func(gtx C) D {
+				return layout.Inset{
+					Right: values.MarginPadding5,
+				}.Layout(gtx, func(gtx C) D {
 					ic := cryptomaterial.NewIcon(l.Theme.Icons.ImageBrightness1)
 					ic.Color = col
-					return ic.Layout(gtx, values.MarginPadding8)
+					return ic.Layout(gtx, iconSize)
 				})
 			}),
 			layout.Rigid(func(gtx C) D {
-				txt := l.Theme.Label(values.TextSize14, title)
-				txt.Color = l.Theme.Color.GrayText2
-				return txt.Layout(gtx)
-			}),
-			layout.Rigid(func(gtx C) D {
-				txt := l.Theme.Label(values.TextSize14, val)
+				txt := l.Theme.Label(size, text)
 				txt.Color = l.Theme.Color.GrayText2
 				return txt.Layout(gtx)
 			}),

ui/page/privacy/account_mixer_page.go

@@ -176,10 +176,12 @@ func (pg *AccountMixerPage) mixerProgressBarLayout(gtx C) D {
 		return layout.Inset{Top: values.MarginPadding10}.Layout(gtx, func(gtx C) D {
 			return layout.Flex{}.Layout(gtx,
 				layout.Rigid(func(gtx C) D {
-					return components.LayoutIconAndText(pg.Load, gtx, "", pg.mixedBalance.String(), items[0].Color)
+					text := pg.mixedBalance.String()
+					return components.LayoutIconAndTextWithSize(pg.Load, gtx, text, items[0].Color, values.TextSize14, values.MarginPadding8)
 				}),
 				layout.Rigid(func(gtx C) D {
-					return components.LayoutIconAndText(pg.Load, gtx, "", pg.unmixedBalance.String(), items[1].Color)
+					text := pg.unmixedBalance.String()
+					return components.LayoutIconAndTextWithSize(pg.Load, gtx, text, items[1].Color, values.TextSize14, values.MarginPadding8)
 				}),
 			)
 		})