update layout filter for general transaction page and transaction page

ui/cryptomaterial/icon_gallery.go

@@ -28,7 +28,7 @@ type Icons struct {
 	RevealIcon, InfoAction, LightMode, DarkMode, AddIcon, ChevronRight, AddExchange, FlypMeIcon, ChangellyIcon,
 	SimpleSwapIcon, SwapzoneIcon, ShapeShiftIcon, GodexIcon, CoinSwitchIcon, ChangeNowIcon, TrocadorIcon, CaretUp, CaretDown,
 	LTCBackground, LTCGroupIcon, DCRBackground, DCRGroupIcon, BTCBackground, BTCGroupIcon, CrossPlatformIcon,
-	IntegratedExchangeIcon, MultiWalletIcon, Dot, TradeExchangeIcon, FilterImgIcon, FilterOffImgIcon *Image
+	IntegratedExchangeIcon, MultiWalletIcon, Dot, TradeExchangeIcon, FilterImgIcon, FilterOffImgIcon, ShareIcon *Image
 
 	NewStakeIcon,
 	TicketImmatureIcon,
@@ -206,6 +206,7 @@ func (i *Icons) DefaultIcons() *Icons {
 	i.CrossPlatformIcon = NewImage(decredIcons["crossPlatformIcon"])
 	i.FilterImgIcon = NewImage(decredIcons["ic_filter"])
 	i.FilterOffImgIcon = NewImage(decredIcons["ic_filter_off"])
+	i.ShareIcon = NewImage(decredIcons["ic_share"])
 
 	return i
 }

ui/page/transaction/transactions_page.go

@@ -59,6 +59,7 @@ type TransactionsPage struct {
 	orderDropDown  *cryptomaterial.DropDown
 	walletDropDown *cryptomaterial.DropDown
 	filterBtn      *cryptomaterial.Clickable
+	exportBtn      *cryptomaterial.Clickable
 	isFilterOpen   bool
 	searchEditor   cryptomaterial.Editor
 
@@ -104,6 +105,7 @@ func NewTransactionsPage(l *load.Load, wallet sharedW.Asset) *TransactionsPage {
 
 	pg.scroll = components.NewScroll(l, pageSize, pg.fetchTransactions)
 	pg.filterBtn = l.Theme.NewClickable(false)
+	pg.exportBtn = l.Theme.NewClickable(false)
 	pg.transactionList.Radius = cryptomaterial.Radius(14)
 	pg.transactionList.IsShadowEnabled = true
 
@@ -381,12 +383,12 @@ func (pg *TransactionsPage) dropdownLayout(gtx C) D {
 }
 
 func (pg *TransactionsPage) leftDropdown(gtx C) D {
-	return layout.Flex{Spacing: layout.SpaceBetween, Alignment: layout.Middle}.Layout(gtx,
+	return layout.Flex{Spacing: layout.SpaceBetween}.Layout(gtx,
 		layout.Rigid(func(gtx C) D {
 			if pg.isShowTitle && pg.IsMobileView() {
 				lbl := pg.Theme.Label(values.TextSize16, values.String(values.StrTransactions))
 				lbl.Font.Weight = font.Bold
-				return layout.Center.Layout(gtx, lbl.Layout)
+				return layout.Inset{Top: values.MarginPadding4}.Layout(gtx, lbl.Layout)
 			}
 			if pg.walletDropDown == nil {
 				return D{}
@@ -398,13 +400,43 @@ func (pg *TransactionsPage) leftDropdown(gtx C) D {
 			if pg.isFilterOpen {
 				icon = pg.Theme.Icons.FilterImgIcon
 			}
-			return layout.Center.Layout(gtx, func(gtx C) D {
-				return pg.filterBtn.Layout(gtx, icon.Layout16dp)
+			return layout.Inset{Top: values.MarginPadding8}.Layout(gtx, func(gtx C) D {
+				return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
+					layout.Rigid(func(gtx C) D {
+						margin := values.MarginPadding20
+						if pg.IsMobileView() {
+							margin = values.MarginPadding12
+						}
+						return layout.Inset{Right: margin}.Layout(gtx, func(gtx C) D {
+							return pg.filterBtn.Layout(gtx, pg.buttonWrap(icon, values.String(values.StrFilter)))
+						})
+					}),
+					layout.Rigid(func(gtx C) D {
+						return pg.exportBtn.Layout(gtx, pg.buttonWrap(pg.Theme.Icons.ShareIcon, values.String(values.StrExport)))
+					}),
+				)
 			})
 		}),
 	)
 }
 
+func (pg *TransactionsPage) buttonWrap(icon *cryptomaterial.Image, title string) layout.Widget {
+	return func(gtx C) D {
+		lbl := pg.Theme.Label(pg.ConvertTextSize(values.TextSize14), title)
+		lbl.Font.Weight = font.Bold
+		lbl.Color = pg.Theme.Color.GrayText1
+		return layout.Flex{}.Layout(gtx,
+			layout.Rigid(icon.Layout16dp),
+			layout.Rigid(func(gtx C) D {
+				if pg.IsMobileView() {
+					return D{}
+				}
+				return layout.Inset{Left: values.MarginPadding2}.Layout(gtx, lbl.Layout)
+			}),
+		)
+	}
+}
+
 func (pg *TransactionsPage) rightDropdown(gtx C) D {
 	if !pg.isFilterOpen {
 		return D{}
@@ -577,6 +609,10 @@ func (pg *TransactionsPage) HandleUserInteractions() {
 		pg.isFilterOpen = !pg.isFilterOpen
 	}
 
+	for pg.exportBtn.Clicked() {
+		// TODO: implement logic when export clicked
+	}
+
 	if pg.orderDropDown.Changed() {
 		pg.scroll.FetchScrollData(false, pg.ParentWindow(), true)
 	}

ui/values/localizable/en.go

@@ -876,4 +876,6 @@ const EN = `
 "DEXInitErrorMsg" = "Something unexpected happened, please restart the Cryptopower Wallet."
 "txRegular" = "Regular Transactions"
 "stakingTx" = "Staking Transactions"
+"filter" = "Filter"
+"export" = "Export"
 `

ui/values/strings.go

@@ -985,4 +985,6 @@ const (
 	StrDEXInitErrorMsg                 = "DEXInitErrorMsg"
 	StrTxRegular                       = "txRegular"
 	StrstakingTx                       = "stakingTx"
+	StrFilter                          = "filter"
+	StrExport                          = "export"
 )

ui/window.go

@@ -65,9 +65,9 @@ type WriteClipboard struct {
 func CreateWindow(mw *libwallet.AssetsManager, version string, buildDate time.Time) (*Window, error) {
 	appTitle := giouiApp.Title(values.String(values.StrAppName))
 	// appSize overwrites gioui's default app size of 'Size(800, 600)'
-	appSize := giouiApp.Size(values.AppWidth, values.AppHeight)
+	appSize := giouiApp.Size(values.MobileAppWidth, values.MobileAppHeight)
 	// appMinSize is the minimum size the app.
-	appMinSize := giouiApp.MinSize(values.AppWidth, values.AppHeight)
+	appMinSize := giouiApp.MinSize(values.MobileAppWidth, values.MobileAppHeight)
 	// Display network on the app title if its not on mainnet.
 	if net := mw.NetType(); net != libutils.Mainnet {
 		appTitle = giouiApp.Title(values.StringF(values.StrAppTitle, net.Display()))