From 7fddeffc8a2c051830f8a45d42eaa53eb002cda6 Mon Sep 17 00:00:00 2001
From: David Vicente <57998545+davidvicentecode@users.noreply.github.com>
Date: Fri, 19 Apr 2024 22:35:57 +0200
Subject: [PATCH] feat: add background blur in some elements

---
 src/components/Navbar.tsx                     | 2 +-
 src/components/background/Background.tsx      | 1 +
 src/pages/QuestionCreator/QuestionCreator.tsx | 2 +-
 src/pages/game/GameQuiz.tsx                   | 2 +-
 src/pages/game/GameReview.tsx                 | 2 +-
 src/pages/game/GameScoreBoard.tsx             | 2 +-
 src/pages/game/LobbyRoom.tsx                  | 2 +-
 7 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0e5e00f..85db4a4 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -3,7 +3,7 @@ import { ThemeSwitch } from "./ThemeSwitch"
 
 export const Navbar = () => {
 	return (
-		<div className="navbar fixed bg-transparent">
+		<div className="navbar absolute z-10 bg-transparent">
 			<div className="flex-1 space-x-4">
 				<Link to={"/"}>
 					<div>
diff --git a/src/components/background/Background.tsx b/src/components/background/Background.tsx
index d3fec84..9ce2063 100644
--- a/src/components/background/Background.tsx
+++ b/src/components/background/Background.tsx
@@ -105,6 +105,7 @@ export const Background = () => {
 					</g>
 				</svg>
 			)}
+			<div className="fixed top-0 left-0 w-full h-full backdrop-blur-3xl sm:backdrop-blur-0"></div>
 		</div>
 	)
 }
diff --git a/src/pages/QuestionCreator/QuestionCreator.tsx b/src/pages/QuestionCreator/QuestionCreator.tsx
index 6fe5ff9..fa1aa5a 100644
--- a/src/pages/QuestionCreator/QuestionCreator.tsx
+++ b/src/pages/QuestionCreator/QuestionCreator.tsx
@@ -3,7 +3,7 @@ import { SimpleQuestionCreator } from "./SimpleQuestionCreator"
 export const QuestionCreator = () => {
 	return (
 		<div className="flex flex-col w-full min-h-screen justify-center items-center pt-10">
-			<div className="w-full sm:w-auto px-4 py-8 sm:px-8 rounded-3xl">
+			<div className="w-full sm:w-auto px-4 py-8 sm:px-8 rounded-box backdrop-blur-3xl">
 				<h1 className="text-5xl font-bold pb-16">Créateur de questions</h1>
 				<SimpleQuestionCreator />
 			</div>
diff --git a/src/pages/game/GameQuiz.tsx b/src/pages/game/GameQuiz.tsx
index 5a63545..6ad7d73 100644
--- a/src/pages/game/GameQuiz.tsx
+++ b/src/pages/game/GameQuiz.tsx
@@ -34,7 +34,7 @@ export const GameQuiz = (props: GameQuizProps) => {
 	}
 
 	return (
-		<div className="flex flex-col w-full sm:w-3/4 max-w-3xl px-4 py-8 sm:px-8 rounded-box space-y-4">
+		<div className="flex flex-col w-full sm:w-3/4 max-w-3xl px-4 py-8 sm:px-8 space-y-4 rounded-box backdrop-blur-3xl">
 			<div className="flex flex-col items-center pb-16">
 				<div className="flex space-x-16">
 					<Countdown key={questionIndex} time={props.game.answerDuration} onComplete={handleAnswer} />
diff --git a/src/pages/game/GameReview.tsx b/src/pages/game/GameReview.tsx
index 89df51b..540039d 100644
--- a/src/pages/game/GameReview.tsx
+++ b/src/pages/game/GameReview.tsx
@@ -52,7 +52,7 @@ export const GameReview = (props: GameReviewProps) => {
 	}
 
 	return (
-		<div className="flex flex-col w-full sm:w-3/4 max-w-3xl px-4 py-8 sm:px-8 space-y-4 rounded-box">
+		<div className="flex flex-col w-full sm:w-3/4 max-w-3xl px-4 py-8 sm:px-8 space-y-4 rounded-box backdrop-blur-3xl">
 			<div className="flex flex-col items-center pb-16">
 				<div className="flex space-x-16">
 					<Countdown key={questionIndex + "-" + usersIndex} time={props.game.reviewDuration} onComplete={goNext} />
diff --git a/src/pages/game/GameScoreBoard.tsx b/src/pages/game/GameScoreBoard.tsx
index 7d36536..a42d180 100644
--- a/src/pages/game/GameScoreBoard.tsx
+++ b/src/pages/game/GameScoreBoard.tsx
@@ -24,7 +24,7 @@ export const GameScoreBoard = (props: GameScoreBoardProps) => {
 	}
 
 	return (
-		<div className="w-full sm:w-3/4 max-w-7xl px-4 py-8 sm:px-8 space-y-4 rounded-box">
+		<div className="w-full sm:w-3/4 max-w-7xl px-4 py-8 sm:px-8 space-y-4 rounded-box backdrop-blur-3xl">
 			<h1>Top players</h1>
 			<table className="table">
 				<thead>
diff --git a/src/pages/game/LobbyRoom.tsx b/src/pages/game/LobbyRoom.tsx
index 53efb73..f274cfa 100644
--- a/src/pages/game/LobbyRoom.tsx
+++ b/src/pages/game/LobbyRoom.tsx
@@ -65,7 +65,7 @@ export const LobbyRoom = (props: LobbyRoomProps) => {
 	}, [])
 
 	return (
-		<div className="w-full lg:w-3/4 max-w-7xl px-4 py-8 lg:px-8 space-y-4 rounded-box ">
+		<div className="w-full lg:w-3/4 max-w-7xl px-4 py-8 lg:px-8 space-y-4 rounded-box backdrop-blur-3xl">
 			<h1 className="text-5xl font-bold pb-16">Nouvelle partie</h1>
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
 				<LobbySettings gameId={props.gameId} />