feat(docs): add dark theme mode (#993)

fetchai · Oct 16, 2024 · f1d0821 · f1d0821
1 parent 45529c7
commit f1d0821
Show file tree

Hide file tree

Showing 46 changed files with 1,234 additions and 278 deletions.
diff --git a/components/api-endpoint.tsx b/components/api-endpoint.tsx
@@ -187,7 +187,7 @@ export const ApiResponses: React.FC<{
   return (
     <>
       <Row>
-        <h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">
+        <h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90 nx-mt-8 nx-text-2xl">
           Responses
         </h1>
       </Row>
@@ -245,7 +245,7 @@ export const ApiRequest: React.FC<{
   return (
     <>
       <Row>
-        <h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">
+        <h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90 nx-mt-8 nx-text-2xl">
           Request
         </h1>
       </Row>
@@ -390,23 +390,25 @@ export const ApiEndpointRequestResponse: React.FC<{
     <>
       <Row>
         <p className="nx-endpoint nx-text-base">
-          <span className="nextra-content nx-font-medium">Endpoint: </span>
-          <span className="nx-endpoint-method nx-text-fetch-main">
+          <span className="nextra-content nx-font-medium dark:nx-text-white-60">
+            Endpoint:
+          </span>
+          <span className="nx-endpoint-method nx-text-fetch-main dark:nx-text-white-90 dark:nx-bg-green-700">
             {properties.method}
-          </span>{" "}
-          <span className="nx-text-purple nx-font-normal">
+          </span>
+          <span className="nx-text-purple nx-font-normal dark:nx-text-indigo-250">
             {properties.path}
           </span>
           {isModalOpen ? (
             <button
-              className="nx-bg-white nx-text-fetch-main nx-py-2 nx-px-4 nx-rounded-xxl"
+              className="nx-bg-white nx-text-fetch-main nx-py-2 nx-px-4 nx-rounded-xxl dark:nx-text-white dark:nx-bg-indigo-500"
               onClick={closeModal}
             >
               Cancel
             </button>
           ) : (
             <button
-              className="nx-bg-white nx-text-fetch-main nx-py-2 nx-px-4 nx-rounded-xxl"
+              className="nx-bg-white nx-text-fetch-main nx-py-2 nx-px-4 nx-rounded-xxl dark:nx-text-white dark:nx-bg-indigo-500"
               onClick={openModal}
             >
               Run Code
@@ -416,33 +418,37 @@ export const ApiEndpointRequestResponse: React.FC<{
       </Row>
 
       {isModalOpen && (
-        <div className="nx-bg-grey nx-px-6 nx-py-8 nx-rounded nx-mt-12">
-          <div className="nx-bg-white nextra-content nx-py-2 nx-px-4 nx-rounded">
+        <div className="nx-bg-grey nx-px-6 nx-py-8 nx-rounded nx-mt-12 dark:nx-bg-dark-mode-white-2">
+          <div className="nx-bg-white nextra-content nx-py-2 nx-px-4 nx-rounded dark:nx-bg-dark-mode-white-5">
             Parameters
           </div>
 
           <div className="nx-flex nx-flex-col nx-text-sm">
             <div className="nx-flex nx-mt-4 nx-ml-4">
               <div className="nx-w-1/4">
-                <p className="nextra-content nx-text-sm">Name</p>
+                <p className="nextra-content nx-text-sm dark:nx-text-white-60">
+                  Name
+                </p>
               </div>
               <div className="nx-w-3/4">
-                <p className="nextra-content nx-text-sm">Description</p>
+                <p className="nextra-content nx-text-sm dark:nx-text-white-60">
+                  Description
+                </p>
               </div>
             </div>
             <div className="nx-mt-2 nx-mb-4 nx-border-t nx-border-gray-300" />
             {isBearerTokenRequired && (
               <div className="md:nx-flex nx-block nx-items-center nx-ml-4">
                 <div className="nx-flex nx-gap-2 nx-w-1/4">
-                  <p className="nextra-content nx-text-sm">
+                  <p className="nextra-content nx-text-sm dark:nx-text-white-60">
                     Bearer Token required
                   </p>
                   <Tooltip>
-                    <p className="nx-text-sm nx-font-bold nx-text-gray-800 nx-pb-1">
+                    <p className="nx-text-sm nx-font-bold nx-text-gray-800 dark:nx-text-white-90 nx-pb-1">
                       To access your Agentverse API key, please follow these
                       steps:
                     </p>
-                    <ol className="nx-text-xs nx-leading-4 nx-text-gray-600 nx-pb-3 nx-list-decimal nx-mt-2 nx-p-[10px]">
+                    <ol className="nx-text-xs nx-leading-4 nx-text-gray-600 dark:nx-text-white-60 nx-pb-3 nx-list-decimal nx-mt-2 nx-p-[10px]">
                       <li>
                         Log in to your{" "}
                         <Link
@@ -476,7 +482,7 @@ export const ApiEndpointRequestResponse: React.FC<{
                     placeholder="Bearer Token"
                     value={bearerToken}
                     onChange={(e) => setBearerToken(e.target.value)}
-                    className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nx-mt-2 nx-w-full"
+                    className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nx-mt-2 nx-w-full dark:nx-bg-dark-mode-white-10 dark:nx-border-none"
                   />
                 </div>
               </div>
@@ -501,7 +507,7 @@ export const ApiEndpointRequestResponse: React.FC<{
                       updatedPathParameters[paramName] = e.target.value;
                       setPathParameters(updatedPathParameters);
                     }}
-                    className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nx-mt-2 nx-w-full"
+                    className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nx-mt-2 nx-w-full dark:nx-bg-dark-mode-white-10 dark:nx-border-none"
                   />
                 </div>
               </div>
@@ -519,7 +525,8 @@ export const ApiEndpointRequestResponse: React.FC<{
                   <textarea
                     value={requestPayload}
                     onChange={(e) => setRequestPayload(e.target.value)}
-                    className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nextra-content nx-mt-2 nx-h-24 nx-w-full"
+                    style={{ resize: "none" }}
+                    className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nextra-content nx-mt-2 nx-h-24 nx-w-full dark:nx-bg-dark-mode-white-10 dark:nx-border-none"
                   />
                 </div>
               </div>
@@ -546,23 +553,25 @@ export const ApiEndpointRequestResponse: React.FC<{
             {/* Display Actual Response */}
             {actualResponse && (
               <div className="nx-mt-6">
-                <div className="nx-bg-white nextra-content nx-text-base nx-py-2 nx-px-4 nx-rounded">
+                <div className="nx-bg-white nextra-content nx-text-base nx-py-2 nx-px-4 nx-rounded dark:nx-bg-dark-mode-white-5">
                   Actual Response
                 </div>
-                <div className="nx-bg-white nx-rounded nx-p-2 nx-mt-4">
-                  <pre className="nx-whitespace-pre-wrap">{actualResponse}</pre>
+                <div className="nx-bg-white nx-rounded nx-p-2 nx-mt-4 dark:nx-bg-dark-mode-white-10">
+                  <pre className="nx-whitespace-pre-wrap dark:nx-bg-dark-mode-white-10">
+                    {actualResponse}
+                  </pre>
                 </div>
               </div>
             )}
 
             {/* Display Sample Response if Available */}
             {!actualResponse && properties.responses && (
               <div className="nx-mt-6">
-                <div className="nx-bg-white nextra-content nx-text-base nx-py-2 nx-px-4 nx-rounded">
+                <div className="nx-bg-white nextra-content nx-text-base nx-py-2 nx-px-4 nx-rounded dark:nx-bg-dark-mode-white-5">
                   Sample Response
                 </div>
-                <div className="nx-bg-white nx-rounded nx-p-2 nx-mt-4">
-                  <pre className="nx-whitespace-pre-wrap">
+                <div className="nx-bg-white nx-rounded nx-p-2 nx-mt-4 dark:nx-bg-dark-mode-white-5">
+                  <pre className="nx-whitespace-pre-wrap dark:nx-bg-dark-mode-white-5">
                     {JSON.stringify(properties.responses, null, 2)}
                   </pre>
                 </div>

diff --git a/components/code.tsx b/components/code.tsx
@@ -152,7 +152,9 @@ export const Dropdown: React.FC<DropdownProps> = ({
         onClick={toggleDropdown}
         className="nx-relative nx-flex nx-items-center nx-gap-1 nx-cursor-pointer"
       >
-        <span className="dropdown-text">{selectedOption || placeholder}</span>
+        <span className="dropdown-text dark:nx-text-white-80">
+          {selectedOption || placeholder}
+        </span>
         <DropDownArrow />
       </div>
       {isDropdownOpen && (
@@ -234,13 +236,13 @@ export const CodeBlock: React.FC<{
                   viewBox="0 0 12 8"
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg"
+                  className="copy-icon"
                 >
-                  <path
-                    d="M11.3359 0.414062C11.5469 0.648438 11.5469 1 11.3359 1.21094L5.14844 7.39844C4.91406 7.63281 4.5625 7.63281 4.35156 7.39844L1.16406 4.21094C0.929688 4 0.929688 3.64844 1.16406 3.4375C1.375 3.20312 1.72656 3.20312 1.9375 3.4375L4.72656 6.22656L10.5391 0.414062C10.75 0.203125 11.1016 0.203125 11.3125 0.414062H11.3359Z"
-                    fill="#0B1742"
-                  />
+                  <path d="M11.3359 0.414062C11.5469 0.648438 11.5469 1 11.3359 1.21094L5.14844 7.39844C4.91406 7.63281 4.5625 7.63281 4.35156 7.39844L1.16406 4.21094C0.929688 4 0.929688 3.64844 1.16406 3.4375C1.375 3.20312 1.72656 3.20312 1.9375 3.4375L4.72656 6.22656L10.5391 0.414062C10.75 0.203125 11.1016 0.203125 11.3125 0.414062H11.3359Z" />
                 </svg>
-                <span className="nx-copy-text">Copied</span>
+                <span className="nx-copy-text dark:nx-text-white-80">
+                  Copied
+                </span>
               </>
             ) : (
               <CopyIcon />
@@ -249,7 +251,7 @@ export const CodeBlock: React.FC<{
         )}
       </header>
       <span className="filename">{selectedLabel}</span>
-      <div ref={codeRef} style={{ overflowX: "scroll", width: "100%" }}>
+      <div ref={codeRef} style={{ width: "100%" }}>
         {selectedCodeBlock?.component ?? "No code block selected"}
       </div>
     </div>
@@ -407,11 +409,13 @@ export const CustomPre: React.FC<CodeBoxProps> = ({
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
+                        className="copy-icon"
                         d="M11.3359 0.414062C11.5469 0.648438 11.5469 1 11.3359 1.21094L5.14844 7.39844C4.91406 7.63281 4.5625 7.63281 4.35156 7.39844L1.16406 4.21094C0.929688 4 0.929688 3.64844 1.16406 3.4375C1.375 3.20312 1.72656 3.20312 1.9375 3.4375L4.72656 6.22656L10.5391 0.414062C10.75 0.203125 11.1016 0.203125 11.3125 0.414062H11.3359Z"
-                        fill="#0B1742"
                       />
                     </svg>
-                    <span className="nx-copy-text">Copied</span>
+                    <span className="nx-copy-text dark:nx-text-white-80">
+                      Copied
+                    </span>
                   </>
                 ) : (
                   <CopyIcon />
@@ -481,13 +485,13 @@ export const ModifiedPre = ({
                   viewBox="0 0 12 8"
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg"
+                  className="copy-icon"
                 >
-                  <path
-                    d="M11.3359 0.414062C11.5469 0.648438 11.5469 1 11.3359 1.21094L5.14844 7.39844C4.91406 7.63281 4.5625 7.63281 4.35156 7.39844L1.16406 4.21094C0.929688 4 0.929688 3.64844 1.16406 3.4375C1.375 3.20312 1.72656 3.20312 1.9375 3.4375L4.72656 6.22656L10.5391 0.414062C10.75 0.203125 11.1016 0.203125 11.3125 0.414062H11.3359Z"
-                    fill="#0B1742"
-                  />
+                  <path d="M11.3359 0.414062C11.5469 0.648438 11.5469 1 11.3359 1.21094L5.14844 7.39844C4.91406 7.63281 4.5625 7.63281 4.35156 7.39844L1.16406 4.21094C0.929688 4 0.929688 3.64844 1.16406 3.4375C1.375 3.20312 1.72656 3.20312 1.9375 3.4375L4.72656 6.22656L10.5391 0.414062C10.75 0.203125 11.1016 0.203125 11.3125 0.414062H11.3359Z" />
                 </svg>
-                <span className="nx-copy-text">Copied</span>
+                <span className="nx-copy-text dark:nx-text-white-80">
+                  Copied
+                </span>
               </>
             ) : (
               // <CopyIcon />

diff --git a/components/dark-logo.tsx b/components/dark-logo.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import Image from "next/image";
+import darkFetchLogo from "../src/svgs/dark-fetch-logo.svg";
+
+const DarkLogo: React.FC = () => {
+  return (
+    <div className="nx-flex nx-gap-3 nx-items-baseline">
+      <Image
+        width={214}
+        height={24}
+        src={darkFetchLogo}
+        className="hover:nx-opacity-75"
+        alt="fetch-logo"
+      />
+    </div>
+  );
+};
+
+export default DarkLogo;
diff --git a/components/examples-mdx.tsx b/components/examples-mdx.tsx
@@ -1,6 +1,8 @@
 import React, { useState, ChangeEvent } from "react";
 import { GuideBox } from "./feature-guide-tabs";
+import styles from "./footer.module.css";
 import { Grid2 } from "./mdx";
+import { SearchIcon } from "src/icons/shared-icons";
 
 interface Content {
   type: string;
@@ -33,12 +35,12 @@ const ExamplesMdx: React.FC<FilterMdxProps> = ({ content }) => {
   };
 
   return (
-    <div className="nx-flex nx-flex-col nx-w-full nx-items-end nx-justify-end">
+    <div className="nx-flex nx-flex-col nx-w-full nx-py-6">
       <div className="md:nx-flex nx-block nx-gap-5">
         <select
           name="select"
           onChange={onSelectChange}
-          className="nx-rounded-[10px] nx-outline-none nx-cursor-pointer nx-border nx-border-solid nx-px-3 nx-py-2"
+          className="nx-rounded-[10px] nx-outline-none nx-cursor-pointer nx-border nx-border-solid nx-bg-transparent nx-py-2 nx-px-4 dark:full-border-dark dark:nx-text-white-90"
         >
           <option value="">All Types</option>
           {content
@@ -50,13 +52,16 @@ const ExamplesMdx: React.FC<FilterMdxProps> = ({ content }) => {
               </option>
             ))}
         </select>
-        <input
-          name="input"
-          value={inputVal}
-          onChange={onInputChange}
-          placeholder="Search...."
-          className="nx-font-normal nx-mt-5 md:nx-mt-0 nx-bg-transparent nx-rounded-full nx-border nx-border-solid nx-border-purple nx-px-6 nx-py-2"
-        />
+        <div className={styles.inputBox}>
+          <input
+            name="input"
+            value={inputVal}
+            onChange={onInputChange}
+            placeholder="Search...."
+            className={styles.inputInner}
+          />
+          <SearchIcon />
+        </div>
       </div>
       <Grid2>
         {content

diff --git a/components/feature-guide-tabs.tsx b/components/feature-guide-tabs.tsx
@@ -28,10 +28,16 @@ export const GuideBox = ({
       }}
       id={content.title.toLowerCase().split(" ").join("-")}
     >
-      <h3 className="nx-text-black nx-font-medium nx-mb-2 nx-text-lg">
+      <h3
+        className={`nx-text-black nx-font-medium nx-mb-2 nx-text-lg ${
+          hover ? "title-hover-dark" : " dark:nx-text-white-90"
+        }`}
+      >
         {content.title}
       </h3>
-      <p className="nx-text-gray-500 nx-font-normal">{content.description}</p>
+      <p className="nx-text-gray-500 dark:nx-text-white-60 nx-font-normal">
+        {content.description}
+      </p>
     </section>
   );
 };

diff --git a/components/feedback.tsx b/components/feedback.tsx
@@ -88,7 +88,7 @@ const FeedbackComponent = ({ pageUrl }: { pageUrl: string }) => {
         </p>
       ) : (
         <>
-          <h3 className="nx-text-lg md:nx-mt-0 nx-mt-3 nx-flex nx-justify-center ">
+          <h3 className="nx-text-lg md:nx-mt-0 nx-mt-3 nx-flex nx-justify-center dark:nx-text-white-60">
             Was this page helpful?
           </h3>
           <div
@@ -126,7 +126,7 @@ const FeedbackComponent = ({ pageUrl }: { pageUrl: string }) => {
           {isInputVisible && (
             <div className="nx-mt-4 nx-flex nx-flex-col nx-w-full">
               <textarea
-                className={`nx-rounded-lg nx-border nx-border-gray-300 nx-bg-gray-100 nx-p-4 nx-shadow-inner nx-max-w-532px nx-w-full nx-mx-auto nx-min-h-132px ${
+                className={`nx-rounded-lg nx-border nx-border-gray-300 nx-bg-gray-100 nx-p-4 nx-shadow-inner nx-max-w-532px nx-w-full dark:nx-outline-none dark:nx-bg-dark-mode-white-5 dark:nx-border-none nx-mx-auto nx-min-h-132px ${
                   maliciousStringDetected ? "nx-border-red" : ""
                 }`}
                 placeholder="Enter your feedback..."
@@ -143,7 +143,7 @@ const FeedbackComponent = ({ pageUrl }: { pageUrl: string }) => {
                 </p>
               )}
               <button
-                className={`nx-mt-4 nx-bg-submit-feedback nx-text-white nx-font-bold nx-py-2 nx-px-4 nx-rounded-xxl nx-max-w-180px nx-mx-auto nx-w-full ${
+                className={`nx-mt-4 nx-bg-submit-feedback nx-text-sm nx-text-white  nx-font-medium nx-py-2 nx-px-4 nx-rounded-lg nx-max-w-180px nx-mx-auto nx-w-full ${
                   maliciousStringDetected ? "nx-bg-gray-400" : ""
                 }`}
                 onClick={handleFeedbackSubmit}
@@ -153,7 +153,7 @@ const FeedbackComponent = ({ pageUrl }: { pageUrl: string }) => {
               </button>
             </div>
           )}
-          <h3 className="md:nx-text-base nx-text-sm nx-flex nx-justify-center nx-mt-3">
+          <h3 className="md:nx-text-base nx-text-sm nx-flex nx-justify-center nx-mt-3 dark:nx-text-white-60">
             You can also leave detailed feedback
             <Link
               className="nx-text-primary-600 nx-ml-1 nx-underline nx-decoration-from-font [text-underline-position:from-font]"