Added additionl styles, fonts and icon

App/RobobinApp/App.xaml

@@ -12,5 +12,19 @@
 
             <StyleSheet Source="/Resources/Styles/appstyle.css" />
         </ResourceDictionary>
+        <ResourceDictionary>
+            <Style TargetType="Label">
+                <Setter Property="FontFamily" Value="Cabal" />
+                <Setter Property="FontSize" Value="16" />
+                <Setter Property="TextColor" Value="#E8EDF1" />
+                <Setter Property="Margin" Value="10" />
+            </Style>
+            <Style TargetType="Button">
+                <Setter Property="FontFamily" Value="Cabal" />
+                <Setter Property="FontSize" Value="16" />
+                <Setter Property="TextColor" Value="#E8EDF1" />
+                <Setter Property="Margin" Value="10" />
+            </Style>
+        </ResourceDictionary>
     </Application.Resources>
 </Application>

App/RobobinApp/MauiProgram.cs

@@ -16,6 +16,8 @@ public static class MauiProgram
           {
               fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
               fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
+              // fonts.AddFont("Cabal-w5j3.tff", "Atop");
+              fonts.AddFont("Cabal-w5j3.tff", "Cabal");
           });
 
 

App/RobobinApp/Resources/Styles/Styles.xaml

@@ -5,7 +5,7 @@
     <Style x:Key="TopBarButtonStyle" TargetType="Button">
         <Setter Property="BackgroundColor" Value="#E4E4E4"/>
         <Setter Property="TextColor" Value="#333333"/>
-        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="FontSize" Value="20"/>
         <Setter Property="Padding" Value="10,5"/>
         <Setter Property="CornerRadius" Value="5"/>
         <Setter Property="BorderWidth" Value="0.5"/>

App/RobobinApp/Resources/Styles/appstyle.css

-navigationpage {
-    -maui-bar-background-color: lightgray;
+
+navigationpage {
+    -maui-bar-background-color: #647687; 
+    -maui-bar-text-color: #FFFFFF;
 }
 
 ^contentpage {
-    background-color: lightgray;
-}
-
-#listView {
-    background-color: lightgray;
+    background-color: #2B333E;
+    color: #E8EDF1; 
 }
 
+/* Layout Styling */
 stacklayout {
     margin: 20;
     -maui-spacing: 6;
@@ -20,47 +20,84 @@ grid {
     column-gap: 6;
 }
 
+
 .mainPageTitle {
     font-style: bold;
-    font-size: 14;
+    font-size: 18; 
+    color: #E8EDF1; 
 }
 
 .mainPageSubtitle {
+    font-size: 16;
+    color: #A3B4C6;
     margin-top: 15;
 }
 
 .detailPageTitle {
     font-style: bold;
-    font-size: 14;
+    font-size: 16;
     text-align: center;
+    color: #E8EDF1;
 }
 
 .detailPageSubtitle {
     text-align: center;
     font-style: italic;
+    font-size: 14;
+    color: #A3B4C6; 
+}
+
+
+#listView {
+    background-color: #2B333E;
+    separator-color: #A3B4C6; 
+    color: #E8EDF1;
 }
 
 listview image {
     height: 60;
     width: 60;
+    border-radius: 8; 
 }
 
 stacklayout > image {
     height: 200;
     width: 200;
+    border-radius: 10;
+    border-color: #647687;
 }
+
 .mainFrame {
-    background-color: White;
-    border-color: Black;
+    background-color: white;
+    border-color: #647687;
     corner-radius: 5;
+    padding: 15;
 }
 
-.sideFrame {
+.primaryFrame {
     background-color: #2B333E;
-    border-color: Black;
+    border-color: #647687;
+    corner-radius: 8;
+    padding: 10;
+}
+
+.button-primary {
+    background-color: #647687;
+    color: #FFFFFF;
+    padding: 10 5;
     corner-radius: 5;
+    font-style: bold;
+}
+
+.button-secondary {
+    background-color: #A3B4C6; 
+    color: #FFFFFF;
+    padding: 8 4;
+    corner-radius: 5;
+    font-style: bold;
 }
 
+
 .sideBox {
     margin: 0;
     padding: 0;
@@ -88,9 +125,10 @@ stacklayout > image {
     background-color: #E8EDF1;
     padding: 10;
     height: 200;
+    color: #2B333E;
 }
 
-    .side-box-content Label {
+    .side-box-content label {
         margin: 0;
         padding: 0;
     }
@@ -98,3 +136,24 @@ stacklayout > image {
 .side-box-vertical-stack {
     spacing: 0;
 }
+
+
+.card {
+    background-color: #2B333E;
+    border-color: #647687;
+    corner-radius: 8;
+    padding: 15;
+}
+
+.card-header {
+    background-color: #647687;
+    padding: 10 5;
+    font-size: 16;
+    font-style: bold;
+    color: #FFFFFF;
+}
+
+.card-content {
+    background-color: #E8EDF1;
+    padding: 10;
+}

App/RobobinApp/Resources/Styles/appstylepink.css

+/* Navigation and Page Backgrounds */
+navigationpage {
+    -maui-bar-background-color: #D5006D; /* Bright pink accent */
+    -maui-bar-text-color: #FFFFFF; /* White text for contrast */
+}
+
+^contentpage {
+    background-color: #FCE4EC; /* Light pink background */
+    color: #880E4F; /* Darker pink for text */
+}
+
+/* Layout Styling */
+stacklayout {
+    margin: 20;
+    -maui-spacing: 6;
+}
+
+grid {
+    row-gap: 6;
+    column-gap: 6;
+}
+
+/* Title and Subtitle Styling */
+.mainPageTitle {
+    font-style: bold;
+    font-size: 18; /* Increased for main titles */
+    color: #880E4F; /* Darker pink for visibility */
+}
+
+.mainPageSubtitle {
+    font-size: 16;
+    color: #AD1457; /* Medium pink */
+    margin-top: 15;
+}
+
+.detailPageTitle {
+    font-style: bold;
+    font-size: 16;
+    text-align: center;
+    color: #880E4F; /* Darker pink */
+}
+
+.detailPageSubtitle {
+    text-align: center;
+    font-style: italic;
+    font-size: 14;
+    color: #AD1457; /* Medium pink */
+}
+
+/* ListView and Image Styling */
+#listView {
+    background-color: #FCE4EC; /* Match background */
+    separator-color: #AD1457; /* Medium pink separator */
+    color: #880E4F; /* Darker pink for text */
+}
+
+listview image {
+    height: 60;
+    width: 60;
+    border-radius: 8; /* Rounded corners for consistency */
+}
+
+stacklayout > image {
+    height: 200;
+    width: 200;
+    border-radius: 10;
+    border-color: #D5006D; /* Bright pink for image border */
+}
+
+/* Frame Styling */
+.mainFrame {
+    background-color: white; /* Keep it white for contrast */
+    border-color: #D5006D; /* Bright pink border */
+    corner-radius: 5;
+    padding: 15;
+}
+
+.primaryFrame {
+    background-color: #FCE4EC; /* Light pink for cohesive look */
+    border-color: #D5006D; /* Bright pink border */
+    corner-radius: 8;
+    padding: 10;
+}
+
+/* Button Styling */
+.button-primary {
+    background-color: #D5006D; /* Bright pink */
+    color: #FFFFFF; /* White text */
+    padding: 10 5;
+    corner-radius: 5;
+    font-style: bold;
+}
+
+.button-secondary {
+    background-color: #F8BBD0; /* Lighter pink accent */
+    color: #FFFFFF; /* White text */
+    padding: 8 4;
+    corner-radius: 5;
+    font-style: bold;
+}
+
+/* SideBox Styling */
+.sideBox {
+    margin: 0;
+    padding: 0;
+}
+
+.side-box-frame {
+    margin: 10;
+    padding: 0;
+    background-color: transparent;
+    border-color: transparent;
+    horizontal-options: fill-and-expand;
+}
+
+.side-box-header {
+    background-color: #D5006D; /* Bright pink for header */
+    padding: 10 5;
+}
+
+.side-box-header-text {
+    color: #FFFFFF; /* White text */
+    font-size: 16;
+}
+
+.side-box-content {
+    background-color: #FCE4EC; /* Light pink */
+    padding: 10;
+    height: 200;
+    color: #880E4F; /* Darker pink for readability */
+}
+
+    .side-box-content label {
+        margin: 0;
+        padding: 0;
+    }
+
+.side-box-vertical-stack {
+    spacing: 0;
+}
+
+/* Card Styling */
+.card {
+    background-color: #FCE4EC; /* Light pink */
+    border-color: #D5006D; /* Bright pink */
+    corner-radius: 8

App/RobobinApp/RobobinApp.csproj

@@ -20,7 +20,7 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />
+        <MauiIcon Include="Resources\AppIcon\robobinlogo.png"/>
         <MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />
         <MauiImage Include="Resources\Images\*" />
         <MauiImage Update="Resources\Images\dotnet_bot.png" Resize="True" BaseSize="300,185" />

App/RobobinApp/Views/ConnectionPage.xaml

@@ -2,34 +2,12 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="RobobinApp.Views.ConnectionPage"
-             Title="Connect to Robobin">
+             Title="Connect to Robobin"
+             BackgroundColor="#2B333E">
+    <!-- Apply the CSS stylesheet -->
     <ContentPage.Resources>
         <ResourceDictionary>
-            <Style x:Key="HeaderLabelStyle" TargetType="Label">
-                <Setter Property="FontSize" Value="Medium" />
-                <Setter Property="TextColor" Value="DarkSlateBlue" />
-                <Setter Property="HorizontalOptions" Value="Center" />
-                <Setter Property="VerticalOptions" Value="Start" />
-            </Style>
-
-            <Style x:Key="ButtonStyle" TargetType="Button">
-                <Setter Property="BackgroundColor" Value="LightBlue" />
-                <Setter Property="TextColor" Value="White" />
-                <Setter Property="Padding" Value="10,5" />
-                <Setter Property="CornerRadius" Value="5" />
-                <Setter Property="FontAttributes" Value="Bold" />
-            </Style>
-
- 
-
-            <Style x:Key="ListViewStyle" TargetType="ListView">
-                <Setter Property="BackgroundColor" Value="White" />
-                <Setter Property="SeparatorVisibility" Value="Default" />
-                <Setter Property="SeparatorColor" Value="LightGray" />
-                <Setter Property="SelectedItem" Value="Blue" />
-                <Setter Property="VerticalScrollBarVisibility" Value="Always"/>
-
-            </Style>
+            <StyleSheet Source="/Resources/Styles/appstyle.css" />
         </ResourceDictionary>
     </ContentPage.Resources>
 
@@ -40,18 +18,18 @@
     </ContentPage.MenuBarItems>
 
     <StackLayout Padding="20">
-        <StackLayout IsVisible="{Binding IsBluetoothDeviceSelectionVisible}">
-            <Label Text="Select a Bluetooth Device" 
-                   FontSize="Medium" 
-                   HorizontalOptions="Center" 
-                   VerticalOptions="Start" />
+
+        <!-- Bluetooth Device Selection Stack -->
+        <StackLayout StyleClass="mainBox" IsVisible="{Binding IsBluetoothDeviceSelectionVisible}">
+            <Label StyleClass="mainPageSubtitle" HorizontalOptions="CenterAndExpand" Text="Select a Bluetooth Device" />
 
             <ListView x:Name="DeviceListView"
+                      StyleClass="listView"
                       ItemsSource="{Binding BluetoothDevices}"
                       SelectedItem="{Binding SelectedDevice}"
                       VerticalOptions="FillAndExpand"
-                      ItemTapped="DeviceListView_ItemTapped">
-                      
+                      ItemTapped="DeviceListView_ItemTapped"
+                       HorizontalOptions="CenterAndExpand">
                 <ListView.ItemTemplate>
                     <DataTemplate>
                         <TextCell Text="{Binding Name}" />
@@ -62,39 +40,35 @@
             <Button Text="{Binding ConnectButtonText}"
                     Command="{Binding ConnectCommand}"
                     IsEnabled="{Binding SelectedDevice, Converter={StaticResource NullToBooleanConverter}}"
-                    HorizontalOptions="Center" 
-                    VerticalOptions="End" />
+                    StyleClass="button-primary"
+                    HorizontalOptions="Center" />
         </StackLayout>
 
-        <StackLayout IsVisible="{Binding IsWifiNetworkSelectionVisible}">
-            <Grid Padding="10" HorizontalOptions="FillAndExpand">
+        <!-- WiFi Network Selection Stack -->
+        <StackLayout StyleClass="mainBox" IsVisible="{Binding IsWifiNetworkSelectionVisible}">
+            <Grid Padding="10" HorizontalOptions="CenterAndExpand" StyleClass="primaryFrame">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="*" />
                     <ColumnDefinition Width="Auto" />
                 </Grid.ColumnDefinitions>
 
                 <Label Text="{Binding SelectedDevice.Name}"
-                       FontSize="Medium" 
-                       HorizontalOptions="Start" 
-                       VerticalOptions="Center" 
+                       StyleClass="mainPageTitle"
                        Grid.Column="0" />
 
                 <Button Text="Disconnect"
                         Command="{Binding DisconnectCommand}"
-                        HorizontalOptions="End" 
-                        VerticalOptions="Center" 
+                        StyleClass="button-primary"
                         Grid.Column="1" />
             </Grid>
 
-            <Label Text="Select a WiFi Network" 
-                   FontSize="Medium" 
-                   HorizontalOptions="Center" 
-                   VerticalOptions="Start" />
+            <Label StyleClass="mainPageSubtitle" Text="Select a WiFi Network" />
 
             <ListView x:Name="WifiListView"
                       ItemsSource="{Binding WifiNetworks}"
                       SelectedItem="{Binding SelectedWifiNetwork}"
-                      VerticalOptions="FillAndExpand">
+                      VerticalOptions="FillAndExpand"
+                      HorizontalOptions="CenterAndExpand">
                 <ListView.ItemTemplate>
                     <DataTemplate>
                         <TextCell Text="{Binding SSID}" />
@@ -102,41 +76,31 @@
                 </ListView.ItemTemplate>
             </ListView>
 
-            <StackLayout Padding="10" 
-                         BackgroundColor="LightGray"
-                         HorizontalOptions="FillAndExpand" 
-                         VerticalOptions="Start">
-                <Label Text="Password:" 
-                       FontSize="Medium" 
-                       HorizontalOptions="Start" />
+            <!-- Password Entry for WiFi -->
+            <StackLayout StyleClass="side-box-content">
+                <Label StyleClass="side-box-header-text" Text="Password:" />
                 <Entry x:Name="PasswordEntry"
                        Placeholder="Enter Password"
                        Text="{Binding Password}"
                        IsPassword="True"
                        HorizontalOptions="Fill" />
-
                 <Button Text="Send WiFi Information"
                         Command="{Binding SendWifiInfoCommand}"
-                        HorizontalOptions="Center" 
-                        VerticalOptions="End" />
+                        StyleClass="button-primary"
+                        HorizontalOptions="Center" />
             </StackLayout>
         </StackLayout>
-        <StackLayout Padding="10" 
-             BackgroundColor="Black"
-             HorizontalOptions="FillAndExpand" 
-             VerticalOptions="Start">
-            <Label Text="Admin Panel:" 
-           FontSize="Medium" 
-           HorizontalOptions="Start" />
+
+        <!-- Admin Panel Section -->
+        <StackLayout StyleClass="sideFrame" Padding="10">
+            <Label StyleClass="side-box-header-text" Text="Admin Panel:" />
 
             <Button Text="Test Read Operation"
                     Command="{Binding TestReadOperation}"
-                     HorizontalOptions="Center" 
-                     VerticalOptions="End" />
+                    StyleClass="button-primary" />
             <Button Text="Test Write Operation"
                     Command="{Binding TestWriteOperation}"
-            HorizontalOptions="Center" 
-            VerticalOptions="End" />
+                    StyleClass="button-primary" />
         </StackLayout>
     </StackLayout>
 </ContentPage>

App/RobobinApp/Views/MainPage.xaml

@@ -13,8 +13,6 @@
 
     <ContentPage.Resources>
         <ResourceDictionary>
-            <ResourceDictionary Source="../Resources/Styles/Styles.xaml" />
-      
             <StyleSheet Source="/Resources/Styles/appstyle.css" />
         </ResourceDictionary>
     </ContentPage.Resources>