From abcda3316746bf10ee5fc38df6f8a1b6886b2f64 Mon Sep 17 00:00:00 2001
From: Nilay Majorwar <nilaymajorwar@gmail.com>
Date: Sun, 27 Feb 2022 01:44:36 +0530
Subject: [PATCH] Add hint for esolang notes button

---
 styles/globals.css |  9 +++++++++
 ui/header.tsx      | 33 +++++++++++++++++++++++++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/styles/globals.css b/styles/globals.css
index 8e1015f..40ce968 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -21,3 +21,12 @@ a {
 * {
   box-sizing: border-box;
 }
+
+.esolang-notes-hint {
+  transition: all 0.1s;
+  transform-origin: 100% 50%;
+}
+
+.esolang-notes-hint.hide {
+  transform: scaleX(0);
+}
diff --git a/ui/header.tsx b/ui/header.tsx
index 26e9429..f218ff1 100644
--- a/ui/header.tsx
+++ b/ui/header.tsx
@@ -1,8 +1,9 @@
+import * as React from "react";
 import Image from "next/image";
 import logoImg from "./assets/logo.png";
 import { GitHubIcon } from "./custom-icons";
 import { useDarkMode } from "./providers/dark-mode-provider";
-import { Button, Card, Icon, Tag } from "@blueprintjs/core";
+import { Button, Card, Colors, Icon, Tag } from "@blueprintjs/core";
 import { useFeaturesGuide } from "./providers/features-guide-provider";
 
 /** Link to the project's GitHub repository */
@@ -12,6 +13,22 @@ const REPO_LINK = "https://github.com/nilaymaj/esolang-park";
 const NOTES_LINK = (id: string) =>
   `https://github.com/nilaymaj/esolang-park/blob/main/languages/${id}/README.md`;
 
+/** Hint text for the language notes button */
+const LangNotesHint = (props: { show: boolean }) => {
+  const { isDark } = useDarkMode();
+  const color = isDark ? Colors.GRAY3 : Colors.GRAY2;
+
+  return (
+    <span
+      className={"esolang-notes-hint " + (props.show ? "" : "hide")}
+      style={{ color, marginRight: 10 }}
+    >
+      <span style={{ marginRight: 5 }}>Read the esolang notes</span>
+      <Icon icon="arrow-right"></Icon>
+    </span>
+  );
+};
+
 type Props = {
   langId: string;
   langName: string;
@@ -21,6 +38,7 @@ type Props = {
 export const Header = (props: Props) => {
   const DarkMode = useDarkMode();
   const featuresGuide = useFeaturesGuide();
+  const [showNotesHint, setShowNotesHint] = React.useState(true);
 
   const brandSection = (
     <div
@@ -50,9 +68,20 @@ export const Header = (props: Props) => {
   );
 
   const infoSection = (
-    <div style={{ flex: 1, textAlign: "right", paddingRight: 8 }}>
+    <div
+      style={{
+        flex: 1,
+        textAlign: "right",
+        paddingRight: 8,
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+      }}
+    >
+      <LangNotesHint show={showNotesHint} />
       <a
         href={NOTES_LINK(props.langId)}
+        onMouseEnter={() => setShowNotesHint(false)}
         title="View the notes for this esolang"
       >
         <Button minimal icon={<Icon icon="document" />} />