Ava UI: Settings Adjustments (#4273)

* Visual adjustments

* Match border to rest of app

* Fix overlapping controls

* Fix

* Fix

Ryujinx.Ava/Assets/Locales/en_US.json

@@ -119,7 +119,7 @@
   "SettingsTabSystemAudioBackendSoundIO": "SoundIO",
   "SettingsTabSystemAudioBackendSDL2": "SDL2",
   "SettingsTabSystemHacks": "Hacks",
-  "SettingsTabSystemHacksNote": " (may cause instability)",
+  "SettingsTabSystemHacksNote": "May cause instability",
   "SettingsTabSystemExpandDramSize": "Use alternative memory layout (Developers)",
   "SettingsTabSystemIgnoreMissingServices": "Ignore Missing Services",
   "SettingsTabGraphics": "Graphics",
@@ -157,7 +157,8 @@
   "SettingsTabLoggingEnableGuestLogs": "Enable Guest Logs",
   "SettingsTabLoggingEnableFsAccessLogs": "Enable Fs Access Logs",
   "SettingsTabLoggingFsGlobalAccessLogMode": "Fs Global Access Log Mode:",
-  "SettingsTabLoggingDeveloperOptions": "Developer Options (WARNING: Will reduce performance)",
+  "SettingsTabLoggingDeveloperOptions": "Developer Options",
+  "SettingsTabLoggingDeveloperOptionsNote": "WARNING: Will reduce performance",
   "SettingsTabLoggingGraphicsBackendLogLevel": "Graphics Backend Log Level:",
   "SettingsTabLoggingGraphicsBackendLogLevelNone": "None",
   "SettingsTabLoggingGraphicsBackendLogLevelError": "Error",

Ryujinx.Ava/Assets/Styles/BaseDark.xaml

@@ -60,5 +60,6 @@
         <Color x:Key="MenuFlyoutPresenterBorderColor">#3D3D3D</Color>
         <Color x:Key="AppListBackgroundColor">#0FFFFFFF</Color>
         <Color x:Key="AppListHoverBackgroundColor">#1EFFFFFF</Color>
+        <Color x:Key="SecondaryTextColor">#A0FFFFFF</Color>
     </Styles.Resources>
 </Styles>

Ryujinx.Ava/Assets/Styles/BaseLight.xaml

@@ -52,5 +52,6 @@
         <Color x:Key="MenuFlyoutPresenterBorderColor">#C1C1C1</Color>
         <Color x:Key="AppListBackgroundColor">#b3ffffff</Color>
         <Color x:Key="AppListHoverBackgroundColor">#80cccccc</Color>
+        <Color x:Key="SecondaryTextColor">#A0000000</Color>
     </Styles.Resources>
 </Styles>

Ryujinx.Ava/Assets/Styles/Styles.xaml

@@ -56,8 +56,8 @@
     <Style Selector="Border.settings">
         <Setter Property="Background" Value="{DynamicResource ThemeDarkColor}" />
         <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutPresenterBorderColor}" />
-        <Setter Property="BorderThickness" Value="2" />
-        <Setter Property="CornerRadius" Value="3" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="CornerRadius" Value="5" />
     </Style>
     <Style Selector="Image.small">
         <Setter Property="Width" Value="50" />
@@ -303,6 +303,9 @@
         <Color x:Key="ThemeControlBorderColor">#FF505050</Color>
         <Color x:Key="VsyncEnabled">#FF2EEAC9</Color>
         <Color x:Key="VsyncDisabled">#FFFF4554</Color>
+        <Color x:Key="AppListBackgroundColor">#0FFFFFFF</Color>
+        <Color x:Key="AppListHoverBackgroundColor">#1EFFFFFF</Color>
+        <Color x:Key="SecondaryTextColor">#A0FFFFFF</Color>
         <x:Double x:Key="ScrollBarThickness">15</x:Double>
         <x:Double x:Key="FontSizeSmall">8</x:Double>
         <x:Double x:Key="FontSizeNormal">10</x:Double>

Ryujinx.Ava/UI/Views/Settings/SettingsLoggingView.axaml

@@ -47,31 +47,34 @@
                               ToolTip.Tip="{locale:Locale ErrorLogTooltip}">
                         <TextBlock Text="{locale:Locale SettingsTabLoggingEnableErrorLogs}" />
                     </CheckBox>
-                    <CheckBox IsChecked="{Binding EnableTrace}"
-                              ToolTip.Tip="{locale:Locale TraceLogTooltip}">
-                        <TextBlock Text="{locale:Locale SettingsTabLoggingEnableTraceLogs}" />
-                    </CheckBox>
                     <CheckBox IsChecked="{Binding EnableGuest}"
                               ToolTip.Tip="{locale:Locale GuestLogTooltip}">
                         <TextBlock Text="{locale:Locale SettingsTabLoggingEnableGuestLogs}" />
                     </CheckBox>
                 </StackPanel>
                 <Separator Height="1" />
+                <StackPanel Orientation="Vertical" Spacing="2">
                     <TextBlock Classes="h1" Text="{locale:Locale SettingsTabLoggingDeveloperOptions}" />
+                    <TextBlock Foreground="{DynamicResource SecondaryTextColor}" Text="{locale:Locale SettingsTabLoggingDeveloperOptionsNote}" />
+                </StackPanel>
                 <StackPanel
                     Margin="10,0,0,0"
                     HorizontalAlignment="Stretch"
                     Orientation="Vertical"
                     Spacing="10">
                     <StackPanel Orientation="Vertical">
-                        <CheckBox IsChecked="{Binding EnableDebug}"
-                                ToolTip.Tip="{locale:Locale DebugLogTooltip}">
-                        <TextBlock Text="{locale:Locale SettingsTabLoggingEnableDebugLogs}" />
+                        <CheckBox IsChecked="{Binding EnableTrace}"
+                                  ToolTip.Tip="{locale:Locale TraceLogTooltip}">
+                            <TextBlock Text="{locale:Locale SettingsTabLoggingEnableTraceLogs}" />
                         </CheckBox>
                         <CheckBox IsChecked="{Binding EnableFsAccessLog}"
                                 ToolTip.Tip="{locale:Locale FileAccessLogTooltip}">
                         <TextBlock Text="{locale:Locale SettingsTabLoggingEnableFsAccessLogs}" />
                         </CheckBox>
+                        <CheckBox IsChecked="{Binding EnableDebug}"
+                                  ToolTip.Tip="{locale:Locale DebugLogTooltip}">
+                            <TextBlock Text="{locale:Locale SettingsTabLoggingEnableDebugLogs}" />
+                        </CheckBox>
                         <StackPanel Margin="0,10,0,0" Orientation="Horizontal" VerticalAlignment="Stretch">
                             <TextBlock VerticalAlignment="Center"
                                     ToolTip.Tip="{locale:Locale FSAccessLogModeTooltip}"

Ryujinx.Ava/UI/Views/Settings/SettingsSystemView.axaml

@@ -172,9 +172,9 @@
                     </CheckBox>
                 </StackPanel>
                 <Separator Height="1" />
-                <StackPanel Orientation="Horizontal">
+                <StackPanel Orientation="Vertical" Spacing="2">
                     <TextBlock Classes="h1" Text="{locale:Locale SettingsTabSystemHacks}" />
-                    <TextBlock Text="{locale:Locale SettingsTabSystemHacksNote}" />
+                    <TextBlock Foreground="{DynamicResource SecondaryTextColor}" Text="{locale:Locale SettingsTabSystemHacksNote}" />
                 </StackPanel>
                 <StackPanel
                     Margin="10,0,0,0"

Ryujinx.Ava/UI/Windows/SettingsWindow.axaml

@@ -44,7 +44,8 @@
             <settings:SettingsNetworkView Name="NetworkPage" />
             <settings:SettingsLoggingView Name="LoggingPage" />
         </Grid>
-        <ui:NavigationView Grid.Row="1"
+        <ui:NavigationView
+            Grid.Row="1"
             IsSettingsVisible="False"
             Name="NavPanel"
             IsBackEnabled="False"
@@ -54,7 +55,8 @@
             HorizontalAlignment="Stretch"
             OpenPaneLength="200">
             <ui:NavigationView.MenuItems>
-                <ui:NavigationViewItem IsSelected="True"
+                <ui:NavigationViewItem
+                    IsSelected="True"
                     Content="{locale:Locale SettingsTabGeneral}"
                     Tag="UiPage"
                     Icon="New" />
@@ -74,7 +76,8 @@
                     Content="{locale:Locale SettingsTabCpu}"
                     Tag="CpuPage">
                     <ui:NavigationViewItem.Icon>
-                        <ui:FontIcon FontFamily="avares://Ryujinx.Ava/Assets/Fonts#Segoe Fluent Icons"
+                        <ui:FontIcon
+                            FontFamily="avares://Ryujinx.Ava/Assets/Fonts#Segoe Fluent Icons"
                             Glyph="{helpers:GlyphValueConverter Chip}" />
                     </ui:NavigationViewItem.Icon>
                 </ui:NavigationViewItem>
@@ -95,6 +98,11 @@
                     Tag="LoggingPage"
                     Icon="Document" />
             </ui:NavigationView.MenuItems>
+            <ui:NavigationView.Styles>
+                <Style Selector="Grid#PlaceholderGrid">
+                    <Setter Property="Height" Value="40" />
+                </Style>
+            </ui:NavigationView.Styles>
         </ui:NavigationView>
         <ReversibleStackPanel
             Grid.Row="2"