methods for easier css color

NielsPilgaard · Sep 15, 2024 · 4dcdc22 · 4dcdc22
1 parent 7a34590
commit 4dcdc22
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 25 deletions.
diff --git a/src/web/Jordnaer/Extensions/MudColorExtensions.cs b/src/web/Jordnaer/Extensions/MudColorExtensions.cs
@@ -0,0 +1,10 @@
+using MudBlazor.Utilities;
+
+namespace Jordnaer.Extensions;
+
+public static class MudColorExtensions
+{
+	public static string ToBackgroundColor(this MudColor color) => $"background-color: {color}";
+
+	public static string ToTextColor(this MudColor color) => $"color: {color}";
+}
diff --git a/src/web/Jordnaer/Features/Theme/JordnaerPalette.cs b/src/web/Jordnaer/Features/Theme/JordnaerPalette.cs
@@ -43,28 +43,20 @@ public static class JordnaerPalette
 	/// <summary>
 	/// Dark Blue. Used for body text
 	/// </summary>
-	public static readonly MudColor BlueBody = "#41556b";
-
-	public static readonly string BlueBodyTextStyle = $"color: {BlueBody}";
+	public static readonly MudColor BlueBody = "#41556b";
 
 	/// <summary>
 	/// Dark Red. Used for small texts, payoffs, quotes
 	/// </summary>
-	public static readonly MudColor RedHeader = "#673417";
-
-	public static readonly string RedHeaderTextStyle = $"color: {RedHeader}";
+	public static readonly MudColor RedHeader = "#673417";
 
 	/// <summary>
 	/// Beige. Used as background for text where <see cref="YellowBackground"/> and <see cref="GreenBackground"/> are too dark/saturated.
 	/// </summary>
 	public static readonly MudColor BeigeBackground = "#cfc1a699"; // 99 added to apply 60% opacity
 
-	public static readonly string BeigeBackgroundStyle = $"background-color: {BeigeBackground}";
-
 	/// <summary>
 	/// Pale Blue. Rarely used as background for text where <see cref="YellowBackground"/> and <see cref="GreenBackground"/> are too dark/saturated.
 	/// </summary>
 	public static readonly MudColor PaleBlueBackground = "#a9c0cf66"; // 66 added to apply 40% opacity
-
-	public static readonly string PaleBlueBackgroundStyle = $"background-color: {PaleBlueBackground}";
 }
diff --git a/src/web/Jordnaer/Features/Theme/MiniDivider.razor b/src/web/Jordnaer/Features/Theme/MiniDivider.razor
@@ -16,7 +16,6 @@ else
     public string? Style { get; set; }
     [Parameter]
     public required MiniDividerColor Color { get; set; }
-
     [Parameter]
     public bool Center { get; set; } = false;
 

diff --git a/src/web/Jordnaer/Pages/Home/DesktopLandingPage.razor b/src/web/Jordnaer/Pages/Home/DesktopLandingPage.razor
@@ -5,7 +5,7 @@
     </MudSection>
 
     <MudSection Row="1" ColSpan="2" Column="4" Class="hero-section-top">
-        <MudToolBar Style="@($"color: {JordnaerPalette.RedHeader}; font-size: 24px; overflow: hidden")">
+        <MudToolBar Style="@($"{JordnaerPalette.RedHeader.ToTextColor()}; font-size: 24px; overflow: hidden")">
 	        <Feature Name="@FeatureFlags.Posts">
 		        <MudNavLink Href="/posts" Class="d-md-none d-lg-flex">OPSLAG</MudNavLink>
 	        </Feature>
@@ -14,13 +14,13 @@
         </MudToolBar>
     </MudSection>
 
-    <MudSection Row="2" Column="1" ColSpan="5" Style="@($"background: {JordnaerPalette.BeigeBackground}")" />
+    <MudSection Row="2" Column="1" ColSpan="5" Style="@JordnaerPalette.BeigeBackground.ToBackgroundColor()" />
 
     <MudSection Row="1" Column="2" ColSpan="3" RowSpan="2" Class="hero-section-top">
         <MudStack AlignItems="AlignItems.Center" Justify="Justify.Center" Spacing="0">
             <MudImage id="landing-page-center-image" fetchpriority="high" Src="/images/landing-page/nathan-dumlao-P5MXtYfgmmw-unsplash_cropped.webp" />
-            <MudText Class="font-cherry-bomb-one" Style="@($"color: {JordnaerPalette.GreenBackground}; font-size: 48px")">Velkommen</MudText>
-            <MudText Style="@($"color: {JordnaerPalette.RedHeader}; font-size: 24px")">Til mødestedet for børnefamilier</MudText>
+            <MudText Class="font-cherry-bomb-one" Style="@($"{JordnaerPalette.GreenBackground.ToTextColor()}; font-size: 48px")">Velkommen</MudText>
+            <MudText Style="@($"{JordnaerPalette.RedHeader.ToTextColor()}; font-size: 24px")">Til mødestedet for børnefamilier</MudText>
         </MudStack>
     </MudSection>
 
@@ -30,7 +30,7 @@
     <div class="flex-row-reverse hero-section" style="height: 600px;">
         <MudImage Src="/images/landing-page/fabian-centeno-uY60pJUHqOo-unsplash_small.webp" Class="ml-10" Style="max-width: 50%" />
         <div class="content-section">
-            <MudText Align="Align.Center" Class="font-cherry-bomb-one mb-3 mt-15" Style="@($"color: {JordnaerPalette.YellowBackground}; font-size: 36px")">
+            <MudText Align="Align.Center" Class="font-cherry-bomb-one mb-3 mt-15" Style="@($"{JordnaerPalette.YellowBackground.ToTextColor()}; font-size: 36px")">
                 Hvad kan jeg bruge Mini Møder til?
             </MudText>
 

diff --git a/src/web/Jordnaer/Pages/Home/MobileLandingPage.razor b/src/web/Jordnaer/Pages/Home/MobileLandingPage.razor
@@ -5,7 +5,7 @@
 
 <!-- Links -->
 <div class="hero-section-top">
-    <MudToolBar Style="@($"color: {JordnaerPalette.RedHeader}; font-size: 20px;")">
+    <MudToolBar Style="@($"{JordnaerPalette.RedHeader.ToTextColor()}; font-size: 20px;")">
         <Feature Name="@FeatureFlags.Posts">
             <MudNavLink Href="/posts" Class="d-none d-sm-flex">OPSLAG</MudNavLink>
         </Feature>
@@ -15,14 +15,14 @@
 </div>
 
 <MudPage Row="2" Column="1" Height="440px">
-    <MudSection Row="2" Column="1" Style="@($"background: {JordnaerPalette.BeigeBackground}")" />
+    <MudSection Row="2" Column="1" Style="@JordnaerPalette.BeigeBackground.ToBackgroundColor()" />
     <MudSection Row="1" RowSpan="2" Column="1">
         <MudStack Class="mb-6" AlignItems="AlignItems.Center" Justify="Justify.Center" Spacing="0">
             <MudImage id="landing-page-center-image" fetchpriority="high" Src="/images/landing-page/nathan-dumlao-P5MXtYfgmmw-unsplash_cropped.webp" />
-            <MudText Class="font-cherry-bomb-one" Style="@($"color: {JordnaerPalette.GreenBackground}; font-size: 32px")">
+            <MudText Class="font-cherry-bomb-one" Style="@($"{JordnaerPalette.GreenBackground.ToTextColor()}; font-size: 32px")">
                 Velkommen
             </MudText>
-            <MudText Style="@($"color: {JordnaerPalette.RedHeader}; font-size: 18px; text-align: center")">
+            <MudText Style="@($"{JordnaerPalette.RedHeader.ToTextColor()}; font-size: 18px; text-align: center")">
                 Til mødestedet for børnefamilier
             </MudText>
         </MudStack>
@@ -34,11 +34,11 @@
 <MudContainer MaxWidth="MaxWidth.Medium">
     <div class="flex-column hero-section">
         <div class="content-section">
-            <MudText Align="Align.Center" Class="font-cherry-bomb-one mb-3" Style="@($"color: {JordnaerPalette.YellowBackground}; font-size: 36px")">
-                Hvad kan jeg bruge Mini Møder til?  
+            <MudText Align="Align.Center" Class="font-cherry-bomb-one mb-3" Style="@($"{JordnaerPalette.YellowBackground.ToTextColor()}; font-size: 36px")">
+                Hvad kan jeg bruge Mini Møder til?
             </MudText>
 
-            <LandingPageLinkComponent IsMobile/>
+            <LandingPageLinkComponent IsMobile />
 
         </div>
     </div>

diff --git a/src/web/Jordnaer/Pages/Registration/FirstLogin.razor b/src/web/Jordnaer/Pages/Registration/FirstLogin.razor
@@ -20,10 +20,10 @@
         <MudItem xs="12" sm="6" md="4" Class="d-flex justify-center align-center" @onclick="() => Navigation.NavigateTo(link)">
             <MudCard Style="width: 300px" Elevation="3" Class="mt-2">
                 <MudCardHeader>
-                    <MudIcon Icon="@icon" Class="mr-2" /><MudText Typo="Typo.h5" Class="font-open-sans-bold" Style="@JordnaerPalette.RedHeaderTextStyle">@title</MudText>
+                    <MudIcon Icon="@icon" Class="mr-2" /><MudText Typo="Typo.h5" Class="font-open-sans-bold" Style="@JordnaerPalette.RedHeader.ToTextColor()">@title</MudText>
                 </MudCardHeader>
                 <MudCardContent>
-                    <MudText Typo="Typo.body1" Style="@JordnaerPalette.BlueBodyTextStyle">@body</MudText>
+                    <MudText Typo="Typo.body1" Style="@JordnaerPalette.BlueBody.ToTextColor()">@body</MudText>
                 </MudCardContent>
                 <MudCardActions Style="padding: 16px">
                     <MudIconButton Size="Size.Large"