From 4e9872adb5c31a1de7d5aee864acdbc16a935a7a Mon Sep 17 00:00:00 2001
From: sacdeq <pierhugocarpentier36@gmail.com>
Date: Fri, 25 Apr 2025 14:41:17 +0200
Subject: [PATCH] fix css ring

---
 src/app/components/Lobby.tsx   |  4 ++--
 src/app/components/Ranked.tsx  | 14 +++++++-------
 src/app/components/Session.tsx | 16 ++++++++--------
 src/app/globals.css            |  8 ++++++++
 4 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/app/components/Lobby.tsx b/src/app/components/Lobby.tsx
index e919cf7..774c81a 100644
--- a/src/app/components/Lobby.tsx
+++ b/src/app/components/Lobby.tsx
@@ -79,7 +79,7 @@ export default function Lobby ( { player }: { player: string } )
 									></div>
 
 									<div className="grid grid-rows-2 flex-grow mx-4 min-w-0">
-										<div className="name font-semibold text-white text-sm text-shadow-xl truncate">
+										<div className="name font-semibold text-white text-sm  truncate">
 											{ player.tag ? `${ player.tag } ${ player.name }` : player.name }
 										</div>
 
@@ -96,7 +96,7 @@ export default function Lobby ( { player }: { player: string } )
 													backgroundImage: `url(${ player.positionIcon })`,
 												} }
 											></div>
-											<div className="wr font-bold text-white text-xs text-shadow-xl ml-1 pt-1">
+											<div className="wr font-bold text-white text-xs  ml-1 pt-1">
 												{ player.wr }%
 											</div>
 										</div>
diff --git a/src/app/components/Ranked.tsx b/src/app/components/Ranked.tsx
index 53fa17a..6103ff8 100644
--- a/src/app/components/Ranked.tsx
+++ b/src/app/components/Ranked.tsx
@@ -57,20 +57,20 @@ export default function Ranked ( { name, tag }: { name: string; tag: string } )
 			<div className="text flex flex-row font-bold tracking-wide">
 				<div className="elo basis-2/3 pr-4 mb-3 text-white">
 					{ [ "MASTER", "GRANDMASTER", "CHALLENGER" ].includes( data.tier ) ? (
-						<div className="league basis-1/2 text-4xl text-shadow-xl">
+						<div className="league basis-1/2 text-4xl ">
 							{ data.tier } { data.lp } LP
 						</div>
 					) : (
-						<div className="points basis-1/2 text-3xl text-shadow-xl">
+						<div className="points basis-1/2 text-3xl ">
 							{ data.tier } { data.division } { data.lp } LP
 						</div>
 					) }
 				</div>
 
 				<div className="stats basis-1/3 flex flex-row justify-end text-3xl tracking-tighter">
-					<div className="wins px-2 text-sky-600 text-shadow-xl">{ data.wins }W</div>
-					<div className="losses px-2 text-red-600 text-shadow-xl">{ data.losses }L</div>
-					<div className="winrate pl-3 text-white text-shadow-xl">
+					<div className="wins px-2 text-sky-600 ">{ data.wins }W</div>
+					<div className="losses px-2 text-red-600 ">{ data.losses }L</div>
+					<div className="winrate pl-3 text-white ">
 						{ data.winrate }%
 					</div>
 				</div>
@@ -83,7 +83,7 @@ export default function Ranked ( { name, tag }: { name: string; tag: string } )
 						className={ `game basis-1/6 px-1.5 ${ match.isOld ? "old" : "" }` }
 					>
 						<div
-							className={ `background ring-4 rounded-full ${ match.win ? "win ring-sky-600" : "loss ring-red-600"
+							className={ `background rounded-full ${ match.win ? "win ring-4-sky-600" : "loss ring-4-red-600"
 								}` }
 						>
 							<div
@@ -92,7 +92,7 @@ export default function Ranked ( { name, tag }: { name: string; tag: string } )
 								style={ { backgroundImage: `url('${ match.championImg }')` } }
 							/>
 						</div>
-						<div className="kda text-center text-xl font-semilight text-gray-200 tracking-tight text-shadow-xl">
+						<div className="kda text-center text-xl font-semilight text-gray-200 tracking-tight ">
 							{ match.kills }/{ match.deaths }/{ match.assists }
 						</div>
 					</div>
diff --git a/src/app/components/Session.tsx b/src/app/components/Session.tsx
index f57e5e1..bcad434 100644
--- a/src/app/components/Session.tsx
+++ b/src/app/components/Session.tsx
@@ -62,15 +62,15 @@ export default function Session ( { name, tag }: { name: string; tag: string } )
 
 			<div className="session mt-5">
 				<div className="kda text-center px-2">
-					<span className="text-3xl text-white text-shadow-xl">
+					<span className="text-3xl text-white ">
 						{ data.kills }
 					</span>
-					<span className="text-2xl text-gray-300 text-shadow-xl">/</span>
-					<span className="text-3xl text-red-600 text-shadow-xl">
+					<span className="text-2xl text-gray-300 ">/</span>
+					<span className="text-3xl text-red-600 ">
 						{ data.deaths }
 					</span>
-					<span className="text-2xl text-gray-300 text-shadow-xl">/</span>
-					<span className="text-3xl text-white text-shadow-xl">
+					<span className="text-2xl text-gray-300 ">/</span>
+					<span className="text-3xl text-white ">
 						{ data.assists }
 					</span>
 				</div>
@@ -79,17 +79,17 @@ export default function Session ( { name, tag }: { name: string; tag: string } )
 					<div className={ `absolute top-0 w-full ${ data.lpGain !== 0 ? "slide-box" : ""
 						}` }>
 						<div className="wl flex flex-row justify-center">
-							<div className="wins text-3xl text-center text-sky-600 px-1 text-shadow-xl">
+							<div className="wins text-3xl text-center text-sky-600 px-1 ">
 								{ data.wins }W
 							</div>
-							<div className="losses text-3xl text-center text-red-600 px-1 text-shadow-xl">
+							<div className="losses text-3xl text-center text-red-600 px-1 ">
 								{ data.losses }L
 							</div>
 						</div>
 
 						{ typeof data.lpGain === "number" && data.lpGain !== 0 && (
 							<div
-								className={ `lp text-3xl text-center px-1 text-shadow-xl ${ data.lpGain > 0
+								className={ `lp text-3xl text-center px-1  ${ data.lpGain > 0
 									? "text-sky-600"
 									: data.lpGain < 0
 										? "text-red-600"
diff --git a/src/app/globals.css b/src/app/globals.css
index 5bbd4b8..1cad67e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -45,6 +45,14 @@ body {
 	}
 }
 
+.ring-4-red-600 {
+	box-shadow: 0 0 0 4px #e7000b;
+}
+
+.ring-4-sky-600 {
+	box-shadow: 0 0 0 4px #0084d1;
+}
+
 .scaler-200 {
 	transform: scale(2);
 }