Client App Redesign (#19)

* Fixed colors for light mode
* Fixed splash screen
* Fixed icon
* Removed my guesses
* Fixed datetime after saving place

src/Client/ShareLoc.Client.App/App.xaml.cs

@@ -4,9 +4,11 @@ namespace ShareLoc.Client.App;
 
 public sealed partial class App : Application
 {
-	public App(MainMenuPage mainMenuPage)
+	public App(IServiceProvider serviceProvider)
 	{
 		InitializeComponent();
+
+		var mainMenuPage = serviceProvider.GetRequiredService<MainMenuPage>();
 		MainPage = new NavigationPage(mainMenuPage);
 	}
 }

src/Client/ShareLoc.Client.App/Models/PlaceModel.cs

@@ -6,7 +6,17 @@ public sealed partial class PlaceModel : ObservableObject
 {
 	public Guid LocalId { get; set; }
 
-	public Guid ServerId { get; set; }
+	private Guid _serverId;
+	public Guid ServerId
+	{
+		get => _serverId;
+		set
+		{
+			_serverId = value;
+			OnPropertyChanged(nameof(IsShared));
+		}
+	}
+
 	public double Latitude { get; set; }
 	public double Longitude { get; set; }
 	public byte[] Image { get; set; } = [];

src/Client/ShareLoc.Client.App/Platforms/Android/Resources/values/colors.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="colorPrimary">#ff0051</color>
-    <color name="colorPrimaryDark">#ff0051</color>
+    <color name="colorPrimary">#1d3746</color>
+    <color name="colorPrimaryDark">#1d3746</color>
     <color name="colorAccent">#1d3746</color>
 </resources>

src/Client/ShareLoc.Client.App/Resources/Styles/Colors.xaml

@@ -4,10 +4,11 @@
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
 
-    <Color x:Key="Primary">#ff0051</Color>
-    <Color x:Key="Secondary">#1d3746</Color>
+    <Color x:Key="Highlight">#FF0051</Color>
+    <Color x:Key="Primary">#1D3746</Color>
+    <Color x:Key="Secondary">#476272</Color>
     <Color x:Key="Tertiary">#2B0B98</Color>
-    <Color x:Key="White">White</Color>
+    <Color x:Key="White">#EBEBEB</Color>
     <Color x:Key="Black">Black</Color>
     <Color x:Key="Gray100">#E1E1E1</Color>
     <Color x:Key="Gray200">#C8C8C8</Color>

src/Client/ShareLoc.Client.App/Resources/Styles/Styles.xaml

@@ -32,6 +32,7 @@
         <Setter Property="Padding" Value="14,10"/>
         <Setter Property="MinimumHeightRequest" Value="44"/>
         <Setter Property="MinimumWidthRequest" Value="44"/>
+        <Setter Property="Opacity" Value="1"/>
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">
@@ -40,6 +41,7 @@
                         <VisualState.Setters>
                             <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
                             <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" />
+                            <Setter Property="Opacity" Value="0.7"/>
                         </VisualState.Setters>
                     </VisualState>
                 </VisualStateGroup>
@@ -390,7 +392,7 @@
     </Style>
 
     <Style TargetType="NavigationPage">
-        <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Gray950}}" />
+        <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Secondary}}" />
         <Setter Property="BarTextColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource White}}" />
         <Setter Property="IconColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource White}}" />
     </Style>

src/Client/ShareLoc.Client.App/ShareLoc.Client.App.csproj

@@ -20,7 +20,7 @@
     <ApplicationIdGuid>00246f37-b4aa-4d37-89b0-121c20882356</ApplicationIdGuid>
 
     <!-- Versions -->
-    <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
+    <ApplicationDisplayVersion>1.0.1</ApplicationDisplayVersion>
     <ApplicationVersion>1</ApplicationVersion>
 
     <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">11.0</SupportedOSPlatformVersion>
@@ -32,10 +32,10 @@
 
   <ItemGroup>
     <!-- App Icon -->
-    <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#1d3746" />
+    <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\Images\logo.svg" ForegroundScale="0.5" Color="#1d3746" />
 
     <!-- Splash Screen -->
-    <MauiSplashScreen Include="Resources\Images\logo.svg" Color="#1d3746" BaseSize="128,128" />
+    <MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#1d3746" BaseSize="128,128" />
 
     <!-- Images -->
     <MauiImage Include="Resources\Images\*" />

src/Client/ShareLoc.Client.App/ViewModels/CreatePlaceViewModel.cs

@@ -22,6 +22,9 @@ public sealed partial class CreatePlaceViewModel : BaseViewModel
 	[ObservableProperty]
 	private PlaceDetailViewModel _placeDetailViewModel;
 
+	[ObservableProperty]
+	private bool _isSharing = false;
+
 	public CreatePlaceViewModel(ApiClient apiClient, INavigationService navigationService, LocalDbService localDbService, IAlertService alertService, PlaceDetailViewModel placeDetailViewModel, ModelMapper modelMapper, IMediator mediator, ImageDownScaler imgDownScaler, PlaceSharingService sharePlaceService)
 	{
 		_apiClient = apiClient;
@@ -56,7 +59,8 @@ protected override async Task LoadAsync(CancellationToken ct)
 		{
 			Image = imageBuffer,
 			Latitude = location.Latitude,
-			Longitude = location.Longitude
+			Longitude = location.Longitude,
+			CreatedUTC = DateTime.UtcNow
 		};
 	}
 
@@ -130,6 +134,8 @@ private async Task ShareUrl(CancellationToken ct)
 		if (PlaceDetailViewModel.Model is null)
 			return;
 
+		IsSharing = true;
+
 		var entityResult = await _localDbService.SavePlaceAsync(_modelMapper.Map(PlaceDetailViewModel.Model), ct);
 
 		entityResult.Switch(
@@ -153,5 +159,7 @@ private async Task ShareUrl(CancellationToken ct)
 			async validationErrors => await _alertService.ShowAlertAsync("Error", $"Invalid values given: {validationErrors}", "OK"),
 			async error => await _alertService.ShowAlertAsync("Error", $"Error while creating place: {error}", "OK")
 		);
+
+		IsSharing = false;
 	}
 }

src/Client/ShareLoc.Client.App/ViewModels/PlaceDetailPageViewModel.cs

@@ -35,6 +35,9 @@ public sealed partial class PlaceDetailPageViewModel : BaseViewModel
 		}
 	}
 
+	[ObservableProperty]
+	private bool _isSharing = false;
+
 	public PlaceDetailPageViewModel(PlaceDetailViewModel placeDetailViewModel, ModelMapper modelMapper, IAlertService alertService, ApiClient apiClient, LocalDbService localDbService, INavigationService navigationService, IMediator mediator, PlaceSharingService sharePlaceService)
 	{
 		PlaceDetailViewModel = placeDetailViewModel;
@@ -138,10 +141,13 @@ private async Task ShareUrl(CancellationToken ct)
 		if (PlaceModel is null)
 			return;
 
+		IsSharing = true;
+
 		if (PlaceModel.IsShared)
 		{
 			//place is stored on the server, just share url
 			await _sharePlaceService.SharePlaceUrlAsync(PlaceModel);
+			IsSharing = false;
 			return;
 		}
 
@@ -157,5 +163,7 @@ private async Task ShareUrl(CancellationToken ct)
 			async validationErrors => await _alertService.ShowAlertAsync("Error", $"Invalid values given: {validationErrors}", "OK"),
 			async error => await _alertService.ShowAlertAsync("Error", $"Error while creating place: {error}", "OK")
 		);
+
+		IsSharing = false;
 	}
 }

src/Client/ShareLoc.Client.App/Views/Pages/CreatePlacePage.xaml

@@ -16,22 +16,14 @@
 
         <views:PlaceDetailView Grid.Row="0" BindingContext="{Binding PlaceDetailViewModel}" />
 
-        <Grid Grid.Row="1" HorizontalOptions="Fill">
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition />
-                <ColumnDefinition />
-                <ColumnDefinition />
-            </Grid.ColumnDefinitions>
-
-            <Button Grid.Column="0" Margin="2" Text="Share"
-                    IsEnabled="{Binding PlaceDetailViewModel.Model, Converter={toolkit:IsNotNullConverter}}"
-                    Command="{Binding ShareUrlCommand}"/>
-
-            <Button Grid.Column="1" Margin="2" Text="Save"
+        <FlexLayout Grid.Row="1" HorizontalOptions="Fill" AlignContent="Stretch">
+            <Button FlexLayout.Grow="1" Text="Save" Margin="1,2"
                     IsEnabled="{Binding PlaceDetailViewModel.Model, Converter={toolkit:IsNotNullConverter}}"
                     Command="{Binding SaveCommand}"/>
-
-            <Button Grid.Column="2" Margin="2" Text="Cancel" Command="{Binding CancelCommand}"/>
-        </Grid>
+            <Button FlexLayout.Grow="1" Text="Share" Margin="1,2"
+                    IsEnabled="{Binding PlaceDetailViewModel.Model, Converter={toolkit:IsNotNullConverter}}"
+                    Command="{Binding ShareUrlCommand}"/>
+            <Button FlexLayout.Grow="1" Text="Cancel" Margin="1,2" Command="{Binding CancelCommand}"/>
+        </FlexLayout>
     </Grid>
 </ContentPage>

src/Client/ShareLoc.Client.App/Views/Pages/MainMenuPage.xaml

@@ -10,13 +10,13 @@
     <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
         <Image Source="logo.svg" HeightRequest="200" HorizontalOptions="Center">
             <Image.Behaviors>
-                <toolkit:IconTintColorBehavior TintColor="White" />
+                <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Primary},Dark={StaticResource White}}" />
             </Image.Behaviors>
         </Image>
         <VerticalStackLayout WidthRequest="200">
             <Button Margin="1" Text="Create Place" Command="{Binding GoToCreatePlacePageCommand}"/>
             <Button Margin="1" Text="My Places" Command="{Binding GoToMyPlacesPageCommand}"/>
-            <Button Margin="1" Text="My Guesses" Command="{Binding GoToMyGuessesPageCommand}"/>
+            <Button Margin="1" Text="My Guesses" IsVisible="False" Command="{Binding GoToMyGuessesPageCommand}"/>
             <Label Margin="5,2">
                 <Label.FormattedText>
                     <FormattedString>

src/Client/ShareLoc.Client.App/Views/Pages/MyPlacesPage.xaml

@@ -19,7 +19,7 @@
                 <BindableLayout.ItemTemplate>
                     <DataTemplate x:DataType="models:PlaceModel">
                         <Grid HeightRequest="{Binding Source={RelativeSource Self}, Path=Width}"
-                              BackgroundColor="{StaticResource Secondary}"
+                              BackgroundColor="{StaticResource Primary}"
                               FlexLayout.Grow="1"
                               FlexLayout.Shrink="1"
                               FlexLayout.Basis="50%"
@@ -34,7 +34,8 @@
                             <Label Text="{Binding CreatedUTC}"
                                    VerticalOptions="End"
                                    HorizontalOptions="End"
-                                   Padding="4,1">
+                                   Padding="4,1"
+                                   TextColor="{StaticResource White}">
                                 <Label.Shadow>
                                     <Shadow Brush="Black" Offset="0,0" Radius="10" Opacity="1"/>
                                 </Label.Shadow>
@@ -44,9 +45,10 @@
                                    WidthRequest="30"
                                    HeightRequest="30"
                                    VerticalOptions="Start"
-                                   HorizontalOptions="End">
+                                   HorizontalOptions="End"
+                                   Margin="2">
                                 <Image.Behaviors>
-                                    <toolkit:IconTintColorBehavior TintColor="{StaticResource Primary}" />
+                                    <toolkit:IconTintColorBehavior TintColor="{StaticResource Highlight}" />
                                 </Image.Behaviors>
                             </Image>
                         </Grid>

src/Client/ShareLoc.Client.App/Views/Pages/PlaceDetailPage.xaml

@@ -33,7 +33,7 @@
                         <views:PlaceDetailView BindingContext="{Binding PlaceDetailViewModel}" />
                     </Grid>
                     <VerticalStackLayout IsVisible="{Binding PlaceModel.IsShared}">
-                        <Grid Grid.Row="0" Padding="8,4,8,4" HorizontalOptions="FillAndExpand">
+                        <Grid Padding="8,4,8,4" HorizontalOptions="FillAndExpand">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="2*" />
                                 <ColumnDefinition />
@@ -44,8 +44,8 @@
                             <Label Grid.Column="1" FontAttributes="Bold" FontSize="Micro" Text="Score" />
                             <Label Grid.Column="2" FontAttributes="Bold" FontSize="Micro" Text="Distance" />
                         </Grid>
-                        <BoxView Grid.Row="1" HeightRequest="1" Color="{StaticResource Secondary}"/>
-                        <VerticalStackLayout Grid.Row="2" BindableLayout.ItemsSource="{Binding Guesses}">
+                        <BoxView HeightRequest="1" Color="{StaticResource Primary}"/>
+                        <VerticalStackLayout BindableLayout.ItemsSource="{Binding Guesses}">
                             <BindableLayout.ItemTemplate>
                                 <DataTemplate x:DataType="models:GuessModel">
                                     <Grid HeightRequest="30" Padding="8,0">
@@ -54,18 +54,29 @@
                                             <ColumnDefinition />
                                             <ColumnDefinition />
                                         </Grid.ColumnDefinitions>
+                                        <Grid.Resources>
+                                            <Style TargetType="Label">
+                                                <Setter Property="VerticalOptions" Value="Center" />
+                                                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
+                                                <Style.Triggers>
+                                                    <DataTrigger TargetType="Label" Binding="{Binding IsSelected}" Value="True">
+                                                        <Setter Property="TextColor" Value="{StaticResource White}" />
+                                                    </DataTrigger>
+                                                </Style.Triggers>
+                                            </Style>
+                                        </Grid.Resources>
                                         <Grid.Triggers>
                                             <DataTrigger TargetType="Grid" Binding="{Binding IsSelected}" Value="True">
-                                                <Setter Property="Background" Value="{StaticResource Secondary}" />
+                                                <Setter Property="Background" Value="{StaticResource Primary}" />
                                             </DataTrigger>
                                         </Grid.Triggers>
                                         <Grid.GestureRecognizers>
                                             <TapGestureRecognizer Command="{Binding ShowGuessCommand, Source={RelativeSource AncestorType={x:Type viewModels:PlaceDetailPageViewModel}}}" CommandParameter="{Binding}"/>
                                         </Grid.GestureRecognizers>
 
-                                        <Label Grid.Column="0" VerticalOptions="Center" Text="{Binding Name}" />
-                                        <Label Grid.Column="1" VerticalOptions="Center" Text="{Binding Score}" />
-                                        <Label Grid.Column="2" VerticalOptions="Center" Text="{Binding Distance, Converter={converters:FormatDistanceConverter}}" />
+                                        <Label Grid.Column="0" Text="{Binding Name}" />
+                                        <Label Grid.Column="1" Text="{Binding Score}" />
+                                        <Label Grid.Column="2" Text="{Binding Distance, Converter={converters:FormatDistanceConverter}}" />
                                     </Grid>
                                 </DataTemplate>
                             </BindableLayout.ItemTemplate>
@@ -77,7 +88,7 @@
 
         <FlexLayout Grid.Row="1" HorizontalOptions="Fill" AlignContent="Stretch">
             <Button FlexLayout.Grow="1" Text="Save" Margin="1,2" Command="{Binding UpdateMessageCommand}" IsEnabled="{Binding PlaceModel.IsModified}" IsVisible="{Binding PlaceModel.IsShared, Converter={toolkit:InvertedBoolConverter}}" />
-            <Button FlexLayout.Grow="1" Text="Share" Margin="1,2" Command="{Binding ShareUrlCommand}" />
+            <Button FlexLayout.Grow="1" Text="Share" Margin="1,2" Command="{Binding ShareUrlCommand}" IsEnabled="{Binding IsSharing, Converter={toolkit:InvertedBoolConverter}}" />
             <Button FlexLayout.Grow="1" Text="Delete" Margin="1,2" Command="{Binding DeleteCommand}" IsEnabled="{Binding PlaceModel.IsShared, Converter={toolkit:InvertedBoolConverter}}" />
         </FlexLayout>
     </Grid>

src/Client/ShareLoc.Client.App/Views/PlaceDetailView.xaml

@@ -23,7 +23,7 @@
             <AbsoluteLayout ZIndex="2"
                             HorizontalOptions="Start"
                             VerticalOptions="Start"
-                            Background="{StaticResource Secondary}">
+                            Background="{StaticResource Primary}">
                 <Image Source="{Binding Model.Image, Converter={toolkit:ByteArrayToImageSourceConverter}}"
                        IsVisible="{Binding IsEnlarged}"
                        AbsoluteLayout.LayoutFlags="All"
@@ -32,7 +32,8 @@
                        Opacity="0.3" />
                 <ActivityIndicator IsRunning="{Binding Model, Converter={toolkit:IsNullConverter}}"
                                    AbsoluteLayout.LayoutBounds="0.5,0.5,0.5,0.5"
-                                   AbsoluteLayout.LayoutFlags="All" />
+                                   AbsoluteLayout.LayoutFlags="All"
+                                   Color="{StaticResource White}" />
                 <ImageButton Source="{Binding Model.Image, Converter={toolkit:ByteArrayToImageSourceConverter}}"
                              Command="{Binding TapImageCommand}">
                     <ImageButton.Triggers>