From 0c8f330f5a70b285e347769187a9c6226dc5f78f Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sun, 13 Mar 2022 18:22:50 +0100
Subject: [PATCH] Small improvements to the RecorderChip and the Transcript
 lines

---
 src/components/Markdown/Markdawn.tsx | 81 +++++++++++++++++++---------
 src/components/Markdown/TOC.tsx      |  4 +-
 src/components/RecorderChip.tsx      | 52 ++++++++++--------
 src/components/ToolTip.tsx           |  3 +-
 4 files changed, 90 insertions(+), 50 deletions(-)

diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx
index cd75fdf..51c71ba 100644
--- a/src/components/Markdown/Markdawn.tsx
+++ b/src/components/Markdown/Markdawn.tsx
@@ -1,5 +1,6 @@
 import HorizontalLine from "components/HorizontalLine";
 import InsetBox from "components/InsetBox";
+import ToolTip from "components/ToolTip";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import Markdown from "markdown-to-jsx";
 import { slugify } from "queries/helpers";
@@ -28,28 +29,60 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
                 children: React.ReactNode;
               }) => {
                 return (
-                  <h2
-                    id={props.id}
-                    className="flex flex-row place-items-center place-content-center gap-3 hover:[--anchor-opacity:100] [--anchor-opacity:0]"
-                    style={props.style}
-                  >
-                    {props.children}
-                    <abbr title="Copy anchor link">
-                      <span
-                        className="material-icons opacity-[var(--anchor-opacity)] transition-all hover:text-dark cursor-pointer"
-                        onClick={() => {
-                          navigator.clipboard.writeText(
-                            process.env.NEXT_PUBLIC_URL_SELF +
-                              window.location.pathname +
-                              "#" +
-                              props.id
-                          );
-                        }}
-                      >
-                        link
-                      </span>
-                    </abbr>
-                  </h2>
+                  <div className="flex flex-row place-items-center place-content-center gap-3">
+                    <h2 id={props.id} style={props.style}>
+                      {props.children}
+                    </h2>
+                    <ToolTip content={"Copy anchor link"} trigger="mouseenter">
+                      <ToolTip content={"Copied! 👍"} trigger="click">
+                        <span
+                          className="material-icons transition-color hover:text-dark cursor-pointer"
+                          onClick={() => {
+                            navigator.clipboard.writeText(
+                              process.env.NEXT_PUBLIC_URL_SELF +
+                                window.location.pathname +
+                                "#" +
+                                props.id
+                            );
+                          }}
+                        >
+                          link
+                        </span>
+                      </ToolTip>
+                    </ToolTip>
+                  </div>
+                );
+              },
+            },
+            h3: {
+              component: (props: {
+                id: string;
+                style: React.CSSProperties;
+                children: React.ReactNode;
+              }) => {
+                return (
+                  <div className="flex flex-row place-items-center place-content-center gap-3">
+                    <h3 id={props.id} style={props.style}>
+                      {props.children}
+                    </h3>
+                    <ToolTip content={"Copy anchor link"} trigger="mouseenter">
+                      <ToolTip content={"Copied! 👍"} trigger="click">
+                        <span
+                          className="material-icons transition-color hover:text-dark cursor-pointer"
+                          onClick={() => {
+                            navigator.clipboard.writeText(
+                              process.env.NEXT_PUBLIC_URL_SELF +
+                                window.location.pathname +
+                                "#" +
+                                props.id
+                            );
+                          }}
+                        >
+                          link
+                        </span>
+                      </ToolTip>
+                    </ToolTip>
+                  </div>
                 );
               },
             },
@@ -82,7 +115,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
             Transcript: {
               component: (props) => {
                 return (
-                  <div className="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2">
+                  <div className="grid grid-cols-[auto_1fr] mobile:grid-cols-1 gap-x-6 gap-y-2">
                     {props.children}
                   </div>
                 );
@@ -92,7 +125,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
               component: (props) => {
                 return (
                   <>
-                    <strong className="text-dark opacity-60">
+                    <strong className="text-dark opacity-60 mobile:!-mb-4">
                       {props.name}
                     </strong>
                     <p className="whitespace-pre-line">{props.children}</p>
diff --git a/src/components/Markdown/TOC.tsx b/src/components/Markdown/TOC.tsx
index b963ee1..ed2ce6b 100644
--- a/src/components/Markdown/TOC.tsx
+++ b/src/components/Markdown/TOC.tsx
@@ -15,8 +15,8 @@ export default function TOC(props: TOCProps): JSX.Element {
   return (
     <div>
       <h3 className="text-xl">Table of content</h3>
-      <ol className="text-left">
-        <li className="my-2 overflow-x-hidden w-full text-ellipsis whitespace-nowrap">
+      <ol className="text-left max-w-[14.5rem]">
+        <li className="my-2 overflow-x-hidden relative text-ellipsis whitespace-nowrap">
           <a className="" onClick={() => router.replace(`#${toc.slug}`)}>
             {<abbr title={toc.title}>{toc.title}</abbr>}
           </a>
diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx
index 2a61174..18e44c7 100644
--- a/src/components/RecorderChip.tsx
+++ b/src/components/RecorderChip.tsx
@@ -3,6 +3,7 @@ import {
   GetContentTextQuery,
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
+import Button from "./Button";
 import Img, { ImageQuality } from "./Img";
 import ToolTip from "./ToolTip";
 
@@ -19,41 +20,46 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
   return (
     <ToolTip
       content={
-        <div className="p-2 py-5 grid gap-2">
-          <div className="grid grid-flow-col gap-2 place-items-center place-content-start">
+        <div className="text-left p-2 py-5 grid gap-8">
+          <div className="grid grid-flow-col gap-6 place-items-center place-content-start">
             {recorder.attributes.avatar.data && (
               <Img
-                className="w-8 rounded-full"
+                className="w-20 rounded-full border-4 border-mid"
                 image={recorder.attributes.avatar.data.attributes}
                 quality={ImageQuality.Small}
                 rawImg
               />
             )}
-            <h3 className="text-xl">{recorder.attributes.username}</h3>
+            <div className="grid gap-2">
+              <h3 className=" text-2xl">{recorder.attributes.username}</h3>
+              {recorder.attributes.languages.data.length > 0 && (
+                <div className="flex flex-row flex-wrap gap-1">
+                  <p>{langui.languages}:</p>
+                  {recorder.attributes.languages.data.map((language) => (
+                    <Chip key={language.attributes.code}>
+                      {language.attributes.code.toUpperCase()}
+                    </Chip>
+                  ))}
+                </div>
+              )}
+              {recorder.attributes.pronouns && (
+                <div className="flex flex-row flex-wrap gap-1">
+                  <p>{langui.pronouns}:</p>
+                  <Chip>{recorder.attributes.pronouns}</Chip>
+                </div>
+              )}
+            </div>
           </div>
-          {recorder.attributes.languages.data.length > 0 && (
-            <div className="flex flex-row flex-wrap gap-1">
-              <p>{langui.languages}:</p>
-              {recorder.attributes.languages.data.map((language) => (
-                <Chip key={language.attributes.code}>
-                  {language.attributes.code.toUpperCase()}
-                </Chip>
-              ))}
-            </div>
+
+          {recorder.attributes.bio.length > 0 && (
+            <p>{recorder.attributes.bio[0].bio}</p>
           )}
-          {recorder.attributes.pronouns && (
-            <div className="flex flex-row flex-wrap gap-1">
-              <p>{langui.pronouns}:</p>
-              <Chip>{recorder.attributes.pronouns}</Chip>
-            </div>
-          )}
-          <p>
-            {recorder.attributes.bio.length > 0 &&
-              recorder.attributes.bio[0].bio}
-          </p>
+
+          <Button className="cursor-not-allowed">View profile</Button>
         </div>
       }
       placement="top"
+      trigger="click"
     >
       <Chip key={recorder.id}>
         {recorder.attributes.anonymize
diff --git a/src/components/ToolTip.tsx b/src/components/ToolTip.tsx
index aafea75..6af6cb9 100644
--- a/src/components/ToolTip.tsx
+++ b/src/components/ToolTip.tsx
@@ -11,8 +11,9 @@ export default function ToolTip(props: ToolTipProps): JSX.Element {
   if (newProps.interactive === undefined) newProps.interactive = true;
   if (newProps.animation === undefined) newProps.animation = "scale-subtle";
 
+
   return (
-    <Tippy {...newProps}>
+    <Tippy className={`text-[80%] ${newProps.className}`} {...newProps}>
       <div>{props.children}</div>
     </Tippy>
   );