Add some simple styling (#6)

jfversluis · Sep 26, 2024 · d399312 · d399312
1 parent 65ad6a4
commit d399312
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 18 deletions.
diff --git a/src/Conference.Maui/MauiProgram.cs b/src/Conference.Maui/MauiProgram.cs
@@ -18,6 +18,7 @@ public static MauiApp CreateMauiApp()
             {
                 fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                 fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
+                fonts.AddFont("Poppins-SemiBold.ttf", "PoppinsSemibold");
             })
             .UseMauiCommunityToolkit();
 

diff --git a/src/Conference.Maui/Pages/SchedulePage.xaml b/src/Conference.Maui/Pages/SchedulePage.xaml
@@ -9,14 +9,50 @@
     <CollectionView ItemsSource="{Binding Sessions}">
         <CollectionView.ItemTemplate>
             <DataTemplate x:DataType="models:Session">
-                <Grid Margin="10" RowDefinitions="*,*" ColumnDefinitions="50,*" ColumnSpacing="10">
+                <Grid ColumnSpacing="16" Margin="10">
                     <Grid.GestureRecognizers>
                         <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:ScheduleViewModel}}, Path=GoToSessionDetailsCommand}" CommandParameter="{Binding .}" />
                     </Grid.GestureRecognizers>
-                    <toolkit:AvatarView Grid.Column="0" Grid.RowSpan="2" ImageSource="{Binding Speakers[0].ProfilePictureUrl}" />
 
-                    <Label Grid.Row="0" Grid.Column="1" Text="{Binding Title}" FontAttributes="Bold" FontSize="18" MaxLines="1" LineBreakMode="TailTruncation" />
-                    <Label Grid.Row="1" Grid.Column="1" Text="{Binding Description}" MaxLines="3" LineBreakMode="TailTruncation" />
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="80"/>
+                        <ColumnDefinition Width="*"/>
+                    </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="60"/>
+                        <RowDefinition Height="60"/>
+                        <RowDefinition Height="20"/>
+                    </Grid.RowDefinitions>
+
+                    <toolkit:AvatarView Grid.Column="0" Grid.RowSpan="3"
+                                        HorizontalOptions="Center" CornerRadius="40"
+                                        WidthRequest="80" HeightRequest="80"
+                                        ImageSource="{Binding Speakers[0].ProfilePictureUrl}" />
+
+                    <Label Text="{Binding Title}"
+                            Grid.Row="0" Grid.Column="1"
+                            MaxLines="2" FontFamily="PoppinsSemibold"
+                            FontSize="20" LineBreakMode="TailTruncation"/>
+
+                    <Label Text="{Binding Description}"
+                           TextColor="{StaticResource Gray400}"
+                           MaxLines="3" Grid.Row="1" Grid.Column="1"
+                           LineBreakMode="TailTruncation"/>
+
+                    <Label Grid.Row="2" Grid.Column="1">
+                        <Label.FormattedText>
+                            <FormattedString>
+                                <Span Text="{Binding Room}"
+                                      TextColor="{StaticResource Primary}"/>
+
+                                <Span Text=" · " FontAttributes="Bold"
+                                      TextColor="{StaticResource Gray400}"/>
+
+                                <Span Text="{Binding StartsAt, StringFormat='{0:dddd, HH:mm}'}"
+                                      TextColor="{StaticResource Gray200}"/>
+                            </FormattedString>
+                        </Label.FormattedText>
+                    </Label>
                 </Grid>
             </DataTemplate>
         </CollectionView.ItemTemplate>

diff --git a/src/Conference.Maui/Pages/SessionDetailsPage.xaml b/src/Conference.Maui/Pages/SessionDetailsPage.xaml
@@ -17,14 +17,18 @@
                             <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:SessionDetailsViewModel}}, Path=GoToSpeakerDetailsCommand}" CommandParameter="{Binding .}" />
                         </VerticalStackLayout.GestureRecognizers>
 
-                        <toolkit:AvatarView ImageSource="{Binding ProfilePictureUrl}" />
-                        <Label Text="{Binding FullName}" />
+                        <toolkit:AvatarView ImageSource="{Binding ProfilePictureUrl}"
+                                            WidthRequest="80" HeightRequest="80" CornerRadius="40" />
+
+                        <Label Text="{Binding FullName}" HorizontalOptions="Center" />
+                        <Label Text="{Binding TagLine}" HorizontalOptions="Center" TextColor="{StaticResource Gray400}" />
                     </VerticalStackLayout>
                 </DataTemplate>
             </BindableLayout.ItemTemplate>
         </HorizontalStackLayout>
 
-        <Label Text="{Binding SelectedSession.Room}" FontAttributes="Bold" HorizontalOptions="Center" />
+        <Label Text="{Binding SelectedSession.Room}" FontAttributes="Bold"
+               HorizontalOptions="Center" TextColor="{StaticResource Primary}" />
 
         <Label HorizontalOptions="Center">
             <Label.FormattedText>
@@ -37,7 +41,7 @@
 
         <Label 
             Text="{Binding SelectedSession.Description}"
-            VerticalOptions="Center" 
-            HorizontalOptions="Center" />
+            VerticalOptions="Center" HorizontalOptions="Center"
+            TextColor="{StaticResource Gray600}"/>
     </VerticalStackLayout>
 </ContentPage>
diff --git a/src/Conference.Maui/Pages/SpeakerDetailsPage.xaml b/src/Conference.Maui/Pages/SpeakerDetailsPage.xaml
@@ -9,15 +9,17 @@
              x:Class="Conference.Maui.Pages.SpeakerDetailsPage"
              Title="{Binding SelectedSpeaker.FullName}">
     <VerticalStackLayout Margin="10" Spacing="10">
-        <toolkit:AvatarView ImageSource="{Binding SelectedSpeaker.ProfilePictureUrl}" />
+        <toolkit:AvatarView ImageSource="{Binding SelectedSpeaker.ProfilePictureUrl}"
+                            WidthRequest="80" HeightRequest="80" CornerRadius="40"/>
 
-        <Label Text="{Binding SelectedSpeaker.TagLine}" HorizontalOptions="Center" />
+        <Label Text="{Binding SelectedSpeaker.TagLine}" HorizontalOptions="Center" TextColor="{StaticResource Gray400}" />
 
         <Label 
             Text="{Binding SelectedSpeaker.Bio}"
-            HorizontalOptions="Center" />
+            HorizontalOptions="Center" TextColor="{StaticResource Gray600}" />
 
-        <Label Text="{x:Static localization:Strings.SessionsAtThisEventHeader}" FontAttributes="Bold" />
+        <Label Text="{x:Static localization:Strings.SessionsAtThisEventHeader}"
+               TextColor="{StaticResource Primary}" FontAttributes="Bold" />
 
         <HorizontalStackLayout BindableLayout.ItemsSource="{Binding SelectedSpeaker.Sessions}">
             <BindableLayout.ItemTemplate>

diff --git a/src/Conference.Maui/Pages/SpeakersPage.xaml b/src/Conference.Maui/Pages/SpeakersPage.xaml
@@ -9,14 +9,42 @@
     <CollectionView ItemsSource="{Binding Speakers}">
         <CollectionView.ItemTemplate>
             <DataTemplate x:DataType="models:Speaker">
-                <Grid Margin="10" RowDefinitions="*,*" ColumnDefinitions="50,*" ColumnSpacing="10">
+                <Grid ColumnSpacing="16" Margin="10">
                     <Grid.GestureRecognizers>
                         <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:SpeakersViewModel}}, Path=GoToSpeakerDetailsCommand}" CommandParameter="{Binding .}" />
                     </Grid.GestureRecognizers>
-
-                    <toolkit:AvatarView Grid.Column="0" Grid.RowSpan="2" ImageSource="{Binding ProfilePictureUrl}" />
-                    <Label Grid.Row="0" Grid.Column="1" Text="{Binding FullName}" FontAttributes="Bold" FontSize="18" />
-                    <Label Grid.Row="1" Grid.Column="1" Text="{Binding TagLine}" MaxLines="3" />
+
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="80"/>
+                        <ColumnDefinition Width="*"/>
+                    </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="30"/>
+                        <RowDefinition Height="20"/>
+                        <RowDefinition Height="60"/>
+                        <RowDefinition Height="20"/>
+                    </Grid.RowDefinitions>
+
+                    <toolkit:AvatarView Grid.Column="0" Grid.RowSpan="3"
+                        HorizontalOptions="Center" CornerRadius="40"
+                        WidthRequest="80" HeightRequest="80"
+                        ImageSource="{Binding ProfilePictureUrl}" />
+
+                    <Label Text="{Binding FullName}"
+                           Grid.Row="0" Grid.Column="1"
+                           MaxLines="1" FontFamily="PoppinsSemibold"
+                           FontSize="20" LineBreakMode="TailTruncation"/>
+
+                    <Label Text="{Binding TagLine}"
+                           Grid.Row="1" Grid.Column="1"
+                           MaxLines="1" LineBreakMode="TailTruncation"
+                           TextColor="{StaticResource Primary}"/>
+
+                    <Label Text="{Binding Bio}"
+                           TextColor="{StaticResource Gray400}"
+                           MaxLines="3" Grid.Row="2" Grid.Column="1"
+                           LineBreakMode="TailTruncation"/>
+
                 </Grid>
             </DataTemplate>
         </CollectionView.ItemTemplate>

diff --git a/src/Conference.Maui/Resources/Fonts/Poppins-SemiBold.ttf b/src/Conference.Maui/Resources/Fonts/Poppins-SemiBold.ttf