fix(docs): made designs according to figma (#233)

fetchai · Oct 27, 2023 · 7bf6981 · 7bf6981
1 parent 0475533
commit 7bf6981
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 20 deletions.
diff --git a/components/feedback.tsx b/components/feedback.tsx
@@ -1,4 +1,10 @@
 import React, { useState, useEffect } from "react";
+import {
+  FaRegThumbsUp,
+  FaRegThumbsDown,
+  FaThumbsUp,
+  FaThumbsDown,
+} from "react-icons/fa";
 
 const FeedbackComponent = ({ pageUrl }: { pageUrl: string }) => {
   const [feedback, setFeedback] = useState("");
@@ -55,9 +61,11 @@ const FeedbackComponent = ({ pageUrl }: { pageUrl: string }) => {
   };
 
   return (
-    <div>
+    <div className="nx-w-full">
       {isFeedbackSubmitted ? (
-        <p>Thank you for your feedback!</p>
+        <p className="nx-flex nx-justify-center">
+          Thank you for your feedback!
+        </p>
       ) : (
         <>
           <h3 className="nx-text-lg nx-flex nx-justify-center ">
@@ -66,29 +74,45 @@ const FeedbackComponent = ({ pageUrl }: { pageUrl: string }) => {
           <div
             className={`nx-flex nx-items-center nx-space-x-4 nx-mt-4 nx-justify-center`}
           >
-            <div
-              className={`nx-w-12 nx-h-12 nx-flex nx-items-center nx-justify-center nx-rounded-full nx-bg-green`}
-              onClick={() => handleThumbsClick("positive")}
-            >
-              👍
-            </div>
-            <div
-              className={`nx-w-12 nx-h-12 nx-flex nx-items-center nx-justify-center nx-rounded-full nx-bg-red-500`}
-              onClick={() => handleThumbsClick("negative")}
-            >
-              👎
-            </div>
+            {feedbackType == "positive" ? (
+              <div
+                className={`nx-w-12 nx-h-12 nx-flex nx-items-center nx-justify-center nx-rounded-full nx-border nx-bg-green`}
+              >
+                <FaThumbsUp className="nx-text-white" />
+              </div>
+            ) : (
+              <div
+                className={`nx-w-12 nx-h-12 nx-flex nx-items-center nx-justify-center nx-rounded-full nx-border nx-border-green nx-cursor-pointer`}
+                onClick={() => handleThumbsClick("positive")}
+              >
+                <FaRegThumbsUp />
+              </div>
+            )}
+            {feedbackType == "negative" ? (
+              <div
+                className={`nx-w-12 nx-h-12 nx-flex nx-items-center nx-justify-center nx-rounded-full nx-border nx-bg-red`}
+              >
+                <FaThumbsDown className="nx-text-white" />
+              </div>
+            ) : (
+              <div
+                className={`nx-w-12 nx-h-12 nx-flex nx-items-center nx-justify-center nx-rounded-full nx-border nx-border-red nx-cursor-pointer`}
+                onClick={() => handleThumbsClick("negative")}
+              >
+                <FaRegThumbsDown />
+              </div>
+            )}
           </div>
           {isInputVisible && (
-            <div className="nx-mt-4 nx-flex nx-flex-col nx-justify-center">
+            <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"
+                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"
                 placeholder="Enter your feedback..."
                 value={feedback}
                 onChange={(e) => setFeedback(e.target.value)}
               />
               <button
-                className="nx-mt-4 nx-bg-purple nx-hover:nx-bg-purple-600 nx-text-white nx-font-bold nx-py-2 nx-px-4 nx-rounded-xxl"
+                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"
                 onClick={handleFeedbackSubmit}
               >
                 Submit Feedback

diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
     "scroll-into-view-if-needed": "^3.0.0",
     "sharp": "^0.32.5",
     "typography": "^0.16.24",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/styles/globals.css b/styles/globals.css
@@ -809,6 +809,10 @@ video {
   min-height: 100px;
 }
 
+.nx-min-h-132px {
+  min-height: 132px;
+}
+
 .nx-min-h-\[calc\(100vh-var\(--nextra-navbar-height\)\)\] {
   min-height: calc(100vh - var(--nextra-navbar-height));
 }
@@ -878,6 +882,14 @@ video {
   max-width: 50rem;
 }
 
+.nx-max-w-532px {
+  max-width: 532px;
+}
+
+.nx-max-w-180px {
+  max-width: 180px;
+}
+
 .nx-max-w-\[50\%\] {
   max-width: 50%;
 }
@@ -1171,6 +1183,22 @@ video {
   border-width: 1px;
 }
 
+.nx-border-green {
+  border: 1px solid #e5e7eb;
+}
+
+.nx-border-green:hover {
+  border: 1px solid #23c765;
+}
+
+.nx-border-red {
+  border: 1px solid #e5e7eb;
+}
+
+.nx-border-red:hover {
+  border: 1px solid #e85d2e;
+}
+
 .nx-border-b {
   border-bottom-width: 1px;
 }
@@ -1282,7 +1310,7 @@ video {
 }
 
 .nx-bg-green {
-  background-color: rgba(116, 224, 156, 1);
+  background-color: rgba(35, 199, 101, 1);
 }
 
 .nx-bg-gray-100 {
@@ -1374,6 +1402,10 @@ video {
   background-color: rgba(252, 218, 218, 1);
 }
 
+.nx-bg-red {
+  background-color: rgba(232, 93, 46, 1);
+}
+
 .nx-p-0 {
   padding: 0;
 }
@@ -1700,11 +1732,11 @@ video {
   border-color: rgba(95, 56, 251, 1);
 }
 
-.nx-bg-purple {
+.nx-bg-submit-feedback {
   background-color: rgba(95, 56, 251, 1);
 }
 
-.nx-bg-purple-600 {
+.nx-bg-submit-feedback:hover {
   background-color: rgba(95, 56, 251, 0.6);
 }