From a4c0fe78578d36363b1e9198e00c55dd681e29ba Mon Sep 17 00:00:00 2001
From: Ed Giardina <ed@edgiardina.com>
Date: Fri, 2 Aug 2024 19:17:56 -0400
Subject: [PATCH 1/3] Use the49 bottomsheet for Calendar Detail Page

---
 IfpaMaui.csproj                  |   1 +
 MauiProgram.cs                   |   2 +
 Strings.Designer.cs              |   4 +-
 Strings.resx                     |   4 +-
 Views/CalendarDetailPage.xaml    | 349 ++++++++++++++++---------------
 Views/CalendarDetailPage.xaml.cs |  12 +-
 6 files changed, 196 insertions(+), 176 deletions(-)

diff --git a/IfpaMaui.csproj b/IfpaMaui.csproj
index e9d0981..eb97be9 100644
--- a/IfpaMaui.csproj
+++ b/IfpaMaui.csproj
@@ -77,6 +77,7 @@
 		<PackageReference Include="Serilog.Extensions.Logging" Version="8.0.0" />
 		<PackageReference Include="Serilog.Sinks.Console" Version="6.0.0" />
 		<PackageReference Include="Serilog.Sinks.Debug" Version="3.0.0" />
+		<PackageReference Include="The49.Maui.BottomSheet" Version="8.0.3" />
 	</ItemGroup>
 
 	<!-- Maui Specifics -->
diff --git a/MauiProgram.cs b/MauiProgram.cs
index 3ef6e0f..da5251b 100644
--- a/MauiProgram.cs
+++ b/MauiProgram.cs
@@ -16,6 +16,7 @@
 using Serilog;
 using Shiny;
 using CommunityToolkit.Maui.ApplicationModel;
+using The49.Maui.BottomSheet;
 
 namespace Ifpa;
 
@@ -38,6 +39,7 @@ public static MauiApp CreateMauiApp()
             .UseFluentMauiIcons()
             .UseShiny()
             .UseSkiaSharp(true)
+            .UseBottomSheet()
             .ConfigureSyncfusionCore()
             .ConfigureFonts(fonts =>
             {
diff --git a/Strings.Designer.cs b/Strings.Designer.cs
index 2484b5d..af42846 100644
--- a/Strings.Designer.cs
+++ b/Strings.Designer.cs
@@ -295,7 +295,7 @@ internal static string CalendarDetailPage_AddToCalendar {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Date: .
+        ///   Looks up a localized string similar to Date.
         /// </summary>
         internal static string CalendarDetailPage_Date {
             get {
@@ -304,7 +304,7 @@ internal static string CalendarDetailPage_Date {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Director: .
+        ///   Looks up a localized string similar to Director.
         /// </summary>
         internal static string CalendarDetailPage_Director {
             get {
diff --git a/Strings.resx b/Strings.resx
index 3d14176..17d1984 100644
--- a/Strings.resx
+++ b/Strings.resx
@@ -139,7 +139,7 @@
     <value>Events Outside Country</value>
   </data>
   <data name="CalendarDetailPage_Date" xml:space="preserve">
-    <value>Date: </value>
+    <value>Date</value>
   </data>
   <data name="PlayerDetailPage_RankingStatistics" xml:space="preserve">
     <value>Ranking Statistics</value>
@@ -265,7 +265,7 @@
     <value>Tournament Result Posted</value>
   </data>
   <data name="CalendarDetailPage_Director" xml:space="preserve">
-    <value>Director: </value>
+    <value>Director</value>
   </data>
   <data name="CalendarPage_MyLocation" xml:space="preserve">
     <value>My Location</value>
diff --git a/Views/CalendarDetailPage.xaml b/Views/CalendarDetailPage.xaml
index 3932712..1dfc4de 100644
--- a/Views/CalendarDetailPage.xaml
+++ b/Views/CalendarDetailPage.xaml
@@ -10,8 +10,10 @@
              xmlns:local="clr-namespace:Ifpa"
              xmlns:controls="clr-namespace:Ifpa.Controls"
              xmlns:vm="clr-namespace:Ifpa.ViewModels"
+             xmlns:the49="https://schemas.the49.com/dotnet/2023/maui"
              x:DataType="vm:CalendarDetailViewModel"
-             ios:Page.LargeTitleDisplay="Never">
+             ios:Page.LargeTitleDisplay="Never"
+             x:Name="this">
     <ContentPage.Resources>
         <ResourceDictionary>
             <x:Int64 x:Key="Zero">0</x:Int64>
@@ -25,6 +27,176 @@
                 <Setter Property="FontAttributes"
                         Value="Bold" />
             </Style>
+            <the49:BottomSheet x:Key="sheet"
+                               x:Name="sheet"
+                               HasHandle="True"
+                               HandleColor="{AppThemeBinding Light={StaticResource PrimaryTextColor}, Dark={StaticResource PrimaryTextColorDark}}"
+                               IsCancelable="False"
+                               IsVisible="True"
+                               HasBackdrop="False"
+                               Padding="10"
+                               BindingContext="{Binding Source={x:Reference this}, Path=BindingContext}">
+                <the49:BottomSheet.Detents>
+                    <the49:FullscreenDetent />
+                    <the49:MediumDetent />
+                </the49:BottomSheet.Detents>
+                <ScrollView>
+                    <StackLayout HorizontalOptions="FillAndExpand"
+                                 Spacing="10"
+                                 IsVisible="{Binding IsBusy, Converter={StaticResource invertedBoolConverter}}">
+                        <Label Text="{Binding Tournament.TournamentName, Mode=OneWay}"
+                               HorizontalTextAlignment="Center"
+                               TextColor="{AppThemeBinding Light={StaticResource PrimaryTextColor}, Dark={StaticResource PrimaryTextColorDark}}"
+                               FontSize="18"
+                               FontAttributes="Bold"/>
+                        <StackLayout>
+                            <!-- Tournament Details Chips -->
+                            <FlexLayout Direction="Row"
+                                        AlignItems="Start"
+                                        Wrap="Wrap"
+                                        AlignContent="Start">
+                                <controls:Chip Text="{x:Static local:Strings.CalendarDetailPage_Private}"
+                                               IsVisible="{Binding Tournament.PrivateFlag}"
+                                               FontSize="10"
+                                               Margin="0,0,3,0" />
+
+                                <controls:Chip Text="{Binding Tournament.RankingSystem}"
+                                               FontSize="10" />
+
+                            </FlexLayout>
+
+                            <!-- Tournament Details -->
+                            <Grid Padding="0,10"
+                                  ColumnSpacing="10"
+                                  VerticalOptions="Center">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="120" />
+                                    <ColumnDefinition Width="*" />
+                                </Grid.ColumnDefinitions>
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                </Grid.RowDefinitions>
+                                <Grid.Resources>
+                                    <ResourceDictionary>
+                                        <Style x:Key="labelStyle"
+                                               TargetType="Label">
+                                            <Setter Property="LineBreakMode"
+                                                    Value="NoWrap" />
+                                            <Setter Property="FontSize"
+                                                    Value="14" />
+                                            <Setter Property="TextColor"
+                                                    Value="{StaticResource SecondaryTextColor}" />
+                                            <Setter Property="HorizontalTextAlignment"
+                                                    Value="End" />
+                                        </Style>
+                                        <Style x:Key="valueStyle"
+                                               TargetType="Label">
+                                            <Setter Property="LineBreakMode"
+                                                    Value="WordWrap" />
+                                            <Setter Property="FontSize"
+                                                    Value="14" />
+                                            <Setter Property="HorizontalTextAlignment"
+                                                    Value="Start" />
+                                            <Setter Property="Margin"
+                                                    Value="10,0,0,0" />
+                                        </Style>
+                                    </ResourceDictionary>
+                                </Grid.Resources>
+
+                                <Label Text="{x:Static local:Strings.CalendarDetailPage_Date}"
+                                       Style="{DynamicResource labelStyle}"
+                                       Grid.Column="0" />
+
+                                <Label Text="{Binding Tournament.EventStartDate, StringFormat='{0:d}', Mode=OneWay}"
+                                       Style="{DynamicResource valueStyle}"
+                                       Grid.Column="1" />
+
+
+                                <Label Text="{x:Static local:Strings.CalendarDetailPage_Director}"
+                                       Style="{DynamicResource labelStyle}"
+                                       Grid.Column="0"
+                                       Grid.Row="1" />
+
+                                <Label Text="{Binding Tournament.DirectorName, Mode=OneWay}"
+                                       Style="{DynamicResource valueStyle}"
+                                       Grid.Column="1"
+                                       Grid.Row="1"/>
+
+                                <Label Text="{x:Static local:Strings.CalendarDetailPage_QualifyingFormat}"
+                                       Style="{DynamicResource labelStyle}"
+                                       Grid.Column="0"
+                                       Grid.Row="2"/>
+
+                                <Label Text="{Binding Tournament.QualifyingFormat}"
+                                       Style="{DynamicResource valueStyle}"
+                                       Grid.Column="1"
+                                       Grid.Row="2"/>
+
+                                <Label Text="{x:Static local:Strings.CalendarDetailPage_FinalsFormat}"
+                                       Style="{DynamicResource labelStyle}"
+                                       Grid.Column="0"
+                                       Grid.Row="3" />
+
+                                <Label Text="{Binding Tournament.FinalsFormat}"
+                                       Style="{DynamicResource valueStyle}"
+                                       Grid.Column="1"
+                                       Grid.Row="3" />
+
+                                <Label Text="{x:Static local:Strings.CalendarDetailPage_PlayerLimit}"
+                                       Style="{DynamicResource labelStyle}"
+                                       Grid.Column="0"
+                                       Grid.Row="4"
+                                       IsVisible="{Binding Tournament.PlayerLimit, Converter={StaticResource IsNotEqualConverter}, ConverterParameter={StaticResource Zero}}" />
+
+                                <Label Text="{Binding Tournament.PlayerLimit}"
+                                       Style="{DynamicResource valueStyle}"
+                                       Grid.Column="1"
+                                       IsVisible="{Binding Tournament.PlayerLimit, Converter={StaticResource IsNotEqualConverter}, ConverterParameter={StaticResource Zero}}"
+                                       Grid.Row="4" />
+
+                                <Label Text="{x:Static local:Strings.CalendarDetailPage_RegistrationDate}"
+                                       Style="{DynamicResource labelStyle}"
+                                       Grid.Column="0"
+                                       Grid.Row="5"
+                                       IsVisible="{Binding Tournament.RegistrationDate, Converter={StaticResource isNotNullConverter}}" />
+
+                                <Label Text="{Binding Tournament.RegistrationDate, StringFormat='{0:d}'}"
+                                       Style="{DynamicResource valueStyle}"
+                                       IsVisible="{Binding Tournament.RegistrationDate, Converter={StaticResource isNotNullConverter}}"
+                                       Grid.Column="1"
+                                       Grid.Row="5" />
+
+                            </Grid>
+
+                            <!-- Tournament Links -->
+                            <Label Text="{Binding Tournament.Website, Mode=OneWay}"
+                                   TextColor="Blue"
+                                   Margin="0,0,0,10">
+                                <Label.GestureRecognizers>
+                                    <TapGestureRecognizer Command="{Binding LoadWebsiteCommand}" />
+                                </Label.GestureRecognizers>
+                            </Label>
+
+                            <Label Text="{x:Static local:Strings.CalendarDetailPage_Matchplay}"
+                                   IsVisible="{Binding Tournament.MatchplayId, Converter={StaticResource IsNotEqualConverter}, ConverterParameter={StaticResource Zero}}"
+                                   TextColor="Blue"
+                                   Margin="0,0,0,10">
+                                <Label.GestureRecognizers>
+                                    <TapGestureRecognizer Command="{Binding LoadMatchPlayCommand}" />
+                                </Label.GestureRecognizers>
+                            </Label>
+
+                            <!-- Details -->
+                            <Label Text="{Binding Tournament.Details, Mode=OneWay}" />
+                        </StackLayout>
+                    </StackLayout>
+                </ScrollView>
+            </the49:BottomSheet>
         </ResourceDictionary>
     </ContentPage.Resources>
     <ContentPage.ToolbarItems>
@@ -37,176 +209,13 @@
                      Clicked="AddToCalendarButton_Clicked"
                      IconImageSource="{mi:Fluent Icon=CalendarAdd28, IconColor={StaticResource IconAccentColor}}" />
     </ContentPage.ToolbarItems>
-    <Grid>
+    <Grid RowDefinitions="Auto">
         <ActivityIndicator IsVisible="{Binding IsBusy}"
                            IsRunning="{Binding IsBusy}" />
-        <StackLayout HorizontalOptions="FillAndExpand"
-                     Spacing="0"
-                     IsVisible="{Binding IsBusy, Converter={StaticResource invertedBoolConverter}}">
-            <StackLayout Orientation="Vertical"
-                         BackgroundColor="{StaticResource SecondaryBanner}"
-                         Spacing="5"
-                         Padding="12,10">
-                <Label Text="{Binding Tournament.TournamentName, Mode=OneWay}"
-                       FontSize="24"
-                       Style="{StaticResource calendarHeader}" />
-                <Label LineBreakMode="NoWrap"
-                       FontSize="16"
-                       Style="{StaticResource calendarHeader}">
-                    <Label.FormattedText>
-                        <FormattedString>
-                            <FormattedString.Spans>
-                                <Span Text="{x:Static local:Strings.CalendarDetailPage_Date}" />
-                                <Span Text="{Binding Tournament.EventStartDate, StringFormat='{0:d}', Mode=OneWay}" />
-                            </FormattedString.Spans>
-                        </FormattedString>
-                    </Label.FormattedText>
-                </Label>
-                <Label LineBreakMode="NoWrap"
-                       FontSize="16"
-                       Style="{StaticResource calendarHeader}">
-                    <Label.FormattedText>
-                        <FormattedString>
-                            <FormattedString.Spans>
-                                <Span Text="{x:Static local:Strings.CalendarDetailPage_Director}" />
-                                <Span Text="{Binding Tournament.DirectorName, Mode=OneWay}" />
-                            </FormattedString.Spans>
-                        </FormattedString>
-                    </Label.FormattedText>
-                </Label>
-            </StackLayout>
-
-            <!-- Map Shim; map is loaded in Codebehind -->
-            <Grid x:Name="mapShim" />
-
-            <ScrollView VerticalOptions="FillAndExpand"
-                        IsClippedToBounds="True"
-                        Padding="12,10">
-                <StackLayout>
-                    <!-- Tournament Details Chips -->
-                    <FlexLayout Direction="Row"
-                                AlignItems="Start"
-                                Wrap="Wrap"
-                                AlignContent="Start">
-                        <controls:Chip Text="{x:Static local:Strings.CalendarDetailPage_Private}"
-                                       IsVisible="{Binding Tournament.PrivateFlag}"
-                                       FontSize="10"
-                                       Margin="0,0,3,0"/>
-
-                        <controls:Chip Text="{Binding Tournament.RankingSystem}"
-                                       FontSize="10" />
-
-                    </FlexLayout>
-
-                    <!-- Tournament Details -->
-                    <Grid Padding="0,10"
-                          ColumnSpacing="10"
-                          VerticalOptions="Center">
-                        <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="120" />
-                            <ColumnDefinition Width="*" />
-                        </Grid.ColumnDefinitions>
-                        <Grid.RowDefinitions>
-                            <RowDefinition Height="Auto" />
-                            <RowDefinition Height="Auto" />
-                            <RowDefinition Height="Auto" />
-                            <RowDefinition Height="Auto" />
-                            <RowDefinition Height="Auto" />
-                        </Grid.RowDefinitions>
-                        <Grid.Resources>
-                            <ResourceDictionary>
-                                <Style x:Key="labelStyle"
-                                       TargetType="Label">
-                                    <Setter Property="LineBreakMode"
-                                            Value="NoWrap" />
-                                    <Setter Property="FontSize"
-                                            Value="14" />
-                                    <Setter Property="TextColor"
-                                            Value="{StaticResource SecondaryTextColor}" />
-                                    <Setter Property="HorizontalTextAlignment"
-                                            Value="End" />
-                                </Style>
-                                <Style x:Key="valueStyle"
-                                       TargetType="Label">
-                                    <Setter Property="LineBreakMode"
-                                            Value="WordWrap" />
-                                    <Setter Property="FontSize"
-                                            Value="14" />
-                                    <Setter Property="HorizontalTextAlignment"
-                                            Value="Start" />
-                                    <Setter Property="Margin"
-                                            Value="10,0,0,0" />
-                                </Style>
-                            </ResourceDictionary>
-                        </Grid.Resources>
-
-
-                        <Label Text="{x:Static local:Strings.CalendarDetailPage_QualifyingFormat}"
-                               Style="{DynamicResource labelStyle}"
-                               Grid.Column="0" />
-
-                        <Label Text="{Binding Tournament.QualifyingFormat}"
-                               Style="{DynamicResource valueStyle}"
-                               Grid.Column="1" />
-
-                        <Label Text="{x:Static local:Strings.CalendarDetailPage_FinalsFormat}"
-                               Style="{DynamicResource labelStyle}"
-                               Grid.Column="0"
-                               Grid.Row="1" />
-
-                        <Label Text="{Binding Tournament.FinalsFormat}"
-                               Style="{DynamicResource valueStyle}"
-                               Grid.Column="1"
-                               Grid.Row="1" />
-
-                        <Label Text="{x:Static local:Strings.CalendarDetailPage_PlayerLimit}"
-                               Style="{DynamicResource labelStyle}"
-                               Grid.Column="0"
-                               Grid.Row="2"
-                               IsVisible="{Binding Tournament.PlayerLimit, Converter={StaticResource IsNotEqualConverter}, ConverterParameter={StaticResource Zero}}" />
-
-                        <Label Text="{Binding Tournament.PlayerLimit}"
-                               Style="{DynamicResource valueStyle}"
-                               Grid.Column="1"
-                               IsVisible="{Binding Tournament.PlayerLimit, Converter={StaticResource IsNotEqualConverter}, ConverterParameter={StaticResource Zero}}"
-                               Grid.Row="2" />
-
-                        <Label Text="{x:Static local:Strings.CalendarDetailPage_RegistrationDate}"
-                               Style="{DynamicResource labelStyle}"
-                               Grid.Column="0"
-                               Grid.Row="3"
-                               IsVisible="{Binding Tournament.RegistrationDate, Converter={StaticResource isNotNullConverter}}" />
-
-                        <Label Text="{Binding Tournament.RegistrationDate, StringFormat='{0:d}'}"
-                               Style="{DynamicResource valueStyle}"
-                               IsVisible="{Binding Tournament.RegistrationDate, Converter={StaticResource isNotNullConverter}}"
-                               Grid.Column="1"
-                               Grid.Row="3" />
-
-                    </Grid>
-
-                    <!-- Tournament Links -->
-                    <Label Text="{Binding Tournament.Website, Mode=OneWay}"
-                           TextColor="Blue"
-                           Margin="0,0,0,10">
-                        <Label.GestureRecognizers>
-                            <TapGestureRecognizer Command="{Binding LoadWebsiteCommand}" />
-                        </Label.GestureRecognizers>
-                    </Label>
-
-                    <Label Text="{x:Static local:Strings.CalendarDetailPage_Matchplay}"
-                           IsVisible="{Binding Tournament.MatchplayId, Converter={StaticResource IsNotEqualConverter}, ConverterParameter={StaticResource Zero}}"
-                           TextColor="Blue"
-                           Margin="0,0,0,10">
-                        <Label.GestureRecognizers>
-                            <TapGestureRecognizer Command="{Binding LoadMatchPlayCommand}" />
-                        </Label.GestureRecognizers>
-                    </Label>
-                    
-                    <!-- Details -->
-                    <Label Text="{Binding Tournament.Details, Mode=OneWay}" />
-                </StackLayout>
-            </ScrollView>
-        </StackLayout>
+
+        <!-- Map Shim; map is loaded in Codebehind -->
+        <Grid x:Name="mapShim"
+              HeightRequest="400"
+              VerticalOptions="Start" />
     </Grid>
 </ContentPage>
\ No newline at end of file
diff --git a/Views/CalendarDetailPage.xaml.cs b/Views/CalendarDetailPage.xaml.cs
index 8eaa137..ededb3e 100644
--- a/Views/CalendarDetailPage.xaml.cs
+++ b/Views/CalendarDetailPage.xaml.cs
@@ -1,6 +1,7 @@
 using Ifpa.ViewModels;
 using Microsoft.Maui.Controls.Maps;
 using Microsoft.Maui.Maps;
+using The49.Maui.BottomSheet;
 
 
 namespace Ifpa.Views
@@ -28,10 +29,10 @@ protected override async void OnAppearing()
                 MapSpan mapSpan = MapSpan.FromCenterAndRadius(mapLocation, Distance.FromKilometers(1));
                 var calendarMap = new Microsoft.Maui.Controls.Maps.Map(mapSpan)
                 {
-                    HeightRequest = 200,
                     IsZoomEnabled = false,
                     IsScrollEnabled = false,
-                    MapType = MapType.Street
+                    MapType = MapType.Street,
+                    IsTrafficEnabled = false                    
                 };
                 var pin = new Pin
                 {
@@ -52,6 +53,13 @@ protected override async void OnAppearing()
             catch (Exception)
             {
             }
+            await sheet.ShowAsync();
+        }
+
+        protected override void OnDisappearing()
+        {
+            base.OnDisappearing();
+            sheet.DismissAsync();
         }
 
         private void Pin_Clicked(object sender, PinClickedEventArgs e)

From 98b5e86cf061d6f7a89ae0cf95bb9c7add38de3b Mon Sep 17 00:00:00 2001
From: Ed Giardina <ed@edgiardina.com>
Date: Fri, 2 Aug 2024 20:26:24 -0400
Subject: [PATCH 2/3] Add android handle, padding, etc

---
 Platforms/Android/Resources/values/styles.xml | 4 ++++
 Views/CalendarDetailPage.xaml                 | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 Platforms/Android/Resources/values/styles.xml

diff --git a/Platforms/Android/Resources/values/styles.xml b/Platforms/Android/Resources/values/styles.xml
new file mode 100644
index 0000000..389e5bb
--- /dev/null
+++ b/Platforms/Android/Resources/values/styles.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<resources>
+	<style name="Maui.MainTheme" parent="Theme.Material3.DayNight"></style>
+</resources>
\ No newline at end of file
diff --git a/Views/CalendarDetailPage.xaml b/Views/CalendarDetailPage.xaml
index 1dfc4de..cfbcf84 100644
--- a/Views/CalendarDetailPage.xaml
+++ b/Views/CalendarDetailPage.xaml
@@ -30,12 +30,14 @@
             <the49:BottomSheet x:Key="sheet"
                                x:Name="sheet"
                                HasHandle="True"
-                               HandleColor="{AppThemeBinding Light={StaticResource PrimaryTextColor}, Dark={StaticResource PrimaryTextColorDark}}"
+                               HandleColor="{StaticResource SecondaryTextColor}"
                                IsCancelable="False"
                                IsVisible="True"
                                HasBackdrop="False"
                                Padding="10"
                                BindingContext="{Binding Source={x:Reference this}, Path=BindingContext}">
+     
+
                 <the49:BottomSheet.Detents>
                     <the49:FullscreenDetent />
                     <the49:MediumDetent />
@@ -43,6 +45,7 @@
                 <ScrollView>
                     <StackLayout HorizontalOptions="FillAndExpand"
                                  Spacing="10"
+                                 Margin="0,10"
                                  IsVisible="{Binding IsBusy, Converter={StaticResource invertedBoolConverter}}">
                         <Label Text="{Binding Tournament.TournamentName, Mode=OneWay}"
                                HorizontalTextAlignment="Center"

From bad19805643096d6dd7227cba3da8f77ec4bdcf0 Mon Sep 17 00:00:00 2001
From: Ed Giardina <ed@edgiardina.com>
Date: Fri, 2 Aug 2024 20:31:42 -0400
Subject: [PATCH 3/3] Add background color and corner radius

---
 Views/CalendarDetailPage.xaml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Views/CalendarDetailPage.xaml b/Views/CalendarDetailPage.xaml
index cfbcf84..ff5abc5 100644
--- a/Views/CalendarDetailPage.xaml
+++ b/Views/CalendarDetailPage.xaml
@@ -35,9 +35,9 @@
                                IsVisible="True"
                                HasBackdrop="False"
                                Padding="10"
-                               BindingContext="{Binding Source={x:Reference this}, Path=BindingContext}">
-     
-
+                               BindingContext="{Binding Source={x:Reference this}, Path=BindingContext}"
+                               CornerRadius="10"
+                               BackgroundColor="{AppThemeBinding Light={StaticResource BackgroundColor}, Dark={StaticResource BackgroundColorDark}}">     
                 <the49:BottomSheet.Detents>
                     <the49:FullscreenDetent />
                     <the49:MediumDetent />