From 09d390db02bc96051355cd06ab76ebbf495f2d3d Mon Sep 17 00:00:00 2001
From: marvin-j97 <marvin.janke.97@gmail.com>
Date: Tue, 3 Jun 2025 20:20:56 +0200
Subject: [PATCH 1/4] fix(MainHeader): button bottom border flicker

---
 src/ui/layout/main-header.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/ui/layout/main-header.tsx b/src/ui/layout/main-header.tsx
index cb69e28785..9e89ae8627 100644
--- a/src/ui/layout/main-header.tsx
+++ b/src/ui/layout/main-header.tsx
@@ -83,9 +83,9 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/"
-							class="text-slate-900 dark:text-slate-200 relative overflow-hidden drop-shadow-[0_35px_35px_rgba(1,1,1,1.75)] px-2"
+							class="border-b-2 border-transparent text-slate-900 dark:text-slate-200 relative overflow-hidden drop-shadow-[0_35px_35px_rgba(1,1,1,1.75)] px-2"
 							classList={{
-								"border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250":
+								"border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250":
 									!notSolidCore() && !translatedLocale(),
 							}}
 							addLocale
@@ -96,8 +96,8 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/solid-router"
-							class="text-slate-900 dark:text-slate-200 px-2"
-							activeClass="border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
+							class="border-b-2 border-transparent text-slate-900 dark:text-slate-200 px-2"
+							activeClass="border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
 							addLocale
 						>
 							Router
@@ -106,8 +106,8 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/solid-start"
-							class="text-slate-900 dark:text-slate-200 px-2"
-							activeClass="border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
+							class="border-b-2 border-transparent text-slate-900 dark:text-slate-200 px-2"
+							activeClass="border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
 							addLocale
 						>
 							SolidStart
@@ -116,8 +116,8 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/solid-meta"
-							class="text-slate-900 dark:text-slate-200 px-2"
-							activeClass="border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
+							class="border-b-2 border-transparent text-slate-900 dark:text-slate-200 px-2"
+							activeClass="border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
 							addLocale
 						>
 							Meta

From 7f453fbbddb9904f96554863d420823fe4be6995 Mon Sep 17 00:00:00 2001
From: marvin-j97 <marvin.janke.97@gmail.com>
Date: Tue, 3 Jun 2025 20:33:30 +0200
Subject: [PATCH 2/4] style(MainHeader): better button design

---
 src/ui/layout/main-header.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/ui/layout/main-header.tsx b/src/ui/layout/main-header.tsx
index 9e89ae8627..72a8f99dfd 100644
--- a/src/ui/layout/main-header.tsx
+++ b/src/ui/layout/main-header.tsx
@@ -79,13 +79,13 @@ export function MainHeader(props: NavProps) {
 					</A>
 				</div>
 
-				<ul class="order-2 col-span-2 lg:col-span-1 flex pt-6 lg:pt-0 lg:w-auto w-full gap-5 justify-center">
+				<ul class="order-2 col-span-2 lg:col-span-1 flex pt-6 lg:pt-0 lg:w-auto w-full gap-3 justify-center">
 					<li>
 						<A
 							href="/"
-							class="border-b-2 border-transparent text-slate-900 dark:text-slate-200 relative overflow-hidden drop-shadow-[0_35px_35px_rgba(1,1,1,1.75)] px-2"
+							class="transition-all duration-250 rounded-lg dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-300 relative overflow-hidden drop-shadow-[0_35px_35px_rgba(1,1,1,1.75)] px-4 py-2"
 							classList={{
-								"border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250":
+								"dark:!text-slate-100 dark:!bg-blue-500/20":
 									!notSolidCore() && !translatedLocale(),
 							}}
 							addLocale
@@ -96,8 +96,8 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/solid-router"
-							class="border-b-2 border-transparent text-slate-900 dark:text-slate-200 px-2"
-							activeClass="border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
+							class="transition-all duration-250 rounded-lg dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-300 px-4 py-2"
+							activeClass="dark:!text-slate-100 dark:!bg-blue-500/20"
 							addLocale
 						>
 							Router
@@ -106,8 +106,8 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/solid-start"
-							class="border-b-2 border-transparent text-slate-900 dark:text-slate-200 px-2"
-							activeClass="border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
+							class="transition-all duration-250 rounded-lg dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-300 px-4 py-2"
+							activeClass="dark:!text-slate-100 dark:!bg-blue-500/20"
 							addLocale
 						>
 							SolidStart
@@ -116,8 +116,8 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/solid-meta"
-							class="border-b-2 border-transparent text-slate-900 dark:text-slate-200 px-2"
-							activeClass="border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
+							class="transition-all duration-250 rounded-lg dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-300 px-4 py-2"
+							activeClass="dark:!text-slate-100 dark:!bg-blue-500/20"
 							addLocale
 						>
 							Meta

From 297ebe4ac3b8f5167c0840a4478be3b81c7541ac Mon Sep 17 00:00:00 2001
From: marvin-j97 <marvin.janke.97@gmail.com>
Date: Tue, 3 Jun 2025 20:39:01 +0200
Subject: [PATCH 3/4] main header button light design

---
 src/ui/layout/main-header.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/ui/layout/main-header.tsx b/src/ui/layout/main-header.tsx
index 72a8f99dfd..2966cf6cfd 100644
--- a/src/ui/layout/main-header.tsx
+++ b/src/ui/layout/main-header.tsx
@@ -83,9 +83,9 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/"
-							class="transition-all duration-250 rounded-lg dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-300 relative overflow-hidden drop-shadow-[0_35px_35px_rgba(1,1,1,1.75)] px-4 py-2"
+							class="transition-all duration-250 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 relative overflow-hidden px-4 py-2"
 							classList={{
-								"dark:!text-slate-100 dark:!bg-blue-500/20":
+								"text-black dark:!text-white !bg-blue-200 dark:!bg-blue-500/20":
 									!notSolidCore() && !translatedLocale(),
 							}}
 							addLocale
@@ -96,8 +96,8 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/solid-router"
-							class="transition-all duration-250 rounded-lg dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-300 px-4 py-2"
-							activeClass="dark:!text-slate-100 dark:!bg-blue-500/20"
+							class="transition-all duration-250 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 px-4 py-2"
+							activeClass="text-black dark:!text-white !bg-blue-200 dark:!bg-blue-500/20"
 							addLocale
 						>
 							Router
@@ -106,8 +106,8 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/solid-start"
-							class="transition-all duration-250 rounded-lg dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-300 px-4 py-2"
-							activeClass="dark:!text-slate-100 dark:!bg-blue-500/20"
+							class="transition-all duration-250 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 px-4 py-2"
+							activeClass="text-black dark:!text-white !bg-blue-200 dark:!bg-blue-500/20"
 							addLocale
 						>
 							SolidStart
@@ -116,8 +116,8 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/solid-meta"
-							class="transition-all duration-250 rounded-lg dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-300 px-4 py-2"
-							activeClass="dark:!text-slate-100 dark:!bg-blue-500/20"
+							class="transition-all duration-250 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 px-4 py-2"
+							activeClass="text-black dark:!text-white !bg-blue-200 dark:!bg-blue-500/20"
 							addLocale
 						>
 							Meta

From f270b633c941a6ababf696e3022b999bd517359e Mon Sep 17 00:00:00 2001
From: marvin-j97 <marvin.janke.97@gmail.com>
Date: Tue, 3 Jun 2025 20:39:35 +0200
Subject: [PATCH 4/4] change main header button light hover bg color

---
 src/ui/layout/main-header.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/ui/layout/main-header.tsx b/src/ui/layout/main-header.tsx
index 2966cf6cfd..973a0497d0 100644
--- a/src/ui/layout/main-header.tsx
+++ b/src/ui/layout/main-header.tsx
@@ -83,7 +83,7 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/"
-							class="transition-all duration-250 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 relative overflow-hidden px-4 py-2"
+							class="transition-all duration-250 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 relative overflow-hidden px-4 py-2"
 							classList={{
 								"text-black dark:!text-white !bg-blue-200 dark:!bg-blue-500/20":
 									!notSolidCore() && !translatedLocale(),
@@ -96,7 +96,7 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/solid-router"
-							class="transition-all duration-250 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 px-4 py-2"
+							class="transition-all duration-250 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 px-4 py-2"
 							activeClass="text-black dark:!text-white !bg-blue-200 dark:!bg-blue-500/20"
 							addLocale
 						>
@@ -106,7 +106,7 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/solid-start"
-							class="transition-all duration-250 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 px-4 py-2"
+							class="transition-all duration-250 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 px-4 py-2"
 							activeClass="text-black dark:!text-white !bg-blue-200 dark:!bg-blue-500/20"
 							addLocale
 						>
@@ -116,7 +116,7 @@ export function MainHeader(props: NavProps) {
 					<li>
 						<A
 							href="/solid-meta"
-							class="transition-all duration-250 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 px-4 py-2"
+							class="transition-all duration-250 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-500/10 text-slate-900 dark:text-slate-200 px-4 py-2"
 							activeClass="text-black dark:!text-white !bg-blue-200 dark:!bg-blue-500/20"
 							addLocale
 						>