Theme Rework

ReleaseNotes.md

@@ -1,4 +1,4 @@
-# Update 2.1
+# Update 2.3
 
 ## Download and Install
 
@@ -12,25 +12,13 @@ Download [**WoWsShipBuilderSetup.exe**](https://github.com/WoWs-Builder-Team/WoW
 <summary>Click to show release notes</summary>
 
 ### Additions
-- Penetration values for AP bombs and rockets
-- Display Krupp for AP projectiles
-- Add checks to prevent corrupted builds to be loaded
 
 ### Changes
-- Update penetration formula with the one reverse engineered by TTaro_
-- Remove measurements units from grid headers in the ship comparison and add them to the cells
-- Stats expanders now do not take extra vertical space when expanded
-- Various other minor improvements
+- Theme Rework: A complete overhaul for the existing app theme with new accent colors and an improved color palette
+  - The new theme follows the [Material Design](https://material.io/design) guidelines
+  - Better contrast for text and icons
+  - New accent colors for the app, the app is no longer just grey
 
 ### Bugfixes
-- Fix AA Defense and ASW Expert consumable bonus not applying correctly
-- Fix app crashing after language selection
-- Fix scrolling in desktop settings dialog
-- Fix stats column space distribution for subs
-- Fix special ability description of some ships
-- Various other minor fixes
 
-### Known Issues
-- None
-
-</details>
+</details>

WoWsShipBuilder.Common/Features/AccelerationCharts/AccelerationCharts.razor

@@ -46,29 +46,29 @@
         @Localizer.GetAppLocalization(nameof(Translation.AccelerationChart_CustomDataTitle)).Localization
     </MudButton>
     <MudDivider Vertical FlexItem Light/>
-    <MudSelect Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" T="int" Value="@firstGear" Label="Initial Gear" ValueChanged="@(value => UpdateThrottle(0, value))">
-        <MudSelectItem Value="AccelerationCalculator.FullReverse"> <MudText Color="Color.Secondary">-1</MudText></MudSelectItem>
-        <MudSelectItem Value="AccelerationCalculator.Zero"><MudText Color="Color.Secondary">0</MudText></MudSelectItem>
-        <MudSelectItem Value="AccelerationCalculator.OneQuarter"><MudText Color="Color.Secondary">1/4</MudText></MudSelectItem>
-        <MudSelectItem Value="AccelerationCalculator.Half"><MudText Color="Color.Secondary">2/4</MudText></MudSelectItem>
-        <MudSelectItem Value="AccelerationCalculator.ThreeQuarter"><MudText Color="Color.Secondary">3/4</MudText></MudSelectItem>
-        <MudSelectItem Value="AccelerationCalculator.FullAhead"><MudText Color="Color.Secondary">4/4</MudText></MudSelectItem>
+    <MudSelect Class="default-label-background" Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" T="int" Value="@firstGear" Label="Initial Gear" ValueChanged="@(value => UpdateThrottle(0, value))">
+        <MudSelectItem Value="AccelerationCalculator.FullReverse"> <MudText Color="Color.Default">-1</MudText></MudSelectItem>
+        <MudSelectItem Value="AccelerationCalculator.Zero"><MudText Color="Color.Default">0</MudText></MudSelectItem>
+        <MudSelectItem Value="AccelerationCalculator.OneQuarter"><MudText Color="Color.Default">1/4</MudText></MudSelectItem>
+        <MudSelectItem Value="AccelerationCalculator.Half"><MudText Color="Color.Default">2/4</MudText></MudSelectItem>
+        <MudSelectItem Value="AccelerationCalculator.ThreeQuarter"><MudText Color="Color.Default">3/4</MudText></MudSelectItem>
+        <MudSelectItem Value="AccelerationCalculator.FullAhead"><MudText Color="Color.Default">4/4</MudText></MudSelectItem>
     </MudSelect>
-    <MudSelect Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" T="int" Value="@secondGear" Label="Middle Gear" ValueChanged="@(value => UpdateThrottle(1, value))">
-       <MudSelectItem Value="AccelerationCalculator.FullReverse"> <MudText Color="Color.Secondary">-1</MudText></MudSelectItem>
-       <MudSelectItem Value="AccelerationCalculator.Zero"><MudText Color="Color.Secondary">0</MudText></MudSelectItem>
-       <MudSelectItem Value="AccelerationCalculator.OneQuarter"><MudText Color="Color.Secondary">1/4</MudText></MudSelectItem>
-       <MudSelectItem Value="AccelerationCalculator.Half"><MudText Color="Color.Secondary">2/4</MudText></MudSelectItem>
-       <MudSelectItem Value="AccelerationCalculator.ThreeQuarter"><MudText Color="Color.Secondary">3/4</MudText></MudSelectItem>
-       <MudSelectItem Value="AccelerationCalculator.FullAhead"><MudText Color="Color.Secondary">4/4</MudText></MudSelectItem>
+    <MudSelect Class="default-label-background" Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" T="int" Value="@secondGear" Label="Middle Gear" ValueChanged="@(value => UpdateThrottle(1, value))">
+       <MudSelectItem Value="AccelerationCalculator.FullReverse"> <MudText Color="Color.Default">-1</MudText></MudSelectItem>
+       <MudSelectItem Value="AccelerationCalculator.Zero"><MudText Color="Color.Default">0</MudText></MudSelectItem>
+       <MudSelectItem Value="AccelerationCalculator.OneQuarter"><MudText Color="Color.Default">1/4</MudText></MudSelectItem>
+       <MudSelectItem Value="AccelerationCalculator.Half"><MudText Color="Color.Default">2/4</MudText></MudSelectItem>
+       <MudSelectItem Value="AccelerationCalculator.ThreeQuarter"><MudText Color="Color.Default">3/4</MudText></MudSelectItem>
+       <MudSelectItem Value="AccelerationCalculator.FullAhead"><MudText Color="Color.Default">4/4</MudText></MudSelectItem>
     </MudSelect>
-    <MudSelect Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" T="int" Value="@thirdGear" Label="Final Gear" ValueChanged="@(value => UpdateThrottle(2, value))">
-        <MudSelectItem Value="AccelerationCalculator.FullReverse"> <MudText Color="Color.Secondary">-1</MudText></MudSelectItem>
-        <MudSelectItem Value="AccelerationCalculator.Zero"><MudText Color="Color.Secondary">0</MudText></MudSelectItem>
-        <MudSelectItem Value="AccelerationCalculator.OneQuarter"><MudText Color="Color.Secondary">1/4</MudText></MudSelectItem>
-        <MudSelectItem Value="AccelerationCalculator.Half"><MudText Color="Color.Secondary">2/4</MudText></MudSelectItem>
-        <MudSelectItem Value="AccelerationCalculator.ThreeQuarter"><MudText Color="Color.Secondary">3/4</MudText></MudSelectItem>
-        <MudSelectItem Value="AccelerationCalculator.FullAhead"><MudText Color="Color.Secondary">4/4</MudText></MudSelectItem>
+    <MudSelect Class="default-label-background" Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" T="int" Value="@thirdGear" Label="Final Gear" ValueChanged="@(value => UpdateThrottle(2, value))">
+        <MudSelectItem Value="AccelerationCalculator.FullReverse"> <MudText Color="Color.Default">-1</MudText></MudSelectItem>
+        <MudSelectItem Value="AccelerationCalculator.Zero"><MudText Color="Color.Default">0</MudText></MudSelectItem>
+        <MudSelectItem Value="AccelerationCalculator.OneQuarter"><MudText Color="Color.Default">1/4</MudText></MudSelectItem>
+        <MudSelectItem Value="AccelerationCalculator.Half"><MudText Color="Color.Default">2/4</MudText></MudSelectItem>
+        <MudSelectItem Value="AccelerationCalculator.ThreeQuarter"><MudText Color="Color.Default">3/4</MudText></MudSelectItem>
+        <MudSelectItem Value="AccelerationCalculator.FullAhead"><MudText Color="Color.Default">4/4</MudText></MudSelectItem>
     </MudSelect>
 </MudStack>
 

WoWsShipBuilder.Common/Features/AccelerationCharts/CustomAccelerationDataDialog.razor

@@ -7,7 +7,6 @@
 <MudDialog>
     <TitleContent>
         <MudItem Class="d-flex align-center">
-            <MudIcon Icon="@Icons.Material.Filled.HelpOutline" Color="Color.Info" Size="Size.Large"/>
             <MudText Typo="Typo.h6" Class="mx-auto">
                 @Localizer.GetAppLocalization(nameof(Translation.AccelerationChart_CustomDataTitle)).Localization
             </MudText>
@@ -61,10 +60,10 @@
         </MudStack>
     </DialogContent>
     <DialogActions>
-        <MudButton OnClick="Cancel" Variant="Variant.Filled" Color="Color.Primary">
+        <MudButton OnClick="@Cancel" Variant="Variant.Filled" Color="Color.Warning">
             @Localizer.GetAppLocalization(nameof(Translation.Cancel)).Localization
         </MudButton>
-        <MudButton Disabled="!ValidateCustomParameters()" OnClick="ReturnShipBuildContainer" Variant="Variant.Filled" Color="Color.Primary">
+        <MudButton Disabled="!ValidateCustomParameters()" OnClick="@ReturnShipBuildContainer" Variant="Variant.Filled" Color="Color.Success">
             @Localizer.GetAppLocalization(nameof(Translation.Ok)).Localization
         </MudButton>
     </DialogActions>
@@ -178,4 +177,4 @@
                forwardEngineForsagMaxSpeed > 0 &&
                backwardEngineForsagMaxSpeed > 0;
     }
-}
+}

WoWsShipBuilder.Common/Features/AccelerationCharts/ShipBuildContainerSelectionDialog.razor

@@ -7,15 +7,15 @@
 @implements IDisposable
 @inject ILocalizer Localizer
 
-<MudDialog ContentStyle="max-height: calc(90vh - 100px); overflow-y: scroll; padding: 12px;">
+<MudDialog ContentStyle="max-height: calc(90vh - 100px); overflow-y: scroll; padding: 12px;" Class="default-background">
     <DialogContent>
         <ShipSelector SelectedShips="@selectedShips" MultiSelect AllowCopies EnableBuildImport EnableSavedBuildList DisableSelectedShipBuildEditing/>
     </DialogContent>
     <DialogActions>
-        <MudButton Variant="Variant.Filled" Color="Color.Primary" DisableElevation="true" OnClick="@Cancel">
+        <MudButton Variant="Variant.Filled" Color="Color.Warning" DisableElevation="true" OnClick="@Cancel">
             @Localizer.GetAppLocalization(nameof(Translation.Cancel)).Localization
         </MudButton>
-        <MudButton Variant="Variant.Filled" Color="Color.Warning" DisableElevation="true" Disabled="@(ShipList != null && ShipList!.Count == 0)" OnClick="@(() => SubmitShips(true))">
+        <MudButton Variant="Variant.Filled" Color="Color.Tertiary" DisableElevation="true" Disabled="@(ShipList != null && ShipList!.Count == 0)" OnClick="@(() => SubmitShips(true))">
             @if (processing)
             {
                 <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
@@ -100,4 +100,4 @@
         selectedShips.CollectionChanged -= SelectedShipsOnCollectionChanged;
     }
 
-}
+}

WoWsShipBuilder.Common/Features/BallisticCharts/Charts.razor

@@ -22,7 +22,7 @@
 @inject SessionStateCache SessionStateCache
 
 <PageTitle>WoWs ShipBuilder: Charts</PageTitle>
-<MudTabs Elevation="2" PanelClass="pa-6" Centered Color="Color.Primary" @ref="chartsTabs" Outlined Border KeepPanelsAlive ActivePanelIndexChanged="@ActivePanelChanged">
+<MudTabs Elevation="2" PanelClass="pa-6" Centered Color="Color.Default" @ref="chartsTabs" Outlined Border KeepPanelsAlive ActivePanelIndexChanged="@ActivePanelChanged">
     <MudTabPanel Text="@Localizer.GetAppLocalization(nameof(Translation.ChartsWeb_DispersionCharts)).Localization" ID="ChartsTabs.DispersionCharts">
         <MudStack Row Justify="Justify.Center" Spacing="4">
             <MudButton OnClick="EditChartsAsync" Variant="Variant.Filled" Color="Color.Primary" Class="d-flex" Disabled="processing">
@@ -67,7 +67,7 @@
                         <MudSelectItem Value="@item">
                             <MudStack Row AlignItems="AlignItems.Center">
                                 <MudIcon Icon="@ChartsHelper.GetPlaneIcon(item)" Style="width: 20px; height: 20px; margin-bottom: 3px"/>
-                                <MudText Color="Color.Secondary">@Localizer.GetAppLocalization(Translation.ResourceManager.GetString(item.ToString())!).Localization</MudText>
+                                <MudText Color="Color.Default">@Localizer.GetAppLocalization(Translation.ResourceManager.GetString(item.ToString())!).Localization</MudText>
                             </MudStack>
                         </MudSelectItem>
                     }
@@ -133,10 +133,10 @@
                 <MudNumericField Value="dispPlotScaling" Label="@Localizer.GetAppLocalization(nameof(Translation.DispersionGraphWindow_PlotScaling)).Localization" Variant="Variant.Outlined" Immediate="true" ValueChanged="UpdateDispersionPlotScaling" T="double" DebounceInterval="500" Disabled="processing" Margin="Margin.Dense" Min="0.1" Max="4" Step="0.1"/>
                 <MudSelect Style="min-width: 196px" Label="@Localizer.GetAppLocalization(nameof(Translation.DispersionGraphWindow_PlotOrientation)).Localization" Variant="Variant.Outlined" T="bool" Disabled="processing" Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter" SelectedValuesChanged="@(_ => SetVerticalDispersionPlot(!verticalDispPlot))">
                     <MudSelectItem Value="@false">
-                        <MudText Color="Color.Secondary">@Localizer.GetAppLocalization(nameof(Translation.DispersionGraphWindow_Horizontal)).Localization</MudText>
+                        <MudText>@Localizer.GetAppLocalization(nameof(Translation.DispersionGraphWindow_Horizontal)).Localization</MudText>
                     </MudSelectItem>
                     <MudSelectItem Value="@true">
-                        <MudText Color="Color.Secondary">@Localizer.GetAppLocalization(nameof(Translation.DispersionGraphWindow_Vertical)).Localization</MudText>
+                        <MudText>@Localizer.GetAppLocalization(nameof(Translation.DispersionGraphWindow_Vertical)).Localization</MudText>
                     </MudSelectItem>
                 </MudSelect>
                 <MudSelect Style="min-width: 254px" Label="@Localizer.GetAppLocalization(nameof(Translation.DispersionGraphWindow_PlotPlane)).Localization" @bind-Value="@selectedDispPlotPlane" Variant="Variant.Outlined" T="EllipsePlanes" Disabled="processing" Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter">
@@ -145,7 +145,7 @@
                         <MudSelectItem Value="@item">
                             <MudStack Row AlignItems="AlignItems.Center">
                                 <MudIcon Icon="@ChartsHelper.GetPlaneIcon(item)" Style="width: 20px; height: 20px; margin-bottom: 3px"/>
-                                <MudText Color="Color.Secondary">@Localizer.GetAppLocalization(item.ToString()).Localization</MudText>
+                                <MudText>@Localizer.GetAppLocalization(item.ToString()).Localization</MudText>
                             </MudStack>
                         </MudSelectItem>
                     }
@@ -154,7 +154,7 @@
                     @foreach (var item in fusoPositionsList)
                     {
                         <MudSelectItem Value="@item">
-                            <MudText Color="Color.Secondary">@Localizer.GetAppLocalization(item.ToString()).Localization</MudText>
+                            <MudText>@Localizer.GetAppLocalization(item.ToString()).Localization</MudText>
                         </MudSelectItem>
                     }
                 </MudSelect>
@@ -254,7 +254,7 @@
     </MudTabPanel>
 </MudTabs>
 <MudScrollToTop TopOffset="100" Style="z-index:2001">
-    <MudFab Color="Color.Info" StartIcon="@Icons.Material.Filled.KeyboardDoubleArrowUp"/>
+    <MudFab Color="Color.Primary" StartIcon="@Icons.Material.Filled.KeyboardDoubleArrowUp"/>
 </MudScrollToTop>
 <BuildConfigurationDialogHelper @ref="buildConfigurationHelper" MaxWidth="MaxWidth.Large" FullWidth NoHeader />
 

WoWsShipBuilder.Common/Features/BallisticCharts/ShipAndShellSelectionDialog.razor

@@ -13,10 +13,9 @@
 @implements IDisposable
 @inject ILocalizer Localizer
 
-<MudDialog>
+<MudDialog Class="default-background">
     <TitleContent>
         <MudItem Class="d-flex align-center">
-            <MudIcon Icon="@Icons.Material.Filled.HelpOutline" Color="Color.Info" Size="Size.Large"/>
             <MudText Typo="Typo.h6" Class="mx-auto">
                 @Localizer.GetAppLocalization(nameof(Translation.ShipAndShellSelectionDialogWeb_SelectShipsAndShells)).Localization
             </MudText>
@@ -31,7 +30,7 @@
                 <MudItem xs="12" md="4" Style="min-height: 600px; max-height: 600px; overflow-y: auto;">
                     @if (dataWrappers.Count == 0)
                     {
-                        <MudText Typo="Typo.body2" Class="mt-4" Align="Align.Center" Color="Color.Primary" Style="font-size: x-large">
+                        <MudText Typo="Typo.body2" Class="mt-4" Align="Align.Center" Color="Color.Default" Style="font-size: x-large">
                             @Localizer.GetAppLocalization(Translation.ShipAndShellsSelectionDialog_NoShipSelected).Localization
                         </MudText>
                     }
@@ -42,7 +41,7 @@
                                 <MudText Typo="Typo.caption" Class="my-auto">
                                     @Localizer.GetGameLocalization($"{dataWrapper.ShipBuildContainer.Ship.Index}_FULL").Localization
                                 </MudText>
-                                <MudIconButton Icon="@Icons.Material.Filled.Clear" Color="Color.Primary" Size="Size.Small" OnClick="@(() => RemoveShip(dataWrapper))"/>
+                                <MudIconButton Icon="@Icons.Material.Filled.Clear" Color="Color.Secondary" Size="Size.Small" OnClick="@(() => RemoveShip(dataWrapper))"/>
                             </MudItem>
                             @if (dataWrapper.ShipBuildContainer.Ship.MainBatteryModuleList.Any())
                             {
@@ -57,7 +56,7 @@
                             }
                             else
                             {
-                                <MudText Color="Color.Primary">
+                                <MudText Color="Color.Dark">
                                     @Localizer.GetAppLocalization(nameof(Translation.MessageBox_ShipNoGun)).Localization
                                 </MudText>
                             }
@@ -72,10 +71,10 @@
         </MudContainer>
     </DialogContent>
     <DialogActions>
-        <MudButton OnClick="Cancel" Variant="Variant.Filled" Color="Color.Primary">
+        <MudButton OnClick="@Cancel" Variant="Variant.Filled" Color="Color.Warning">
             @Localizer.GetAppLocalization(nameof(Translation.Cancel)).Localization
         </MudButton>
-        <MudButton Color="Color.Warning" OnClick="@(() => ReturnSelectedShells(true))" Variant="Variant.Filled" Disabled="@(processing || !dataWrappers.Any(wrapper => wrapper.SelectedShells.Any()))">
+        <MudButton Color="Color.Tertiary" OnClick="@(() => ReturnSelectedShells(true))" Variant="Variant.Filled" Disabled="@(processing || !dataWrappers.Any(wrapper => wrapper.SelectedShells.Any()))">
             @if (processing)
             {
                 <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>