From 5b2a99ffe552493bf3f682e9e060ef073b93e4ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Burak=20Kaan=20K=C3=B6se?= <bkaankose@outlook.com>
Date: Mon, 16 Mar 2026 15:02:39 +0100
Subject: [PATCH] Dialog improvements.

---
 .../Translations/en_US/resources.json         |  17 ++-
 .../Dialogs/WinoAccountLoginDialog.xaml       | 106 +++++++++++-----
 .../WinoAccountRegistrationDialog.xaml        | 120 +++++++++++++-----
 Wino.Mail.WinUI/ShellWindow.xaml              |   4 +-
 Wino.Mail.WinUI/ShellWindow.xaml.cs           |   2 +
 5 files changed, 184 insertions(+), 65 deletions(-)

diff --git a/Wino.Core.Domain/Translations/en_US/resources.json b/Wino.Core.Domain/Translations/en_US/resources.json
index 235e3a31..97dfd7e4 100644
--- a/Wino.Core.Domain/Translations/en_US/resources.json
+++ b/Wino.Core.Domain/Translations/en_US/resources.json
@@ -1156,10 +1156,23 @@
     "WinoAccount_SignOutButton_Description": "Remove the locally stored Wino Account session.",
     "WinoAccount_SignOutButton_Action": "Sign out",
     "WinoAccount_RegisterDialog_Title": "Create Wino Account",
-    "WinoAccount_RegisterDialog_Description": "Register a new Wino Account using the localhost API.",
+    "WinoAccount_RegisterDialog_Description": "Create a Wino Account to keep your Wino experience in sync and unlock account-based add-ons.",
+    "WinoAccount_RegisterDialog_HeroTitle": "Create your Wino Account",
+    "WinoAccount_RegisterDialog_BenefitsTitle": "Why create one?",
+    "WinoAccount_RegisterDialog_BenefitSyncTitle": "Import and export settings across devices",
+    "WinoAccount_RegisterDialog_BenefitSyncDescription": "Move your Wino preferences between devices without rebuilding your setup from scratch.",
+    "WinoAccount_RegisterDialog_BenefitAiTitle": "Access exclusive add-ons like Wino AI Pack (paid)",
+    "WinoAccount_RegisterDialog_BenefitAiDescription": "Use one account to unlock premium Wino features as they become available.",
+    "WinoAccount_RegisterDialog_DifferenceTitle": "Wino Account is separate from your mail accounts",
+    "WinoAccount_RegisterDialog_DifferenceDescription": "Your Outlook, Gmail, IMAP, or other email accounts stay exactly as they are. A Wino Account only manages Wino-specific features and account-based add-ons.",
     "WinoAccount_RegisterDialog_PrimaryButton": "Register",
     "WinoAccount_LoginDialog_Title": "Sign In to Wino Account",
-    "WinoAccount_LoginDialog_Description": "Sign in using the localhost API.",
+    "WinoAccount_LoginDialog_Description": "Sign in to your Wino Account to sync your Wino setup and access account-based features.",
+    "WinoAccount_LoginDialog_HeroTitle": "Welcome back",
+    "WinoAccount_LoginDialog_BenefitsTitle": "What signing in gives you",
+    "WinoAccount_LoginDialog_BenefitsDescription": "Use your Wino Account to continue syncing settings across devices and to access paid add-ons such as Wino AI Pack.",
+    "WinoAccount_LoginDialog_DifferenceTitle": "This is not your email mailbox sign-in",
+    "WinoAccount_LoginDialog_DifferenceDescription": "Signing in here does not add or replace your Outlook, Gmail, or IMAP accounts in Wino. It only signs you in to Wino-specific services.",
     "WinoAccount_EmailLabel": "Email",
     "WinoAccount_EmailPlaceholder": "name@example.com",
     "WinoAccount_PasswordLabel": "Password",
diff --git a/Wino.Mail.WinUI/Dialogs/WinoAccountLoginDialog.xaml b/Wino.Mail.WinUI/Dialogs/WinoAccountLoginDialog.xaml
index 67cc828e..84e46e40 100644
--- a/Wino.Mail.WinUI/Dialogs/WinoAccountLoginDialog.xaml
+++ b/Wino.Mail.WinUI/Dialogs/WinoAccountLoginDialog.xaml
@@ -7,45 +7,93 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     Title="{x:Bind domain:Translator.WinoAccount_LoginDialog_Title}"
     PrimaryButtonClick="LoginClicked"
+    PrimaryButtonStyle="{ThemeResource AccentButtonStyle}"
     PrimaryButtonText="{x:Bind domain:Translator.Buttons_SignIn}"
     SecondaryButtonText="{x:Bind domain:Translator.Buttons_Cancel}"
     Style="{StaticResource WinoDialogStyle}"
     mc:Ignorable="d">
 
     <ContentDialog.Resources>
-        <x:Double x:Key="ContentDialogMinWidth">440</x:Double>
-        <x:Double x:Key="ContentDialogMaxWidth">440</x:Double>
+        <x:Double x:Key="ContentDialogMinWidth">520</x:Double>
+        <x:Double x:Key="ContentDialogMaxWidth">520</x:Double>
     </ContentDialog.Resources>
 
-    <StackPanel Spacing="12">
-        <TextBlock
-            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-            Text="{x:Bind domain:Translator.WinoAccount_LoginDialog_Description}"
-            TextWrapping="WrapWholeWords" />
+    <ScrollViewer VerticalScrollBarVisibility="Auto">
+        <StackPanel Spacing="16">
+            <Border
+                Padding="14"
+                Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
+                CornerRadius="16">
+                <Grid ColumnSpacing="12">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <FontIcon
+                        FontSize="18"
+                        Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                        Glyph="&#xE8D7;" />
+                    <StackPanel Grid.Column="1" Spacing="4">
+                        <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.WinoAccount_LoginDialog_BenefitsTitle}" />
+                        <TextBlock
+                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                            Text="{x:Bind domain:Translator.WinoAccount_LoginDialog_BenefitsDescription}"
+                            TextWrapping="WrapWholeWords" />
+                    </StackPanel>
+                </Grid>
+            </Border>
 
-        <TextBox
-            x:Name="EmailTextBox"
-            Header="{x:Bind domain:Translator.WinoAccount_EmailLabel}"
-            PlaceholderText="{x:Bind domain:Translator.WinoAccount_EmailPlaceholder}"
-            TextChanging="InputChanged" />
+            <Border
+                Padding="14"
+                Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
+                BorderBrush="{ThemeResource TextFillColorDisabledBrush}"
+                BorderThickness="1"
+                CornerRadius="16">
+                <Grid ColumnSpacing="12">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <FontIcon
+                        FontSize="18"
+                        Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                        Glyph="&#xE946;" />
+                    <StackPanel Grid.Column="1" Spacing="4">
+                        <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.WinoAccount_LoginDialog_DifferenceTitle}" />
+                        <TextBlock
+                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                            Text="{x:Bind domain:Translator.WinoAccount_LoginDialog_DifferenceDescription}"
+                            TextWrapping="WrapWholeWords" />
+                    </StackPanel>
+                </Grid>
+            </Border>
 
-        <PasswordBox
-            x:Name="PasswordBox"
-            Header="{x:Bind domain:Translator.WinoAccount_PasswordLabel}"
-            PasswordChanged="InputChanged" />
+            <StackPanel Spacing="12">
+                <TextBox
+                    x:Name="EmailTextBox"
+                    Header="{x:Bind domain:Translator.WinoAccount_EmailLabel}"
+                    PlaceholderText="{x:Bind domain:Translator.WinoAccount_EmailPlaceholder}"
+                    TextChanging="InputChanged" />
 
-        <ProgressRing
-            x:Name="BusyRing"
-            Width="20"
-            Height="20"
-            HorizontalAlignment="Left"
-            IsActive="False"
-            Visibility="Collapsed" />
+                <PasswordBox
+                    x:Name="PasswordBox"
+                    Header="{x:Bind domain:Translator.WinoAccount_PasswordLabel}"
+                    PasswordChanged="InputChanged" />
+            </StackPanel>
 
-        <TextBlock
-            x:Name="ErrorTextBlock"
-            Foreground="{ThemeResource SystemFillColorCriticalBrush}"
-            TextWrapping="WrapWholeWords"
-            Visibility="Collapsed" />
-    </StackPanel>
+            <ProgressRing
+                x:Name="BusyRing"
+                Width="20"
+                Height="20"
+                HorizontalAlignment="Left"
+                IsActive="False"
+                Visibility="Collapsed" />
+
+            <TextBlock
+                x:Name="ErrorTextBlock"
+                Foreground="{ThemeResource SystemFillColorCriticalBrush}"
+                TextWrapping="WrapWholeWords"
+                Visibility="Collapsed" />
+        </StackPanel>
+    </ScrollViewer>
 </ContentDialog>
diff --git a/Wino.Mail.WinUI/Dialogs/WinoAccountRegistrationDialog.xaml b/Wino.Mail.WinUI/Dialogs/WinoAccountRegistrationDialog.xaml
index 5e879b4a..5f24e133 100644
--- a/Wino.Mail.WinUI/Dialogs/WinoAccountRegistrationDialog.xaml
+++ b/Wino.Mail.WinUI/Dialogs/WinoAccountRegistrationDialog.xaml
@@ -7,50 +7,104 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     Title="{x:Bind domain:Translator.WinoAccount_RegisterDialog_Title}"
     PrimaryButtonClick="RegisterClicked"
+    PrimaryButtonStyle="{ThemeResource AccentButtonStyle}"
     PrimaryButtonText="{x:Bind domain:Translator.WinoAccount_RegisterDialog_PrimaryButton}"
     SecondaryButtonText="{x:Bind domain:Translator.Buttons_Cancel}"
     Style="{StaticResource WinoDialogStyle}"
     mc:Ignorable="d">
 
     <ContentDialog.Resources>
-        <x:Double x:Key="ContentDialogMinWidth">440</x:Double>
-        <x:Double x:Key="ContentDialogMaxWidth">440</x:Double>
+        <x:Double x:Key="ContentDialogMinWidth">560</x:Double>
+        <x:Double x:Key="ContentDialogMaxWidth">560</x:Double>
     </ContentDialog.Resources>
 
-    <StackPanel Spacing="12">
-        <TextBlock
-            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-            Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_Description}"
-            TextWrapping="WrapWholeWords" />
+    <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}" />
 
-        <TextBox
-            x:Name="EmailTextBox"
-            Header="{x:Bind domain:Translator.WinoAccount_EmailLabel}"
-            PlaceholderText="{x:Bind domain:Translator.WinoAccount_EmailPlaceholder}"
-            TextChanging="InputChanged" />
+                <Border
+                    Padding="14"
+                    Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
+                    CornerRadius="16">
+                    <Grid ColumnSpacing="12">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="*" />
+                        </Grid.ColumnDefinitions>
+                        <FontIcon
+                            FontSize="18"
+                            Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                            Glyph="&#xE8D7;" />
+                        <StackPanel Grid.Column="1" Spacing="2">
+                            <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitSyncTitle}" />
+                            <TextBlock
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitSyncDescription}"
+                                TextWrapping="WrapWholeWords" />
+                        </StackPanel>
+                    </Grid>
+                </Border>
 
-        <PasswordBox
-            x:Name="PasswordBox"
-            Header="{x:Bind domain:Translator.WinoAccount_PasswordLabel}"
-            PasswordChanged="InputChanged" />
+                <Border
+                    Padding="14"
+                    Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
+                    CornerRadius="16">
+                    <Grid ColumnSpacing="12">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="*" />
+                        </Grid.ColumnDefinitions>
+                        <FontIcon
+                            FontSize="18"
+                            Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                            Glyph="&#xEA18;" />
+                        <StackPanel Grid.Column="1" Spacing="2">
+                            <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitAiTitle}" />
+                            <TextBlock
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitAiDescription}"
+                                TextWrapping="WrapWholeWords" />
+                        </StackPanel>
+                    </Grid>
+                </Border>
+            </StackPanel>
 
-        <PasswordBox
-            x:Name="ConfirmPasswordBox"
-            Header="{x:Bind domain:Translator.WinoAccount_ConfirmPasswordLabel}"
-            PasswordChanged="InputChanged" />
+            <StackPanel Margin="0,12" Spacing="12">
+                <TextBox
+                    x:Name="EmailTextBox"
+                    Header="{x:Bind domain:Translator.WinoAccount_EmailLabel}"
+                    PlaceholderText="{x:Bind domain:Translator.WinoAccount_EmailPlaceholder}"
+                    TextChanging="InputChanged" />
 
-        <ProgressRing
-            x:Name="BusyRing"
-            Width="20"
-            Height="20"
-            HorizontalAlignment="Left"
-            IsActive="False"
-            Visibility="Collapsed" />
+                <PasswordBox
+                    x:Name="PasswordBox"
+                    Header="{x:Bind domain:Translator.WinoAccount_PasswordLabel}"
+                    PasswordChanged="InputChanged" />
 
-        <TextBlock
-            x:Name="ErrorTextBlock"
-            Foreground="{ThemeResource SystemFillColorCriticalBrush}"
-            TextWrapping="WrapWholeWords"
-            Visibility="Collapsed" />
-    </StackPanel>
+                <PasswordBox
+                    x:Name="ConfirmPasswordBox"
+                    Header="{x:Bind domain:Translator.WinoAccount_ConfirmPasswordLabel}"
+                    PasswordChanged="InputChanged" />
+            </StackPanel>
+
+            <ProgressRing
+                x:Name="BusyRing"
+                Width="20"
+                Height="20"
+                HorizontalAlignment="Left"
+                IsActive="False"
+                Visibility="Collapsed" />
+
+            <TextBlock
+                x:Name="ErrorTextBlock"
+                Foreground="{ThemeResource SystemFillColorCriticalBrush}"
+                TextWrapping="WrapWholeWords"
+                Visibility="Collapsed" />
+        </StackPanel>
+    </ScrollViewer>
 </ContentDialog>
diff --git a/Wino.Mail.WinUI/ShellWindow.xaml b/Wino.Mail.WinUI/ShellWindow.xaml
index 55d2c75d..181d4342 100644
--- a/Wino.Mail.WinUI/ShellWindow.xaml
+++ b/Wino.Mail.WinUI/ShellWindow.xaml
@@ -91,7 +91,9 @@
                         Background="Transparent"
                         BorderBrush="Transparent">
                         <Button.Flyout>
-                            <Flyout Placement="Bottom">
+                            <Flyout
+                                x:Name="WinoAccountFlyout"
+                                Placement="Bottom">
                                 <Grid MinWidth="320" MaxWidth="360">
                                     <StackPanel
                                         x:Name="WinoAccountSignedOutView"
diff --git a/Wino.Mail.WinUI/ShellWindow.xaml.cs b/Wino.Mail.WinUI/ShellWindow.xaml.cs
index e27c82e2..24a4b588 100644
--- a/Wino.Mail.WinUI/ShellWindow.xaml.cs
+++ b/Wino.Mail.WinUI/ShellWindow.xaml.cs
@@ -409,6 +409,7 @@ public sealed partial class ShellWindow : WindowEx, IWinoShellWindow,
 
     private async void RegisterWinoAccountClicked(object sender, RoutedEventArgs e)
     {
+        WinoAccountFlyout.Hide();
         var account = await MailDialogService.ShowWinoAccountRegistrationDialogAsync();
         if (account != null)
         {
@@ -421,6 +422,7 @@ public sealed partial class ShellWindow : WindowEx, IWinoShellWindow,
 
     private async void LoginWinoAccountClicked(object sender, RoutedEventArgs e)
     {
+        WinoAccountFlyout.Hide();
         var account = await MailDialogService.ShowWinoAccountLoginDialogAsync();
         if (account != null)
         {