Artemis/src/Artemis.UI/Screens/Settings/Updating/ReleaseDetailsView.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:updating="clr-namespace:Artemis.UI.Screens.Settings.Updating"
             xmlns:shared="clr-namespace:Artemis.UI.Shared.Converters;assembly=Artemis.UI.Shared"
             xmlns:converters="clr-namespace:Artemis.UI.Converters"
             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
             xmlns:mdxaml="https://github.com/whistyun/Markdown.Avalonia.Tight"
             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1400"
             x:Class="Artemis.UI.Screens.Settings.Updating.ReleaseDetailsView"
             x:DataType="updating:ReleaseDetailsViewModel">
    <UserControl.Resources>
        <shared:BytesToStringConverter x:Key="BytesToStringConverter" />
        <converters:SubstringConverter x:Key="SubstringConverter" />
        <converters:DateTimeConverter x:Key="DateTimeConverter" />
    </UserControl.Resources>
    <UserControl.Styles>
        <Style Selector="Grid.info-container">
            <Setter Property="Margin" Value="10" />
        </Style>
        <Style Selector="avalonia|MaterialIcon.info-icon">
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="Margin" Value="0 3 10 0" />
        </Style>
        <Style Selector="TextBlock.info-title">
            <Setter Property="Margin" Value="0 0 0 5" />
            <Setter Property="Opacity" Value="0.8" />
        </Style>
        <Style Selector="TextBlock.info-body">
        </Style>
        <Style Selector="TextBlock.info-link">
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Foreground" Value="{DynamicResource SystemAccentColorLight3}" />
        </Style>
        <Style Selector="TextBlock.info-link:pointerover">
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Foreground" Value="{DynamicResource SystemAccentColorLight1}" />
        </Style>
    </UserControl.Styles>

    <Grid RowDefinitions="Auto,*">
        <Border Grid.Row="0" Classes="card" Margin="0 0 0 10">
            <StackPanel>
                <Grid ColumnDefinitions="*,Auto">
                    <TextBlock Theme="{StaticResource SubtitleTextBlockStyle}">Release info</TextBlock>

                    <Panel Grid.Column="1" IsVisible="{CompiledBinding InstallationAvailable}">
                        <!-- Install progress -->
                        <Grid ColumnDefinitions="*,*"
                              RowDefinitions="*,*"
                              IsVisible="{CompiledBinding InstallationInProgress}">
                            <ProgressBar Grid.Column="0"
                                         Grid.Row="0"
                                         Width="300"
                                         Value="{CompiledBinding ReleaseInstaller.Progress, FallbackValue=0}">
                            </ProgressBar>
                            <TextBlock Grid.Column="0"
                                       Grid.Row="1"
                                       Classes="subtitle"
                                       TextAlignment="Right"
                                       Text="{CompiledBinding ReleaseInstaller.Status, FallbackValue=Installing}" />
                            <Button Grid.Column="1" Grid.Row="0" Grid.RowSpan="2"
                                    Classes="accent"
                                    Margin="15 0 0 0"
                                    Width="80"
                                    VerticalAlignment="Center"
                                    Command="{CompiledBinding CancelInstall}">
                                Cancel
                            </Button>
                        </Grid>

                        <Panel IsVisible="{CompiledBinding !InstallationInProgress}" HorizontalAlignment="Right">
                            <!-- Install button -->
                            <Button Classes="accent"
                                    Width="80"
                                    Command="{CompiledBinding Install}"
                                    IsVisible="{CompiledBinding !InstallationFinished}">
                                Install
                            </Button>

                            <!-- Restart button -->
                            <Grid ColumnDefinitions="*,*" IsVisible="{CompiledBinding InstallationFinished}">
                                <TextBlock Grid.Column="0"
                                           Grid.Row="0"
                                           Classes="subtitle"
                                           TextAlignment="Right"
                                           VerticalAlignment="Center">
                                    Ready, restart to install
                                </TextBlock>
                                <Button Grid.Column="1" Grid.Row="0"
                                        Classes="accent"
                                        Margin="15 0 0 0"
                                        Width="80"
                                        Command="{CompiledBinding Restart}"
                                        IsVisible="{CompiledBinding InstallationFinished}">
                                    Restart
                                </Button>
                            </Grid>
                        </Panel>
                    </Panel>

                </Grid>
                <Border Classes="card-separator" />
                <Grid Margin="-5 -10" ColumnDefinitions="*,*,*">
                    <Grid Grid.Column="0" ColumnDefinitions="*,*" RowDefinitions="*,*,*" Classes="info-container" HorizontalAlignment="Left">
                        <avalonia:MaterialIcon Kind="Calendar" Grid.Column="0" Grid.RowSpan="2" Classes="info-icon" />
                        <TextBlock Grid.Column="1" Grid.Row="0" Classes="info-title">Release date</TextBlock>
                        <TextBlock Grid.Column="1"
                                   Grid.Row="1"
                                   Classes="info-body"
                                   Text="{CompiledBinding Release.CreatedAt, Converter={StaticResource DateTimeConverter}, FallbackValue=Loading...}" />
                    </Grid>

                    <Grid Grid.Column="1" ColumnDefinitions="*,*" RowDefinitions="*,*" Classes="info-container" HorizontalAlignment="Center">
                        <avalonia:MaterialIcon Kind="Git" Grid.Column="0" Grid.RowSpan="2" Classes="info-icon" />
                        <TextBlock Grid.Column="1" Grid.Row="0" Classes="info-title">Source</TextBlock>
                        <TextBlock Grid.Column="1"
                                   Grid.Row="1"
                                   Classes="info-body info-link"
                                   Cursor="Hand"
                                   PointerReleased="InputElement_OnPointerReleased"
                                   Text="{CompiledBinding Release.Commit, Converter={StaticResource SubstringConverter}, ConverterParameter=7, FallbackValue=Loading...}" />
                    </Grid>

                    <Grid Grid.Column="2" ColumnDefinitions="*,*" RowDefinitions="*,*" Classes="info-container" HorizontalAlignment="Right">
                        <avalonia:MaterialIcon Kind="File" Grid.Column="0" Grid.RowSpan="2" Classes="info-icon" />
                        <TextBlock Grid.Column="1" Grid.Row="0" Classes="info-title">File size</TextBlock>
                        <TextBlock Grid.Column="1"
                                   Grid.Row="1"
                                   Classes="info-body"
                                   Text="{CompiledBinding FileSize, Converter={StaticResource BytesToStringConverter}, Mode=OneWay, FallbackValue=Loading...}" />
                    </Grid>
                </Grid>

            </StackPanel>
        </Border>

        <Border Grid.Row="1" Classes="card">
            <Grid RowDefinitions="Auto,Auto,*">
                <TextBlock Grid.Row="0" Classes="h5 no-margin">Release notes</TextBlock>
                <Border Grid.Row="1" Classes="card-separator" />

                <mdxaml:MarkdownScrollViewer Grid.Row="2" Markdown="{CompiledBinding Release.Changelog}" MarkdownStyleName="FluentAvalonia">
                    <mdxaml:MarkdownScrollViewer.Styles>
                        <StyleInclude Source="/Styles/Markdown.axaml"/>
                    </mdxaml:MarkdownScrollViewer.Styles>
                </mdxaml:MarkdownScrollViewer>
            </Grid>
        </Border>
    </Grid>
</UserControl>