Top-level setting page UI v2 update

ui/decredmaterial/icon_gallery.go

@@ -24,7 +24,7 @@ type Icons struct {
 	DecredSymbol2, GovernanceActiveIcon, GovernanceInactiveIcon, LogoDarkMode, TimerDarkMode, Rebroadcast,
 	SettingsActiveIcon, SettingsInactiveIcon, ActivatedActiveIcon, ActivatedInactiveIcon, LockinActiveIcon,
 	LockinInactiveIcon, SuccessIcon, FailedIcon, ReceiveInactiveIcon, SendInactiveIcon, DarkmodeIcon,
-	ChevronExpand, ChevronCollapse, ChevronLeft, NotSynced *Image
+	ChevronExpand, ChevronCollapse, ChevronLeft, NotSynced, InfoAction, LightMode, DarkMode *Image
 
 	NewStakeIcon,
 	TicketImmatureIcon,
@@ -151,6 +151,9 @@ func (i *Icons) DefaultIcons() *Icons {
 	i.ChevronCollapse = NewImage(decredIcons["chevron_expand"])
 	i.ChevronLeft = NewImage(decredIcons["chevron_left"])
 	i.NotSynced = NewImage(decredIcons["notSynced"])
+	i.InfoAction = NewImage(decredIcons["info_icon"])
+	i.DarkMode = NewImage(decredIcons["ic_moon"])
+	i.LightMode = NewImage(decredIcons["ic_sun"])
 
 	return i
 }

ui/modal/info_modal.go

@@ -6,6 +6,7 @@ import (
 	"gioui.org/io/key"
 	"gioui.org/layout"
 	"gioui.org/text"
+	"gioui.org/unit"
 	"gioui.org/widget/material"
 
 	"github.com/planetdecred/godcr/ui/decredmaterial"
@@ -28,7 +29,8 @@ type InfoModal struct {
 
 	positiveButtonText    string
 	positiveButtonClicked func(isChecked bool) bool
-	btnPositve            decredmaterial.Button
+	btnPositive           decredmaterial.Button
+	btnPositiveWidth      unit.Dp
 
 	negativeButtonText    string
 	negativeButtonClicked func()
@@ -45,22 +47,33 @@ type InfoModal struct {
 }
 
 func NewInfoModal(l *load.Load) *InfoModal {
-	return NewInfoModalWithKey(l, "info_modal")
+	return NewInfoModalWithKey(l, "info_modal", false)
 }
 
-func NewInfoModalWithKey(l *load.Load, key string) *InfoModal {
+// This function for normal positive button
+func NewInfoModal2(l *load.Load) *InfoModal {
+	return NewInfoModalWithKey(l, "info_modal", true)
+}
+
+func NewInfoModalWithKey(l *load.Load, key string, isPositiveButtonNormal bool) *InfoModal {
 
 	in := &InfoModal{
-		Load:         l,
-		Modal:        l.Theme.ModalFloatTitle(key),
-		btnPositve:   l.Theme.OutlineButton(values.String(values.StrYes)),
-		btnNegative:  l.Theme.OutlineButton(values.String(values.StrNo)),
-		isCancelable: true,
-		isLoading:    false,
-		btnAlignment: layout.E,
+		Load:             l,
+		Modal:            l.Theme.ModalFloatTitle(key),
+		btnNegative:      l.Theme.OutlineButton(values.String(values.StrNo)),
+		isCancelable:     true,
+		isLoading:        false,
+		btnAlignment:     layout.E,
+		btnPositiveWidth: 0,
+	}
+
+	if isPositiveButtonNormal {
+		in.btnPositive = l.Theme.Button(values.String(values.StrYes))
+	} else {
+		in.btnPositive = l.Theme.OutlineButton(values.String(values.StrYes))
 	}
 
-	in.btnPositve.Font.Weight = text.Medium
+	in.btnPositive.Font.Weight = text.Medium
 	in.btnNegative.Font.Weight = text.Medium
 
 	in.materialLoader = material.Loader(l.Theme.Base)
@@ -116,7 +129,12 @@ func (in *InfoModal) PositiveButton(text string, clicked func(isChecked bool) bo
 }
 
 func (in *InfoModal) PositiveButtonStyle(background, text color.NRGBA) *InfoModal {
-	in.btnPositve.Background, in.btnPositve.Color = background, text
+	in.btnPositive.Background, in.btnPositive.Color = background, text
+	return in
+}
+
+func (in *InfoModal) PositiveButtonWidth(width unit.Dp) *InfoModal {
+	in.btnPositiveWidth = width
 	return in
 }
 
@@ -173,12 +191,12 @@ func (in *InfoModal) KeysToHandle() key.Set {
 // window that match any of the key combinations returned by KeysToHandle().
 // Satisfies the load.KeyEventHandler interface for receiving key events.
 func (in *InfoModal) HandleKeyPress(evt *key.Event) {
-	in.btnPositve.Click()
+	in.btnPositive.Click()
 	in.ParentWindow().Reload()
 }
 
 func (in *InfoModal) Handle() {
-	for in.btnPositve.Clicked() {
+	for in.btnPositive.Clicked() {
 		if in.isLoading {
 			return
 		}
@@ -311,9 +329,12 @@ func (in *InfoModal) actionButtonsLayout() layout.Widget {
 						return layout.Dimensions{}
 					}
 
-					in.btnPositve.Text = in.positiveButtonText
+					in.btnPositive.Text = in.positiveButtonText
 					gtx.Constraints.Max.X = gtx.Dp(values.MarginPadding250)
-					return in.btnPositve.Layout(gtx)
+					if in.btnPositiveWidth > 0 {
+						gtx.Constraints.Min.X = gtx.Dp(in.btnPositiveWidth)
+					}
+					return in.btnPositive.Layout(gtx)
 				}),
 			)
 		})

ui/modal/text_input_modal.go

@@ -29,7 +29,7 @@ type TextInputModal struct {
 
 func NewTextInputModal(l *load.Load) *TextInputModal {
 	tm := &TextInputModal{
-		InfoModal:    NewInfoModalWithKey(l, "text_input_modal"),
+		InfoModal:    NewInfoModalWithKey(l, "text_input_modal", false),
 		isCancelable: true,
 	}
 
@@ -65,7 +65,7 @@ func (tm *TextInputModal) PositiveButton(text string, callback func(string, *Tex
 }
 
 func (tm *TextInputModal) PositiveButtonStyle(background, text color.NRGBA) *TextInputModal {
-	tm.positiveButtonColor, tm.btnPositve.Color = background, text
+	tm.positiveButtonColor, tm.btnPositive.Color = background, text
 	return tm
 }
 
@@ -93,10 +93,10 @@ func (tm *TextInputModal) SetTextWithTemplate(template string) *TextInputModal {
 func (tm *TextInputModal) Handle() {
 
 	if editorsNotEmpty(tm.textInput.Editor) {
-		tm.btnPositve.Background = tm.positiveButtonColor
+		tm.btnPositive.Background = tm.positiveButtonColor
 		tm.isEnabled = true
 	} else {
-		tm.btnPositve.Background = tm.Theme.Color.Gray3
+		tm.btnPositive.Background = tm.Theme.Color.Gray3
 		tm.isEnabled = false
 	}
 
@@ -105,7 +105,7 @@ func (tm *TextInputModal) Handle() {
 		tm.textInput.SetError("")
 	}
 
-	if (tm.btnPositve.Clicked() || isSubmit) && tm.isEnabled {
+	if (tm.btnPositive.Clicked() || isSubmit) && tm.isEnabled {
 		if tm.isLoading {
 			return
 		}

ui/page/about_page.go

@@ -85,34 +85,53 @@ func (pg *AboutPage) OnNavigatedTo() {
 // to be eventually drawn on screen.
 // Part of the load.Page interface.
 func (pg *AboutPage) Layout(gtx C) D {
-	body := func(gtx C) D {
-		page := components.SubPage{
-			Load:       pg.Load,
-			Title:      values.String(values.StrAbout),
-			BackButton: pg.backButton,
-			Back: func() {
-				pg.ParentNavigator().CloseCurrentPage()
-			},
-			Body: func(gtx C) D {
-				return pg.card.Layout(gtx, func(gtx C) D {
-					return pg.layoutRows(gtx)
-				})
-			},
-		}
-		return page.Layout(pg.ParentWindow(), gtx)
-	}
 	if pg.Load.GetCurrentAppWidth() <= gtx.Dp(values.StartMobileView) {
-		return pg.layoutMobile(gtx, body)
+		return pg.layoutMobile(gtx)
 	}
-	return pg.layoutDesktop(gtx, body)
+	return pg.layoutDesktop(gtx)
+}
+
+func (pg *AboutPage) layoutDesktop(gtx layout.Context) layout.Dimensions {
+	return layout.UniformInset(values.MarginPadding20).Layout(gtx, func(gtx C) D {
+		return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
+			layout.Rigid(pg.pageHeaderLayout),
+			layout.Rigid(func(gtx C) D {
+				return layout.Inset{Top: values.MarginPadding16, Bottom: values.MarginPadding20}.Layout(gtx, pg.pageContentLayout)
+			}),
+		)
+	})
 }
 
-func (pg *AboutPage) layoutDesktop(gtx layout.Context, body layout.Widget) layout.Dimensions {
-	return components.UniformPadding(gtx, body)
+func (pg *AboutPage) layoutMobile(gtx layout.Context) layout.Dimensions {
+	return layout.Dimensions{}
 }
 
-func (pg *AboutPage) layoutMobile(gtx layout.Context, body layout.Widget) layout.Dimensions {
-	return components.UniformMobile(gtx, false, false, body)
+func (pg *AboutPage) pageHeaderLayout(gtx layout.Context) layout.Dimensions {
+	return layout.Flex{Spacing: layout.SpaceBetween}.Layout(gtx,
+		layout.Flexed(1, func(gtx C) D {
+			return layout.W.Layout(gtx, func(gtx C) D {
+				return layout.Flex{}.Layout(gtx,
+					layout.Rigid(func(gtx C) D {
+						return layout.Inset{
+							Right: values.MarginPadding16,
+							Top:   values.MarginPaddingMinus2,
+						}.Layout(gtx, pg.backButton.Layout)
+					}),
+					layout.Rigid(pg.Theme.Label(values.TextSize20, values.String(values.StrAbout)).Layout),
+				)
+			})
+		}),
+	)
+}
+
+func (pg *AboutPage) pageContentLayout(gtx layout.Context) layout.Dimensions {
+	gtx.Constraints.Min.X = gtx.Constraints.Max.X
+	return layout.Center.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
+		gtx.Constraints.Min.X = gtx.Dp(values.MarginPadding550)
+		gtx.Constraints.Max.X = gtx.Constraints.Min.X
+		gtx.Constraints.Min.Y = gtx.Constraints.Max.Y
+		return pg.card.Layout(gtx, pg.layoutRows)
+	})
 }
 
 func (pg *AboutPage) layoutRows(gtx C) D {
@@ -190,6 +209,10 @@ func (pg *AboutPage) HandleUserInteractions() {
 	if pg.licenseRow.Clicked() {
 		pg.ParentNavigator().Display(NewLicensePage(pg.Load))
 	}
+
+	if pg.backButton.Button.Clicked() {
+		pg.ParentNavigator().CloseCurrentPage()
+	}
 }
 
 // OnNavigatedFrom is called when the page is about to be removed from

ui/page/help_page.go

@@ -67,26 +67,14 @@ func (pg *HelpPage) Layout(gtx C) D {
 }
 
 func (pg *HelpPage) layoutDesktop(gtx layout.Context) layout.Dimensions {
-	body := func(gtx C) D {
-		sp := components.SubPage{
-			Load:       pg.Load,
-			Title:      values.String(values.StrHelp),
-			SubTitle:   values.String(values.StrHelpInfo),
-			BackButton: pg.backButton,
-			Back: func() {
-				pg.ParentNavigator().CloseCurrentPage()
-			},
-			Body: func(gtx C) D {
-				return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, func(gtx C) D {
-					return layout.Flex{Spacing: layout.SpaceBetween, WeightSum: 2}.Layout(gtx,
-						layout.Flexed(1, pg.document()),
-					)
-				})
-			},
-		}
-		return sp.Layout(pg.ParentWindow(), gtx)
-	}
-	return components.UniformPadding(gtx, body)
+	return layout.UniformInset(values.MarginPadding20).Layout(gtx, func(gtx C) D {
+		return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
+			layout.Rigid(pg.pageHeaderLayout),
+			layout.Rigid(func(gtx C) D {
+				return layout.Inset{Top: values.MarginPadding16, Bottom: values.MarginPadding20}.Layout(gtx, pg.pageContentLayout)
+			}),
+		)
+	})
 }
 
 func (pg *HelpPage) layoutMobile(gtx layout.Context) layout.Dimensions {
@@ -114,6 +102,43 @@ func (pg *HelpPage) layoutMobile(gtx layout.Context) layout.Dimensions {
 	return components.UniformMobile(gtx, false, false, body)
 }
 
+func (pg *HelpPage) pageHeaderLayout(gtx layout.Context) layout.Dimensions {
+	return layout.Flex{Spacing: layout.SpaceBetween}.Layout(gtx,
+		layout.Flexed(1, func(gtx C) D {
+			return layout.W.Layout(gtx, func(gtx C) D {
+				return layout.Flex{}.Layout(gtx,
+					layout.Rigid(func(gtx C) D {
+						return layout.Inset{
+							Right: values.MarginPadding16,
+							Top:   values.MarginPaddingMinus2,
+						}.Layout(gtx, pg.backButton.Layout)
+					}),
+					layout.Rigid(pg.Theme.Label(values.TextSize20, values.String(values.StrHelp)).Layout),
+				)
+			})
+		}),
+	)
+}
+
+func (pg *HelpPage) pageContentLayout(gtx layout.Context) layout.Dimensions {
+	gtx.Constraints.Min.X = gtx.Constraints.Max.X
+	return layout.Center.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
+		gtx.Constraints.Min.X = gtx.Dp(values.MarginPadding550)
+		gtx.Constraints.Max.X = gtx.Dp(values.MarginPadding550)
+		gtx.Constraints.Min.Y = gtx.Constraints.Max.Y
+		return layout.Inset{Top: values.MarginPadding5}.Layout(gtx, func(gtx C) D {
+			return layout.Flex{WeightSum: 3, Axis: layout.Vertical}.Layout(gtx,
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					sub := pg.Load.Theme.Label(values.TextSize14, values.String(values.StrHelpInfo))
+					sub.Color = pg.Load.Theme.Color.GrayText2
+					return layout.Inset{Bottom: values.MarginPadding12}.Layout(gtx, sub.Layout)
+				}),
+				layout.Flexed(1, pg.document()),
+			)
+		})
+	})
+}
+
 func (pg *HelpPage) document() layout.Widget {
 	return func(gtx C) D {
 		return pg.pageSections(gtx, pg.Theme.Icons.DocumentationIcon, pg.documentation, values.String(values.StrDocumentation))
@@ -128,7 +153,6 @@ func (pg *HelpPage) pageSections(gtx C, icon *decredmaterial.Image, action *decr
 			Height:      decredmaterial.WrapContent,
 			Background:  pg.Theme.Color.Surface,
 			Clickable:   action,
-			Direction:   layout.Center,
 			Alignment:   layout.Middle,
 			Shadow:      pg.shadowBox,
 			Border:      decredmaterial.Border{Radius: decredmaterial.Radius(14)},
@@ -230,6 +254,10 @@ func (pg *HelpPage) HandleUserInteractions() {
 			})
 		pg.ParentWindow().ShowModal(info)
 	}
+
+	if pg.backButton.Button.Clicked() {
+		pg.ParentNavigator().CloseCurrentPage()
+	}
 }
 
 // OnNavigatedFrom is called when the page is about to be removed from