add IngredientInput and integration in CreateRecipePage

Pages/CreateRecipePage.xaml

@@ -3,10 +3,11 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="ShoopNCook.Pages.CreateRecipePage"
              Title="CreateRecipePage"
+             xmlns:views="clr-namespace:ShoopNCook.Views"
              BackgroundColor="{StaticResource BackgroundPrimary}">
     <Grid
-        RowDefinitions="Auto, Auto, *"
+        RowDefinitions="Auto, *, Auto"
-        Padding="20, 30, 20, 0">
+        Padding="20, 30, 20, 20">
         <!-- Header label and return button -->
         <HorizontalStackLayout
             Grid.Row="0"
@@ -26,41 +27,76 @@
         </HorizontalStackLayout>
 
         <!--Image display and upload button-->
-        <Grid
+        <ScrollView
-            Grid.Row="1"
+            Grid.Row="1">
-            RowDefinitions="Auto">
+            <VerticalStackLayout>
-            <Border
+                <Grid
-                Grid.Row="0"
+                    RowDefinitions="Auto">
-                BackgroundColor="{StaticResource ImageBackground}"
+                    <Border
-                Stroke="White"
+                        Grid.Row="0"
-                StrokeThickness="2"
+                        BackgroundColor="{StaticResource ImageBackground}"
-                StrokeShape="RoundRectangle 25">
+                        Stroke="White"
-                <Image 
+                        StrokeThickness="2"
-                    x:Name="RecipeImage"
+                        StrokeShape="RoundRectangle 25">
-                    HeightRequest="250"/>
+                        <Image 
-            </Border>
+                            x:Name="RecipeImage"
-            <Border
+                            HeightRequest="250"/>
-                Grid.Row="0"
+                    </Border>
-                BackgroundColor="{StaticResource Selected}"
+                    <Border
-                Stroke="White"
+                        Grid.Row="0"
-                StrokeThickness="2"
+                        BackgroundColor="{StaticResource Selected}"
-                StrokeShape="RoundRectangle 200"
+                        Stroke="White"
-                WidthRequest="50"
+                        StrokeThickness="2"
-                HeightRequest="50"
+                        StrokeShape="RoundRectangle 200"
-                HorizontalOptions="End"
+                        WidthRequest="50"
-                VerticalOptions="End"
+                        HeightRequest="50"
-                TranslationY="20"
+                        HorizontalOptions="End"
-                TranslationX="-20">
+                        VerticalOptions="End"
-                <ImageButton
+                        TranslationY="20"
-                    Source="edit.svg"
+                        TranslationX="-20">
-                    WidthRequest="30"
+                        <ImageButton
-                    />
+                        Source="edit.svg"
-            </Border>
+                        WidthRequest="30"/>
-        </Grid>
+                    </Border>
+                </Grid>
+
+                <VerticalStackLayout>
+                    <Entry
+                        Style="{StaticResource UserInput}"
+                        Placeholder="Specify your recipe name"/>
+                    <Label
+                        Style="{StaticResource h2}"
+                        Text="Ingredient list (for 1 person)"/>
+                    <VerticalStackLayout 
+                        x:Name="IngredientList"
+                        Spacing="5">
+                        <views:IngredientInput/>
+                    </VerticalStackLayout>
 
-        <Entry
+                    <HorizontalStackLayout>
-            Style="{StaticResource UserInput}"
+                        <HorizontalStackLayout.GestureRecognizers>
-            Placeholder="Specify your recipe name"/>
+                            <TapGestureRecognizer 
+                                Tapped="OnAddIngredientTapped"
+                                NumberOfTapsRequired="1"/>
+                        </HorizontalStackLayout.GestureRecognizers>
+                        <Label 
+                            Text="+"
+                            TextColor="LightGreen"
+                            FontSize="50"/>
+                        <Label
+                            Margin="0, 10, 0, 0"
+                            Style="{StaticResource h2}"
+                            Text="Add Ingredient"
+                            VerticalTextAlignment="Center"/>
+                    </HorizontalStackLayout>
+                </VerticalStackLayout>
+            </VerticalStackLayout>
+        </ScrollView>
+        <Button
+            Grid.Row="3"
+            Style="{StaticResource UserButton}"
+            BackgroundColor="{StaticResource ActionButton}"
+            Text="Upload recipe"/>
     </Grid>
     
 </ContentPage>

Pages/CreateRecipePage.xaml.cs

@@ -1,3 +1,5 @@
+using ShoopNCook.Views;
+
 namespace ShoopNCook.Pages;
 
 public partial class CreateRecipePage : ContentPage
@@ -6,4 +8,9 @@ public partial class CreateRecipePage : ContentPage
 	{
 		InitializeComponent();
 	}
+
+    private void OnAddIngredientTapped(object sender, TappedEventArgs e)
+    {
+		IngredientList.Children.Add(new IngredientInput());
+    }
 }

ShoopNCook.csproj

@@ -32,10 +32,8 @@
 
 	<ItemGroup>
 		<!-- App Icon -->
-		<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />
 
 		<!-- Splash Screen -->
-		<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />
 
 		<!-- Images -->
 		<MauiImage Include="Resources\Images\*" />
@@ -52,16 +50,18 @@
 	  <None Remove="Resources\Fonts\Poppins-Medium.ttf" />
 	  <None Remove="Resources\Fonts\Poppins-Regular.ttf" />
 	  <None Remove="Resources\Images\cookie.svg" />
-	  <None Remove="Resources\Images\edit.svg" />
 	  <None Remove="Resources\Images\email_icon.svg" />
 	  <None Remove="Resources\Images\facebook_logo.svg" />
 	  <None Remove="Resources\Images\hearth_off.svg" />
 	  <None Remove="Resources\Images\hearth_on.svg" />
+	  <None Remove="Resources\Images\Home.svg" />
+	  <None Remove="Resources\Images\list.svg" />
 	  <None Remove="Resources\Images\logout_arrow.svg" />
 	  <None Remove="Resources\Images\minus.svg" />
 	  <None Remove="Resources\Images\moon_white.svg" />
 	  <None Remove="Resources\Images\email_icon.svg" />
 	  <None Remove="Resources\Images\facebook_logo.svg" />
+	  <None Remove="Resources\Images\more.svg" />
 	  <None Remove="Resources\Images\password_icon.svg" />
 	  <None Remove="Resources\Images\search_options.svg" />
 	  <None Remove="Resources\Images\share.svg" />
@@ -96,12 +96,18 @@
 	  <MauiXaml Update="Pages\CreateRecipePage.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
+	  <MauiXaml Update="Pages\Splash.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	  <MauiXaml Update="Views\CounterView.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
 	  <MauiXaml Update="Views\HeadedButton.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
+	  <MauiXaml Update="Views\IngredientInput.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	  <MauiXaml Update="Views\IngredientView.xaml">
 		  <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>

Views/IngredientInput.xaml

@@ -0,0 +1,62 @@
+<?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.IngredientInput">
+    <Border
+        Stroke="{StaticResource BackgroundSecondary}"
+        StrokeThickness="1"
+        StrokeShape="RoundRectangle 200">
+        
+        <Grid
+            BackgroundColor="{StaticResource BackgroundSecondary}"
+            Padding="9"
+            ColumnDefinitions="2*, *, *"
+            ColumnSpacing="5">
+            <Border
+                Grid.Column="0"
+                Stroke="Transparent"
+                StrokeThickness="0"
+                StrokeShape="RoundRectangle 200"
+                BackgroundColor="LightGray">
+                <Entry 
+                    Style="{StaticResource UserInput}"
+                    Placeholder="Ingredient Name"
+                    HeightRequest="40"/>
+            </Border>
+            <Border
+                Grid.Column="1"
+                Stroke="Transparent"
+                StrokeThickness="0"
+                StrokeShape="RoundRectangle 200"
+                BackgroundColor="LightGray">
+                <Entry 
+                    Style="{StaticResource UserInput}"
+                    Placeholder="Quantity"
+                    HeightRequest="40"/>
+            </Border>
+            <Border
+                Grid.Column="2"
+                Stroke="Transparent"
+                StrokeThickness="0"
+                StrokeShape="RoundRectangle 200"
+                BackgroundColor="LightGray">
+                <Picker
+                    Title="Unit"
+                    TextColor="{StaticResource TextColorPrimary}"
+                    TitleColor="{StaticResource TextColorSecondary}"
+                    FontFamily="PoppinsMedium">
+                    <Picker.ItemsSource>
+                        <x:Array Type="{x:Type x:String}">
+                            <x:String>G</x:String>
+                            <x:String>mG</x:String>
+                            <x:String>kG</x:String>
+
+                            <x:String>L</x:String>
+                            <x:String>cL</x:String>
+                        </x:Array>
+                    </Picker.ItemsSource>
+                </Picker>
+            </Border>   
+    </Grid>
+    </Border>
+</ContentView>

Views/IngredientInput.xaml.cs

@@ -0,0 +1,9 @@
+namespace ShoopNCook.Views;
+
+public partial class IngredientInput : ContentView
+{
+	public IngredientInput()
+	{
+		InitializeComponent();
+	}
+}