visual overhaul take 1 complete!

NielsPilgaard · Aug 27, 2024 · d02417c · d02417c
1 parent efbda25
commit d02417c
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 101 deletions.
diff --git a/src/web/Jordnaer/Features/Sponsors/SponsorCard.razor b/src/web/Jordnaer/Features/Sponsors/SponsorCard.razor
@@ -1,6 +1,6 @@
 @using Jordnaer.Shared
 <MudLink Href="@Sponsor.Link" Target="_blank" Underline="Underline.None">
-    <MudCard Elevation="5" Class="mt-5" Style="max-width: 300px">
+    <MudCard Elevation="5" Class="mt-5 card-hover" Style="max-width: 300px">
         <MudCardContent>
             <MudImage Fluid Src="@Sponsor.LogoUrl" />
             @if (!string.IsNullOrEmpty(Sponsor.Name))

diff --git a/src/web/Jordnaer/Features/Theme/JordnaerPalette.cs b/src/web/Jordnaer/Features/Theme/JordnaerPalette.cs
@@ -11,11 +11,13 @@ public static class JordnaerTheme
 		{
 			Body1 = new Body1
 			{
-				FontFamily = ["Open Sans Light", "Arial", "sans-serif"]
+				FontFamily = ["Open Sans Light", "Arial", "sans-serif"],
+				FontSize = "1.25rem"
 			},
 			Body2 = new Body2
 			{
-				FontFamily = ["Open Sans Light", "Arial", "sans-serif"]
+				FontFamily = ["Open Sans Light", "Arial", "sans-serif"],
+				FontSize = "1.1rem"
 			},
 			Default = new Default
 			{
@@ -55,10 +57,14 @@ public static class JordnaerPalette
 	/// <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 = "#dbd2c1"; // Changed from "#cfc1a6" to "#dbd2c1"
+	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 = "#a9c0cf";
+	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/Pages/Footer/About.razor b/src/web/Jordnaer/Pages/Footer/About.razor
@@ -4,20 +4,20 @@
                    Description="Hvad er Mini Møder?" />
 
 <MudContainer MaxWidth="MaxWidth.Small" Class="text-center">
-	<MudPaper Elevation="3" Class="pa-10 mt-5" Style="@($"background-color: {JordnaerPalette.BeigeBackground}")">
+	<MudPaper Elevation="3" Class="pa-10 mt-5" Style="@JordnaerPalette.PaleBlueBackgroundStyle">
 
         <h1 class="font-open-sans-medium mb-5" style="@JordnaerPalette.RedHeaderTextStyle">Hvad er Mini Møder?</h1>
 
-        <MudText Typo="Typo.body1" Style="@JordnaerPalette.BlueBodyTextStyle">
+        <MudText Typo="Typo.body1">
 	        Mini Møder er en hjemmeside til os, der ønsker at skabe nye relationer med andre børnefamilier.
         </MudText>
 
-        <MudText Typo="Typo.body1" Class="mt-6" Style="@JordnaerPalette.BlueBodyTextStyle">
+        <MudText Typo="Typo.body1" Class="mt-6">
 			Siden er skabt med særligt henblik på at hjælpe legegrupper,
 			hjemmegrupper og hjemmeskoler med at blive dannet og gro.
 		</MudText>
 
-        <MudText Typo="Typo.body1" Class="mt-6" Style="@JordnaerPalette.BlueBodyTextStyle">
+        <MudText Typo="Typo.body1" Class="mt-6">
 			Vi vil gøre det nemmere for forældre at finde venner til deres børn.
 		</MudText>
 
@@ -27,24 +27,24 @@
 			Hvorfor har vi skabt Mini Møder?
 		</h2>
 
-        <MudText Typo="Typo.body1" Class="mt-6" Style="@JordnaerPalette.BlueBodyTextStyle">
+        <MudText Typo="Typo.body1" Class="mt-6">
 	        Vi har lavet Mini Møder fordi vi selv har manglet en konkret platform til at lede 
 	        efter legegrupper til vores børn. 
         </MudText>
 
-        <MudText Typo="Typo.body1" Class="mt-3" Style="@JordnaerPalette.BlueBodyTextStyle">
+        <MudText Typo="Typo.body1" Class="mt-3">
 			Da vi hjemmepassede vores børn, fandt vi det utrolig besværligt og kompliceret at 
 			finde en fast gruppe af børn og voksne, 
 			som vi kunne ses med jævnligt og skabe minder sammen med.
 		</MudText>
 
-        <MudText Typo="Typo.body1" Class="mt-6" Style="@JordnaerPalette.BlueBodyTextStyle">
+        <MudText Typo="Typo.body1" Class="mt-6">
 			Vi har et dybt ønske om, at Mini Møder kan blive en grobund for tætte relationer, 
 			gode venner og stærke forbindelser.Tryghed og tillid er efter vores mening afgørende 
 			for børns velbefindende og trivsel.
 		</MudText>
 
-        <MudText Typo="Typo.body1" Class="mt-3" Style="@JordnaerPalette.BlueBodyTextStyle">
+        <MudText Typo="Typo.body1" Class="mt-3">
 			Børnenes primære omsorgspersoner, tætte relationer og stærke fællesskaber kan støtte 
 			barnets sundhed og trivsel, og Mini Møder kan hjælpe med at finde disse fællesskaber, 
 			hvor børnenes præmisser er i højsædet.

diff --git a/src/web/Jordnaer/Pages/Footer/Contact.razor b/src/web/Jordnaer/Pages/Footer/Contact.razor
@@ -7,24 +7,53 @@
 
 <MudLoading @bind-Loading="_isSending" Darken Overlap>
     <MudContainer MaxWidth="MaxWidth.Small">
-        <MudPaper Elevation="3" Class="pa-10 mt-5">
-            <MudText Typo="Typo.h3">Kontakt os</MudText>
-            <MudDivider Class="mt-1 mb-5" />
-
-            <MudText Typo="Typo.body1">
-                Har du spørgsmål, kommentarer eller forslag? Vi vil meget gerne høre fra dig!
-            </MudText>
-            <MudText Typo="Typo.body1" Class="mt-3">
-                Udfyld formularen nedenfor, og vi vil vende tilbage til dig så hurtigt som muligt.
-            </MudText>
-
-            <EditForm Model="_contactForm" OnValidSubmit="SubmitForm" Class="mt-5">
-                <MudTextField Label="Dit Navn" @bind-Value="_contactForm.Name" For="() => _contactForm.Name" FullWidth Class="mt-3" name="name" />
-                <MudTextField Label="Din Email" @bind-Value="_contactForm.Email" For="() => _contactForm.Email" Required InputType="InputType.Email" FullWidth Class="mt-3" name="reg_email__" />
-                <MudTextField Label="Din Besked" @bind-Value="_contactForm.Message" For="() => _contactForm.Message" Required FullWidth AutoGrow Class="mt-3" />
-                <MudButton FullWidth Color="Color.Success" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Send" OnClick="SubmitForm" Class="mt-3">Send</MudButton>
-            </EditForm>
-        </MudPaper>
+        <MudPaper Elevation="3" Class="pa-10 mt-5" Style="@JordnaerPalette.PaleBlueBackgroundStyle">
+
+		    <h1 class="font-open-sans-medium" style="@JordnaerPalette.RedHeaderTextStyle">Kontakt os</h1>
+
+		    <MudDivider Class="mt-1 mb-5"/>
+
+		    <MudText Typo="Typo.body1">
+			    Har du spørgsmål, kommentarer eller forslag? Så skriv endelig!
+		    </MudText>
+		    <MudText Typo="Typo.body1" Class="my-3">
+			    Udfyld formularen nedenfor, og vi vil vende tilbage til dig så hurtigt som muligt.
+		    </MudText>
+
+		    <EditForm Model="_contactForm" OnValidSubmit="SubmitForm">
+			    <DataAnnotationsValidator/>
+
+			    <MudTextField AutoFocus
+			                  Label="Navn"
+			                  @bind-Value="_contactForm.Name"
+			                  For="() => _contactForm.Name"
+			                  FullWidth
+			                  Class="my-3"
+			                  name="name"/>
+
+			    <MudTextField Label="Email"
+			                  @bind-Value="_contactForm.Email"
+			                  For="() => _contactForm.Email"
+			                  FullWidth
+			                  Class="my-3"
+			                  name="reg_email__"/>
+
+			    <MudTextField Label="Besked"
+			                  @bind-Value="_contactForm.Message"
+			                  For="() => _contactForm.Message"
+			                  FullWidth
+			                  AutoGrow
+			                  Class="my-3"/>
+
+			    <MudButton FullWidth Color="Color.Success"
+			               Variant="Variant.Filled"
+			               StartIcon="@Icons.Material.Filled.Send"
+			               Class="mt-3"
+			               ButtonType="ButtonType.Submit">
+				    Send
+			    </MudButton>
+		    </EditForm>
+	    </MudPaper>
     </MudContainer>
 </MudLoading>
 

diff --git a/src/web/Jordnaer/Pages/Footer/Operation.razor b/src/web/Jordnaer/Pages/Footer/Operation.razor
@@ -4,34 +4,40 @@
                    Description="Hvordan Mini Møder drives, udvikles og vedligeholdes." />
 
 <MudContainer MaxWidth="MaxWidth.Medium">
-    <MudPaper Elevation="3" Class="pa-10 mt-5">
-        <MudText Typo="Typo.h3" Align="Align.Center">Drift</MudText>
-        <MudDivider Class="mt-1 mb-5" />
+	<MudPaper Elevation="3" Class="pa-10 mt-5" Style="@JordnaerPalette.PaleBlueBackgroundStyle">
 
-        <MudStack Row>
-            <MudStack>
-                <MudText Class="mt-1">Mini Møder er lavet af mig, Niels 🖐 med støtte og input fra min kone Josefine.</MudText>
-                <MudText Class="mt-1">Jeg bygger Mini Møder i min fritid, oftest om aftenen når mine to unger er puttet.</MudText>
-                <MudText Class="mt-1">Jeg står for udvikling, drift og vedligeholdelse af hele molevitten.</MudText>
-            </MudStack>
-            <MudImage Class="d-none d-sm-flex" Src="https://jordnaer.blob.core.windows.net/userprofile-pictures/d8132467-293e-4510-a1e0-ee7aad6aad73" />
-        </MudStack>
+		<h1 class="font-open-sans-bold text-center" style="@JordnaerPalette.RedHeaderTextStyle">
+			Drift
+		</h1>
 
+		<MudDivider Class="mt-1 mb-5"/>
 
+		<MudStack Row>
+			<MudStack>
+				<MudText Class="mt-1">Mini Møder er lavet af mig, Niels 🖐 med støtte og input fra min kone Josefine.</MudText>
+				<MudText Class="mt-1">Jeg bygger Mini Møder i min fritid, oftest om aftenen når mine to unger er puttet.</MudText>
+				<MudText Class="mt-1">Jeg står for udvikling, drift og vedligeholdelse af hele molevitten.</MudText>
+			</MudStack>
+			<MudImage Class="d-none d-sm-flex" Style="border-radius: 15px" Src="https://jordnaer.blob.core.windows.net/userprofile-pictures/d8132467-293e-4510-a1e0-ee7aad6aad73"/>
+		</MudStack>
 
-        <MudText Class="mt-5">Det er desværre ikke helt gratis at drive Mini Møder - Hvis du vil støtte op om Mini Møder tager vi imod donationer og sponsoraftaler med kyshånd 😄</MudText>
 
-        <MudText Class="mt-5">Du kan komme i kontakt med os gennem vores <MudLink Href="/contact">kontaktformular</MudLink>.</MudText>
 
-        <MudText Class="mt-15">
-            Af juridiske årsager ejer jeg Mini Møder gennem min enkeltmandsvirksomhed:<br />
-            <MudLink Target="_blank" rel="noreferrer"
-                     Href="https://www.proff.dk/firma/pilgaard-development/ryomg%C3%A5rd/dataprogramvare-og-udvikling/0OK451I009O">
-                Pilgaard Development<br />
-                Nordlyvej 20, Ryomgård 8550<br />
-                +4529917126
-            </MudLink>.
-        </MudText>
+		<MudText Class="mt-5">Det er desværre ikke helt gratis at drive Mini Møder - Hvis du vil støtte op om Mini Møder tager vi imod donationer og sponsoraftaler med kyshånd 😄</MudText>
 
-    </MudPaper>
+		<MudText Class="mt-5">Du kan komme i kontakt med os gennem vores <MudLink Href="/contact">kontaktformular</MudLink>.</MudText>
+
+		<MiniDivider Color="MiniDividerColor.Yellow" Center Class="my-8"/>
+
+		<MudText>
+			Af juridiske årsager ejer jeg Mini Møder gennem min enkeltmandsvirksomhed:<br/>
+			<MudLink Target="_blank" rel="noreferrer"
+			         Href="https://www.proff.dk/firma/pilgaard-development/ryomg%C3%A5rd/dataprogramvare-og-udvikling/0OK451I009O">
+				Pilgaard Development<br/>
+				Nordlyvej 20, Ryomgård 8550<br/>
+				+4529917126
+			</MudLink>.
+		</MudText>
+
+	</MudPaper>
 </MudContainer>
diff --git a/src/web/Jordnaer/Pages/Footer/Privacy.razor b/src/web/Jordnaer/Pages/Footer/Privacy.razor
@@ -4,8 +4,12 @@
                    Description="Privatlivspolitik for Mini Møder" />
 
 <MudContainer MaxWidth="MaxWidth.Medium">
-    <MudPaper Elevation="3" Class="pa-10 mt-5">
-        <MudText Typo="Typo.h4">Privatlivspolitik</MudText>
+    <MudPaper Elevation="3" Class="pa-10 mt-5" Style="@JordnaerPalette.PaleBlueBackgroundStyle">
+
+        <h1 class="font-open-sans-medium mb-5" style="@JordnaerPalette.RedHeaderTextStyle">
+            Privatlivspolitik
+        </h1>
+
         <MudDivider Class="mt-1 mb-5" />
 
         <MudText Typo="Typo.h5">1. Introduktion</MudText>

diff --git a/src/web/Jordnaer/Pages/Footer/Sponsors.razor b/src/web/Jordnaer/Pages/Footer/Sponsors.razor
@@ -4,32 +4,42 @@
                    Description="Mini Møder's sponsorer" />
 
 <MudContainer MaxWidth="MaxWidth.Large">
-    <MudPaper Elevation="3" Class="pa-10 mt-5">
-        <MudText Typo="Typo.h3" Class="mb-5 text-center">Vore Sponsorer</MudText>
-        <MudDivider Class="mt-1 mb-5" />
-
-        <MudGrid Justify="Justify.SpaceEvenly">
-          @foreach (var sponsor in _sponsors)
-          {
-              <SponsorCard Sponsor="sponsor" />
-          }
-        </MudGrid>
-
-        <MudDivider Class="my-10" />
-        <MudText Typo="Typo.h4" Class="mt-5 mb-3 text-center">Bliv Sponsor</MudText>
-        <MudText Typo="Typo.body1">
-          At være en sponsor af Mini Møder giver en unik mulighed for at støtte et
-          lokalt initiativ og samtidig opnå synlighed for dit brand.
-          Hvis du er interesseret i at høre mere om mulighederne for at blive en sponsor,
-          er du meget velkommen til at kontakte os gennem vores <MudLink Href="/contact">kontaktformular</MudLink>.
+	<MudPaper Elevation="3" Class="pa-10 mt-5 text-center" Style="@JordnaerPalette.PaleBlueBackgroundStyle">
+
+		<h1 class="font-open-sans-medium" style="@JordnaerPalette.RedHeaderTextStyle">
+			Vore Sponsorer
+		</h1>
+
+		<MudDivider Class="mt-1 mb-5"/>
+
+		<MudGrid Justify="Justify.SpaceEvenly">
+			@foreach (var sponsor in _sponsors)
+			{
+				<SponsorCard Sponsor="sponsor"/>
+			}
+		</MudGrid>
+
+		<MiniDivider Color="MiniDividerColor.Green" Class="my-10"/>
+
+		<h2 class="font-open-sans-light text-center mt-5 mb-3" style="@JordnaerPalette.RedHeaderTextStyle">
+			Bliv Sponsor
+		</h2>
+
+		<MudText Typo="Typo.body1">
+			At være en sponsor af Mini Møder giver en unik mulighed for at støtte et
+			lokalt initiativ og samtidig opnå synlighed for dit brand.
         </MudText>
+        <MudText Typo="Typo.body1" Class="mt-3">
+			Hvis du er interesseret i at høre mere om mulighederne for at blive en sponsor,
+			er du meget velkommen til at kontakte os gennem vores <MudLink Href="/contact">kontaktformular</MudLink>.
+		</MudText>
 
-    </MudPaper>
+	</MudPaper>
 </MudContainer>
 
 @code {
 
-    private readonly List<Sponsor> _sponsors =
+    private static readonly List<Sponsor> _sponsors =
     [
 	    new Sponsor
 	    {

diff --git a/src/web/Jordnaer/Pages/Footer/Terms.razor b/src/web/Jordnaer/Pages/Footer/Terms.razor
@@ -4,29 +4,33 @@
                    Description="Servicevilkår for Mini Møder" />
 
 <MudContainer MaxWidth="MaxWidth.Medium">
-  <MudPaper Elevation="3" Class="pa-10 mt-5">
-    <MudText Typo="Typo.h4">Servicevilkår</MudText>
-    <MudDivider Class="mt-1 mb-5"/>
-
-    <MudText Typo="Typo.h5">1. Accept af vilkår</MudText>
-    <MudText Typo="Typo.body1">
-      Ved at bruge Mini Møder accepterer du disse servicevilkår. Hvis du ikke accepterer disse vilkår, bedes du ikke bruge vores tjenester.
-    </MudText>
-
-    <MudText Typo="Typo.h5" Class="mt-5">2. Tjenester</MudText>
-    <MudText Typo="Typo.body1">
-      Vi leverer en platform hvor forældre kan oprette forbindelser og arrangere sociale aktiviteter for deres børn, såsom legeaftaler og hjemmeskoleaktiviteter. Vi er ikke ansvarlige for de enkelte aktiviteter eller grupper og kan ikke garantere deres kvalitet eller sikkerhed.
-    </MudText>
-
-    <MudText Typo="Typo.h5" Class="mt-5">3. Brugeradfærd</MudText>
-    <MudText Typo="Typo.body1">
-      Du accepterer at bruge vores tjenester på en ansvarlig og lovlig måde. Du må ikke chikanere, true eller diskriminere andre brugere eller opfordre til ulovlige aktiviteter.
-    </MudText>
-
-    <MudText Typo="Typo.h5" Class="mt-5">4. Ændringer i vilkår</MudText>
-    <MudText Typo="Typo.body1">
-      Vi forbeholder os ret til at ændre disse servicevilkår når som helst. Hvis vi foretager væsentlige ændringer, vil vi give dig besked på vores hjemmeside.
-    </MudText>
-
-  </MudPaper>
+    <MudPaper Elevation="3" Class="pa-10 mt-5" Style="@JordnaerPalette.PaleBlueBackgroundStyle">
+
+        <h1 class="font-open-sans-medium mb-5" style="@JordnaerPalette.RedHeaderTextStyle">
+            Servicevilkår
+        </h1>
+
+        <MudDivider Class="mt-1 mb-5" />
+
+        <MudText Typo="Typo.h5">1. Accept af vilkår</MudText>
+        <MudText Typo="Typo.body1">
+            Ved at bruge Mini Møder accepterer du disse servicevilkår. Hvis du ikke accepterer disse vilkår, bedes du ikke bruge vores tjenester.
+        </MudText>
+
+        <MudText Typo="Typo.h5" Class="mt-5">2. Tjenester</MudText>
+        <MudText Typo="Typo.body1">
+            Vi leverer en platform hvor forældre kan oprette forbindelser og arrangere sociale aktiviteter for deres børn, såsom legeaftaler og hjemmeskoleaktiviteter. Vi er ikke ansvarlige for de enkelte aktiviteter eller grupper og kan ikke garantere deres kvalitet eller sikkerhed.
+        </MudText>
+
+        <MudText Typo="Typo.h5" Class="mt-5">3. Brugeradfærd</MudText>
+        <MudText Typo="Typo.body1">
+            Du accepterer at bruge vores tjenester på en ansvarlig og lovlig måde. Du må ikke chikanere, true eller diskriminere andre brugere eller opfordre til ulovlige aktiviteter.
+        </MudText>
+
+        <MudText Typo="Typo.h5" Class="mt-5">4. Ændringer i vilkår</MudText>
+        <MudText Typo="Typo.body1">
+            Vi forbeholder os ret til at ændre disse servicevilkår når som helst. Hvis vi foretager væsentlige ændringer, vil vi give dig besked på vores hjemmeside.
+        </MudText>
+
+    </MudPaper>
 </MudContainer>