Ava GUI: Several UI Fixes (#3991)

* Fix accessability violations in ListView

* Use accent colour for favourite star

* Hide progress bar when its done

* App Data Formating

- Added space before storage unit
- Changed so minutes have 0 decimals, and hours and days have 1

* Fix theming

* Fix mismatched corner radius

* Fix acceability violations in GridView

* More consistency between Grid and List View

* Fix margin

* Let whitespace defocus controls

Ryujinx.Ava/Assets/Styles/BaseDark.xaml

@@ -58,5 +58,7 @@
         <Color x:Key="SystemChromeWhiteColor">#FFFFFFFF</Color>
         <Color x:Key="ThemeForegroundColor">#FFFFFFFF</Color>
         <Color x:Key="MenuFlyoutPresenterBorderColor">#3D3D3D</Color>
+        <Color x:Key="AppListBackgroundColor">#0FFFFFFF</Color>
+        <Color x:Key="AppListHoverBackgroundColor">#1EFFFFFF</Color>
     </Styles.Resources>
 </Styles>

Ryujinx.Ava/Assets/Styles/BaseLight.xaml

@@ -50,5 +50,7 @@
         <Color x:Key="SystemChromeWhiteColor">#FFFFFFFF</Color>
         <Color x:Key="ThemeForegroundColor">#FF000000</Color>
         <Color x:Key="MenuFlyoutPresenterBorderColor">#C1C1C1</Color>
+        <Color x:Key="AppListBackgroundColor">#b3ffffff</Color>
+        <Color x:Key="AppListHoverBackgroundColor">#80cccccc</Color>
     </Styles.Resources>
 </Styles>

Ryujinx.Ava/Ui/Applet/ErrorAppletWindow.axaml

@@ -11,7 +11,8 @@
     Height="340"
     CanResize="False"
     SizeToContent="Height"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <Grid
         Margin="20"
         HorizontalAlignment="Stretch"

Ryujinx.Ava/Ui/Applet/SwkbdAppletDialog.axaml

@@ -6,7 +6,8 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:window="clr-namespace:Ryujinx.Ava.Ui.Windows"
     Width="400"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <Grid
         Margin="20"
         HorizontalAlignment="Stretch"

Ryujinx.Ava/Ui/Controls/GameGridView.axaml

@@ -10,7 +10,8 @@
     xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <UserControl.Resources>
         <controls:BitmapArrayValueConverter x:Key="ByteImage" />
         <MenuFlyout x:Key="GameContextMenu" Opened="MenuBase_OnMenuOpened">
@@ -113,8 +114,8 @@
                 <Style Selector="ListBoxItem">
                     <Setter Property="Padding" Value="0" />
                     <Setter Property="Margin" Value="5" />
-                    <Setter Property="CornerRadius" Value="5" />
+                    <Setter Property="CornerRadius" Value="4" />
-                    <Setter Property="Background" Value="{DynamicResource SystemAccentColorDark3}" />
+                    <Setter Property="Background" Value="{DynamicResource AppListBackgroundColor}" />
                     <Style.Animations>
                         <Animation Duration="0:0:0.7">
                             <KeyFrame Cue="0%">
@@ -132,27 +133,18 @@
                         </Animation>
                     </Style.Animations>
                 </Style>
+                <Style Selector="ListBoxItem:selected /template/ ContentPresenter">
+                    <Setter Property="Background" Value="{DynamicResource AppListBackgroundColor}" />
+                </Style>
+                <Style Selector="ListBoxItem:pointerover /template/ ContentPresenter">
+                    <Setter Property="Background" Value="{DynamicResource AppListHoverBackgroundColor}" />
+                </Style>
             </ListBox.Styles>
             <ListBox.ItemTemplate>
                 <DataTemplate>
                     <Grid>
-                        <Grid.Styles>
-                            <Style Selector="ui|SymbolIcon.small.icon">
-                                <Setter Property="FontSize" Value="15" />
-                            </Style>
-                            <Style Selector="ui|SymbolIcon.normal.icon">
-                                <Setter Property="FontSize" Value="19" />
-                            </Style>
-                            <Style Selector="ui|SymbolIcon.large.icon">
-                                <Setter Property="FontSize" Value="23" />
-                            </Style>
-                            <Style Selector="ui|SymbolIcon.huge.icon">
-                                <Setter Property="FontSize" Value="26" />
-                            </Style>
-                        </Grid.Styles>
                         <Border
-                            Margin="0"
+                            Margin="10"
-                            Padding="{Binding $parent[UserControl].DataContext.GridItemPadding}"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Classes.huge="{Binding $parent[UserControl].DataContext.IsGridHuge}"
@@ -160,57 +152,41 @@
                             Classes.normal="{Binding $parent[UserControl].DataContext.IsGridMedium}"
                             Classes.small="{Binding $parent[UserControl].DataContext.IsGridSmall}"
                             ClipToBounds="True"
-                            CornerRadius="5">
+                            CornerRadius="4">
-                            <Grid Margin="0">
+                            <Grid>
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height="Auto" />
                                     <RowDefinition Height="Auto" />
                                 </Grid.RowDefinitions>
                                 <Image
                                     Grid.Row="0"
-                                    Margin="0"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Top"
                                     Source="{Binding Icon, Converter={StaticResource ByteImage}}" />
-                                <StackPanel
+                                <Panel
                                     Grid.Row="1"
                                     Height="50"
-                                    Margin="5"
+                                    Margin="0 10 0 0"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
                                     IsVisible="{Binding $parent[UserControl].DataContext.ShowNames}">
                                     <TextBlock
                                         HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Center"
                                         Text="{Binding TitleName}"
                                         TextAlignment="Center"
                                         TextWrapping="Wrap" />
-                                </StackPanel>
+                                </Panel>
                             </Grid>
                         </Border>
                         <ui:SymbolIcon
-                            Margin="5"
+                            Margin="5,5,0,0"
                             HorizontalAlignment="Left"
                             VerticalAlignment="Top"
-                            Classes.huge="{Binding $parent[UserControl].DataContext.IsGridHuge}"
+                            FontSize="16"
-                            Classes.icon="true"
+                            Foreground="{DynamicResource SystemAccentColor}"
-                            Classes.large="{Binding $parent[UserControl].DataContext.IsGridLarge}"
-                            Classes.normal="{Binding $parent[UserControl].DataContext.IsGridMedium}"
-                            Classes.small="{Binding $parent[UserControl].DataContext.IsGridSmall}"
-                            Foreground="Yellow"
                             IsVisible="{Binding Favorite}"
                             Symbol="StarFilled" />
-                        <ui:SymbolIcon
-                            Margin="5"
-                            HorizontalAlignment="Left"
-                            VerticalAlignment="Top"
-                            Classes.huge="{Binding $parent[UserControl].DataContext.IsGridHuge}"
-                            Classes.icon="true"
-                            Classes.large="{Binding $parent[UserControl].DataContext.IsGridLarge}"
-                            Classes.normal="{Binding $parent[UserControl].DataContext.IsGridMedium}"
-                            Classes.small="{Binding $parent[UserControl].DataContext.IsGridSmall}"
-                            Foreground="Black"
-                            IsVisible="{Binding Favorite}"
-                            Symbol="Star" />
                     </Grid>
                 </DataTemplate>
             </ListBox.ItemTemplate>

Ryujinx.Ava/Ui/Controls/GameListView.axaml

@@ -10,7 +10,8 @@
     xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <UserControl.Resources>
         <controls:BitmapArrayValueConverter x:Key="ByteImage" />
         <MenuFlyout x:Key="GameContextMenu" Opened="MenuBase_OnMenuOpened">
@@ -115,8 +116,8 @@
                     <Setter Property="Padding" Value="0" />
                     <Setter Property="Margin" Value="0" />
                     <Setter Property="CornerRadius" Value="5" />
-                    <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColorDark3}" />
+                    <Setter Property="Background" Value="{DynamicResource AppListBackgroundColor}" />
-                    <Setter Property="BorderThickness" Value="2" />
+                    <Setter Property="BorderThickness" Value="2"/>
                     <Style.Animations>
                         <Animation Duration="0:0:0.7">
                             <KeyFrame Cue="0%">
@@ -134,6 +135,12 @@
                         </Animation>
                     </Style.Animations>
                 </Style>
+                <Style Selector="ListBoxItem:selected /template/ ContentPresenter">
+                    <Setter Property="Background" Value="{DynamicResource AppListBackgroundColor}" />
+                </Style>
+                <Style Selector="ListBoxItem:pointerover /template/ ContentPresenter">
+                    <Setter Property="Background" Value="{DynamicResource AppListHoverBackgroundColor}" />
+                </Style>
             </ListBox.Styles>
             <ListBox.ItemTemplate>
                 <DataTemplate>
@@ -152,9 +159,6 @@
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="Auto" />
                                 </Grid.ColumnDefinitions>
-                                <Grid.RowDefinitions>
-                                    <RowDefinition />
-                                </Grid.RowDefinitions>
                                 <Image
                                     Grid.RowSpan="3"
                                     Grid.Column="0"
@@ -169,7 +173,7 @@
                                     HorizontalAlignment="Left"
                                     VerticalAlignment="Top"
                                     Orientation="Vertical"
-                                    Spacing="5">
+                                    Spacing="5" >
                                     <TextBlock
                                         HorizontalAlignment="Stretch"
                                         Text="{Binding TitleName}"
@@ -214,20 +218,10 @@
                                     Margin="-5,-5,0,0"
                                     HorizontalAlignment="Left"
                                     VerticalAlignment="Top"
-                                    FontSize="20"
+                                    FontSize="16"
-                                    Foreground="Yellow"
+                                    Foreground="{DynamicResource SystemAccentColor}"
                                     IsVisible="{Binding Favorite}"
                                     Symbol="StarFilled" />
-                                <ui:SymbolIcon
-                                    Grid.Row="0"
-                                    Grid.Column="0"
-                                    Margin="-5,-5,0,0"
-                                    HorizontalAlignment="Left"
-                                    VerticalAlignment="Top"
-                                    FontSize="20"
-                                    Foreground="Black"
-                                    IsVisible="{Binding Favorite}"
-                                    Symbol="Star" />
                             </Grid>
                         </Border>
                     </Grid>

Ryujinx.Ava/Ui/Controls/InputDialog.axaml

@@ -4,7 +4,8 @@
     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"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <Grid
         Margin="5,10,5,5"
         HorizontalAlignment="Stretch"

Ryujinx.Ava/Ui/Controls/NavigationDialogHost.axaml

@@ -4,7 +4,8 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Ryujinx.Ava.Ui.Controls.NavigationDialogHost">
+             x:Class="Ryujinx.Ava.Ui.Controls.NavigationDialogHost"
+             Focusable="True">
     <ui:Frame HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
               x:Name="ContentFrame" />
 </UserControl>

Ryujinx.Ava/Ui/Controls/ProfileImageSelectionDialog.axaml

@@ -4,7 +4,8 @@
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         xmlns:Locale="clr-namespace:Ryujinx.Ava.Common.Locale"
-        x:Class="Ryujinx.Ava.Ui.Controls.ProfileImageSelectionDialog">
+        x:Class="Ryujinx.Ava.Ui.Controls.ProfileImageSelectionDialog"
+        Focusable="True">
     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="5,10,5, 5">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />

Ryujinx.Ava/Ui/Controls/RendererHost.axaml

@@ -3,5 +3,6 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Ryujinx.Ava.Ui.Controls.RendererHost">
+             x:Class="Ryujinx.Ava.Ui.Controls.RendererHost"
+             Focusable="True">
 </UserControl>

Ryujinx.Ava/Ui/Controls/SaveManager.axaml

@@ -9,7 +9,8 @@
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              Height="400"
              Width="550"
-             x:Class="Ryujinx.Ava.Ui.Controls.SaveManager">
+             x:Class="Ryujinx.Ava.Ui.Controls.SaveManager"
+             Focusable="True">
     <UserControl.Resources>
         <controls:BitmapArrayValueConverter x:Key="ByteImage" />
     </UserControl.Resources>

Ryujinx.Ava/Ui/Controls/UpdateWaitWindow.axaml

@@ -8,7 +8,8 @@
     Title="Ryujinx - Waiting"
     SizeToContent="WidthAndHeight"
     WindowStartupLocation="CenterOwner"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <Grid
         Margin="20"
         HorizontalAlignment="Stretch"

Ryujinx.Ava/Ui/Controls/UserEditor.axaml

@@ -12,7 +12,8 @@
     Margin="0"
     MinWidth="500"
     Padding="0"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <UserControl.Resources>
         <controls:BitmapArrayValueConverter x:Key="ByteImage" />
     </UserControl.Resources>

Ryujinx.Ava/Ui/Controls/UserRecoverer.axaml

@@ -10,7 +10,8 @@
              xmlns:Locale="clr-namespace:Ryujinx.Ava.Common.Locale"
              xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
              xmlns:viewModels="clr-namespace:Ryujinx.Ava.Ui.ViewModels"
-             x:Class="Ryujinx.Ava.Ui.Controls.UserRecoverer">
+             x:Class="Ryujinx.Ava.Ui.Controls.UserRecoverer"
+             Focusable="True">
     <Design.DataContext>
         <viewModels:UserProfileViewModel />
     </Design.DataContext>

Ryujinx.Ava/Ui/Controls/UserSelector.axaml

@@ -12,7 +12,8 @@
     d:DesignHeight="450"
     MinWidth="500"
     d:DesignWidth="800"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <UserControl.Resources>
         <controls:BitmapArrayValueConverter x:Key="ByteImage" />
     </UserControl.Resources>

Ryujinx.Ava/Ui/ViewModels/MainWindowViewModel.cs

@@ -435,9 +435,7 @@ namespace Ryujinx.Ava.Ui.ViewModels
                 OnPropertyChanged();
             }
         }
-
+        
-        public Thickness GridItemPadding => ShowNames ? new Thickness() : new Thickness(5);
-
         public bool ShowMenuAndStatusBar
         {
             get => _showMenuAndStatusBar;
@@ -599,7 +597,6 @@ namespace Ryujinx.Ava.Ui.ViewModels
                 ConfigurationState.Instance.Ui.ShowNames.Value = value;
 
                 OnPropertyChanged();
-                OnPropertyChanged(nameof(GridItemPadding));
                 OnPropertyChanged(nameof(GridSizeScale));
 
                 ConfigurationState.Instance.ToFileFormat().SaveConfig(Program.ConfigurationPath);
@@ -716,7 +713,6 @@ namespace Ryujinx.Ava.Ui.ViewModels
                 OnPropertyChanged(nameof(IsGridLarge));
                 OnPropertyChanged(nameof(IsGridHuge));
                 OnPropertyChanged(nameof(ShowNames));
-                OnPropertyChanged(nameof(GridItemPadding));
 
                 ConfigurationState.Instance.ToFileFormat().SaveConfig(Program.ConfigurationPath);
             }
@@ -780,6 +776,11 @@ namespace Ryujinx.Ava.Ui.ViewModels
                 {
                     _owner.LoadProgressBar.IsVisible = false;
                 }
+
+                if (e.NumAppsLoaded == e.NumAppsFound)
+                {
+                    _owner.LoadProgressBar.IsVisible = false;
+                }
             });
         }
 

Ryujinx.Ava/Ui/Windows/AboutWindow.axaml

@@ -15,7 +15,8 @@
     CanResize="False"
     SizeToContent="Width"
     WindowStartupLocation="CenterOwner"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
 	<Grid
         Margin="15"
         HorizontalAlignment="Stretch"

Ryujinx.Ava/Ui/Windows/AmiiboWindow.axaml

@@ -11,7 +11,8 @@
                         WindowStartupLocation="CenterOwner"
                         Width="800" MinHeight="650" Height="650"
                         SizeToContent="Manual"
-                        MinWidth="600">
+                        MinWidth="600"
+                        Focusable="True">
     <Design.DataContext>
         <viewModels:AmiiboWindowViewModel />
     </Design.DataContext>

Ryujinx.Ava/Ui/Windows/AvatarWindow.axaml

@@ -11,7 +11,8 @@
         xmlns:viewModels="clr-namespace:Ryujinx.Ava.Ui.ViewModels"
         xmlns:controls="clr-namespace:Ryujinx.Ava.Ui.Controls"
         x:CompileBindings="True"
-        x:DataType="viewModels:AvatarProfileViewModel">
+        x:DataType="viewModels:AvatarProfileViewModel"
+        Focusable="True">
     <Design.DataContext>
         <viewModels:AvatarProfileViewModel />
     </Design.DataContext>

Ryujinx.Ava/Ui/Windows/CheatWindow.axaml

@@ -12,7 +12,8 @@
     MinWidth="500"
     MinHeight="500"
     WindowStartupLocation="CenterOwner"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <Window.Styles>
         <Style Selector="TreeViewItem">
             <Setter Property="IsExpanded" Value="True" />

Ryujinx.Ava/Ui/Windows/ContentDialogOverlayWindow.axaml

@@ -8,7 +8,8 @@
                         xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
                         x:Class="Ryujinx.Ava.Ui.Windows.ContentDialogOverlayWindow"
                         xmlns:window="clr-namespace:Ryujinx.Ava.Ui.Windows"
-                        Title="ContentDialogOverlayWindow">
+                        Title="ContentDialogOverlayWindow"
+                        Focusable="True">
     <window:StyleableWindow.Styles>
         <Style Selector="ui|ContentDialog /template/ Panel#LayoutRoot">
             <Setter Property="Background"

Ryujinx.Ava/Ui/Windows/ControllerSettingsWindow.axaml

@@ -13,7 +13,8 @@
     d:DesignHeight="800"
     d:DesignWidth="800"
     x:CompileBindings="False"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <Design.DataContext>
         <viewModels:ControllerSettingsViewModel />
     </Design.DataContext>

Ryujinx.Ava/Ui/Windows/DownloadableContentManagerWindow.axaml

@@ -14,7 +14,8 @@
     MaxHeight="500"
     SizeToContent="Height"
     WindowStartupLocation="CenterOwner"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <Grid Name="DownloadableContentGrid" Margin="15">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />

Ryujinx.Ava/Ui/Windows/MainWindow.axaml

@@ -20,7 +20,8 @@
     x:CompileBindings="True"
     x:DataType="viewModels:MainWindowViewModel"
     WindowStartupLocation="CenterScreen"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <Window.Styles>
         <Style Selector="TitleBar:fullscreen">
             <Setter Property="Background" Value="#000000" />

Ryujinx.Ava/Ui/Windows/MotionSettingsWindow.axaml

@@ -6,7 +6,8 @@
              xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
              xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
              mc:Ignorable="d"
-             x:Class="Ryujinx.Ava.Ui.Windows.MotionSettingsWindow">
+             x:Class="Ryujinx.Ava.Ui.Windows.MotionSettingsWindow"
+             Focusable="True">
     <Grid Margin="10">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />

Ryujinx.Ava/Ui/Windows/RumbleSettingsWindow.axaml

@@ -6,7 +6,8 @@
              xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
              xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
              mc:Ignorable="d"
-             x:Class="Ryujinx.Ava.Ui.Windows.RumbleSettingsWindow">
+             x:Class="Ryujinx.Ava.Ui.Windows.RumbleSettingsWindow"
+             Focusable="True">
     <Grid Margin="10">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />

Ryujinx.Ava/Ui/Windows/SettingsWindow.axaml

@@ -18,7 +18,8 @@
     WindowStartupLocation="CenterOwner"
     x:CompileBindings="True"
     x:DataType="viewModels:SettingsViewModel"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <Design.DataContext>
         <viewModels:SettingsViewModel />
     </Design.DataContext>

Ryujinx.Ava/Ui/Windows/TitleUpdateWindow.axaml

@@ -14,7 +14,8 @@
     MaxHeight="400"
     SizeToContent="Height"
     WindowStartupLocation="CenterOwner"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    Focusable="True">
     <Grid Margin="15">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />

Ryujinx.Ui.Common/App/ApplicationLibrary.cs

@@ -467,7 +467,7 @@ namespace Ryujinx.Ui.App.Common
                         TimePlayed = ConvertSecondsToReadableString(appMetadata.TimePlayed),
                         LastPlayed = appMetadata.LastPlayed,
                         FileExtension = Path.GetExtension(applicationPath).ToUpper().Remove(0, 1),
-                        FileSize = (fileSize < 1) ? (fileSize * 1024).ToString("0.##") + "MiB" : fileSize.ToString("0.##") + "GiB",
+                        FileSize = (fileSize < 1) ? (fileSize * 1024).ToString("0.##") + " MiB" : fileSize.ToString("0.##") + " GiB",
                         Path = applicationPath,
                         ControlHolder = controlHolder
                     };
@@ -742,19 +742,19 @@ namespace Ryujinx.Ui.App.Common
 
             if (seconds < secondsPerMinute)
             {
-                readableString = $"{seconds}s";
+                readableString = $"{seconds} seconds";
             }
             else if (seconds < secondsPerHour)
             {
-                readableString = $"{Math.Round(seconds / secondsPerMinute, 2, MidpointRounding.AwayFromZero)} mins";
+                readableString = $"{Math.Round(seconds / secondsPerMinute, 0, MidpointRounding.AwayFromZero)} minutes";
             }
             else if (seconds < secondsPerDay)
             {
-                readableString = $"{Math.Round(seconds / secondsPerHour, 2, MidpointRounding.AwayFromZero)} hrs";
+                readableString = $"{Math.Round(seconds / secondsPerHour, 1, MidpointRounding.AwayFromZero)} hours";
             }
             else
             {
-                readableString = $"{Math.Round(seconds / secondsPerDay, 2, MidpointRounding.AwayFromZero)} days";
+                readableString = $"{Math.Round(seconds / secondsPerDay, 1, MidpointRounding.AwayFromZero)} days";
             }
 
             return readableString;