Wino-Mail/Wino.Mail.WinUI/Dialogs/WinoAccountLoginDialog.xaml

<ContentDialog
    x:Class="Wino.Dialogs.WinoAccountLoginDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:domain="using:Wino.Core.Domain"
    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">520</x:Double>
        <x:Double x:Key="ContentDialogMaxWidth">520</x:Double>
    </ContentDialog.Resources>

    <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>

            <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>

            <StackPanel Spacing="12">
                <TextBox
                    x:Name="EmailTextBox"
                    Header="{x:Bind domain:Translator.WinoAccount_EmailLabel}"
                    PlaceholderText="{x:Bind domain:Translator.WinoAccount_EmailPlaceholder}"
                    TextChanging="InputChanged" />

                <PasswordBox
                    x:Name="PasswordBox"
                    Header="{x:Bind domain:Translator.WinoAccount_PasswordLabel}"
                    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>