diff --git a/App/RobobinApp/App.xaml b/App/RobobinApp/App.xaml
index d16152ef3d93c455be9278fb402f10f99b4d270a..5398a5c5b0d2d7bbe949ed0a700f28875febd0bd 100644
--- a/App/RobobinApp/App.xaml
+++ b/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>
diff --git a/App/RobobinApp/MauiProgram.cs b/App/RobobinApp/MauiProgram.cs
index b66f82981c8bdc5d55ccb433a06170cb82b54883..a93f4f103dda4724a89d64b40ed0debac55aa3b3 100644
--- a/App/RobobinApp/MauiProgram.cs
+++ b/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");
});
diff --git a/App/RobobinApp/Resources/AppIcon/RobobinLogo.png b/App/RobobinApp/Resources/AppIcon/RobobinLogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..f22f9630a604d4823e7bdd5ff576f0af86627b8e
Binary files /dev/null and b/App/RobobinApp/Resources/AppIcon/RobobinLogo.png differ
diff --git a/App/RobobinApp/Resources/Fonts/Cabal-w5j3.ttf b/App/RobobinApp/Resources/Fonts/Cabal-w5j3.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..9fd9424d853bf8f07d9d433d2d80313ce47261cc
Binary files /dev/null and b/App/RobobinApp/Resources/Fonts/Cabal-w5j3.ttf differ
diff --git a/App/RobobinApp/Resources/Styles/Styles.xaml b/App/RobobinApp/Resources/Styles/Styles.xaml
index e36989d610ef5890fb013dbb59847436ea28ac59..32b7bb86d5a850e7bd97bf69cada4cfb28f161a2 100644
--- a/App/RobobinApp/Resources/Styles/Styles.xaml
+++ b/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"/>
diff --git a/App/RobobinApp/Resources/Styles/appstyle.css b/App/RobobinApp/Resources/Styles/appstyle.css
index a9bc772656825194cb59212fa56c349c693d78b6..3716a8e80171e2a50d070858e2d9c21e1fbca98c 100644
--- a/App/RobobinApp/Resources/Styles/appstyle.css
+++ b/App/RobobinApp/Resources/Styles/appstyle.css
@@ -1,15 +1,15 @@
-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;
@@ -75,7 +112,7 @@ stacklayout > image {
}
.side-box-header {
- background-color: #647687;
+ background-color: #647687;
padding: 10 5;
}
@@ -88,13 +125,35 @@ stacklayout > image {
background-color: #E8EDF1;
padding: 10;
height: 200;
+ color: #2B333E;
}
- .side-box-content Label {
+ .side-box-content label {
margin: 0;
padding: 0;
}
.side-box-vertical-stack {
spacing: 0;
-}
\ No newline at end of file
+}
+
+
+.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;
+}
diff --git a/App/RobobinApp/Resources/Styles/appstylepink.css b/App/RobobinApp/Resources/Styles/appstylepink.css
new file mode 100644
index 0000000000000000000000000000000000000000..0586142a5eb7b36dff2c48c049e32c93e2ac9359
--- /dev/null
+++ b/App/RobobinApp/Resources/Styles/appstylepink.css
@@ -0,0 +1,146 @@
+/* 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
diff --git a/App/RobobinApp/RobobinApp.csproj b/App/RobobinApp/RobobinApp.csproj
index 68992df409300d334a0a8a7f12bf5d38ec02d003..269654ee8a872fa5db8767e0e3107a610257078a 100644
--- a/App/RobobinApp/RobobinApp.csproj
+++ b/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" />
diff --git a/App/RobobinApp/Views/ConnectionPage.xaml b/App/RobobinApp/Views/ConnectionPage.xaml
index 42521cba7d7f8b4eb79dc65f00242ec742021430..b690ba31c2b7772ffc48a326b82eac57c1bfaf7c 100644
--- a/App/RobobinApp/Views/ConnectionPage.xaml
+++ b/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}" />
@@ -59,42 +37,38 @@
</ListView.ItemTemplate>
</ListView>
- <Button Text="{Binding ConnectButtonText}"
- Command="{Binding ConnectCommand}"
- IsEnabled="{Binding SelectedDevice, Converter={StaticResource NullToBooleanConverter}}"
- HorizontalOptions="Center"
- VerticalOptions="End" />
+ <Button Text="{Binding ConnectButtonText}"
+ Command="{Binding ConnectCommand}"
+ IsEnabled="{Binding SelectedDevice, Converter={StaticResource NullToBooleanConverter}}"
+ 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"
+ <Label Text="{Binding SelectedDevice.Name}"
+ StyleClass="mainPageTitle"
Grid.Column="0" />
- <Button Text="Disconnect"
- Command="{Binding DisconnectCommand}"
- HorizontalOptions="End"
- VerticalOptions="Center"
+ <Button Text="Disconnect"
+ Command="{Binding DisconnectCommand}"
+ 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" />
- <Entry x:Name="PasswordEntry"
- Placeholder="Enter Password"
- Text="{Binding Password}"
- IsPassword="True"
+ <!-- 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" />
+ <Button Text="Send WiFi Information"
+ Command="{Binding SendWifiInfoCommand}"
+ StyleClass="button-primary"
+ HorizontalOptions="Center" />
</StackLayout>
</StackLayout>
- <StackLayout Padding="10"
- BackgroundColor="Black"
- HorizontalOptions="FillAndExpand"
- VerticalOptions="Start">
- <Label Text="Admin Panel:"
- FontSize="Medium"
- HorizontalOptions="Start" />
- <Button Text= "Test Read Operation"
- Command="{Binding TestReadOperation}"
- HorizontalOptions="Center"
- VerticalOptions="End" />
- <Button Text="Test Write Operation"
- Command="{Binding TestWriteOperation}"
- HorizontalOptions="Center"
- VerticalOptions="End" />
+ <!-- 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}"
+ StyleClass="button-primary" />
+ <Button Text="Test Write Operation"
+ Command="{Binding TestWriteOperation}"
+ StyleClass="button-primary" />
</StackLayout>
</StackLayout>
</ContentPage>
diff --git a/App/RobobinApp/Views/MainPage.xaml b/App/RobobinApp/Views/MainPage.xaml
index f5007a27db554aa1841729f8881964036b47d25b..3e6da28f53518d2e1788a4bccc728ed440d04996 100644
--- a/App/RobobinApp/Views/MainPage.xaml
+++ b/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>