Updated UI and color scheme (#391)

Significant changes include: - Added new namespace for toolkit in AppShell.xaml - Changed Shell.BackgroundColor to white - Introduced StatusBarBehavior with StatusBarColor set to white and StatusBarStyle set to DarkContent - Updated the title of a ShellContent from "PROFILE" to "ORDERS" - Removed DarkGreenColor from Colors.xaml and added HighlightColor and ImportantColor - Adjusted BasketIconImageSource size and color in Styles.xaml - Altered text alignment in BasketView.xaml's empty shopping cart label - Modified CatalogView.xaml's Shell properties, grid layout, image settings, button triggers, etc. - Changed ActivityIndicator color in CheckoutView.xaml from LightGreenColor to HighlightColor - Updated BarBackgroundColor in CustomNavigationView.xaml from GreenColor to ImportantColor - Made several adjustments in LoginView.xaml including column spacing, margin for banner image, gradient colors etc. - In OrderDetailView.xaml changed CancelOrderButtonStyle background color & other labels' TextColors from Green/LightGreen Color to Highlight/Important Color respectively. - Renamed Title of ProfileView.xaml from "MY PROFILE" to "Orders" & removed header label "MY ORDERS" - Changed TextColor of a style in SettingsView.xaml from GreenColor to Important Color In Templates - updated TextColors of styles named OrderTotalStyle.
dotnet · May 20, 2024 · 535bf41 · 535bf41
1 parent e7f26fd
commit 535bf41
Show file tree

Hide file tree

Showing 13 changed files with 50 additions and 40 deletions.
diff --git a/src/ClientApp/AppShell.xaml b/src/ClientApp/AppShell.xaml
@@ -4,12 +4,13 @@
     x:Class="eShop.ClientApp.AppShell"
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
     xmlns:views="clr-namespace:eShop.ClientApp.Views">
 
     <Shell.Resources>
         <ResourceDictionary>
             <Style x:Key="BaseStyle" TargetType="Element">
-                <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Dark={StaticResource DarkBackgroundColor}, Light={StaticResource LightBackgroundColor}}" />
+                <Setter Property="Shell.BackgroundColor" Value="White" />
                 <Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Dark={StaticResource DarkForegroundColor}, Light={StaticResource LightForegroundColor}}" />
                 <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Dark={StaticResource DarkForegroundColor}, Light={StaticResource LightForegroundColor}}" />
                 <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
@@ -27,6 +28,10 @@
         <BackButtonBehavior TextOverride="" />
     </Shell.BackButtonBehavior>
 
+    <Shell.Behaviors>
+        <toolkit:StatusBarBehavior StatusBarColor="White" StatusBarStyle="DarkContent" />
+    </Shell.Behaviors>
+
     <FlyoutItem>
         <ShellContent ContentTemplate="{DataTemplate views:LoginView}" Route="Login" />
     </FlyoutItem>
@@ -47,9 +52,9 @@
                                    Default=False}"
             Route="Map" />
         <ShellContent
-            Title="PROFILE"
+            Title="ORDERS"
             ContentTemplate="{DataTemplate views:ProfileView}"
-            Icon="{StaticResource ProfileIconImageSource}"
+            Icon="{StaticResource BasketIconImageSource}"
             Route="Profile" />
     </TabBar>
 </Shell>
diff --git a/src/ClientApp/Resources/Styles/Colors.xaml b/src/ClientApp/Resources/Styles/Colors.xaml
@@ -10,7 +10,6 @@
     <Color x:Key="AccentColor">#00857D</Color>
     <Color x:Key="LightGreenColor">#83D01B</Color>
     <Color x:Key="GreenColor">#00A69C</Color>
-    <Color x:Key="DarkGreenColor">#00857D</Color>
     <Color x:Key="GrayColor">#e2e2e2</Color>
     <Color x:Key="DisabledColor">Gray</Color>
     <Color x:Key="ErrorColor">#ff5252</Color>
@@ -28,6 +27,8 @@
     <Color x:Key="ListViewBackgroundColor">Transparent</Color>
     <Color x:Key="ThemeListViewBackgroundColor">Transparent</Color>
     <Color x:Key="ActivityIndicatorColor">#00857D</Color>
+    <Color x:Key="HighlightColor">#ed361a</Color>
+    <Color x:Key="ImportantColor">#2556cb</Color>
 
     <!--  Theme Colors  -->
     <Color x:Key="LightBackgroundColor">#FFFFFF</Color>

diff --git a/src/ClientApp/Resources/Styles/Styles.xaml b/src/ClientApp/Resources/Styles/Styles.xaml
@@ -67,7 +67,10 @@
     <FontImageSource
         x:Key="BasketIconImageSource"
         FontFamily="FontAwesome-Solid"
-        Glyph="{StaticResource BasketIcon}" />
+        Glyph="{StaticResource BasketIcon}"
+        Size="22"
+        Color="{AppThemeBinding Dark={StaticResource DarkFontColor},
+                                Light={StaticResource LightFontColor}}" />
 
     <FontImageSource
         x:Key="BasketIconForTitleImageSource"
@@ -315,10 +318,10 @@
     </Style>
 
     <Style ApplyToDerivedTypes="True" TargetType="TabBar">
-        <Setter Property="Shell.TabBarTitleColor" Value="{StaticResource LightGreenColor}" />
+        <Setter Property="Shell.TabBarTitleColor" Value="{StaticResource HighlightColor}" />
         <Setter Property="Shell.TabBarForegroundColor">
             <OnPlatform x:TypeArguments="Color">
-                <On Platform="WinUI" Value="{StaticResource LightGreenColor}" />
+                <On Platform="WinUI" Value="{StaticResource HighlightColor}" />
             </OnPlatform>
         </Setter>
         <Setter Property="Shell.TabBarUnselectedColor">

diff --git a/src/ClientApp/Views/BasketView.xaml b/src/ClientApp/Views/BasketView.xaml
@@ -27,9 +27,9 @@
             <CollectionView.EmptyView>
                 <!--  EMPTY SHOPPING CART  -->
                 <Label
-                    HorizontalOptions="Center"
+                    HorizontalTextAlignment="Center"
                     Text="EMPTY SHOPPING CART"
-                    VerticalOptions="Center" />
+                    VerticalTextAlignment="Center" />
             </CollectionView.EmptyView>
         </CollectionView>
         <!--  CHECKOUT  -->

diff --git a/src/ClientApp/Views/CatalogView.xaml b/src/ClientApp/Views/CatalogView.xaml
@@ -10,17 +10,20 @@
     xmlns:triggers="clr-namespace:eShop.ClientApp.Triggers"
     xmlns:viewmodels="clr-namespace:eShop.ClientApp.ViewModels"
     xmlns:views="clr-namespace:eShop.ClientApp.Views"
-    x:DataType="viewmodels:CatalogViewModel">
+    x:DataType="viewmodels:CatalogViewModel"
+    Shell.BackgroundColor="White"
+    Shell.NavBarHasShadow="False">
     <Shell.TitleView>
-        <Grid Padding="2" ColumnDefinitions="40,*,40">
-            <Grid.Background>
-                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
-                    <GradientStop Offset="0.0" Color="White" />
-                    <GradientStop Offset="0.75" Color="#8CFFFFFF" />
-                    <GradientStop Offset="1.0" Color="Transparent" />
-                </LinearGradientBrush>
-            </Grid.Background>
-            <Image Grid.Column="1" Source="logo_header.png" />
+        <Grid BackgroundColor="White" ColumnDefinitions="40,*,40">
+            <BoxView
+                Grid.Column="0"
+                Grid.ColumnSpan="3"
+                Background="White" />
+            <Image
+                Grid.Column="0"
+                Grid.ColumnSpan="3"
+                Margin="4"
+                Source="logo_header.png" />
             <ImageButton
                 Grid.Column="2"
                 Aspect="AspectFit"
@@ -167,7 +170,7 @@
                                                     Binding="{Binding Selected}"
                                                     TargetType="Button"
                                                     Value="True">
-                                                    <Setter Property="TextColor" Value="{StaticResource AccentColor}" />
+                                                    <Setter Property="TextColor" Value="{StaticResource HighlightColor}" />
                                                 </DataTrigger>
                                             </Button.Triggers>
                                         </Button>
@@ -197,7 +200,7 @@
                                                     Binding="{Binding Selected}"
                                                     TargetType="Button"
                                                     Value="True">
-                                                    <Setter Property="TextColor" Value="{StaticResource AccentColor}" />
+                                                    <Setter Property="TextColor" Value="{StaticResource HighlightColor}" />
                                                 </DataTrigger>
                                             </Button.Triggers>
                                         </Button>

diff --git a/src/ClientApp/Views/CheckoutView.xaml b/src/ClientApp/Views/CheckoutView.xaml
@@ -158,7 +158,7 @@
             IsRunning="{Binding IsBusy}"
             IsVisible="{Binding IsBusy}"
             VerticalOptions="Center"
-            Color="{StaticResource LightGreenColor}">
+            Color="{StaticResource HighlightColor}">
             <ActivityIndicator.WidthRequest>
                 <OnPlatform x:TypeArguments="x:Double">
                     <On Platform="iOS, Android" Value="100" />

diff --git a/src/ClientApp/Views/CustomNavigationView.xaml b/src/ClientApp/Views/CustomNavigationView.xaml
@@ -5,5 +5,5 @@
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     BackgroundColor="Transparent"
-    BarBackgroundColor="{StaticResource GreenColor}"
+    BarBackgroundColor="{StaticResource ImportantColor}"
     BarTextColor="{StaticResource WhiteColor}" />
diff --git a/src/ClientApp/Views/LoginView.xaml b/src/ClientApp/Views/LoginView.xaml
@@ -37,7 +37,8 @@
     <!--  AUTH  -->
     <Grid
         x:Name="LoginPanel"
-        ColumnSpacing="8"
+        ColumnSpacing="0"
+        IgnoreSafeArea="True"
         IsVisible="{Binding IsMock, Converter={StaticResource InverseBoolConverter}}"
         RowDefinitions="*,Auto,Auto,120"
         RowSpacing="0">
@@ -54,20 +55,20 @@
             VerticalScrollBarVisibility="Never">
             <Image
                 x:Name="Banner"
+                Margin="-40"
                 Aspect="AspectFill"
                 Source="header.png" />
         </ScrollView>
         <ContentView
             Grid.Row="0"
-            Grid.RowSpan="4"
             Grid.Column="0"
-            Grid.ColumnSpan="0">
+            Height="40"
+            VerticalOptions="Start">
             <ContentView.Background>
                 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
-                    <GradientStop Offset="0.0" Color="{StaticResource LightGrayColor}" />
-                    <GradientStop Offset="0.1" Color="Transparent" />
-                    <GradientStop Offset="0.66" Color="Transparent" />
-                    <GradientStop Offset="1.0" Color="{StaticResource LightGrayColor}" />
+                    <GradientStop Offset="0.0" Color="White" />
+                    <GradientStop Offset="0.75" Color="#8CFFFFFF" />
+                    <GradientStop Offset="1.0" Color="Transparent" />
                 </LinearGradientBrush>
             </ContentView.Background>
         </ContentView>

diff --git a/src/ClientApp/Views/OrderDetailView.xaml b/src/ClientApp/Views/OrderDetailView.xaml
@@ -38,7 +38,7 @@
 
             <Style x:Key="CancelOrderButtonStyle" TargetType="{x:Type Button}">
                 <Setter Property="TextColor" Value="{StaticResource WhiteColor}" />
-                <Setter Property="BackgroundColor" Value="{StaticResource LightGreenColor}" />
+                <Setter Property="BackgroundColor" Value="{StaticResource HighlightColor}" />
 
             </Style>
 
@@ -183,7 +183,7 @@
                     <Label
                         Style="{StaticResource OrderTotalStyle}"
                         Text="{Binding Order.Total, StringFormat='${0:N2}'}"
-                        TextColor="{StaticResource GreenColor}" />
+                        TextColor="{StaticResource ImportantColor}" />
                 </VerticalStackLayout>
             </CollectionView.Footer>
         </CollectionView>
@@ -194,7 +194,7 @@
             IsRunning="{Binding IsBusy}"
             IsVisible="{Binding IsBusy}"
             VerticalOptions="Center"
-            Color="{StaticResource LightGreenColor}">
+            Color="{StaticResource HighlightColor}">
             <ActivityIndicator.WidthRequest>
                 <OnPlatform x:TypeArguments="x:Double">
                     <On Platform="iOS, Android" Value="100" />

diff --git a/src/ClientApp/Views/ProfileView.xaml b/src/ClientApp/Views/ProfileView.xaml
@@ -7,7 +7,7 @@
     xmlns:templates="clr-namespace:eShop.ClientApp.Views.Templates"
     xmlns:viewmodels="clr-namespace:eShop.ClientApp.ViewModels"
     xmlns:views="clr-namespace:eShop.ClientApp.Views"
-    Title="MY PROFILE"
+    Title="Orders"
     x:DataType="viewmodels:ProfileViewModel">
     <ContentPage.Resources>
         <ResourceDictionary>
@@ -42,9 +42,6 @@
             SelectionChangedCommand="{Binding OrderDetailCommand}"
             SelectionChangedCommandParameter="{Binding SelectedItem, Source={RelativeSource Self}}"
             SelectionMode="Single">
-            <CollectionView.Header>
-                <Label Style="{StaticResource MyOrdersLabelStyle}" Text="MY ORDERS" />
-            </CollectionView.Header>
             <CollectionView.ItemTemplate>
                 <DataTemplate>
                     <templates:OrderTemplate />

diff --git a/src/ClientApp/Views/SettingsView.xaml b/src/ClientApp/Views/SettingsView.xaml
@@ -28,7 +28,7 @@
                 <Setter Property="HorizontalOptions" Value="Start" />
                 <Setter Property="VerticalOptions" Value="Center" />
                 <Setter Property="Margin" Value="12, 0" />
-                <Setter Property="TextColor" Value="{StaticResource GreenColor}" />
+                <Setter Property="TextColor" Value="{StaticResource ImportantColor}" />
             </Style>
 
             <Style

diff --git a/src/ClientApp/Views/Templates/BasketItemTemplate.xaml b/src/ClientApp/Views/Templates/BasketItemTemplate.xaml
@@ -20,7 +20,7 @@
             <Style x:Key="OrderTotalStyle" TargetType="{x:Type Label}">
                 <Setter Property="FontFamily" Value="Montserrat-Regular" />
                 <Setter Property="FontSize" Value="{StaticResource LargerSize}" />
-                <Setter Property="TextColor" Value="{StaticResource GreenColor}" />
+                <Setter Property="TextColor" Value="{StaticResource ImportantColor}" />
                 <Setter Property="HorizontalOptions" Value="End" />
             </Style>
 

diff --git a/src/ClientApp/Views/Templates/OrderItemTemplate.xaml b/src/ClientApp/Views/Templates/OrderItemTemplate.xaml
@@ -31,7 +31,7 @@
             <Style x:Key="OrderTotalStyle" TargetType="{x:Type Label}">
                 <Setter Property="FontFamily" Value="Montserrat-Regular" />
                 <Setter Property="FontSize" Value="{StaticResource LargerSize}" />
-                <Setter Property="TextColor" Value="{StaticResource GreenColor}" />
+                <Setter Property="TextColor" Value="{StaticResource ImportantColor}" />
                 <Setter Property="HorizontalOptions" Value="End" />
             </Style>