docs: redesigned documentation (#2539)

* docs: redesigned navigation bar (#2478)

* docs: redesigned homepage (#2480)

* docs: redesigned homepage

* fixed link

* docs: redesigned notes (#2491)

* docs: Applied Typography redesign rules (#2516)

* changes to typography

* small changes and fixes

* docs: redesigned table of content (#2518)

* redesigning toc

* finalized table of content design

* docs: redesigned code blocks (#2519)

* docs: redesigned code blocks

* removed unused package

* docs: redesigned survey and content footer (#2522)

* fixes to inline code

* redesigned doc footer

* docs: redesigned footer (#2523)

* docs: changed dark mode colors (#2524)

* docs: redesigned sidebar (#2535)

* docs: redesigned search modal (#2537)

* docs: resolved loose ends (#2538)

* added spacing for tabs

* docs: added no-zoom class for deploy images

* fix to tooltip design for inline code

www/docs/src/theme/CopyButton/index.js

@@ -0,0 +1,26 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import copy from 'copy-text-to-clipboard';
+import Tooltip from '../Tooltip';
+
+export default function CopyButton ({ children, buttonClassName, text, tooltipClassName }) {
+  const [isCopied, setIsCopied] = useState(false);
+  const copyTimeout = useRef(undefined);
+
+  const handleCopy = useCallback(() => {
+    copy(text);
+    setIsCopied(true);
+    copyTimeout.current = window.setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  }, [text]);
+
+  useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
+
+  return (
+    <Tooltip text={isCopied ? `Copied!` : `Copy to Clipboard`} tooltipClassName={tooltipClassName}>
+      <button className={`copy-action ${buttonClassName}`} onClick={handleCopy}>
+        {children}
+      </button>
+    </Tooltip>
+  )
+}