From a0d83dbc92eeb5c15fdd08d86586d8bd9c416ff9 Mon Sep 17 00:00:00 2001
From: cristianbote <botecristian@yahoo.com>
Date: Fri, 14 Jan 2022 12:35:02 +0200
Subject: [PATCH 1/4] Work on the button styles and add a tooltip component

---
 src/components/controllers/tutorial/index.js  | 12 +++++--
 .../controllers/tutorial/style.module.less    | 31 ++++++++++++++++---
 src/lib/tooltip/tooltip.css                   | 28 +++++++++++++++++
 src/lib/tooltip/tooltip.js                    | 15 +++++++++
 4 files changed, 79 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/tooltip/tooltip.css
 create mode 100644 src/lib/tooltip/tooltip.js

diff --git a/src/components/controllers/tutorial/index.js b/src/components/controllers/tutorial/index.js
index fbfb8489e..873f9835d 100644
--- a/src/components/controllers/tutorial/index.js
+++ b/src/components/controllers/tutorial/index.js
@@ -19,6 +19,7 @@ import { usePage } from '../page';
 import { useStore, storeCtx } from '../../store-adapter';
 import { InjectPrerenderData } from '../../../lib/prerender-data';
 import { getContent } from '../../../lib/content';
+import { WithTooltip } from '../../../lib/tooltip/tooltip';
 
 const IS_PRERENDERING = typeof window === 'undefined';
 
@@ -264,9 +265,14 @@ function TutorialView({
 						</button>
 					)}
 					{page.meta.next && (
-						<a class={style.nextButton} href={page.meta.next}>
-							{page.meta.nextText || 'Next'}
-						</a>
+						<WithTooltip
+							showTooltip={solvable ? !solved : undefined}
+							tooltip={`The challenge is not solved yet! Try to solve it before moving to the next chapter`}
+						>
+							<a class={style.nextButton} href={page.meta.next}>
+								{page.meta.nextText || 'Next'}
+							</a>
+						</WithTooltip>
 					)}
 				</div>
 			</div>
diff --git a/src/components/controllers/tutorial/style.module.less b/src/components/controllers/tutorial/style.module.less
index e4ae257df..3908c64a6 100644
--- a/src/components/controllers/tutorial/style.module.less
+++ b/src/components/controllers/tutorial/style.module.less
@@ -28,8 +28,16 @@
 
 		&.solvable:not(&.solved) .nextButton,
 		&.solvable:not(&.solved) .nextButton:hover {
-			background: #534e5b;
+			background-color: transparent;
+			color: #fff;
 			transform: none;
+			box-shadow: none;
+			border-width: 2px;
+			border-color: var(--color-brand);
+
+			@media all and (prefers-color-scheme: light) {
+				color: black;
+			}
 		}
 
 		.tutorialWindow {
@@ -43,6 +51,7 @@
 			transition: opacity 1s ease;
 			box-shadow: 1px 0 0 var(--color-brand);
 			overflow-y: scroll;
+			overflow-x: hidden;
 			z-index: 10;
 
 			&::-webkit-scrollbar {
@@ -166,6 +175,8 @@
 					outline: none;
 					background: var(--color-btn-background);
 					color: var(--color-btn);
+					border-width: 2px;
+
 					cursor: pointer;
 					&:hover,
 					&:focus-visible {
@@ -178,10 +189,22 @@
 					}
 				}
 
+				.helpButton,
+				.prevButton {
+					background-color: transparent;
+					color: #fff;
+
+					@media all and (prefers-color-scheme: light) {
+						color: black;
+					}
+				}
+
 				.nextButton {
-					background: var(--color-btn);
-					border-color: var(--color-btn-background);
-					color: var(--color-btn-background);
+					background-color: var(--color-brand);
+					border-width: 0;
+					color: white;
+					display: flex;
+					align-items: center;
 				}
 
 				.nextButton:hover,
diff --git a/src/lib/tooltip/tooltip.css b/src/lib/tooltip/tooltip.css
new file mode 100644
index 000000000..07e3ac670
--- /dev/null
+++ b/src/lib/tooltip/tooltip.css
@@ -0,0 +1,28 @@
+.tooltip-wrapper {
+	position: relative;
+}
+
+.tooltip-enabled:hover .tooltip-container {
+	opacity: 1;
+}
+
+.tooltip-container {
+	position: absolute;
+	top: -100%;
+	left: 50%;
+	transform: translate(-50%, 0);
+	pointer-events: none;
+	opacity: 0;
+	transition: 200ms ease-in-out opacity;
+}
+
+.tooltip-content {
+	position: absolute;
+	transform: translate(-50%, -75%);
+	width: 220px;
+	background-color: black;
+	border-radius: 4px;
+	padding: 6px;
+	text-align: center;
+	z-index: 1;
+}
diff --git a/src/lib/tooltip/tooltip.js b/src/lib/tooltip/tooltip.js
new file mode 100644
index 000000000..b0b88d9a8
--- /dev/null
+++ b/src/lib/tooltip/tooltip.js
@@ -0,0 +1,15 @@
+import { h, createElement, Fragment } from 'preact';
+import cx from '../cx';
+import './tooltip.css';
+
+export const WithTooltip = ({ children, tooltip, showTooltip = true }) => (
+	<div className={cx('tooltip-wrapper', showTooltip && 'tooltip-enabled')}>
+		<div className="tooltip-container">
+			{createElement(Fragment, {
+				children: <div className="tooltip-content">{tooltip}</div>,
+				_container: document.getElementById('overlay-stack')
+			})}
+		</div>
+		{children}
+	</div>
+);

From ed61723733156201ccd1c3d5a04f1c4e7f072824 Mon Sep 17 00:00:00 2001
From: cristianbote <botecristian@yahoo.com>
Date: Fri, 14 Jan 2022 12:35:55 +0200
Subject: [PATCH 2/4] Remove hand-rolling portal attempts

---
 src/lib/tooltip/tooltip.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/lib/tooltip/tooltip.js b/src/lib/tooltip/tooltip.js
index b0b88d9a8..5fe307caa 100644
--- a/src/lib/tooltip/tooltip.js
+++ b/src/lib/tooltip/tooltip.js
@@ -1,14 +1,11 @@
-import { h, createElement, Fragment } from 'preact';
+import { h } from 'preact';
 import cx from '../cx';
 import './tooltip.css';
 
 export const WithTooltip = ({ children, tooltip, showTooltip = true }) => (
 	<div className={cx('tooltip-wrapper', showTooltip && 'tooltip-enabled')}>
 		<div className="tooltip-container">
-			{createElement(Fragment, {
-				children: <div className="tooltip-content">{tooltip}</div>,
-				_container: document.getElementById('overlay-stack')
-			})}
+			<div className="tooltip-content">{tooltip}</div>
 		</div>
 		{children}
 	</div>

From 8d315df1452c5a0d0a7fb6cb58ea3eb2fd2ff5a1 Mon Sep 17 00:00:00 2001
From: cristianbote <botecristian@yahoo.com>
Date: Tue, 18 Jan 2022 17:23:36 +0200
Subject: [PATCH 3/4] Fix the tooltip behaviour

---
 .../controllers/tutorial/style.module.less    |  2 +-
 src/lib/tooltip/tooltip.css                   | 11 +----
 src/lib/tooltip/tooltip.js                    | 41 +++++++++++++++----
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/components/controllers/tutorial/style.module.less b/src/components/controllers/tutorial/style.module.less
index 3908c64a6..66ee4ba81 100644
--- a/src/components/controllers/tutorial/style.module.less
+++ b/src/components/controllers/tutorial/style.module.less
@@ -25,6 +25,7 @@
 		display: flex;
 		align-content: stretch;
 		justify-content: stretch;
+		position: relative;
 
 		&.solvable:not(&.solved) .nextButton,
 		&.solvable:not(&.solved) .nextButton:hover {
@@ -41,7 +42,6 @@
 		}
 
 		.tutorialWindow {
-			position: relative;
 			background: var(--color-page-bg);
 			color: var(--color-heading);
 			display: flex;
diff --git a/src/lib/tooltip/tooltip.css b/src/lib/tooltip/tooltip.css
index 07e3ac670..b91da23ce 100644
--- a/src/lib/tooltip/tooltip.css
+++ b/src/lib/tooltip/tooltip.css
@@ -1,16 +1,9 @@
-.tooltip-wrapper {
-	position: relative;
-}
-
-.tooltip-enabled:hover .tooltip-container {
+.tooltip-enabled:hover + .tooltip-container {
 	opacity: 1;
 }
 
 .tooltip-container {
 	position: absolute;
-	top: -100%;
-	left: 50%;
-	transform: translate(-50%, 0);
 	pointer-events: none;
 	opacity: 0;
 	transition: 200ms ease-in-out opacity;
@@ -18,7 +11,7 @@
 
 .tooltip-content {
 	position: absolute;
-	transform: translate(-50%, -75%);
+	transform: translate(-25%, -175%);
 	width: 220px;
 	background-color: black;
 	border-radius: 4px;
diff --git a/src/lib/tooltip/tooltip.js b/src/lib/tooltip/tooltip.js
index 5fe307caa..f4d0c8710 100644
--- a/src/lib/tooltip/tooltip.js
+++ b/src/lib/tooltip/tooltip.js
@@ -1,12 +1,37 @@
 import { h } from 'preact';
+import { useRef, useState } from 'preact/hooks';
 import cx from '../cx';
 import './tooltip.css';
 
-export const WithTooltip = ({ children, tooltip, showTooltip = true }) => (
-	<div className={cx('tooltip-wrapper', showTooltip && 'tooltip-enabled')}>
-		<div className="tooltip-container">
-			<div className="tooltip-content">{tooltip}</div>
-		</div>
-		{children}
-	</div>
-);
+export const WithTooltip = ({ children, tooltip, showTooltip = true }) => {
+	const wrapper = useRef();
+	const [pos, setPos] = useState({ top: 0, left: 0 });
+
+	function handleMouseOver() {
+		const rect = wrapper.current.getBoundingClientRect();
+		setPos({ top: rect.top, left: rect.left });
+	}
+
+	return (
+		<>
+			<div
+				className={cx(showTooltip && 'tooltip-enabled')}
+				ref={wrapper}
+				onMouseOver={handleMouseOver}
+			>
+				{children}
+			</div>
+			{showTooltip ? (
+				<div
+					className="tooltip-container"
+					style={{
+						top: pos.top,
+						left: pos.left
+					}}
+				>
+					<div className="tooltip-content">{tooltip}</div>
+				</div>
+			) : null}
+		</>
+	);
+};

From 41e95c2fa0b9dc0db2ce96d654bbb58a868a82a6 Mon Sep 17 00:00:00 2001
From: cristianbote <botecristian@yahoo.com>
Date: Tue, 18 Jan 2022 17:50:19 +0200
Subject: [PATCH 4/4] Better UX handling for the hover pos

---
 src/lib/tooltip/tooltip.css | 16 +++++++++++++++-
 src/lib/tooltip/tooltip.js  |  5 ++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/lib/tooltip/tooltip.css b/src/lib/tooltip/tooltip.css
index b91da23ce..29fdac0e6 100644
--- a/src/lib/tooltip/tooltip.css
+++ b/src/lib/tooltip/tooltip.css
@@ -11,7 +11,7 @@
 
 .tooltip-content {
 	position: absolute;
-	transform: translate(-25%, -175%);
+	transform: translate(-50%, -110%);
 	width: 220px;
 	background-color: black;
 	border-radius: 4px;
@@ -19,3 +19,17 @@
 	text-align: center;
 	z-index: 1;
 }
+
+.tooltip-content:before {
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	position: absolute;
+	border-top: 8px solid black;
+	border-left: 8px solid transparent;
+	border-right: 8px solid transparent;
+	transform: translate(-50%, 0);
+	left: 50%;
+	bottom: -8px;
+}
diff --git a/src/lib/tooltip/tooltip.js b/src/lib/tooltip/tooltip.js
index f4d0c8710..f2bd6ad2d 100644
--- a/src/lib/tooltip/tooltip.js
+++ b/src/lib/tooltip/tooltip.js
@@ -9,7 +9,10 @@ export const WithTooltip = ({ children, tooltip, showTooltip = true }) => {
 
 	function handleMouseOver() {
 		const rect = wrapper.current.getBoundingClientRect();
-		setPos({ top: rect.top, left: rect.left });
+		const header = document
+			.querySelector('#app > header')
+			.getBoundingClientRect();
+		setPos({ top: rect.y - header.height, left: rect.left + rect.width / 2 });
 	}
 
 	return (