From 7da6f554a8a8e893dd3a7ff035c2cf0a07d97c8d Mon Sep 17 00:00:00 2001 From: 6d486f49 Date: Tue, 2 Jun 2026 11:33:46 -0400 Subject: [PATCH] Faction border code design and colour tweaks --- IGP/App.razor | 9 +++++++++ IGP/Pages/BuildCalculator/BuildCalculatorPage.razor | 1 + .../{ => Cosmetic}/FactionBorderComponent.razor | 5 ++--- .../{ => Cosmetic}/ImmortalBorderComponent.razor | 13 ++++++------- 4 files changed, 18 insertions(+), 10 deletions(-) rename IGP/Pages/BuildCalculator/Parts/{ => Cosmetic}/FactionBorderComponent.razor (75%) rename IGP/Pages/BuildCalculator/Parts/{ => Cosmetic}/ImmortalBorderComponent.razor (60%) diff --git a/IGP/App.razor b/IGP/App.razor index 99cfd6b..0717bce 100644 --- a/IGP/App.razor +++ b/IGP/App.razor @@ -44,6 +44,15 @@ :root { + --faction-aru: #da4e4e; + --immortal-mala: #dc7a29; + --immortal-xol: #87aa87; + --immortal-atzlan: #8B7355; + + --faction-qrath: #8EACCD; + --immortal-orzum: #4A6B8A; + --immortal-ajari: #b4e2e3; + --severity-warning-color: #2a2000; --severity-warning-border-color: #755c13; --severity-error-color: #290102; diff --git a/IGP/Pages/BuildCalculator/BuildCalculatorPage.razor b/IGP/Pages/BuildCalculator/BuildCalculatorPage.razor index a6e90e2..21553c2 100644 --- a/IGP/Pages/BuildCalculator/BuildCalculatorPage.razor +++ b/IGP/Pages/BuildCalculator/BuildCalculatorPage.razor @@ -13,6 +13,7 @@ @inject IDataCollectionService DataCollectionService @page "/build-calculator" +@using IGP.Pages.BuildCalculator.Parts.Cosmetic @using Services.Website @implements IDisposable diff --git a/IGP/Pages/BuildCalculator/Parts/FactionBorderComponent.razor b/IGP/Pages/BuildCalculator/Parts/Cosmetic/FactionBorderComponent.razor similarity index 75% rename from IGP/Pages/BuildCalculator/Parts/FactionBorderComponent.razor rename to IGP/Pages/BuildCalculator/Parts/Cosmetic/FactionBorderComponent.razor index a28c318..f59b103 100644 --- a/IGP/Pages/BuildCalculator/Parts/FactionBorderComponent.razor +++ b/IGP/Pages/BuildCalculator/Parts/Cosmetic/FactionBorderComponent.razor @@ -1,5 +1,4 @@ @inject IImmortalSelectionService FilterService -@using Model.Entity.Data @implements IDisposable @@ -26,7 +25,7 @@ string GetBorderStyle() { var faction = FilterService.GetFaction(); - var color = faction == DataType.FACTION_Aru ? "#CD5C5C" : "#8EACCD"; - return $"border-top: 4px solid {color}; padding-top: 4px;"; + var color = faction == DataType.FACTION_Aru ? "var(--faction-aru)" : "var(--faction-qrath)"; + return $"border-top: 4px solid {color}; padding-top: 14px; margin-top: -12px;"; } } diff --git a/IGP/Pages/BuildCalculator/Parts/ImmortalBorderComponent.razor b/IGP/Pages/BuildCalculator/Parts/Cosmetic/ImmortalBorderComponent.razor similarity index 60% rename from IGP/Pages/BuildCalculator/Parts/ImmortalBorderComponent.razor rename to IGP/Pages/BuildCalculator/Parts/Cosmetic/ImmortalBorderComponent.razor index d65de52..f91b74e 100644 --- a/IGP/Pages/BuildCalculator/Parts/ImmortalBorderComponent.razor +++ b/IGP/Pages/BuildCalculator/Parts/Cosmetic/ImmortalBorderComponent.razor @@ -1,5 +1,4 @@ @inject IImmortalSelectionService FilterService -@using Model.Entity.Data @implements IDisposable @@ -27,11 +26,11 @@ { var immortal = FilterService.GetImmortal(); var color = "#666666"; - if (immortal == DataType.IMMORTAL_Orzum) color = "#4A6B8A"; - else if (immortal == DataType.IMMORTAL_Ajari) color = "#A3B8CC"; - else if (immortal == DataType.IMMORTAL_Atzlan) color = "#8B7355"; - else if (immortal == DataType.IMMORTAL_Mala) color = "#6B8E23"; - else if (immortal == DataType.IMMORTAL_Xol) color = "#9CA89C"; - return $"border-top: 4px solid {color}; padding-top: 4px;"; + if (immortal == DataType.IMMORTAL_Orzum) color = "var(--immortal-orzum)"; + else if (immortal == DataType.IMMORTAL_Ajari) color = "var(--immortal-ajari)"; + else if (immortal == DataType.IMMORTAL_Atzlan) color = "var(--immortal-atzlan)"; + else if (immortal == DataType.IMMORTAL_Mala) color = "var(--immortal-mala)"; + else if (immortal == DataType.IMMORTAL_Xol) color = "var(--immortal-xol)"; + return $"border-top: 4px solid {color}; padding-top: 14px; margin-top: -12px;"; } }