Update the mobile application

src/Mobile/SimpleIdServer.Mobile/Components/LinkComponent.xaml

@@ -5,7 +5,7 @@
              xmlns:local="clr-namespace:SimpleIdServer.Mobile.Components"
              x:Class="SimpleIdServer.Mobile.Components.LinkComponent"
              x:Name="this">
-    <Border Margin="5">
+    <StackLayout Style="{StaticResource linkComponent}">
         <StackLayout Orientation="Horizontal" Padding="10,20,10,20">
             <Image WidthRequest="20" HeightRequest="20" Source="{Binding Path=Source}" HorizontalOptions="Start"></Image>
             <Label Padding="5,0,0,0" HorizontalOptions="StartAndExpand" Text="{Binding Path=Title}"></Label>
@@ -14,5 +14,6 @@
                 <TapGestureRecognizer Command="{Binding Path=NavigateCommand}" />
             </StackLayout.GestureRecognizers>
         </StackLayout>
-    </Border>
+        <BoxView Style="{StaticResource separator}"></BoxView>
+    </StackLayout>
 </ContentView>

src/Mobile/SimpleIdServer.Mobile/Components/ViewOTPCode.xaml

@@ -42,7 +42,10 @@
                 <Button Text="Generate" Command="{Binding Path=GenerateHOTPCommand}"></Button>
             </StackLayout>
             <StackLayout IsVisible="{Binding Path=IsOTPCodeExists, Converter={StaticResource InvertedBoolConverter}}" Padding="10">
-                <Label Text="Select a one-time password"></Label>
+                <ContentView Style="{StaticResource noRecord}">
+                    <Image Source="nootp.png" HorizontalOptions="Center" Aspect="AspectFit" />
+                </ContentView>
+                <Label Text="Select a one-time password from below to view the result." HorizontalOptions="Center"/>
             </StackLayout>
         </Grid>
     </ContentView.Content>

src/Mobile/SimpleIdServer.Mobile/DidsPage.xaml

@@ -2,20 +2,32 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:SimpleIdServer.Mobile.ViewModels"
+             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              x:DataType="local:DidsViewModel"
              x:Class="SimpleIdServer.Mobile.DidsPage"
              xmlns:components="clr-namespace:SimpleIdServer.Mobile.Components"
              xmlns:models="clr-namespace:SimpleIdServer.Mobile.Models"
              xmlns:common="clr-namespace:SimpleIdServer.Mobile.Common"
              Title="DIDs">
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <toolkit:InvertedBoolConverter x:Key="InvertedBoolConverter"></toolkit:InvertedBoolConverter>
+        </ResourceDictionary>
+    </ContentPage.Resources>
     <ContentPage.ToolbarItems>
         <ToolbarItem Order="Primary" Text="Add" Command="{Binding Path=AddCommand}"></ToolbarItem>
         <ToolbarItem Order="Primary" Text="Active" Command="{Binding Path=SetActiveCommand}"></ToolbarItem>
         <ToolbarItem Order="Primary" Text="Delete" Command="{Binding Path=DeleteCommand}"></ToolbarItem>
     </ContentPage.ToolbarItems>
-    <Grid Margin="20">
+    <Grid Padding="20" BackgroundColor="{StaticResource BackgroundColor}">
         <common:Loader IsVisible="{Binding Path=IsLoading}" ZIndex="2" />
-        <CollectionView ItemsSource="{Binding Path=Dids}">
+        <StackLayout IsVisible="{Binding Path=AtLeastOneDid, Converter={StaticResource InvertedBoolConverter}}" Padding="10">
+            <ContentView Style="{StaticResource noRecord}">
+                <Image Source="did.png" HorizontalOptions="Center" Aspect="AspectFit" />
+            </ContentView>
+            <Label Text="There is no distributed identity. Click 'Add' to generate a new one." HorizontalOptions="Center"/>
+        </StackLayout>
+        <CollectionView IsVisible="{Binding Path=AtLeastOneDid}" ItemsSource="{Binding Path=Dids}">
             <CollectionView.ItemTemplate>
                 <DataTemplate>
                     <Border Margin="5" x:DataType="models:DidRecord">

src/Mobile/SimpleIdServer.Mobile/EnrollPage.xaml

@@ -40,7 +40,7 @@
                                     <OrientationStateTrigger Orientation="Portrait"></OrientationStateTrigger>
                                 </VisualState.StateTriggers>
                                 <VisualState.Setters>
-                                    <Setter Property="BackgroundColor" Value="#E1E1E1" />
+                                    <Setter Property="BackgroundColor" Value="{StaticResource BackgroundColor}" />
                                 </VisualState.Setters>
                             </VisualState>
                             <VisualState x:Name="Landscape">

src/Mobile/SimpleIdServer.Mobile/InfoPage.xaml

@@ -3,7 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="SimpleIdServer.Mobile.InfoPage"
              Title="Info">
-    <StackLayout Spacing="5">
+    <StackLayout Spacing="5" BackgroundColor="{StaticResource BackgroundColor}">
         <StackLayout Spacing="10" Padding="10">
             <Label FontAttributes="Bold">URL</Label>
             <Label>https://github.com/simpleidserver/SimpleIdServer</Label>

src/Mobile/SimpleIdServer.Mobile/ProfilePage.xaml

@@ -7,7 +7,7 @@
              x:DataType="local:ProfileViewModel"
              x:Class="SimpleIdServer.Mobile.ProfilePage"
              Title="Profile">
-    <Grid>
+    <Grid BackgroundColor="{StaticResource BackgroundColor}">
         <common:Loader IsVisible="{Binding Path=IsLoading}" ZIndex="2" />
         <StackLayout Spacing="5">
             <StackLayout Spacing="10" Padding="10">

src/Mobile/SimpleIdServer.Mobile/QRCodeScannerPage.xaml

@@ -20,12 +20,14 @@
         <Grid ZIndex="1">
             <Grid.RowDefinitions>
                 <RowDefinition Height="*" />
+                <RowDefinition Height="auto" />
             </Grid.RowDefinitions>
             <zxing:CameraBarcodeReaderView x:Name="cameraBarCodeReader" Grid.Row="0">
                 <zxing:CameraBarcodeReaderView.Behaviors>
                     <toolkit:EventToCommandBehavior EventName="BarcodesDetected" Command="{Binding ScanQRCodeCommand}" EventArgsConverter="{StaticResource barcodeDetectionEventArgsConverter}" />
                 </zxing:CameraBarcodeReaderView.Behaviors>
             </zxing:CameraBarcodeReaderView>
+            <Button Text="Close" Grid.Row="1" Command="{Binding Path=CloseCommand}"></Button>
         </Grid>
     </Grid>
 </ContentPage>

src/Mobile/SimpleIdServer.Mobile/Resources/Styles/Colors.xaml

@@ -17,6 +17,7 @@
     <Color x:Key="Gray600">#404040</Color>
     <Color x:Key="Gray900">#212121</Color>
     <Color x:Key="Gray950">#141414</Color>
+    <Color x:Key="BackgroundColor">#f2f2f2</Color>
     <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource Primary}"/>
     <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource Secondary}"/>
     <SolidColorBrush x:Key="TertiaryBrush" Color="{StaticResource Tertiary}"/>

src/Mobile/SimpleIdServer.Mobile/Resources/Styles/Styles.xaml

@@ -21,11 +21,24 @@
         <Setter Property="Source" Value="minimize.png"></Setter>
     </Style>
 
+    <Style x:Key="linkComponent" TargetType="StackLayout">
+        <Setter Property="BackgroundColor" Value="{StaticResource White}"></Setter>
+    </Style>
+
+    <Style x:Key="noRecord" TargetType="ContentView">
+        <Setter Property="MaximumHeightRequest" Value="100"></Setter>
+    </Style>
+
     <Style x:Key="separator" TargetType="BoxView">
         <Setter Property="HeightRequest" Value="1" />
         <Setter Property="Color" Value="{StaticResource Gray200}" />
     </Style>
 
+    <Style x:Key="verticalSeparator" TargetType="BoxView">
+        <Setter Property="WidthRequest" Value="1" />
+        <Setter Property="Color" Value="{StaticResource Gray200}" />
+    </Style>
+
     <Style x:Key="modalToolbarTitle" TargetType="Label">
         <Setter Property="TextColor" Value="{StaticResource White}"></Setter>
         <Setter Property="VerticalOptions" Value="Center"></Setter>

src/Mobile/SimpleIdServer.Mobile/SettingsPage.xaml

@@ -5,7 +5,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:SimpleIdServer.Mobile.Components"
              x:Class="SimpleIdServer.Mobile.SettingsPage">
-    <StackLayout Spacing="5">
+    <StackLayout BackgroundColor="{StaticResource BackgroundColor}"> 
         <local:LinkComponent Title="Profile" Source="profile.png" Url="//settings/profile" />
         <local:LinkComponent Title="Distributed Identity Keys" Source="key.png" Url="//settings/dids" />
         <local:LinkComponent Title="Info" Source="info.png" Url="//settings/info" />

src/Mobile/SimpleIdServer.Mobile/ViewCredentialListPage.xaml

@@ -13,16 +13,27 @@
              x:Class="SimpleIdServer.Mobile.ViewCredentialListPage"
              Shell.TabBarIsVisible="false"
              Title="Credentials">
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <toolkit:InvertedBoolConverter x:Key="InvertedBoolConverter"></toolkit:InvertedBoolConverter>
+        </ResourceDictionary>
+    </ContentPage.Resources>
     <ContentPage.ToolbarItems>
         <ToolbarItem Order="Primary" Text="Delete" Command="{Binding Path=RemoveSelectedCredentialsCommand}"></ToolbarItem>
     </ContentPage.ToolbarItems>
     <Grid>
         <common:Loader IsVisible="{Binding Path=IsLoading}" ZIndex="2" />
-        <Grid ZIndex="1">
+        <Grid ZIndex="1" BackgroundColor="{StaticResource BackgroundColor}">
             <Grid.RowDefinitions>
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
-            <ListView ItemsSource="{Binding Path=Credentials}" SelectionMode="None" Grid.Row="0">
+            <StackLayout IsVisible="{Binding Path=AtLeastOneCredential, Converter={StaticResource InvertedBoolConverter}}" Padding="10">
+                <ContentView Style="{StaticResource noRecord}">
+                    <Image Source="nocredential.png" HorizontalOptions="Center" Aspect="AspectFit" />
+                </ContentView>
+                <Label Text="No SimpleIdServer credential has been configured or is available to authenticate a user on a website. Please scan a QR code from a website to enroll the credential." HorizontalOptions="Center"/>
+            </StackLayout>
+            <ListView IsVisible="{Binding Path=AtLeastOneCredential}" ItemsSource="{Binding Path=Credentials}" SelectionMode="None" Grid.Row="0">
                 <ListView.ItemTemplate>
                     <DataTemplate x:DataType="stores:SelectableCredentialRecord">
                         <ViewCell>