From e0a061ef9f10ead4547503c5b1c9b5a177f12170 Mon Sep 17 00:00:00 2001
From: "Zach Keeping [SSW]" <11418832+zacharykeeping@users.noreply.github.com>
Date: Thu, 26 Sep 2024 15:19:20 +1000
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Mobile=20|=20Settings=20im?=
 =?UTF-8?q?provements=20on=20tablets=20(#1060)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix popup widths

* Add max height

* Add title

* Add logo to settings on tablets
---
 .../Common/Messages/TopBarTitleMessage.cs     |  5 +++
 .../Features/AboutSSW/AboutSswPage.xaml       |  2 +-
 src/MobileUI/Features/AppShell.xaml.cs        |  1 +
 .../Features/OnBoarding/OnBoardingPage.xaml   |  4 +-
 .../Features/Profile/ProfilePicturePage.xaml  |  5 +--
 .../Features/Redeem/RedeemRewardPage.xaml     |  2 +-
 src/MobileUI/Features/Scanner/ScanPage.xaml   |  3 +-
 .../Features/Settings/SettingsPage.xaml       | 39 ++++++++++++-------
 .../Features/Settings/SettingsPage.xaml.cs    |  5 +++
 .../Features/Settings/SettingsViewModel.cs    |  1 +
 .../Features/TopBar/TopBarViewModel.cs        |  8 ++++
 src/MobileUI/Resources/Styles/Templates.xaml  | 28 +++++++++----
 12 files changed, 74 insertions(+), 29 deletions(-)
 create mode 100644 src/MobileUI/Common/Messages/TopBarTitleMessage.cs

diff --git a/src/MobileUI/Common/Messages/TopBarTitleMessage.cs b/src/MobileUI/Common/Messages/TopBarTitleMessage.cs
new file mode 100644
index 000000000..18f12350f
--- /dev/null
+++ b/src/MobileUI/Common/Messages/TopBarTitleMessage.cs
@@ -0,0 +1,5 @@
+using CommunityToolkit.Mvvm.Messaging.Messages;
+
+namespace SSW.Rewards.Mobile.Messages;
+
+public class TopBarTitleMessage(string value) : ValueChangedMessage<string>(value);
\ No newline at end of file
diff --git a/src/MobileUI/Features/AboutSSW/AboutSswPage.xaml b/src/MobileUI/Features/AboutSSW/AboutSswPage.xaml
index a81c7631d..d63cf7d4e 100644
--- a/src/MobileUI/Features/AboutSSW/AboutSswPage.xaml
+++ b/src/MobileUI/Features/AboutSSW/AboutSswPage.xaml
@@ -20,7 +20,7 @@
             EasingOut="SinIn"
             HasBackgroundAnimation="True" />
     </pages:PopupPage.Animation>
-    <Grid Padding="30,70" VerticalOptions="Center">
+    <Grid Padding="30,70" VerticalOptions="Center" MaximumWidthRequest="500">
         <Border
             Padding="20"
             StrokeThickness="1"
diff --git a/src/MobileUI/Features/AppShell.xaml.cs b/src/MobileUI/Features/AppShell.xaml.cs
index 86ee720fb..66b2d3b03 100644
--- a/src/MobileUI/Features/AppShell.xaml.cs
+++ b/src/MobileUI/Features/AppShell.xaml.cs
@@ -28,5 +28,6 @@ protected override bool OnBackButtonPressed()
     private void OnNavigating(object sender, ShellNavigatingEventArgs e)
     {
         WeakReferenceMessenger.Default.Send(new TopBarAvatarMessage(AvatarOptions.Original));
+        WeakReferenceMessenger.Default.Send(new TopBarTitleMessage(string.Empty));
     }
 }
diff --git a/src/MobileUI/Features/OnBoarding/OnBoardingPage.xaml b/src/MobileUI/Features/OnBoarding/OnBoardingPage.xaml
index 06b0cd456..e2f11e285 100644
--- a/src/MobileUI/Features/OnBoarding/OnBoardingPage.xaml
+++ b/src/MobileUI/Features/OnBoarding/OnBoardingPage.xaml
@@ -23,7 +23,9 @@
             EasingOut="SinIn"
             HasBackgroundAnimation="True" />
     </pages:PopupPage.Animation>
-    <Grid Padding="30,70">
+    <Grid Padding="30,70"
+          MaximumWidthRequest="500"
+          MaximumHeightRequest="800">
         <Border
             StrokeThickness="1"
             StrokeShape="RoundRectangle 10"
diff --git a/src/MobileUI/Features/Profile/ProfilePicturePage.xaml b/src/MobileUI/Features/Profile/ProfilePicturePage.xaml
index 6d842c4d9..c82fe2803 100644
--- a/src/MobileUI/Features/Profile/ProfilePicturePage.xaml
+++ b/src/MobileUI/Features/Profile/ProfilePicturePage.xaml
@@ -23,15 +23,12 @@
             EasingOut="SinIn"
             HasBackgroundAnimation="True" />
     </pages:PopupPage.Animation>
-    <Grid Padding="30,70" VerticalOptions="Center">
+    <Grid Padding="30,70" VerticalOptions="Center" MaximumWidthRequest="500">
         <Border
             StrokeThickness="1"
             StrokeShape="RoundRectangle 10"
             Padding="20,10,20,20"
-            HorizontalOptions="Center"
-            VerticalOptions="Center"
             BackgroundColor="{StaticResource ProfileBackgroundColour}">
-
             <Grid
                 RowDefinitions="1*, 3*, 3*"
                 WidthRequest="300"
diff --git a/src/MobileUI/Features/Redeem/RedeemRewardPage.xaml b/src/MobileUI/Features/Redeem/RedeemRewardPage.xaml
index 27f491497..2beee2529 100644
--- a/src/MobileUI/Features/Redeem/RedeemRewardPage.xaml
+++ b/src/MobileUI/Features/Redeem/RedeemRewardPage.xaml
@@ -48,7 +48,7 @@
             </Setter>
         </Style>
     </pages:PopupPage.Resources>
-    <Grid>
+    <Grid MaximumWidthRequest="500">
         <Grid Padding="30,70" VerticalOptions="Center">
             <Border
                 VerticalOptions="Center"
diff --git a/src/MobileUI/Features/Scanner/ScanPage.xaml b/src/MobileUI/Features/Scanner/ScanPage.xaml
index a3c0acf45..1e5afd5a3 100644
--- a/src/MobileUI/Features/Scanner/ScanPage.xaml
+++ b/src/MobileUI/Features/Scanner/ScanPage.xaml
@@ -86,7 +86,8 @@
                              IsVisible="{Binding IsScanVisible, Converter={toolkit:InvertedBoolConverter}}"
                              VerticalOptions="Center"
                              Margin="30"
-                             Spacing="30">
+                             Spacing="30"
+                             MaximumWidthRequest="500">
             <Grid ColumnDefinitions="40, *"
                   ColumnSpacing="10"
                   HorizontalOptions="Center">
diff --git a/src/MobileUI/Features/Settings/SettingsPage.xaml b/src/MobileUI/Features/Settings/SettingsPage.xaml
index f20976e2d..731b6c9c5 100644
--- a/src/MobileUI/Features/Settings/SettingsPage.xaml
+++ b/src/MobileUI/Features/Settings/SettingsPage.xaml
@@ -7,19 +7,32 @@
     x:DataType="viewModels:SettingsViewModel"
     ControlTemplate="{DynamicResource PageTemplate}"
     BackgroundColor="{StaticResource Background}">
-    <TableView Intent="Menu" BackgroundColor="Transparent">
-        <TableRoot>
-            <TableSection x:Name="SocialMediaSection" Title="Add/Update Social Media Profiles" TextColor="{StaticResource Gray400}" />
+    <Grid ColumnDefinitions="50*, 50*">
+        <TableView Grid.Column="0"
+                   Grid.ColumnSpan="{OnIdiom Phone=2, Tablet=1}"
+                   Intent="Menu"
+                   BackgroundColor="Transparent">
+            <TableRoot>
+                <TableSection x:Name="SocialMediaSection" Title="Add/Update Social Media Profiles" TextColor="{StaticResource Gray400}" />
             
-            <TableSection Title="General" TextColor="{StaticResource Gray400}">
-                <TextCell Text="My Profile" TextColor="White" Command="{Binding ProfileClickedCommand}" />
-                <TextCell Text="Delete Profile" TextColor="{StaticResource SSWRed}" Command="{Binding DeleteClickedCommand}" />
-            </TableSection>
+                <TableSection Title="General" TextColor="{StaticResource Gray400}">
+                    <TextCell Text="My Profile" TextColor="White" Command="{Binding ProfileClickedCommand}" />
+                    <TextCell Text="Delete Profile" TextColor="{StaticResource SSWRed}" Command="{Binding DeleteClickedCommand}" />
+                </TableSection>
 
-            <TableSection Title="Help" TextColor="{StaticResource Gray400}">
-                <TextCell Text="Replay Intro" TextColor="White" Command="{Binding IntroClickedCommand}"/>
-                <TextCell Text="About" TextColor="White" Command="{Binding AboutClickedCommand}" />
-            </TableSection>
-        </TableRoot>
-    </TableView>
+                <TableSection Title="Help" TextColor="{StaticResource Gray400}">
+                    <TextCell Text="Getting Started 🎉" TextColor="White" Command="{Binding IntroClickedCommand}"/>
+                    <TextCell Text="About" TextColor="White" Command="{Binding AboutClickedCommand}" />
+                </TableSection>
+            </TableRoot>
+        </TableView>
+        <Image Grid.Column="1"
+               IsVisible="{OnIdiom Phone=False, Tablet=True}"
+               VerticalOptions="Start"
+               HorizontalOptions="Center"
+               Source="rewardslogo"
+               WidthRequest="200"
+               Margin="0,20,0,0"
+               x:Name="LogoImage"/>
+    </Grid>
 </ContentPage>
diff --git a/src/MobileUI/Features/Settings/SettingsPage.xaml.cs b/src/MobileUI/Features/Settings/SettingsPage.xaml.cs
index 182d83515..40f77be9c 100644
--- a/src/MobileUI/Features/Settings/SettingsPage.xaml.cs
+++ b/src/MobileUI/Features/Settings/SettingsPage.xaml.cs
@@ -18,6 +18,11 @@ protected override void OnAppearing()
     {
         base.OnAppearing();
         _firebaseAnalyticsService.Log("SettingsPage");
+    }
+
+    protected override void OnNavigatedTo(NavigatedToEventArgs args)
+    {
+        base.OnNavigatedTo(args);
         SettingsViewModel.Initialise();
     }
 
diff --git a/src/MobileUI/Features/Settings/SettingsViewModel.cs b/src/MobileUI/Features/Settings/SettingsViewModel.cs
index 4cd50aea8..07408cecd 100644
--- a/src/MobileUI/Features/Settings/SettingsViewModel.cs
+++ b/src/MobileUI/Features/Settings/SettingsViewModel.cs
@@ -33,6 +33,7 @@ public SettingsViewModel(IUserService userService, ISnackbarService snackbarServ
     public static void Initialise()
     {
         WeakReferenceMessenger.Default.Send(new TopBarAvatarMessage(AvatarOptions.Back));
+        WeakReferenceMessenger.Default.Send(new TopBarTitleMessage("SSW Rewards | My Settings"));
     }
 
     [RelayCommand]
diff --git a/src/MobileUI/Features/TopBar/TopBarViewModel.cs b/src/MobileUI/Features/TopBar/TopBarViewModel.cs
index 92a042f8c..1054f98ed 100644
--- a/src/MobileUI/Features/TopBar/TopBarViewModel.cs
+++ b/src/MobileUI/Features/TopBar/TopBarViewModel.cs
@@ -27,6 +27,9 @@ public partial class TopBarViewModel : ObservableObject
 
     [ObservableProperty]
     private bool _showScanner = true;
+    
+    [ObservableProperty]
+    private string _title = string.Empty;
 
     public TopBarViewModel(IPermissionsService permissionsService, IUserService userService, IScannerService scannerService)
     {
@@ -49,6 +52,11 @@ public TopBarViewModel(IPermissionsService permissionsService, IUserService user
                     break;
             }
         });
+        
+        WeakReferenceMessenger.Default.Register<TopBarTitleMessage>(this, (_, m) =>
+        {
+            Title = m.Value;
+        });
 
         userService.MyProfilePicObservable().Subscribe(myProfilePage => ProfilePic = myProfilePage);
     }
diff --git a/src/MobileUI/Resources/Styles/Templates.xaml b/src/MobileUI/Resources/Styles/Templates.xaml
index bb6cd751e..11914213c 100644
--- a/src/MobileUI/Resources/Styles/Templates.xaml
+++ b/src/MobileUI/Resources/Styles/Templates.xaml
@@ -12,14 +12,15 @@
             <Grid.BindingContext>
                 <resolver:ResolveViewModel x:TypeArguments="vm:TopBarViewModel" />
             </Grid.BindingContext>
-            <FlexLayout JustifyContent="SpaceBetween"
-                        Margin="0"
-                        BackgroundColor="{StaticResource Background}"
-                        x:DataType="vm:TopBarViewModel">
+            <Grid ColumnDefinitions="60,*,60"
+                  Margin="0"
+                  BackgroundColor="{StaticResource Background}"
+                  x:DataType="vm:TopBarViewModel">
                 <!-- Wrapping AvatarView in a Grid where IsVisible can be toggled to work around 
                      an odd animation that happens on iOS
                      See bug: https://github.com/SSWConsulting/SSW.Rewards.Mobile/issues/918 -->
-                <Grid IsVisible="{Binding ShowAvatar}"
+                <Grid Grid.Column="0"
+                      IsVisible="{Binding ShowAvatar}"
                       Margin="10,7,10,5"
                       HeightRequest="40"
                       WidthRequest="40">
@@ -37,6 +38,7 @@
 
 
                 <Button
+                    Grid.Column="0"
                     HeightRequest="40"
                     WidthRequest="40"
                     CornerRadius="20"
@@ -56,7 +58,8 @@
                     </Button.ImageSource>
                 </Button>
 
-                <Button HeightRequest="40"
+                <Button Grid.Column="0"
+                        HeightRequest="40"
                         CornerRadius="5"
                         BorderColor="White"
                         BackgroundColor="{StaticResource SSWRed}"
@@ -65,8 +68,17 @@
                         IsVisible="{Binding ShowDone}"
                         Text="Done"
                         Command="{Binding GoBackCommand}" />
+                
+                <Label Grid.Column="1"
+                       Text="{Binding Title}"
+                       Style="{StaticResource LabelBold}"
+                       FontSize="18"
+                       VerticalOptions="Center"
+                       VerticalTextAlignment="Center"
+                       HorizontalOptions="Center" />
 
-                <ImageButton Command="{Binding OpenScannerCommand}"
+                <ImageButton Grid.Column="2"
+                             Command="{Binding OpenScannerCommand}"
                              Margin="10,5"
                              IsVisible="{Binding ShowScanner}">
                     <ImageButton.Source>
@@ -74,7 +86,7 @@
                                          Glyph="&#xf636;"/>
                     </ImageButton.Source>
                 </ImageButton>
-            </FlexLayout>
+            </Grid>
             <ContentPresenter Grid.Row="1" />
         </Grid>
     </ControlTemplate>