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;

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
 

IGP/Pages/BuildCalculator/Parts/Cosmetic/FactionBorderComponent.razor

@@ -1,5 +1,4 @@
 @inject IImmortalSelectionService FilterService
-@using Model.Entity.Data
 @implements IDisposable
 
 <FormLayoutComponent>
@@ -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;";
     }
 }

IGP/Pages/BuildCalculator/Parts/Cosmetic/ImmortalBorderComponent.razor

@@ -1,5 +1,4 @@
 @inject IImmortalSelectionService FilterService
-@using Model.Entity.Data
 @implements IDisposable
 
 <FormLayoutComponent>
@@ -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;";
     }
 }