PR for applying custom styling for the application

FuelCostCalculator/FuelCostCalculator.csproj

@@ -53,6 +53,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
+		<PackageReference Include="CommunityToolkit.Maui" Version="8.0.0" />
 		<PackageReference Include="Microsoft.Data.Sqlite.Core" Version="8.0.3" />
 		<PackageReference Include="Microsoft.Maui.Controls" Version="8.0.14" />
 		<PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.14" />

FuelCostCalculator/HistoryPage.xaml

@@ -2,8 +2,12 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="FuelCostCalculator.HistoryPage"
-             Title="History"
              xmlns:local="clr-namespace:FuelCostCalculator">
+    <Shell.TitleView>
+        <Grid>
+            <Label Text="History" Style="{StaticResource SubHeadline}" HorizontalOptions="Start" VerticalOptions="Center" />
+        </Grid>
+    </Shell.TitleView>
     <ContentPage.Content>
         <StackLayout>
             <ListView x:Name="historyListView"

FuelCostCalculator/HistoryPage.xaml.cs

@@ -40,14 +40,14 @@ async void OnItemSelected(object sender, SelectedItemChangedEventArgs args)
             if (!(args.SelectedItem is HistoryItemViewModel selectedItem))
                 return;
 
-            string message = $"Date: {selectedItem.Date}\n" +
-                             $"Distance: {selectedItem.Distance}\n" +
+            string message = $"Date: {selectedItem.Date}\n\n" +
+                             $"Distance (km): {selectedItem.Distance}\n" +
                              $"Average fuel consumption (l/100km): {selectedItem.AvgFuelConsumption}\n" +
-                             $"Price of the gas: {selectedItem.GasPrice}\n" +
+                             $"Price of the gas (€): {selectedItem.GasPrice}\n" +
                              $"Number of people sharing the fuel cost: {selectedItem.NumberOfPeople}\n" +
-                             $"Cost: {Math.Round(selectedItem.Cost, 2)}€";
+                             $"Cost (€): {Math.Round(selectedItem.Cost, 2)}";
 
-            await DisplayAlert("History Item Details", message, "OK");
+            await DisplayAlert("Details", message, "OK");
 
             ((ListView)sender).SelectedItem = null;
         }

FuelCostCalculator/MainPage.xaml

@@ -1,31 +1,36 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:mct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"
              x:Class="FuelCostCalculator.MainPage">
 
+    <Page.Behaviors>
+        <mct:StatusBarBehavior StatusBarColor="Black" />
+    </Page.Behaviors>
+
     <ScrollView>
         <VerticalStackLayout
             Padding="30,0"
             Spacing="25">
 
-            <StackLayout Padding="0,25,0,0">
+            <StackLayout Padding="0,20,0,-35">
                 <Image
                 Source="gaspump.jpg"
-                HeightRequest="130"
+                HeightRequest="170"
                 Aspect="AspectFit"
+                ScaleY="1.5"
+                ScaleX="1.5"
                 SemanticProperties.Description="Old gas pump" />
             </StackLayout>
 
             <Label
                 Text="Fuel cost calculator"
                 Style="{StaticResource Headline}"
-                SemanticProperties.HeadingLevel="Level1"
-                FontFamily="Cabin_Condensed-Regular" />
+                SemanticProperties.HeadingLevel="Level1" />
 
             <Label
-                Text="Travelled distance (km):"
-                SemanticProperties.Description="Travelled distance"
-                FontFamily="Cabin_Condensed-Regular" />
+                Text="Travelled distance (km)"
+                SemanticProperties.Description="Travelled distance" />
 
             <Entry
                 x:Name="TravelledDistance"
@@ -35,8 +40,7 @@
 
             <Label
                 Text="Average fuel consumption (l/100km)"
-                SemanticProperties.Description="Average fuel consumption of the vehicle"
-                FontFamily="Cabin_Condensed-Regular" />
+                SemanticProperties.Description="Average fuel consumption of the vehicle" />
 
             <Entry
                 x:Name="AvgFuelConsumption"
@@ -45,8 +49,7 @@
 
             <Label
                 Text="Price of the gas (€/l)"
-                SemanticProperties.Description="Price of the gas at the moment"
-                FontFamily="Cabin_Condensed-Regular" />
+                SemanticProperties.Description="Price of the gas at the moment" />
 
             <Entry
                 x:Name="GasPrice"
@@ -56,8 +59,7 @@
 
             <Label
                 Text="Number of people sharing the fuel cost (optional)"
-                SemanticProperties.Description="Number of people sharing the fuel cost"
-                FontFamily="Cabin_Condensed-Regular" />
+                SemanticProperties.Description="Number of people sharing the fuel cost" />
 
             <Entry
                 x:Name="CostShareAmount"

FuelCostCalculator/MauiProgram.cs

@@ -1,4 +1,5 @@
-using Microsoft.Extensions.Logging;
+using CommunityToolkit.Maui;
+using Microsoft.Extensions.Logging;
 
 namespace FuelCostCalculator
 {
@@ -9,10 +10,13 @@ public static MauiApp CreateMauiApp()
             var builder = MauiApp.CreateBuilder();
             builder
                 .UseMauiApp<App>()
+                .UseMauiCommunityToolkit()
                 .ConfigureFonts(fonts =>
                 {
                     fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                     fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
+                    fonts.AddFont("Roboto-VariableFont_wght.ttf", "RobotoVariableFont");
+                    fonts.AddFont("Roboto-Italic-VariableFont_wght.ttf", "RobotoItalicVariableFont");
                 });
 
 #if DEBUG