From 783e3d1f4b388b26f6a899e78d7950f208908893 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Fri, 18 Apr 2025 15:56:11 +0200
Subject: [PATCH] styling changes

---
 web/src/app/icons/page.tsx                  |  4 ++--
 web/src/components/header.tsx               |  2 +-
 web/src/components/icon-submission-form.tsx | 17 ++++++++++-------
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/web/src/app/icons/page.tsx b/web/src/app/icons/page.tsx
index dcd4b350..2d166f28 100644
--- a/web/src/app/icons/page.tsx
+++ b/web/src/app/icons/page.tsx
@@ -52,9 +52,9 @@ export const dynamic = "force-static"
 export default async function IconsPage() {
 	const icons = await getIconsArray()
 	return (
-		<div className="relative isolate overflow-hidden">
+		<div className="isolate overflow-hidden">
 			<div className="py-8">
-				<div className="space-y-4 mb-8 mx-auto max-w-[80vw] relative">
+				<div className="space-y-4 mb-8 mx-auto min-w-[80vw]">
 					<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
 						<div>
 							<h1 className="text-3xl font-bold">Browse icons</h1>
diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
index 2d488cd4..400dd7cf 100644
--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -41,7 +41,7 @@ export function Header() {
 
 	return (
 		<motion.header
-			className="border-b sticky top-0 z-50  backdrop-blur-md border-border/50"
+			className="border-b sticky top-0 z-50 backdrop-blur-2xl bg-background/50 border-border/50"
 			initial={{ y: -20, opacity: 0 }}
 			animate={{ y: 0, opacity: 1 }}
 			transition={{ duration: 0.3, ease: "easeOut" }}
diff --git a/web/src/components/icon-submission-form.tsx b/web/src/components/icon-submission-form.tsx
index 5ca4fa43..5cecdf38 100644
--- a/web/src/components/icon-submission-form.tsx
+++ b/web/src/components/icon-submission-form.tsx
@@ -45,17 +45,20 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
 		<div className="flex flex-col gap-4">
 			<div className="flex flex-col gap-2">
 				{ISSUE_TEMPLATES.map((template) => (
-					<Link key={template.id} href={template.url} className="w-full group" target="_blank" rel="noopener noreferrer">
+					<Link key={template.id} href={template.url} className="w-full group z10" target="_blank" rel="noopener noreferrer">
 						<Button
+							variant="secondary"
 							key={template.id}
-							variant="outline"
-							className="w-full flex flex-col items-start gap-1 h-auto p-4 text-left cursor-pointer0/10 dark:hover:bg-rose-900/30   transition-all duration-300"
+							className="w-full flex flex-col items-start gap-1 h-auto p-4 text-left cursor-pointer transition-all duration-300"
+							asChild
 						>
-							<div className="flex w-full items-center justify-between">
-								<span className="font-medium group-hover: transition-all duration-300">{template.name}</span>
-								<ExternalLink className="h-4 w-4 text-muted-foreground group-hover: transition-all duration-300" />
+							<div>
+								<div className="flex w-full items-center justify-between">
+									<span className="font-medium transition-all duration-300">{template.name}</span>
+									<ExternalLink className="h-4 w-4 text-muted-foreground transition-all duration-300" />
+								</div>
+								<span className="text-xs text-muted-foreground">{template.description}</span>
 							</div>
-							<span className="text-xs text-muted-foreground">{template.description}</span>
 						</Button>
 					</Link>
 				))}