feat: add background blur in some elements

david-vct · Apr 19, 2024 · 7fddeff · 7fddeff
1 parent 47f9fbc
commit 7fddeff
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />