Skip to content

My Account screens revamp: modern tile-based layout #476

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
StuartFerguson merged 2 commits into from
Mar 6, 2026
Merged

My Account screens revamp: modern tile-based layout #476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d027aa7
Initial plan
Copilot Mar 6, 2026
44d66a9
Revamp My Account screens with modern tile-based layout
Copilot Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
166 changes: 130 additions & 36 deletions TransactionProcessor.Mobile/Pages/MyAccount/MyAccountAddressesPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,138 @@
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TransactionProcessor.Mobile.Pages.MyAccount.MyAccountAddressesPage"
xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
Shell.NavBarIsVisible="False">
Shell.NavBarIsVisible="False"
Padding="0">
<ScrollView>
<VerticalStackLayout Style="{DynamicResource Layout}">
<controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>

<Frame Style="{DynamicResource MainFrame}">
<VerticalStackLayout x:Name="SubLayout">
<Label Text="Primary Address" HorizontalTextAlignment="Center"
HorizontalOptions="Fill" FontAttributes="Bold" FontSize="20"
Margin="10,0,0,10" AutomationId="PrimaryAddressLabel"/>

<Label Text="{Binding Address.AddressLine1}"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill" AutomationId="AddressLine1Label"/>
<Label Text="{Binding Address.AddressLine2}" x:Name="AddressLine2"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill" AutomationId="AddressLine2Label"/>
<Label Text="{Binding Address.AddressLine3}" x:Name="AddressLine3"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill" AutomationId="AddressLine3Label"/>
<Label Text="{Binding Address.AddressLine4}" x:Name="AddressLine4"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill" AutomationId="AddressLine4Label"/>
<Label Text="{Binding Address.PostalCode}"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill" AutomationId="AddressPostCodeLabel"/>
<Label Text="{Binding Address.Region}"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill" AutomationId="AddressRegionLabel"/>
<Label Text="{Binding Address.Town}"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill" AutomationId="AddressTownLabel"/>
<VerticalStackLayout Spacing="0">

<!-- Header with gradient background -->
<Grid HeightRequest="130">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource profile}" Offset="0.0"/>
<GradientStop Color="#2aab83" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
<Label Text="{Binding Title}"
AutomationId="{Binding Title}"
FontSize="20"
FontAttributes="Bold"
TextColor="White"
HorizontalOptions="Center"/>
<Label Text="Primary address details"
FontSize="13"
TextColor="White"
Opacity="0.85"
HorizontalOptions="Center"/>
</VerticalStackLayout>
</Frame>
<Button Text="Edit Address" Style="{StaticResource MyAccountButtonStyle}"
Margin="10,0,10,0" AutomationId="EditAddressButton"/>
<Button Margin="10,0,10,0" Text="Back" AutomationId="BackButton" Style="{StaticResource MyAccountButtonStyle}" Command="{Binding BackButtonCommand}"/>
</Grid>

<!-- Address details card -->
<VerticalStackLayout Padding="20,20,20,16" Spacing="16">

<Frame Style="{StaticResource HomeCardFrame}">
<VerticalStackLayout Spacing="12">
<Label Text="Primary Address"
FontSize="16"
FontAttributes="Bold"
TextColor="{StaticResource labelTextColor}"
AutomationId="PrimaryAddressLabel"/>

<BoxView HeightRequest="1" Color="{StaticResource Gray100}" Margin="0,0,0,4"/>

<Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto" ColumnSpacing="12" RowSpacing="8">

<Label Grid.Row="0" Grid.Column="0"
Text="Line 1:"
FontAttributes="Bold"
FontSize="13"
TextColor="{StaticResource labelTextColor}"/>
<Label Grid.Row="0" Grid.Column="1"
Text="{Binding Address.AddressLine1}"
FontSize="13"
TextColor="{StaticResource labelTextColor}"
AutomationId="AddressLine1Label"/>

<Label Grid.Row="1" Grid.Column="0"
Text="Line 2:"
FontAttributes="Bold"
FontSize="13"
TextColor="{StaticResource labelTextColor}"/>
<Label Grid.Row="1" Grid.Column="1"
Text="{Binding Address.AddressLine2}"
FontSize="13"
TextColor="{StaticResource labelTextColor}"
AutomationId="AddressLine2Label"/>

<Label Grid.Row="2" Grid.Column="0"
Text="Line 3:"
FontAttributes="Bold"
FontSize="13"
TextColor="{StaticResource labelTextColor}"/>
<Label Grid.Row="2" Grid.Column="1"
Text="{Binding Address.AddressLine3}"
FontSize="13"
TextColor="{StaticResource labelTextColor}"
AutomationId="AddressLine3Label"/>

<Label Grid.Row="3" Grid.Column="0"
Text="Line 4:"
FontAttributes="Bold"
FontSize="13"
TextColor="{StaticResource labelTextColor}"/>
<Label Grid.Row="3" Grid.Column="1"
Text="{Binding Address.AddressLine4}"
FontSize="13"
TextColor="{StaticResource labelTextColor}"
AutomationId="AddressLine4Label"/>

<Label Grid.Row="4" Grid.Column="0"
Text="Post Code:"
FontAttributes="Bold"
FontSize="13"
TextColor="{StaticResource labelTextColor}"/>
<Label Grid.Row="4" Grid.Column="1"
Text="{Binding Address.PostalCode}"
FontSize="13"
TextColor="{StaticResource labelTextColor}"
AutomationId="AddressPostCodeLabel"/>

<Label Grid.Row="5" Grid.Column="0"
Text="Region:"
FontAttributes="Bold"
FontSize="13"
TextColor="{StaticResource labelTextColor}"/>
<Label Grid.Row="5" Grid.Column="1"
Text="{Binding Address.Region}"
FontSize="13"
TextColor="{StaticResource labelTextColor}"
AutomationId="AddressRegionLabel"/>

<Label Grid.Row="6" Grid.Column="0"
Text="Town:"
FontAttributes="Bold"
FontSize="13"
TextColor="{StaticResource labelTextColor}"/>
<Label Grid.Row="6" Grid.Column="1"
Text="{Binding Address.Town}"
FontSize="13"
TextColor="{StaticResource labelTextColor}"
AutomationId="AddressTownLabel"/>
</Grid>
</VerticalStackLayout>
</Frame>

<Button Text="Edit Address"
Style="{StaticResource StandardButton}"
AutomationId="EditAddressButton"/>
<Button Text="Back"
AutomationId="BackButton"
Style="{StaticResource StandardButton}"
Command="{Binding BackButtonCommand}"/>
</VerticalStackLayout>

</VerticalStackLayout>
</ScrollView>
</ContentPage>
124 changes: 86 additions & 38 deletions TransactionProcessor.Mobile/Pages/MyAccount/MyAccountContactPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,94 @@
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TransactionProcessor.Mobile.Pages.MyAccount.MyAccountContactPage"
xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
Shell.NavBarIsVisible="False">
Shell.NavBarIsVisible="False"
Padding="0">
<ScrollView>
<VerticalStackLayout Style="{DynamicResource Layout}">
<controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>

<Frame Style="{DynamicResource MainFrame}">
<VerticalStackLayout x:Name="SubLayout">
<Label Text="Primary Contact" HorizontalTextAlignment="Center"
HorizontalOptions="Fill" FontAttributes="Bold" FontSize="20"
Margin="10,0,0,10" AutomationId="PrimaryContactLabel"/>

<Label Text="Name:" FontAttributes="Bold"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill"/>
<Label Text="{Binding Contact.Name}"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill" Margin="0,0,0,10"
AutomationId="ContactNameLabel"/>

<Label Text="Email Address:" FontAttributes="Bold"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill"/>
<Label Text="{Binding Contact.EmailAddress}"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill" Margin="0,0,0,10"
AutomationId="ContactEmailAddressLabel"/>

<Label Text="Mobile Number:" FontAttributes="Bold"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill"/>
<Label Text="{Binding Contact.MobileNumber}"
HorizontalTextAlignment="Start"
HorizontalOptions="Fill" Margin="0,0,0,10"
AutomationId="ContactMobileNumberLabel"/>
<VerticalStackLayout Spacing="0">

<!-- Header with gradient background -->
<Grid HeightRequest="130">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource profile}" Offset="0.0"/>
<GradientStop Color="#2aab83" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
<Label Text="{Binding Title}"
AutomationId="{Binding Title}"
FontSize="20"
FontAttributes="Bold"
TextColor="White"
HorizontalOptions="Center"/>
<Label Text="Primary contact details"
FontSize="13"
TextColor="White"
Opacity="0.85"
HorizontalOptions="Center"/>
</VerticalStackLayout>
</Frame>
<Button Text="Edit Contact" Style="{StaticResource MyAccountButtonStyle}"
Margin="10,0,0,10" AutomationId="EditContactButton"/>
<Button Margin="10,0,0,10" Text="Back" AutomationId="BackButton" Style="{StaticResource MyAccountButtonStyle}" Command="{Binding BackButtonCommand}"/>
</Grid>

<!-- Contact details card -->
<VerticalStackLayout Padding="20,20,20,16" Spacing="16">

<Frame Style="{StaticResource HomeCardFrame}">
<VerticalStackLayout Spacing="12">
<Label Text="Primary Contact"
FontSize="16"
FontAttributes="Bold"
TextColor="{StaticResource labelTextColor}"
AutomationId="PrimaryContactLabel"/>

<BoxView HeightRequest="1" Color="{StaticResource Gray100}" Margin="0,0,0,4"/>

<Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto" ColumnSpacing="12" RowSpacing="12">

<Label Grid.Row="0" Grid.Column="0"
Text="Name:"
FontAttributes="Bold"
FontSize="13"
TextColor="{StaticResource labelTextColor}"/>
<Label Grid.Row="0" Grid.Column="1"
Text="{Binding Contact.Name}"
FontSize="13"
TextColor="{StaticResource labelTextColor}"
AutomationId="ContactNameLabel"/>

<Label Grid.Row="1" Grid.Column="0"
Text="Email:"
FontAttributes="Bold"
FontSize="13"
TextColor="{StaticResource labelTextColor}"/>
<Label Grid.Row="1" Grid.Column="1"
Text="{Binding Contact.EmailAddress}"
FontSize="13"
TextColor="{StaticResource labelTextColor}"
AutomationId="ContactEmailAddressLabel"/>

<Label Grid.Row="2" Grid.Column="0"
Text="Mobile:"
FontAttributes="Bold"
FontSize="13"
TextColor="{StaticResource labelTextColor}"/>
<Label Grid.Row="2" Grid.Column="1"
Text="{Binding Contact.MobileNumber}"
FontSize="13"
TextColor="{StaticResource labelTextColor}"
AutomationId="ContactMobileNumberLabel"/>
</Grid>
</VerticalStackLayout>
</Frame>

<Button Text="Edit Contact"
Style="{StaticResource StandardButton}"
AutomationId="EditContactButton"/>
<Button Text="Back"
AutomationId="BackButton"
Style="{StaticResource StandardButton}"
Command="{Binding BackButtonCommand}"/>
</VerticalStackLayout>

</VerticalStackLayout>
</ScrollView>
</ContentPage>
Loading
Loading