Small improvements to the RecorderChip and the Transcript lines

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,15 +29,14 @@ 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}
-                  >
+                  <div className="flex flex-row place-items-center place-content-center gap-3">
+                    <h2 id={props.id} style={props.style}>
                       {props.children}
-                    <abbr title="Copy anchor link">
+                    </h2>
+                    <ToolTip content={"Copy anchor link"} trigger="mouseenter">
+                      <ToolTip content={"Copied! 👍"} trigger="click">
                         <span
-                        className="material-icons opacity-[var(--anchor-opacity)] transition-all hover:text-dark cursor-pointer"
+                          className="material-icons transition-color hover:text-dark cursor-pointer"
                           onClick={() => {
                             navigator.clipboard.writeText(
                               process.env.NEXT_PUBLIC_URL_SELF +
@@ -48,8 +48,41 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
                         >
                           link
                         </span>
-                    </abbr>
-                  </h2>
+                      </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>

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>

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,18 +20,18 @@ 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>
+            <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>
@@ -47,13 +48,18 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
                   <Chip>{recorder.attributes.pronouns}</Chip>
                 </div>
               )}
-          <p>
-            {recorder.attributes.bio.length > 0 &&
-              recorder.attributes.bio[0].bio}
-          </p>
+            </div>
+          </div>
+
+          {recorder.attributes.bio.length > 0 && (
+            <p>{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

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>
   );