fix cex page for mobile

ui/cryptomaterial/icon_gallery.go

@@ -12,7 +12,7 @@ type Icons struct {
 	ContentAdd, NavigationCheck, NavigationMore, ActionCheckCircle, ActionInfo, NavigationArrowBack,
 	NavigationArrowForward, ActionCheck, NavigationCancel, NavMoreIcon,
 	ImageBrightness1, ContentClear, DropDownIcon, Cached, ContentRemove, SearchIcon, PlayIcon,
-	ActionSettings, ActionSwapHoriz, NavigationRefresh, ContentCopy *widget.Icon
+	ActionSettings, ActionSwapHoriz, ActionSwapVertical, NavigationRefresh, ContentCopy *widget.Icon
 
 	OverviewIcon, OverviewIconInactive, WalletIcon, WalletIconInactive, TradeIconActive, TradeIconInactive, MixerInactive, RedAlert, Alert,
 	ReceiveIcon, Transferred, TransactionsIcon, TransactionsIconInactive, SendIcon, MoreIcon, MoreIconInactive,
@@ -62,6 +62,7 @@ func (i *Icons) StandardMaterialIcons() *Icons {
 	i.PlayIcon = MustIcon(widget.NewIcon(icons.AVPlayArrow))
 	i.ActionSettings = MustIcon(widget.NewIcon(icons.ActionSettings))
 	i.ActionSwapHoriz = MustIcon(widget.NewIcon(icons.ActionSwapHoriz))
+	i.ActionSwapVertical = MustIcon(widget.NewIcon(icons.ActionSwapVert))
 	i.NavigationRefresh = MustIcon(widget.NewIcon(icons.NavigationRefresh))
 	i.ContentCopy = MustIcon(widget.NewIcon(icons.ContentContentPaste))
 

ui/cryptomaterial/image.go

@@ -88,6 +88,16 @@ func (img *Image) LayoutSize(gtx C, size unit.Dp) D {
 	return i.Layout(gtx)
 }
 
+// LayoutTransform is used to scale images for mobile view.
+func (img *Image) LayoutTransform(gtx C, isMobileView bool, size unit.Dp) D {
+	if isMobileView {
+		size := values.MarginPaddingTransform(isMobileView, size)
+		return img.LayoutSize(gtx, size)
+	}
+
+	return img.LayoutSize(gtx, size)
+}
+
 func (img *Image) LayoutSize2(gtx C, width, height unit.Dp) D {
 	var dst *image.RGBA
 	img.layoutSize2Mtx.Lock()

ui/page/components/components.go

@@ -23,6 +23,7 @@ import (
 	"github.com/crypto-power/cryptopower/app"
 	"github.com/crypto-power/cryptopower/libwallet/assets/dcr"
 	sharedW "github.com/crypto-power/cryptopower/libwallet/assets/wallet"
+	"github.com/crypto-power/cryptopower/libwallet/instantswap"
 	"github.com/crypto-power/cryptopower/libwallet/txhelper"
 	libutils "github.com/crypto-power/cryptopower/libwallet/utils"
 	"github.com/crypto-power/cryptopower/ui/cryptomaterial"
@@ -977,3 +978,36 @@ func IconButton(icon *widget.Icon, txt string, inset layout.Inset, th *cryptomat
 		})
 	}
 }
+
+// ConditionalFlexedRigidLayout decides whether to use layout.Rigid or layout.Flexed
+func ConditionalFlexedRigidLayout(flexWeight float32, isMobileView bool, content layout.Widget) layout.FlexChild {
+	if isMobileView {
+		return layout.Rigid(content)
+	}
+	return layout.Flexed(flexWeight, content)
+}
+
+// GetServerIcon returns the icon for the provided server name.
+func GetServerIcon(theme *cryptomaterial.Theme, serverName string) *cryptomaterial.Image {
+	switch serverName {
+	case instantswap.Changelly.ToString():
+		return theme.Icons.ChangellyIcon
+	case instantswap.ChangeNow.ToString():
+		return theme.Icons.ChangeNowIcon
+	case instantswap.CoinSwitch.ToString():
+		return theme.Icons.CoinSwitchIcon
+	case instantswap.FlypMe.ToString():
+		return theme.Icons.FlypMeIcon
+	case instantswap.GoDex.ToString():
+		return theme.Icons.GodexIcon
+	case instantswap.SimpleSwap.ToString():
+		return theme.Icons.SimpleSwapIcon
+	case instantswap.SwapZone.ToString():
+		return theme.Icons.SwapzoneIcon
+	case instantswap.Trocador.ToString():
+		return theme.Icons.TrocadorIcon
+
+	default:
+		return theme.Icons.AddExchange
+	}
+}

ui/page/components/order_list.go

@@ -16,17 +16,11 @@ import (
 
 func OrderItemWidget(gtx C, l *load.Load, orderItem *instantswap.Order) D {
 	gtx.Constraints.Min.X = gtx.Constraints.Max.X
-	return cryptomaterial.LinearLayout{
-		Width:     cryptomaterial.WrapContent,
-		Height:    cryptomaterial.WrapContent,
-		Alignment: layout.Middle,
-		Border:    cryptomaterial.Border{Radius: cryptomaterial.Radius(14)},
-		Margin: layout.Inset{
-			Top:    values.MarginPadding8,
-			Bottom: values.MarginPadding10,
-		},
+	return cryptomaterial.Card{
+		Radius: cryptomaterial.Radius(14),
 	}.Layout(gtx,
-		layout.Rigid(func(gtx C) D {
+		func(gtx C) D {
+			textSize16 := values.TextSizeTransform(l.IsMobileView(), values.TextSize16)
 			return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
 				layout.Rigid(func(gtx C) D {
 					return layout.Inset{
@@ -35,10 +29,10 @@ func OrderItemWidget(gtx C, l *load.Load, orderItem *instantswap.Order) D {
 						return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
 							layout.Rigid(func(gtx C) D {
 								return layout.Inset{
-									Right: values.MarginPadding10,
-									Left:  values.MarginPadding10,
+									Right: values.MarginPadding8,
 								}.Layout(gtx, func(gtx C) D {
-									return SetWalletLogo(l, gtx, libutils.AssetType(orderItem.FromCurrency), values.MarginPadding30)
+									size := values.MarginPaddingTransform(l.IsMobileView(), values.MarginPadding24)
+									return SetWalletLogo(l, gtx, libutils.AssetType(orderItem.FromCurrency), size)
 								})
 							}),
 							layout.Rigid(func(gtx C) D {
@@ -53,9 +47,9 @@ func OrderItemWidget(gtx C, l *load.Load, orderItem *instantswap.Order) D {
 										layout.Rigid(func(gtx C) D {
 											return layout.Inset{
 												Right: values.MarginPadding10,
-												Left:  values.MarginPadding10,
 											}.Layout(gtx, func(gtx C) D {
-												return SetWalletLogo(l, gtx, libutils.AssetType(orderItem.ToCurrency), values.MarginPadding30)
+												size := values.MarginPaddingTransform(l.IsMobileView(), values.MarginPadding24)
+												return SetWalletLogo(l, gtx, libutils.AssetType(orderItem.ToCurrency), size)
 											})
 										}),
 										layout.Rigid(func(gtx C) D {
@@ -70,19 +64,34 @@ func OrderItemWidget(gtx C, l *load.Load, orderItem *instantswap.Order) D {
 				layout.Rigid(func(gtx C) D {
 					return layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
 						layout.Rigid(func(gtx C) D {
-							return layout.Inset{
-								Right: values.MarginPadding50,
-							}.Layout(gtx, func(gtx C) D {
-								return D{}
-							})
-						}),
-						layout.Rigid(func(gtx layout.Context) layout.Dimensions {
 							return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Middle}.Layout(gtx,
-								layout.Rigid(l.Theme.Label(values.TextSize16, orderItem.Status.String()).Layout),
-								layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+								layout.Rigid(func(gtx C) D {
+									return layout.Inset{
+										Right: values.MarginPadding5,
+									}.Layout(gtx, func(gtx C) D {
+										serverIcon := GetServerIcon(l.Theme, orderItem.ExchangeServer.Server.ToString())
+										if serverIcon == nil {
+											return D{}
+										}
+										return serverIcon.LayoutTransform(gtx, l.IsMobileView(), values.MarginPadding24)
+									})
+								}),
+								layout.Rigid(func(gtx C) D {
+									if l.IsMobileView() {
+										return D{}
+									}
+									return l.Theme.Label(textSize16, orderItem.ExchangeServer.Server.CapFirstLetter()).Layout(gtx)
+								}),
+								layout.Rigid(func(gtx C) D {
+									return layout.Center.Layout(gtx, func(gtx C) D {
+										return UniformHorizontalInset(values.MarginPadding8).Layout(gtx, l.Theme.Icons.Dot.Layout8dp)
+									})
+								}),
+								layout.Rigid(l.Theme.Label(textSize16, orderItem.Status.String()).Layout),
+								layout.Rigid(func(gtx C) D {
 									statusLayout := statusIcon(l, orderItem.Status)
 									if statusLayout == nil {
-										return layout.Dimensions{}
+										return D{}
 									}
 									return layout.Inset{Left: values.MarginPadding6}.Layout(gtx, statusLayout)
 								}),
@@ -98,7 +107,10 @@ func OrderItemWidget(gtx C, l *load.Load, orderItem *instantswap.Order) D {
 										date := time.Unix(orderItem.CreatedAt, 0).Format("Jan 2, 2006")
 										timeSplit := time.Unix(orderItem.CreatedAt, 0).Format("03:04:05 PM")
 										createdAt := fmt.Sprintf("%v at %v", date, timeSplit)
-										timestamp := l.Theme.Label(values.TextSize16, createdAt)
+										if l.IsMobileView() {
+											createdAt = fmt.Sprintf("%v", date)
+										}
+										timestamp := l.Theme.Label(textSize16, createdAt)
 										timestamp.Color = l.Theme.Color.GrayText2
 										return timestamp.Layout(gtx)
 									}),
@@ -108,36 +120,34 @@ func OrderItemWidget(gtx C, l *load.Load, orderItem *instantswap.Order) D {
 					)
 				}),
 			)
-		}),
+		},
 	)
 }
 
-func statusIcon(l *load.Load, status api.Status) func(gtx C) layout.Dimensions {
+func statusIcon(l *load.Load, status api.Status) func(gtx C) D {
 	switch status {
 	case api.OrderStatusCompleted:
-		return l.Theme.Icons.ConfirmIcon.Layout16dp
+		return func(gtx C) D {
+			return l.Theme.Icons.ConfirmIcon.LayoutTransform(gtx, l.IsMobileView(), values.MarginPadding16)
+		}
 	case api.OrderStatusCanceled, api.OrderStatusExpired, api.OrderStatusFailed:
-		return l.Theme.Icons.FailedIcon.Layout16dp
+		return func(gtx C) D {
+			return l.Theme.Icons.FailedIcon.LayoutTransform(gtx, l.IsMobileView(), values.MarginPadding16)
+		}
 	}
 	return nil
 }
 
-func LayoutNoOrderHistory(gtx C, l *load.Load, syncing bool) D {
-	return LayoutNoOrderHistoryWithMsg(gtx, l, syncing, values.String(values.StrNoOrders))
-}
-
 func LayoutNoOrderHistoryWithMsg(gtx C, l *load.Load, syncing bool, msg string) D {
 	gtx.Constraints.Min.X = gtx.Constraints.Max.X
-	text := l.Theme.Body1(msg)
+	text := l.Theme.Label(values.TextSizeTransform(l.IsMobileView(), values.TextSize16), msg)
 	text.Color = l.Theme.Color.GrayText3
 	if syncing {
-		text = l.Theme.Body1(values.String(values.StrFetchingOrders))
+		text = l.Theme.Label(values.TextSizeTransform(l.IsMobileView(), values.TextSize16),
+			values.String(values.StrFetchingOrders))
 	}
 	return layout.Center.Layout(gtx, func(gtx C) D {
-		return layout.Inset{
-			Top:    values.MarginPadding30,
-			Bottom: values.MarginPadding30,
-		}.Layout(gtx, text.Layout)
+		return UniformVeticalInset(values.MarginPadding30).Layout(gtx, text.Layout)
 	})
 }
 

ui/page/components/utils.go

@@ -157,5 +157,5 @@ func LayoutOrderAmount(l *load.Load, gtx C, assetType string, amount float64) D
 		convertedAmountStr = "Unsupported asset type"
 	}
 
-	return l.Theme.Label(values.TextSize16, convertedAmountStr).Layout(gtx)
+	return l.Theme.Label(values.TextSizeTransform(l.IsMobileView(), values.TextSize16), convertedAmountStr).Layout(gtx)
 }

ui/page/dcrdex/market.go

@@ -30,7 +30,7 @@ const (
 var (
 	dp5                        = values.MarginPadding5
 	dp8                        = values.MarginPadding8
-	dp300                      = values.DP300
+	dp300                      = values.MarginPadding300
 	orderFormAndOrderBookWidth = (values.AppWidth / 2) - 40 // Minus 40 px to allow for margin between the order form and order book.
 	// orderFormAndOrderBookHeight is a an arbitrary height that accommodates
 	// the current order form elements and maxOrderDisplayedInOrderBook. Use

ui/page/exchange/cex_splash_page.go

@@ -25,24 +25,26 @@ func (pg *CreateOrderPage) splashPage(gtx C) D {
 			return layout.Inset{Bottom: values.MarginPadding30}.Layout(gtx, func(gtx C) D {
 				return layout.Stack{Alignment: layout.NE}.Layout(gtx,
 					layout.Expanded(func(gtx C) D {
+						textSize16 := values.TextSizeTransform(pg.IsMobileView(), values.TextSize16)
 						return layout.Flex{Axis: layout.Vertical, Alignment: layout.Middle}.Layout(gtx,
 							layout.Rigid(func(gtx C) D {
 								return layout.Inset{Top: values.MarginPadding20}.Layout(gtx, func(gtx C) D {
-									return pg.Theme.Icons.TradeExchangeIcon.LayoutSize(gtx, values.MarginPadding100)
+									size := values.MarginPaddingTransform(pg.IsMobileView(), values.MarginPadding100)
+									return pg.Theme.Icons.TradeExchangeIcon.LayoutSize(gtx, size)
 								})
 							}),
 							layout.Rigid(func(gtx C) D {
-								pgTitle := pg.Theme.Label(values.TextSize24, values.String(values.StrWhatIsCex))
+								pgTitle := pg.Theme.Label(values.TextSizeTransform(pg.IsMobileView(), values.TextSize24), values.String(values.StrWhatIsCex))
 								pgTitle.Font.Weight = font.SemiBold
 								return layout.Inset{Top: values.MarginPadding26, Bottom: values.MarginPadding12}.Layout(gtx, pgTitle.Layout)
 							}),
 							layout.Rigid(func(gtx C) D {
-								pgContent := pg.Theme.Label(values.TextSize16, values.String(values.StrCexContent))
+								pgContent := pg.Theme.Label(textSize16, values.String(values.StrCexContent))
 								pgContent.Alignment = text.Middle
 								return layout.Inset{Top: values.MarginPadding10}.Layout(gtx, pgContent.Layout)
 							}),
 							layout.Rigid(func(gtx C) D {
-								pgQuestion := pg.Theme.Label(values.TextSize16, values.String(values.StrWouldTradeCex))
+								pgQuestion := pg.Theme.Label(textSize16, values.String(values.StrWouldTradeCex))
 								return layout.Inset{Top: values.MarginPadding20}.Layout(gtx, pgQuestion.Layout)
 							}),
 						)