From baa6c69835a8b8936bb285e4645430096fb339b4 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Fri, 7 Oct 2022 02:44:28 +0200
Subject: [PATCH] refactor: improve tips/warnings

---
 packages/guide/src/components/Caution.tsx     | 20 +++++++++++--------
 packages/guide/src/components/Info.tsx        | 20 +++++++++++--------
 packages/guide/src/components/Section.tsx     |  9 ++++++++-
 packages/guide/src/components/Tip.tsx         | 20 +++++++++++--------
 .../src/pages/creating-your-bot/index.mdx     |  2 +-
 5 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/packages/guide/src/components/Caution.tsx b/packages/guide/src/components/Caution.tsx
index aa7d93d06..94218e494 100644
--- a/packages/guide/src/components/Caution.tsx
+++ b/packages/guide/src/components/Caution.tsx
@@ -3,14 +3,18 @@ import { VscWarning } from 'react-icons/vsc';
 
 export function Caution({ children }: PropsWithChildren<{}>) {
 	return (
-		<div className="my-4 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">Caution</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">Caution</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>
diff --git a/packages/guide/src/components/Info.tsx b/packages/guide/src/components/Info.tsx
index 1acd9383b..9cced8dc4 100644
--- a/packages/guide/src/components/Info.tsx
+++ b/packages/guide/src/components/Info.tsx
@@ -3,14 +3,18 @@ import { VscInfo } from 'react-icons/vsc';
 
 export function Info({ children }: PropsWithChildren<{}>) {
 	return (
-		<div className="my-4 rounded border border-blue-500 p-4">
-			<div className="flex flex-row place-items-center gap-4">
-				<span className="text-blue-500">
-					<VscInfo size={20} />
-				</span>
-				<div className="flex flex-col gap-2 text-sm">
-					<span className="font-semibold text-blue-500">Info</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-blue-500" />
+					<div className="relative border-b-2 border-blue-500">
+						<div className="-translate-y-50% flex place-items-center gap-2 px-2 text-blue-500">
+							<VscInfo size={20} />
+							<span className="font-semibold text-blue-500">Info</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-blue-500" />
 				</div>
 			</div>
 		</div>
diff --git a/packages/guide/src/components/Section.tsx b/packages/guide/src/components/Section.tsx
index 539c07f55..b9e574e39 100644
--- a/packages/guide/src/components/Section.tsx
+++ b/packages/guide/src/components/Section.tsx
@@ -8,10 +8,14 @@ export function Section({
 	padded = false,
 	dense = false,
 	defaultClosed = false,
+	background = false,
+	gutter = false,
 	children,
 }: PropsWithChildren<{
+	background?: boolean;
 	defaultClosed?: boolean;
 	dense?: boolean;
+	gutter?: boolean;
 	icon?: JSX.Element;
 	padded?: boolean;
 	title: string;
@@ -35,7 +39,10 @@ export function Section({
 					/>
 				</div>
 			</Disclosure>
-			<DisclosureContent state={disclosure}>
+			<DisclosureContent
+				className={`${background ? 'bg-light-700 dark:bg-dark-500 rounded' : ''} ${gutter ? 'mt-2' : ''}`}
+				state={disclosure}
+			>
 				{padded ? <div className={`py-5 ${dense ? 'mx-2 px-0' : 'px-4.5 mx-6.5'}`}>{children}</div> : children}
 			</DisclosureContent>
 		</div>
diff --git a/packages/guide/src/components/Tip.tsx b/packages/guide/src/components/Tip.tsx
index 29d8560ca..06d42d34e 100644
--- a/packages/guide/src/components/Tip.tsx
+++ b/packages/guide/src/components/Tip.tsx
@@ -3,14 +3,18 @@ import { VscFlame } from 'react-icons/vsc';
 
 export function Tip({ children }: PropsWithChildren<{}>) {
 	return (
-		<div className="my-4 rounded border border-green-500 p-4">
-			<div className="flex flex-row place-items-center gap-4">
-				<span className="text-green-500">
-					<VscFlame size={20} />
-				</span>
-				<div className="flex flex-col gap-2 text-sm">
-					<span className="font-semibold text-green-500">Tip</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-green-500" />
+					<div className="relative border-b-2 border-green-500">
+						<div className="-translate-y-50% flex place-items-center gap-2 px-2 text-green-500">
+							<VscFlame size={20} />
+							<span className="font-semibold text-green-500">Tip</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-green-500" />
 				</div>
 			</div>
 		</div>
diff --git a/packages/guide/src/pages/creating-your-bot/index.mdx b/packages/guide/src/pages/creating-your-bot/index.mdx
index ace6cf66e..d0b6dbf7f 100644
--- a/packages/guide/src/pages/creating-your-bot/index.mdx
+++ b/packages/guide/src/pages/creating-your-bot/index.mdx
@@ -119,7 +119,7 @@ console.log(process.env.DISCORD_TOKEN);
 	`.gitignore`](/creating-your-bot/#git-and-gitignore).
 </Caution>
 
-<Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed={true}>
+<Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded dense background gutter>
 While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe:
 
 - Glitch: [Storing secrets in .env](https://glitch.happyfox.com/kb/article/18)