Redesign Wino Account login and registration dialogs (#835)
Add hero illustrations using XAML-native vector graphics (shield+lock for login, person+plus badge for registration). Improve visual design with gradient backgrounds, icon badges on benefit cards, and refined spacing/corner radii. Add Enter key handling so pressing Enter in an input field moves focus to the next field, and pressing Enter on the last field triggers the primary action (login/register). https://claude.ai/code/session_011B1M6UVeo4yUX3zNHBxQ2P Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Burak Kaan Köse
@@ -19,31 +19,187 @@
|
||||
</ContentDialog.Resources>
|
||||
|
||||
<ScrollViewer VerticalScrollBarVisibility="Auto">
|
||||
<StackPanel Spacing="4">
|
||||
<Image
|
||||
Width="64"
|
||||
Height="64"
|
||||
Source="/Assets/AppEntries/MailAssets/LargeTile.png" />
|
||||
<StackPanel Spacing="10">
|
||||
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitsTitle}" />
|
||||
<StackPanel Spacing="20">
|
||||
|
||||
<!-- Hero illustration area -->
|
||||
<Border
|
||||
Height="140"
|
||||
CornerRadius="12">
|
||||
<Border.Background>
|
||||
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
|
||||
<GradientStop Offset="0" Color="#1A818CF8" />
|
||||
<GradientStop Offset="0.5" Color="#20A78BFA" />
|
||||
<GradientStop Offset="1" Color="#1AE879F9" />
|
||||
</LinearGradientBrush>
|
||||
</Border.Background>
|
||||
<Canvas>
|
||||
<!-- Background decorative circles -->
|
||||
<Ellipse
|
||||
Canvas.Left="370"
|
||||
Canvas.Top="-10"
|
||||
Width="90"
|
||||
Height="90"
|
||||
Opacity="0.12">
|
||||
<Ellipse.Fill>
|
||||
<RadialGradientBrush>
|
||||
<GradientStop Offset="0" Color="#A78BFA" />
|
||||
<GradientStop Offset="1" Color="Transparent" />
|
||||
</RadialGradientBrush>
|
||||
</Ellipse.Fill>
|
||||
</Ellipse>
|
||||
<Ellipse
|
||||
Canvas.Left="30"
|
||||
Canvas.Top="90"
|
||||
Width="70"
|
||||
Height="70"
|
||||
Opacity="0.1">
|
||||
<Ellipse.Fill>
|
||||
<RadialGradientBrush>
|
||||
<GradientStop Offset="0" Color="#38BDF8" />
|
||||
<GradientStop Offset="1" Color="Transparent" />
|
||||
</RadialGradientBrush>
|
||||
</Ellipse.Fill>
|
||||
</Ellipse>
|
||||
|
||||
<!-- Person/account illustration -->
|
||||
<Canvas Canvas.Left="200" Canvas.Top="12">
|
||||
<!-- Circular badge background -->
|
||||
<Ellipse
|
||||
Canvas.Left="8"
|
||||
Canvas.Top="8"
|
||||
Width="80"
|
||||
Height="80"
|
||||
Opacity="0.9">
|
||||
<Ellipse.Fill>
|
||||
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
|
||||
<GradientStop Offset="0" Color="#818CF8" />
|
||||
<GradientStop Offset="1" Color="#6366F1" />
|
||||
</LinearGradientBrush>
|
||||
</Ellipse.Fill>
|
||||
</Ellipse>
|
||||
<!-- Inner circle -->
|
||||
<Ellipse
|
||||
Canvas.Left="14"
|
||||
Canvas.Top="14"
|
||||
Width="68"
|
||||
Height="68"
|
||||
Opacity="0.35">
|
||||
<Ellipse.Fill>
|
||||
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
|
||||
<GradientStop Offset="0" Color="#C7D2FE" />
|
||||
<GradientStop Offset="1" Color="#A5B4FC" />
|
||||
</LinearGradientBrush>
|
||||
</Ellipse.Fill>
|
||||
</Ellipse>
|
||||
<!-- Person head -->
|
||||
<Ellipse
|
||||
Canvas.Left="34"
|
||||
Canvas.Top="24"
|
||||
Width="28"
|
||||
Height="28"
|
||||
Fill="White" />
|
||||
<!-- Person body -->
|
||||
<Path
|
||||
Data="M28 68 A20 16 0 0 1 68 68"
|
||||
Fill="White" />
|
||||
|
||||
<!-- Plus badge -->
|
||||
<Ellipse
|
||||
Canvas.Left="62"
|
||||
Canvas.Top="62"
|
||||
Width="28"
|
||||
Height="28">
|
||||
<Ellipse.Fill>
|
||||
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
|
||||
<GradientStop Offset="0" Color="#4ADE80" />
|
||||
<GradientStop Offset="1" Color="#16A34A" />
|
||||
</LinearGradientBrush>
|
||||
</Ellipse.Fill>
|
||||
</Ellipse>
|
||||
<!-- Plus sign -->
|
||||
<Rectangle
|
||||
Canvas.Left="73"
|
||||
Canvas.Top="70"
|
||||
Width="4"
|
||||
Height="16"
|
||||
Fill="White"
|
||||
RadiusX="2"
|
||||
RadiusY="2" />
|
||||
<Rectangle
|
||||
Canvas.Left="69"
|
||||
Canvas.Top="74"
|
||||
Width="12"
|
||||
Height="4"
|
||||
Fill="White"
|
||||
RadiusX="2"
|
||||
RadiusY="2" />
|
||||
</Canvas>
|
||||
|
||||
<!-- Decorative sparkles -->
|
||||
<Ellipse
|
||||
Canvas.Left="140"
|
||||
Canvas.Top="35"
|
||||
Width="6"
|
||||
Height="6"
|
||||
Fill="#A78BFA"
|
||||
Opacity="0.5" />
|
||||
<Ellipse
|
||||
Canvas.Left="350"
|
||||
Canvas.Top="55"
|
||||
Width="5"
|
||||
Height="5"
|
||||
Fill="#38BDF8"
|
||||
Opacity="0.6" />
|
||||
<Ellipse
|
||||
Canvas.Left="120"
|
||||
Canvas.Top="95"
|
||||
Width="4"
|
||||
Height="4"
|
||||
Fill="#6EE7B7"
|
||||
Opacity="0.4" />
|
||||
<Ellipse
|
||||
Canvas.Left="380"
|
||||
Canvas.Top="105"
|
||||
Width="4"
|
||||
Height="4"
|
||||
Fill="#F472B6"
|
||||
Opacity="0.5" />
|
||||
</Canvas>
|
||||
</Border>
|
||||
|
||||
<!-- Benefits section -->
|
||||
<StackPanel Spacing="8">
|
||||
<TextBlock
|
||||
Margin="0,0,0,4"
|
||||
Style="{StaticResource BodyStrongTextBlockStyle}"
|
||||
Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitsTitle}" />
|
||||
|
||||
<Border
|
||||
Padding="14"
|
||||
Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
|
||||
CornerRadius="16">
|
||||
CornerRadius="12">
|
||||
<Grid ColumnSpacing="12">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border
|
||||
Width="36"
|
||||
Height="36"
|
||||
Background="{ThemeResource AccentFillColorDefaultBrush}"
|
||||
CornerRadius="8"
|
||||
Opacity="0.15" />
|
||||
<FontIcon
|
||||
FontSize="18"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="16"
|
||||
Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
|
||||
Glyph="" />
|
||||
<StackPanel Grid.Column="1" Spacing="2">
|
||||
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitSyncTitle}" />
|
||||
<TextBlock
|
||||
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
|
||||
Style="{StaticResource CaptionTextBlockStyle}"
|
||||
Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitSyncDescription}"
|
||||
TextWrapping="WrapWholeWords" />
|
||||
</StackPanel>
|
||||
@@ -53,20 +209,29 @@
|
||||
<Border
|
||||
Padding="14"
|
||||
Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
|
||||
CornerRadius="16">
|
||||
CornerRadius="12">
|
||||
<Grid ColumnSpacing="12">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border
|
||||
Width="36"
|
||||
Height="36"
|
||||
Background="{ThemeResource AccentFillColorDefaultBrush}"
|
||||
CornerRadius="8"
|
||||
Opacity="0.15" />
|
||||
<FontIcon
|
||||
FontSize="18"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="16"
|
||||
Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
|
||||
Glyph="" />
|
||||
<StackPanel Grid.Column="1" Spacing="2">
|
||||
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitAiTitle}" />
|
||||
<TextBlock
|
||||
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
|
||||
Style="{StaticResource CaptionTextBlockStyle}"
|
||||
Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitAiDescription}"
|
||||
TextWrapping="WrapWholeWords" />
|
||||
</StackPanel>
|
||||
@@ -74,21 +239,25 @@
|
||||
</Border>
|
||||
</StackPanel>
|
||||
|
||||
<StackPanel Margin="0,12" Spacing="12">
|
||||
<!-- Input fields -->
|
||||
<StackPanel Spacing="12">
|
||||
<TextBox
|
||||
x:Name="EmailTextBox"
|
||||
Header="{x:Bind domain:Translator.WinoAccount_EmailLabel}"
|
||||
KeyDown="EmailTextBox_KeyDown"
|
||||
PlaceholderText="{x:Bind domain:Translator.WinoAccount_EmailPlaceholder}"
|
||||
TextChanging="InputChanged" />
|
||||
|
||||
<PasswordBox
|
||||
x:Name="PasswordBox"
|
||||
Header="{x:Bind domain:Translator.WinoAccount_PasswordLabel}"
|
||||
KeyDown="PasswordBox_KeyDown"
|
||||
PasswordChanged="InputChanged" />
|
||||
|
||||
<PasswordBox
|
||||
x:Name="ConfirmPasswordBox"
|
||||
Header="{x:Bind domain:Translator.WinoAccount_ConfirmPasswordLabel}"
|
||||
KeyDown="ConfirmPasswordBox_KeyDown"
|
||||
PasswordChanged="InputChanged" />
|
||||
</StackPanel>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user