add register page #25

Merged
maxime.batista merged 2 commits from xaml/register into master 2 years ago

@ -24,6 +24,10 @@
ContentTemplate="{DataTemplate views:SearchPage}"
Route="Search" />
<ShellContent
Title="Register Page"
ContentTemplate="{DataTemplate views:RegisterPage}"
Route="Register" />
<ShellContent
Title="Recipe Page"
ContentTemplate="{DataTemplate views:RecipePage}"

@ -1 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M140.109 912.674q-30.746 0-54.025-23.447-23.28-23.447-23.28-53.857V316.63q0-30.509 23.28-54.026 23.279-23.517 54.025-23.517h679.782q30.845 0 54.194 23.517 23.35 23.517 23.35 54.026v518.74q0 30.41-23.35 53.857-23.349 23.447-54.194 23.447H140.109ZM480 609.304 140.109 387.065V835.37h679.782V387.065L480 609.304Zm0-73.152L818.696 316.63H142.304L480 536.152ZM137.304 387.065V316.63v518.74H140.109h-2.805V387.065Z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4" d="M14.3898 7.13428L10.8353 9.99617C10.1626 10.5236 9.21964 10.5236 8.54696 9.99617L4.96191 7.13428" stroke="#6A6A6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.73997 2.5H13.5966C14.7294 2.51271 15.8076 2.99161 16.5801 3.82517C17.3526 4.65873 17.7519 5.77419 17.6851 6.91176V12.3517C17.7519 13.4892 17.3526 14.6047 16.5801 15.4383C15.8076 16.2718 14.7294 16.7507 13.5966 16.7634H5.73997C3.30672 16.7634 1.66675 14.7839 1.66675 12.3517V6.91176C1.66675 4.47954 3.30672 2.5 5.73997 2.5Z" stroke="#6A6A6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 512 B

After

Width:  |  Height:  |  Size: 770 B

@ -1 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="48" viewBox="0 96 960 960" width="48"><path d="M220.63 997.043q-32.19 0-54.747-22.556-22.557-22.557-22.557-54.748v-432.5q0-32.624 22.557-55.084 22.557-22.459 54.747-22.459h56.805v-90.739q0-85.228 59.245-144.636 59.246-59.408 143.234-59.408 83.989 0 143.32 59.408 59.331 59.408 59.331 144.636v90.739h56.805q32.289 0 54.916 22.459 22.627 22.46 22.627 55.084v432.5q0 32.191-22.627 54.748-22.627 22.556-54.916 22.556H220.63Zm0-77.304h518.74v-432.5H220.63v432.5Zm259.618-133.522q34.035 0 57.817-23.514 23.783-23.514 23.783-56.534 0-32.082-24.031-57.984-24.03-25.902-58.065-25.902t-57.817 25.947q-23.783 25.947-23.783 58.48 0 32.631 24.031 56.069 24.03 23.438 58.065 23.438ZM354.739 409.696h250.522v-90.684q0-53.389-36.478-89.972-36.478-36.583-88.727-36.583-52.248 0-88.782 36.583-36.535 36.583-36.535 89.972v90.684ZM220.63 919.739v-432.5 432.5Z"/></svg>
<svg width="22" height="28" viewBox="0 0 22 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.33333 9.45H5C2.79086 9.45 1 11.2409 1 13.45V23C1 25.2091 2.79086 27 5 27H17C19.2091 27 21 25.2091 21 23V13.45C21 11.2409 19.2091 9.45 17 9.45H15.6667M6.33333 9.45V5.66667C6.33333 3.08934 8.42267 1 11 1V1C13.5773 1 15.6667 3.08934 15.6667 5.66667V9.45M6.33333 9.45H15.6667" stroke="#6A6A6A"/>
<ellipse cx="11.0003" cy="18.2248" rx="3.33333" ry="3.25" stroke="#6A6A6A"/>
</svg>

Before

Width:  |  Height:  |  Size: 911 B

After

Width:  |  Height:  |  Size: 485 B

@ -0,0 +1,4 @@
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5C15 7.76142 12.7614 11.25 10 11.25C7.23858 11.25 5 7.76142 5 5C5 2.23858 7.23858 0 10 0C12.7614 0 15 2.23858 15 5ZM13.5 5C13.5 6.01681 13.0706 7.27163 12.3317 8.26571C11.5816 9.27479 10.7261 9.75 10 9.75C9.27389 9.75 8.41837 9.27479 7.66833 8.26571C6.92944 7.27163 6.5 6.01681 6.5 5C6.5 3.067 8.067 1.5 10 1.5C11.933 1.5 13.5 3.067 13.5 5Z" fill="#6A6A6A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 21.1818C0 16.6631 3.66313 13 8.18182 13H11.9474C16.3947 13 20 16.6053 20 21.0526C20 21.5758 19.5758 22 19.0526 22H0.818182C0.366313 22 0 21.6337 0 21.1818ZM8.18182 14.5H11.9474C15.3802 14.5 18.1964 17.1397 18.477 20.5H1.53436C1.87591 17.13 4.72173 14.5 8.18182 14.5Z" fill="#6A6A6A"/>
</svg>

After

Width:  |  Height:  |  Size: 852 B

@ -43,6 +43,7 @@
<Color x:Key="BackgroundPrimary">#efefef</Color>
<Color x:Key="BackgroundSecondary">White</Color>
<Color x:Key="ButtonText">White</Color>
<Color x:Key="TextColorPrimary">Black</Color>
<Color x:Key="TextColorSecondary">#6d6d6d</Color>

@ -6,11 +6,28 @@
<Style TargetType="Border"
x:Key="SecondaryBorder">
<Setter Property="StrokeShape" Value="RoundRectangle 20"/>
<Setter Property="StrokeShape" Value="RoundRectangle 25"/>
<Setter Property="Stroke" Value="{StaticResource BackgroundSecondary}"/>
<Setter Property="BackgroundColor" Value="{StaticResource BackgroundSecondary}"/>
</Style>
<Style TargetType="Border"
x:Key="SecondaryBorderShadow">
<Setter Property="StrokeShape" Value="RoundRectangle 25"/>
<Setter Property="Stroke" Value="{StaticResource BackgroundSecondary}"/>
<Setter Property="BackgroundColor" Value="{StaticResource BackgroundSecondary}"/>
<Setter Property="Shadow">
<Setter.Value>
<Shadow
Brush="Gray"
Offset="20, 20"
Radius="40"
Opacity="0.5"/>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Entry"
x:Key="UserInput">
<Setter Property="TextColor" Value="{StaticResource TextColorPrimary}"/>

@ -2,7 +2,7 @@
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ShoopNCook.Views.LoginPage"
Title="LoginPage"
Title="Login"
BackgroundColor="{StaticResource BackgroundPrimary}">
<VerticalStackLayout
Margin="20, 75, 20, 20">
@ -24,7 +24,7 @@
HorizontalOptions="Start" />
<Border
Style="{StaticResource SecondaryBorder}"
Style="{StaticResource SecondaryBorderShadow}"
Margin="0,30,0,20">
<Grid
Padding="5"
@ -43,7 +43,7 @@
</Border>
<Border
Style="{StaticResource SecondaryBorder}"
Style="{StaticResource SecondaryBorderShadow}"
>
<Grid
Padding="5"
@ -68,21 +68,19 @@
<Label
TextColor="{StaticResource TextColorSecondary}"
HorizontalOptions="End">
Forgot Password ?
</Label>
HorizontalOptions="End"
Text="Forgot Password ?"
BackgroundColor="Transparent"/>
<Border
Margin="0, 30, 0, 0"
Stroke="{StaticResource BackgroundPrimary}"
StrokeShape="RoundRectangle 12">
<Label
HeightRequest="50"
BackgroundColor="{StaticResource ActionButton}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center">
LOG IN</Label>
<Button
BackgroundColor="{StaticResource Selected}"
FontFamily="PoppinsMedium"
TextColor="{StaticResource ButtonText}"
Text="LOG IN"/>
</Border>
<HorizontalStackLayout

@ -2,12 +2,12 @@
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ShoopNCook.Views.ProfilePage"
Title="ProfilePage"
Title="Profile"
BackgroundColor="{StaticResource BackgroundPrimary}">
<ScrollView>
<Grid
Margin="20"
Padding="20"
RowDefinitions="Auto, Auto, Auto, *">
<!-- Profile label and return button -->
@ -72,7 +72,7 @@
<!-- User inputs -->
<Grid
Grid.Row="2"
Margin="0, 20, 0, 0"
Padding="0, 20, 0, 0"
RowDefinitions="Auto, *, Auto, *">
<Label
Grid.Row="0"
@ -82,7 +82,7 @@
<Border
Grid.Row="1"
Style="{StaticResource SecondaryBorder}">
Style="{StaticResource SecondaryBorderShadow}">
<Entry
Style="{StaticResource UserInput}"
Text="%Profile_Name%"
@ -97,7 +97,7 @@
<Border
Grid.Row="3"
Style="{StaticResource SecondaryBorder}">
Style="{StaticResource SecondaryBorderShadow}">
<Entry
Style="{StaticResource UserInput}"
Text="%Profile_Mail%"
@ -118,12 +118,10 @@
Margin="0, 30, 0, 0"
Stroke="{StaticResource BackgroundPrimary}"
StrokeShape="RoundRectangle 12">
<Label
HeightRequest="50"
<Button
BackgroundColor="{StaticResource ActionButton}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontFamily="PoppinsBold"
FontFamily="PoppinsMedium"
TextColor="White"
Text="SAVE"/>
</Border>
</VerticalStackLayout>

@ -20,8 +20,7 @@
Direction="Row"
JustifyContent="SpaceBetween"
AlignContent="Center"
AlignItems="Center"
>
AlignItems="Center">
<ImageButton
Source="arrow_back.svg"/>
<Label

@ -5,8 +5,8 @@
<Border
StrokeShape="RoundRectangle 30"
Stroke="Transparent">
Style="{StaticResource SecondaryBorderShadow}"
StrokeShape="RoundRectangle 30">
<Grid
BackgroundColor="{StaticResource BackgroundSecondary}"
@ -30,11 +30,7 @@
TextColor="{StaticResource TextColorSecondary}"
Text="Preparation time"/>
</VerticalStackLayout>
</Grid>
</Border>
</ContentView>

@ -0,0 +1,165 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ShoopNCook.Views.RegisterPage"
Title="Register"
BackgroundColor="{StaticResource BackgroundPrimary}">
<ScrollView>
<VerticalStackLayout
Padding="20, 50, 20, 20">
<Label
FontFamily="PoppinsBold"
Text="Register Account"
FontSize="32"
TextColor="{StaticResource TextColorPrimary}"
FontAttributes="Bold"
VerticalOptions="Start"
HorizontalOptions="Start" />
<Label
Text="Fill in your credentials or continue with social media"
FontFamily="PoppinsBold"
FontSize="20"
TextColor="{StaticResource TextColorSecondary}"
VerticalOptions="Start"
HorizontalOptions="Start" />
<Border
Style="{StaticResource SecondaryBorderShadow}"
Margin="0,30,0,20">
<Grid
Padding="5"
BackgroundColor="{StaticResource BackgroundSecondary}"
ColumnDefinitions="Auto,Auto,*">
<Image
Grid.Column="1"
Source="user.svg">
</Image>
<Entry
Style="{StaticResource UserInput}"
Grid.Column="2"
Placeholder="User Name"/>
</Grid>
</Border>
<Border
Style="{StaticResource SecondaryBorderShadow}"
Margin="0,0,0,20">
<Grid
Padding="5"
BackgroundColor="{StaticResource BackgroundSecondary}"
ColumnDefinitions="Auto,Auto,*">
<Image
Grid.Column="1"
Source="email_icon.svg">
</Image>
<Entry
Style="{StaticResource UserInput}"
Grid.Column="2"
Placeholder="Mail address"/>
</Grid>
</Border>
<Border
Style="{StaticResource SecondaryBorderShadow}">
<Grid
Padding="5"
BackgroundColor="{StaticResource BackgroundSecondary}"
ColumnDefinitions="Auto,Auto,*,Auto">
<Image
Grid.Column="1"
Source="password_icon.svg"/>
<Entry
Style="{StaticResource UserInput}"
Grid.Column="2"
Placeholder="Password"/>
<ImageButton
Grid.Column="3"
Source="visibility_off.svg"
HeightRequest="30"/>
</Grid>
</Border>
<Label
TextColor="{StaticResource TextColorSecondary}"
HorizontalOptions="End">
Forgot Password ?
</Label>
<Border
Margin="0, 30, 0, 0"
Stroke="{StaticResource BackgroundPrimary}"
StrokeShape="RoundRectangle 12">
<Button
BackgroundColor="{StaticResource ActionButton}"
FontFamily="PoppinsMedium"
TextColor="White"
Text="SIGN UP"/>
</Border>
<HorizontalStackLayout
HorizontalOptions="Center"
Margin="0, 20, 0, 0"
Spacing="6">
<Rectangle
BackgroundColor="Gray"
WidthRequest="15"
HeightRequest="3"/>
<Label
TextColor="{StaticResource TextColorSecondary}">
Or continue with</Label>
<Rectangle
BackgroundColor="Gray"
WidthRequest="15"
HeightRequest="3"/>
</HorizontalStackLayout>
<HorizontalStackLayout
Margin="0, 20, 0, 0"
Spacing="15"
HorizontalOptions="Center">
<Border
HeightRequest="75"
WidthRequest="75"
BackgroundColor="#e9f4ff"
StrokeShape="RoundRectangle 25 25 25 25"
Stroke="{StaticResource BackgroundPrimary}">
<Image
HeightRequest="50"
Source="google_logo.svg"/>
</Border>
<Border
HeightRequest="75"
WidthRequest="75"
BackgroundColor="#4460a0"
StrokeShape="RoundRectangle 25 25 25 25"
Stroke="{StaticResource BackgroundPrimary}">
<Image
WidthRequest="40"
Source="facebook_logo.svg"/>
</Border>
</HorizontalStackLayout>
<HorizontalStackLayout
Spacing="4"
HorizontalOptions="Center"
Margin="0, 20, 0, 0">
<Label
TextColor="{StaticResource TextColorPrimary}">
Already have an account ?</Label>
<Label
FontAttributes="Bold"
TextColor="{StaticResource TextColorPrimary}">
Log In</Label>
</HorizontalStackLayout>
</VerticalStackLayout>
</ScrollView>
</ContentPage>

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

@ -6,7 +6,7 @@
Title="SearchPage"
BackgroundColor="{StaticResource BackgroundPrimary}">
<Grid
Margin="20"
Margin="20, 20, 20, 0"
RowDefinitions="Auto, Auto, Auto, Auto, *"
RowSpacing="10">
@ -40,14 +40,14 @@
ColumnDefinitions="5*, *">
<Border
Grid.Column="0"
Style="{StaticResource SecondaryBorder}">
Style="{StaticResource SecondaryBorderShadow}">
<Entry
Style="{StaticResource UserInput}"
Placeholder="Cake, Lasagna, Vegetarian..."/>
</Border>
<Border
Style="{StaticResource SecondaryBorder}"
Style="{StaticResource SecondaryBorderShadow}"
Grid.Column="1"
BackgroundColor="{StaticResource ActionButton}"
Stroke="{StaticResource ActionButton}">
@ -92,8 +92,6 @@
</Grid>
<!-- Search result items -->
<ScrollView
Grid.Row="4">
<FlexLayout
@ -101,8 +99,8 @@
AlignItems="Start"
AlignContent="Start"
Direction="Row"
Wrap="Wrap">
<views:RecipeView Margin="5"/>
<views:RecipeView Margin="5"/>
<views:RecipeView Margin="5"/>

Loading…
Cancel
Save