add headed button and add buttons in the more page

Pages/MorePage.xaml

@@ -3,6 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="ShoopNCook.Pages.MorePage"
              BackgroundColor="{StaticResource BackgroundPrimary}"
+             xmlns:views="clr-namespace:ShoopNCook.Views"
              Title="MorePage">
     <Grid
         RowDefinitions="Auto, *"
@@ -29,25 +30,11 @@
             Grid.Row="1"
             VerticalOptions="Center"
             Margin="40, 0, 0, 0">
-            <HorizontalStackLayout>
+            <views:HeadedButton Text="My Recipes" HeadSource="cookie.svg" HeadColor="#FF5441"/>
-                <Border
+            <views:HeadedButton Text="Edit Profile" HeadSource="user_fill.svg" HeadColor="#FF5441"/>
-                    BackgroundColor="#FF5441"
+            <views:HeadedButton Text="Dark Mode" HeadSource="moon_white.svg" HeadColor="#FF5441"/>
-                    Stroke="Transparent"
+            <views:HeadedButton Text="Share App" HeadSource="share.svg" HeadColor="#FF5441"/>
-                    StrokeShape="RoundRectangle 250"
+            <views:HeadedButton Text="Logout" HeadSource="logout_arrow.svg" HeadColor="#FF5441"/>
-                    Padding="5">
-                    <ImageButton
-                        MaximumWidthRequest="30"
-                        MaximumHeightRequest="30"
-                        Source="cookie.svg"/>
-                </Border>
-                <Label
-                    Margin="20, 0, 0, 0"
-                    Text="My recipes"
-                    VerticalTextAlignment="Center"
-                    FontFamily="Poppins"
-                    FontSize="16"
-                    TextColor="{StaticResource TextColorPrimary}"/>
-            </HorizontalStackLayout>
         </VerticalStackLayout>
     </Grid>
 </ContentPage>

Resources/Images/share.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7821 3.04977C15.2529 1.22653 13.7808 0.000759829 12.1198 0.000759829C11.0616 0.000759829 9.99429 0.446733 9.1908 1.22509C8.48601 1.90729 8.04507 3.05364 8.02077 3.11724C8.01383 3.13844 8.00688 3.15813 7.99994 3.17479C7.99161 3.15434 7.98258 3.13011 7.97355 3.1021C7.9548 3.05364 7.51388 1.90729 6.80906 1.22433C6.00567 0.445973 4.93847 0 3.88007 0C2.2184 0 0.74772 1.22509 0.218521 3.04901C-0.717506 6.27537 1.38925 10.2443 5.8527 13.6659C6.45681 14.1292 7.51437 14.8417 7.55951 14.8728C7.68102 14.9546 7.83726 15 7.99975 15C8.16224 15 8.31848 14.9546 8.44069 14.8728C8.48583 14.8425 9.54268 14.1293 10.1468 13.6659C14.611 10.2451 16.7171 6.27595 15.7817 3.04959L15.7821 3.04977Z" fill="white"/>
+</svg>

Resources/Images/user_fill.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.15916 6.8975C9.09848 6.8975 10.6706 5.35344 10.6706 3.44875C10.6706 1.54406 9.09848 0 7.15916 0C5.21984 0 3.64771 1.54406 3.64771 3.44875C3.64771 5.35344 5.21984 6.8975 7.15916 6.8975Z" fill="white"/>
+<path d="M7.15905 8.62128C3.64451 8.62128 0.79541 11.4195 0.79541 14.8713H13.5227C13.5227 11.4195 10.6736 8.62128 7.15905 8.62128Z" fill="white"/>
+</svg>

ShoopNCook.csproj

@@ -62,9 +62,11 @@
 	  <None Remove="Resources\Images\password_icon.svg" />
 	  <None Remove="Resources\Images\plus.svg" />
 	  <None Remove="Resources\Images\search_options.svg" />
+	  <None Remove="Resources\Images\share.svg" />
 	  <None Remove="Resources\Images\star_empty.svg" />
 	  <None Remove="Resources\Images\star_full.svg" />
 	  <None Remove="Resources\Images\user.svg" />
+	  <None Remove="Resources\Images\user_fill.svg" />
 	  <None Remove="Resources\Images\visibility_off.svg" />
 	  <None Remove="Resources\Images\visibility_on.svg" />
 	</ItemGroup>
@@ -83,6 +85,9 @@
 	</ItemGroup>
 
 	<ItemGroup>
+	  <MauiXaml Update="Views\HeadedButton.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	  <MauiXaml Update="Views\IngredientView.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>

Views/HeadedButton.xaml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="ShoopNCook.Views.HeadedButton"
+             x:Name="HeadedBtn">
+    <HorizontalStackLayout>
+        <Border
+            x:Name="PrefixBorder"
+            BackgroundColor="{Binding HeadColor, Source={x:Reference HeadedBtn}}"
+            Stroke="Transparent"
+            StrokeShape="RoundRectangle 250"
+            Padding="10">
+            <ImageButton
+                x:Name="PrefixImage"
+                WidthRequest="25"
+                HeightRequest="25"
+                Source="{Binding HeadSource, Source={x:Reference HeadedBtn}}"/>
+        </Border>
+        <Label
+            x:Name="BtnLabel"
+            Margin="20, 0, 0, 0"
+            Text="{Binding Text, Source={x:Reference HeadedBtn}}"
+            VerticalTextAlignment="Center"
+            FontFamily="Poppins"
+            FontSize="16"
+            TextColor="{StaticResource TextColorPrimary}"/>
+    </HorizontalStackLayout>
+</ContentView>

Views/HeadedButton.xaml.cs

@@ -0,0 +1,39 @@
+using System.Xml.Linq;
+
+namespace ShoopNCook.Views;
+
+public partial class HeadedButton : ContentView
+{
+
+    private readonly BindableProperty TextProperty =
+        BindableProperty.Create("Text", typeof(string), typeof(HeadedButton), "No Text Defined.");
+
+    private readonly BindableProperty HeadColorProperty =
+        BindableProperty.Create("HeadColor", typeof(string), typeof(HeadedButton), "#FFFFFF");
+
+    private readonly BindableProperty HeadSourceProperty =
+        BindableProperty.Create("HeadSource", typeof(string), typeof(HeadedButton), default(string));
+
+    public string Text
+    {
+        get => (string)GetValue(TextProperty);
+        set => SetValue(TextProperty, value);
+    }
+
+    public string HeadColor
+    {
+        get => (string)GetValue(HeadColorProperty);
+        set => SetValue(HeadColorProperty, value);
+    }
+
+    public string HeadSource
+    {
+        get => (string)GetValue(HeadSourceProperty);
+        set => SetValue(HeadSourceProperty, value);
+    }
+
+    public HeadedButton()
+	{
+		InitializeComponent();
+	}
+}

Views/IngredientView.xaml.cs

@@ -3,13 +3,13 @@ namespace ShoopNCook.Views;
 public partial class IngredientView : ContentView
 {
 
-    public static readonly BindableProperty NameProperty =
+    private readonly BindableProperty NameProperty =
         BindableProperty.Create(nameof(Name), typeof(string), typeof(IngredientView), default(string));
 
-    public static readonly BindableProperty QuantityProperty =
+    private readonly BindableProperty QuantityProperty =
         BindableProperty.Create(nameof(Quantity), typeof(float), typeof(IngredientView), default(float));
 
-    public static readonly BindableProperty UnitProperty =
+    private readonly BindableProperty UnitProperty =
         BindableProperty.Create(nameof(Unit), typeof(string), typeof(IngredientView), default(string));
 
     public string Name