improve dark mode ui and update some UI

ui/cryptomaterial/icon_gallery.go

@@ -18,8 +18,8 @@ type Icons struct {
 	ReceiveIcon, Transferred, TransactionsIcon, TransactionsIconInactive, SendIcon, MoreIcon, MoreIconInactive,
 	PendingIcon, Logo, RedirectIcon, ConfirmIcon, NewWalletIcon, WalletAlertIcon, ArrowForward, EllipseHoriz,
 	ImportedAccountIcon, AccountIcon, EditIcon, expandIcon, CopyIcon, MixedTx, Mixer,
-	Next, SettingsIcon, SecurityIcon, HelpIcon, AboutIcon, DebugIcon, VerifyMessageIcon, LocationPinIcon, SignMessageIcon,
-	HeaderSettingsIcon, AlertGray, ArrowDownIcon, WatchOnlyWalletIcon, CurrencySwapIcon, SyncingIcon, TransactionFingerprint,
+	Next, SettingsIcon, SecurityIcon, HelpIcon, AboutIcon, DebugIcon, VerifyMessageIcon, LocationPinIcon, SignMessageIcon, AlertGray,
+	ArrowDownIcon, WatchOnlyWalletIcon, CurrencySwapIcon, SyncingIcon, TransactionFingerprint,
 	Restore, DocumentationIcon, TimerIcon, StakeIcon, StakeIconInactive, StakeyIcon, EllipseVert,
 	GovernanceActiveIcon, GovernanceInactiveIcon, LogoDarkMode, TimerDarkMode, Rebroadcast, Notification,
 	SettingsActiveIcon, SettingsInactiveIcon, ActivatedActiveIcon, ActivatedInactiveIcon, LockinActiveIcon,
@@ -98,7 +98,6 @@ func (i *Icons) DefaultIcons() *Icons {
 	i.MixedTx = NewImage(decredIcons["mixed_tx"])
 	i.Mixer = NewImage(decredIcons["mixer"])
 	i.Next = NewImage(decredIcons["ic_next"])
-	i.HeaderSettingsIcon = NewImage(decredIcons["header_settings"])
 	i.SettingsIcon = NewImage(decredIcons["settings"])
 	i.SecurityIcon = NewImage(decredIcons["security"])
 	i.HelpIcon = NewImage(decredIcons["help_icon"])
@@ -265,5 +264,6 @@ func (i *Icons) DarkModeIcons() *Icons {
 	i.ArrowForward = NewImage(decredIcons["dm_arrow_fwd"])
 	i.ChevronLeft = NewImage(decredIcons["chevron_left"])
 	i.Notification = NewImage(decredIcons["dm_notification"])
+	i.TradeExchangeIcon = NewImage(decredIcons["dm_trade_exchange_icon"])
 	return i
 }

ui/page/dcrdex/market.go

@@ -563,7 +563,7 @@ func (pg *DEXMarketPage) Layout(gtx C) D {
 	}
 
 	return cryptomaterial.LinearLayout{
-		Width:  gtx.Dp(values.AppWidth - 50 /* allow for left and right margin */),
+		Width:  cryptomaterial.MatchParent,
 		Height: cryptomaterial.MatchParent,
 		Margin: layout.Inset{
 			Bottom: values.MarginPadding30,
@@ -749,15 +749,19 @@ func (pg *DEXMarketPage) semiBoldLabelSize14(txt string) cryptomaterial.Label {
 }
 
 func (pg *DEXMarketPage) orderFormAndOrderBook(gtx C) D {
+	elementWidth := (gtx.Constraints.Max.X - 20) / 2
 	return cryptomaterial.LinearLayout{
 		Width:       cryptomaterial.MatchParent,
 		Height:      cryptomaterial.WrapContent,
 		Orientation: horizontal,
 	}.Layout(gtx,
 		layout.Rigid(func(gtx C) D {
+			gtx.Constraints.Max.X = elementWidth
 			return layout.W.Layout(gtx, pg.orderForm)
 		}),
-		layout.Flexed(1, func(gtx C) D {
+		layout.Rigid(layout.Spacer{Width: values.MarginPadding20}.Layout),
+		layout.Rigid(func(gtx C) D {
+			gtx.Constraints.Max.X = elementWidth
 			return layout.E.Layout(gtx, pg.orderbook)
 		}),
 	)
@@ -822,7 +826,7 @@ func (pg *DEXMarketPage) orderForm(gtx C) D {
 	balStr = fmt.Sprintf("%f %s", availableAssetBal, baseOrQuoteAssetSym)
 	totalSubText, lotsOrAmountSubtext := pg.orderFormEditorSubtext()
 	return cryptomaterial.LinearLayout{
-		Width:      gtx.Dp(orderFormAndOrderBookWidth),
+		Width:      cryptomaterial.MatchParent,
 		Height:     gtx.Dp(orderFormAndOrderBookHeight),
 		Background: pg.Theme.Color.Surface,
 		Margin:     layout.Inset{Top: dp5, Bottom: dp5},
@@ -1123,7 +1127,7 @@ func (pg *DEXMarketPage) orderbook(gtx C) D {
 
 	baseAsset, quoteAsset := convertAssetIDToAssetType(pg.selectedMarketOrderBook.base), convertAssetIDToAssetType(pg.selectedMarketOrderBook.quote)
 	return cryptomaterial.LinearLayout{
-		Width:       gtx.Dp(orderFormAndOrderBookWidth),
+		Width:       cryptomaterial.MatchParent,
 		Height:      gtx.Dp(orderFormAndOrderBookHeight),
 		Background:  pg.Theme.Color.Surface,
 		Margin:      layout.Inset{Top: dp5, Bottom: dp5},

ui/page/staking/stake_info.go

@@ -46,7 +46,7 @@ func (pg *Page) pageHead(gtx C) D {
 						}.Layout(gtx, pg.stake.Layout)
 					}),
 					layout.Rigid(func(gtx C) D {
-						icon := pg.Theme.Icons.HeaderSettingsIcon
+						icon := pg.Theme.Icons.SettingsIcon
 						return pg.stakeSettings.Layout(gtx, func(gtx C) D {
 							return icon.LayoutTransform(gtx, isMobile, values.MarginPadding24)
 						})

ui/values/colors.go

@@ -77,6 +77,7 @@ func (c *Color) DarkThemeColors() {
 	c.Primary = rgb(0x57B6FF)
 
 	// text colors
+	c.PageNavText = argb(0x99FFFFFF)
 	c.Text = argb(0x99FFFFFF)
 	c.GrayText1 = argb(0xDEFFFFFF)
 	c.GrayText2 = argb(0x99FFFFFF)
@@ -91,6 +92,7 @@ func (c *Color) DarkThemeColors() {
 	c.Gray4 = rgb(0x121212)
 	c.Gray5 = rgb(0x363636)
 	c.Surface = rgb(0x252525)
+	c.LightGray = rgb(0x2B2B2B)
 }
 
 func (c *Color) DefaultThemeColors() *Color {