From 103cb16be0b54c7619e474059db94f7b406568a2 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Fri, 7 Oct 2022 02:45:04 +0200
Subject: [PATCH] refactor: improve deprecation block

---
 .../src/components/tsdoc/BlockComment.tsx     | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/website/src/components/tsdoc/BlockComment.tsx b/packages/website/src/components/tsdoc/BlockComment.tsx
index 3b0bb4952..e5bdff2af 100644
--- a/packages/website/src/components/tsdoc/BlockComment.tsx
+++ b/packages/website/src/components/tsdoc/BlockComment.tsx
@@ -20,14 +20,18 @@ export function ExampleBlock({
 
 export function DeprecatedBlock({ children }: PropsWithChildren): JSX.Element {
 	return (
-		<div className="rounded border border-red-500 p-4">
-			<div className="flex flex-row place-items-center gap-4">
-				<span className="text-red-500">
-					<VscWarning size={20} />
-				</span>
-				<div className="flex flex-col gap-2 text-sm">
-					<span className="font-semibold text-red-500">Deprecated</span>
-					{children}
+		<div className="my-4">
+			<div className="relative flex">
+				<div className="p-4">{children}</div>
+				<div className="absolute flex h-full w-full">
+					<div className="rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-t-2 border-b-2 border-l-2 border-red-500" />
+					<div className="relative border-b-2 border-red-500">
+						<div className="-translate-y-50% flex place-items-center gap-2 px-2 text-red-500">
+							<VscWarning size={20} />
+							<span className="font-semibold text-red-500">Deprecated</span>
+						</div>
+					</div>
+					<div className="rounded-tr-1.5 rounded-br-1.5 flex-1 border-t-2 border-b-2 border-r-2 border-red-500" />
 				</div>
 			</div>
 		</div>