From b3807e72c32b53ae9eb0c101b4a81c20170dba61 Mon Sep 17 00:00:00 2001
From: "Laurie T. Malau" <laurie@gitpod.io>
Date: Wed, 11 May 2022 10:32:19 +0000
Subject: [PATCH] Feedback modal

---
 components/dashboard/src/Analytics.tsx        |  10 +-
 components/dashboard/src/App.tsx              |   2 +
 components/dashboard/src/Menu.tsx             |  21 ++-
 .../dashboard/src/components/PillMenuItem.tsx |   2 +-
 .../src/feedback-form/FeedbackComponent.tsx   | 166 ++++++++++++++++++
 .../src/feedback-form/FeedbackModal.tsx       |  26 +++
 .../src/images/feedback/crying-emoji.svg      |  10 ++
 .../src/images/feedback/happy-emoji.svg       |   7 +
 .../src/images/feedback/meh-emoji.svg         |   6 +
 .../src/images/feedback/starry-eyed-emoji.svg |   6 +
 components/dashboard/src/index.css            |   6 +
 11 files changed, 255 insertions(+), 7 deletions(-)
 create mode 100644 components/dashboard/src/feedback-form/FeedbackComponent.tsx
 create mode 100644 components/dashboard/src/feedback-form/FeedbackModal.tsx
 create mode 100644 components/dashboard/src/images/feedback/crying-emoji.svg
 create mode 100644 components/dashboard/src/images/feedback/happy-emoji.svg
 create mode 100644 components/dashboard/src/images/feedback/meh-emoji.svg
 create mode 100644 components/dashboard/src/images/feedback/starry-eyed-emoji.svg

diff --git a/components/dashboard/src/Analytics.tsx b/components/dashboard/src/Analytics.tsx
index b6f127850942b1..9099f07d5b0076 100644
--- a/components/dashboard/src/Analytics.tsx
+++ b/components/dashboard/src/Analytics.tsx
@@ -10,10 +10,10 @@ import Cookies from "js-cookie";
 import { v4 } from "uuid";
 import { Experiment } from "./experiments";
 
-export type Event = "invite_url_requested" | "organisation_authorised" | "dotfile_repo_changed";
+export type Event = "invite_url_requested" | "organisation_authorised" | "dotfile_repo_changed" | "feedback_submitted";
 type InternalEvent = Event | "path_changed" | "dashboard_clicked";
 
-export type EventProperties = TrackOrgAuthorised | TrackInviteUrlRequested | TrackDotfileRepo;
+export type EventProperties = TrackOrgAuthorised | TrackInviteUrlRequested | TrackDotfileRepo | TrackFeedback;
 type InternalEventProperties = TrackUIExperiments & (EventProperties | TrackDashboardClick | TrackPathChanged);
 
 export interface TrackOrgAuthorised {
@@ -30,6 +30,12 @@ export interface TrackDotfileRepo {
     current: string;
 }
 
+export interface TrackFeedback {
+    selectedEmoji: number;
+    text: string;
+    href: string;
+    path: string;
+}
 interface TrackDashboardClick {
     dnt?: boolean;
     path: string;
diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx
index 1db31a3a659df5..49821b7930661c 100644
--- a/components/dashboard/src/App.tsx
+++ b/components/dashboard/src/App.tsx
@@ -48,6 +48,7 @@ import { parseProps } from "./start/StartWorkspace";
 import SelectIDEModal from "./settings/SelectIDEModal";
 import { StartPage, StartPhase } from "./start/StartPage";
 import { isGitpodIo } from "./utils";
+import FeedbackFormModal from "./feedback-form/FeedbackModal";
 
 const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "./Setup"));
 const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ "./workspaces/Workspaces"));
@@ -372,6 +373,7 @@ function App() {
                     <AdminRoute path="/admin/license" component={License} />
                     <AdminRoute path="/admin/settings" component={AdminSettings} />
 
+                    <Route path="/feedback" exact component={FeedbackFormModal} />
                     <Route path={["/", "/login"]} exact>
                         <Redirect to={workspacesPathMain} />
                     </Route>
diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx
index 225c1b5f6d3414..5c330b0b4f9928 100644
--- a/components/dashboard/src/Menu.tsx
+++ b/components/dashboard/src/Menu.tsx
@@ -26,6 +26,7 @@ import { getTeamSettingsMenu } from "./teams/TeamSettings";
 import { getProjectSettingsMenu } from "./projects/ProjectSettings";
 import { ProjectContext } from "./projects/project-context";
 import { PaymentContext } from "./payment-context";
+import FeedbackFormModal from "./feedback-form/FeedbackModal";
 
 interface Entry {
     title: string;
@@ -41,6 +42,7 @@ export default function Menu() {
     const { showPaymentUI, setShowPaymentUI, setCurrency, setIsStudent, setIsChargebeeCustomer } =
         useContext(PaymentContext);
     const { project, setProject } = useContext(ProjectContext);
+    const [isFeedbackFormVisible, setFeedbackFormVisible] = useState<boolean>(false);
 
     const match = useRouteMatch<{ segment1?: string; segment2?: string; segment3?: string }>(
         "/(t/)?:segment1/:segment2?/:segment3?",
@@ -227,12 +229,15 @@ export default function Menu() {
             title: "Docs",
             link: "https://www.gitpod.io/docs/",
         },
-        {
-            title: "Help",
-            link: "https://www.gitpod.io/support",
-        },
     ];
 
+    const handleFeedbackFormClick = () => {
+        setFeedbackFormVisible(true);
+    };
+
+    const onFeedbackFormClose = () => {
+        setFeedbackFormVisible(false);
+    };
     const renderTeamMenu = () => {
         return (
             <div className="flex p-1 pl-3 ">
@@ -371,6 +376,9 @@ export default function Menu() {
                                             />
                                         </li>
                                     ))}
+                                <li className="cursor-pointer">
+                                    <PillMenuItem name="Feedback" onClick={handleFeedbackFormClick} />
+                                </li>
                             </ul>
                         </nav>
                         <div
@@ -389,6 +397,10 @@ export default function Menu() {
                                         link: "/settings",
                                         separator: true,
                                     },
+                                    {
+                                        title: "Help",
+                                        link: "https://www.gitpod.io/support",
+                                    },
                                     {
                                         title: "Logout",
                                         href: gitpodHostUrl.asApiLogout().toString(),
@@ -403,6 +415,7 @@ export default function Menu() {
                             </ContextMenu>
                         </div>
                     </div>
+                    {isFeedbackFormVisible && <FeedbackFormModal onClose={onFeedbackFormClose} />}
                 </div>
                 {!isMinimalUI && !prebuildId && (
                     <nav className="flex">
diff --git a/components/dashboard/src/components/PillMenuItem.tsx b/components/dashboard/src/components/PillMenuItem.tsx
index 63d6efe130e077..5616b9cd63316f 100644
--- a/components/dashboard/src/components/PillMenuItem.tsx
+++ b/components/dashboard/src/components/PillMenuItem.tsx
@@ -8,7 +8,7 @@ import { Link } from "react-router-dom";
 
 export default function PillMenuItem(p: {
     name: string;
-    selected: boolean;
+    selected?: boolean;
     link?: string;
     onClick?: (event: React.MouseEvent) => void;
 }) {
diff --git a/components/dashboard/src/feedback-form/FeedbackComponent.tsx b/components/dashboard/src/feedback-form/FeedbackComponent.tsx
new file mode 100644
index 00000000000000..feb72537b3ed3a
--- /dev/null
+++ b/components/dashboard/src/feedback-form/FeedbackComponent.tsx
@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { useState } from "react";
+import starryEyed from "../images/feedback/starry-eyed-emoji.svg";
+import happy from "../images/feedback/happy-emoji.svg";
+import meh from "../images/feedback/meh-emoji.svg";
+import crying from "../images/feedback/crying-emoji.svg";
+import { trackEvent } from "../Analytics";
+
+function FeedbackComponent(props: { onClose: () => void; onSubmit: () => void }) {
+    const [text, setText] = useState<string>("");
+    const [selectedEmoji, setSelectedEmoji] = useState<number | undefined>();
+
+    const emojiScore: any = {
+        starry: 4,
+        happy: 3,
+        meh: 2,
+        crying: 1,
+    };
+
+    const onSubmit = () => {
+        if (selectedEmoji) {
+            const feedbackObj = {
+                selectedEmoji,
+                text,
+                href: window.location.href,
+                path: window.location.pathname,
+            };
+            trackEvent("feedback_submitted", feedbackObj);
+        }
+
+        props.onSubmit();
+    };
+
+    const handleClick = (target: any) => {
+        const title = target.title;
+        setSelectedEmoji(emojiScore[title]);
+    };
+
+    const emojiGroup = (width: number) => {
+        return (
+            <>
+                <button
+                    className={
+                        "hover:scale-150 transform bg-transparent bottom-5 right-5 cursor-pointer " +
+                        (selectedEmoji === emojiScore["starry"] ? "" : "grayed")
+                    }
+                    onClick={(e) => handleClick(e.target)}
+                >
+                    <img src={starryEyed} alt="starry eyed emoji" width={width || "24px"} title="starry" />
+                </button>
+                <button
+                    className={
+                        "hover:scale-150 transform bg-transparent bottom-5 right-5 cursor-pointer " +
+                        (selectedEmoji === emojiScore["happy"] ? "" : "grayed")
+                    }
+                    onClick={(e) => handleClick(e.target)}
+                >
+                    <img
+                        className="bottom-5 right-5 cursor-pointer"
+                        title="happy"
+                        src={happy}
+                        alt="happy emoji"
+                        width={width}
+                    />
+                </button>
+                <button
+                    className={
+                        "hover:scale-150 transform bg-transparent bottom-5 right-5 cursor-pointer " +
+                        (selectedEmoji === emojiScore["meh"] ? "" : "grayed")
+                    }
+                    onClick={(e) => handleClick(e.target)}
+                >
+                    <img
+                        className="bottom-5 right-5 cursor-pointer"
+                        title="meh"
+                        src={meh}
+                        alt="meh emoji"
+                        width={width}
+                    />
+                </button>
+                <button
+                    className={
+                        "hover:scale-150 transform bg-transparent bottom-5 right-5 cursor-pointer " +
+                        (selectedEmoji === emojiScore["crying"] ? "" : "grayed")
+                    }
+                    onClick={(e) => handleClick(e.target)}
+                >
+                    <img
+                        className="bottom-5 right-5 cursor-pointer"
+                        title="crying"
+                        src={crying}
+                        alt="crying emoji"
+                        width={width}
+                    />
+                </button>
+            </>
+        );
+    };
+    return (
+        <>
+            <h3 className="mb-4">Send Feedback</h3>
+            {selectedEmoji ? (
+                <div className="flex flex-col -mx-6 px-6 py-4 border-t border-b border-gray-200 dark:border-gray-800">
+                    <div className="relative">
+                        <div className="absolute flex bottom-5 right-5 gap-3">{emojiGroup(24)}</div>
+                        <textarea
+                            style={{ height: "160px", borderRadius: "6px" }}
+                            autoFocus
+                            className="w-full"
+                            name="name"
+                            value={text}
+                            placeholder="Your feedback..."
+                            onChange={(e) => setText(e.target.value)}
+                        />
+                    </div>
+                    <div>
+                        <p className="pt-4">
+                            Alternatively, consider opening{" "}
+                            <a
+                                className="gp-link"
+                                href="https://github.com/gitpod-io/gitpod/issues/new?assignees=&labels=type%3A+bug&template=bug_report.yml"
+                                target="_blank"
+                                rel="noreferrer"
+                            >
+                                {" "}
+                                a bug report{" "}
+                            </a>
+                            or
+                            <a
+                                className="gp-link"
+                                href="https://github.com/gitpod-io/gitpod/issues/new?assignees=&labels=&template=feature_request.md&title="
+                                target="_blank"
+                                rel="noreferrer"
+                            >
+                                {" "}
+                                a feature request{" "}
+                            </a>{" "}
+                            in our issue tracker.
+                        </p>
+                    </div>
+                    <div className="flex justify-end mt-6">
+                        <button className="secondary" onClick={props.onClose}>
+                            Cancel
+                        </button>
+                        <button className="ml-2" onClick={onSubmit}>
+                            Send Feedback
+                        </button>
+                    </div>
+                </div>
+            ) : (
+                <div className="flex flex-col -mx-6 px-6 py-4 border-t border-gray-200 dark:border-gray-800">
+                    <h4 className="text-center text-xl mb-4">We'd love to know what you think!</h4>
+
+                    <div className="flex items-center justify-center w-full space-x-3">{emojiGroup(50)}</div>
+                </div>
+            )}
+        </>
+    );
+}
+
+export default FeedbackComponent;
diff --git a/components/dashboard/src/feedback-form/FeedbackModal.tsx b/components/dashboard/src/feedback-form/FeedbackModal.tsx
new file mode 100644
index 00000000000000..102d3cec7a7a72
--- /dev/null
+++ b/components/dashboard/src/feedback-form/FeedbackModal.tsx
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import Modal from "../components/Modal";
+import FeedbackComponent from "./FeedbackComponent";
+
+function FeedbackFormModal(props: { onClose: () => void }) {
+    const onClose = () => {
+        props.onClose();
+    };
+
+    const onSubmit = () => {
+        props.onClose();
+    };
+
+    return (
+        <Modal visible={true} onClose={onClose}>
+            <FeedbackComponent onClose={onClose} onSubmit={onSubmit} />
+        </Modal>
+    );
+}
+
+export default FeedbackFormModal;
diff --git a/components/dashboard/src/images/feedback/crying-emoji.svg b/components/dashboard/src/images/feedback/crying-emoji.svg
new file mode 100644
index 00000000000000..4a182a244378d2
--- /dev/null
+++ b/components/dashboard/src/images/feedback/crying-emoji.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:luminosity">
+<path d="M24 12C24 18.6273 18.6273 24 12 24C5.37267 24 0 18.6273 0 12C0 5.37267 5.37267 0 12 0C18.6273 0 24 5.37267 24 12Z" fill="#FFCC4D"/>
+<path d="M14.6668 18C14.6668 19.842 13.4728 20 12.0001 20C10.5268 20 9.33347 19.842 9.33347 18C9.33347 16.1593 10.5268 14 12.0001 14C13.4728 14 14.6668 16.1593 14.6668 18ZM20.0001 9.99999C19.9154 10.0001 19.8314 9.98378 19.7528 9.95199C16.2668 8.55799 14.8381 6.45799 14.7788 6.36933C14.6804 6.2224 14.6444 6.0424 14.6787 5.86893C14.713 5.69546 14.8149 5.54272 14.9618 5.44433C15.1087 5.34593 15.2887 5.30993 15.4622 5.34425C15.6357 5.37857 15.7884 5.4804 15.8868 5.62733C15.8995 5.64533 17.1735 7.48399 20.2475 8.71333C20.392 8.77043 20.512 8.87621 20.5868 9.01239C20.6616 9.14857 20.6864 9.3066 20.6571 9.45918C20.6278 9.61176 20.5461 9.7493 20.4261 9.84804C20.3062 9.94678 20.1555 10.0005 20.0001 9.99999V9.99999ZM4.00013 9.99999C3.84544 9.99949 3.69573 9.94527 3.57661 9.84659C3.45748 9.74792 3.37633 9.61092 3.34704 9.45903C3.31774 9.30714 3.34213 9.14979 3.41602 9.01389C3.48991 8.87799 3.60872 8.77198 3.75213 8.71399C6.8268 7.48466 8.1008 5.64599 8.11347 5.62799C8.21254 5.48191 8.36541 5.38098 8.53867 5.34725C8.71193 5.31353 8.89149 5.34974 9.03813 5.44799C9.18458 5.54606 9.28613 5.69822 9.3205 5.87107C9.35487 6.04393 9.31926 6.22337 9.22147 6.36999C9.16213 6.45866 7.73347 8.55866 4.24813 9.95266C4.16917 9.98386 4.08504 9.99991 4.00013 9.99999Z" fill="#664500"/>
+<path d="M16.0002 10.6667H18.6668V23.3333L16.0002 23.3027V10.6667ZM5.3335 23.3333L8.00016 23.3027V10.6667H5.3335V23.3333Z" fill="#5DADEC"/>
+<path d="M9.99913 12C9.89913 12 9.79713 11.9773 9.7018 11.93C7.36046 10.7593 4.98846 11.918 4.96513 11.93C4.88682 11.9692 4.80156 11.9926 4.71421 11.9988C4.62687 12.005 4.53916 11.994 4.45608 11.9663C4.373 11.9386 4.29619 11.8949 4.23002 11.8375C4.16386 11.7802 4.10964 11.7103 4.07046 11.632C4.03128 11.5537 4.00792 11.4684 4.00169 11.3811C3.99546 11.2938 4.0065 11.206 4.03417 11.123C4.06184 11.0399 4.10561 10.9631 4.16296 10.8969C4.22032 10.8307 4.29015 10.7765 4.36846 10.7373C4.4898 10.6773 7.36713 9.27268 10.2985 10.7373C10.4327 10.8046 10.5403 10.9153 10.6038 11.0514C10.6674 11.1875 10.6831 11.341 10.6484 11.4871C10.6138 11.6333 10.5308 11.7634 10.413 11.8565C10.2951 11.9496 10.1493 12.0002 9.99913 12ZM19.3325 12C19.2325 12 19.1305 11.9773 19.0351 11.93C16.6931 10.7593 14.3218 11.918 14.2985 11.93C14.2202 11.9692 14.1349 11.9926 14.0475 11.9988C13.9602 12.005 13.8725 11.994 13.7894 11.9663C13.7063 11.9386 13.6295 11.8949 13.5634 11.8375C13.4972 11.7802 13.443 11.7103 13.4038 11.632C13.3646 11.5537 13.3412 11.4684 13.335 11.3811C13.3288 11.2938 13.3398 11.206 13.3675 11.123C13.3952 11.0399 13.4389 10.9631 13.4963 10.8969C13.5537 10.8307 13.6235 10.7765 13.7018 10.7373C13.8231 10.6773 16.7025 9.27335 19.6318 10.7373C19.7661 10.8046 19.8737 10.9153 19.9372 11.0514C20.0007 11.1875 20.0164 11.341 19.9818 11.4871C19.9471 11.6333 19.8642 11.7634 19.7463 11.8565C19.6285 11.9496 19.4826 12.0002 19.3325 12V12Z" fill="#664500"/>
+<path d="M12 24C18.6274 24 24 23.4031 24 22.6667C24 21.9303 18.6274 21.3333 12 21.3333C5.37258 21.3333 0 21.9303 0 22.6667C0 23.4031 5.37258 24 12 24Z" fill="#5DADEC"/>
+<path d="M12 19.3333C13.1046 19.3333 14 18.7364 14 18C14 17.2636 13.1046 16.6667 12 16.6667C10.8954 16.6667 10 17.2636 10 18C10 18.7364 10.8954 19.3333 12 19.3333Z" fill="#E75A70"/>
+</g>
+</svg>
diff --git a/components/dashboard/src/images/feedback/happy-emoji.svg b/components/dashboard/src/images/feedback/happy-emoji.svg
new file mode 100644
index 00000000000000..c30bfaa05b147e
--- /dev/null
+++ b/components/dashboard/src/images/feedback/happy-emoji.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:luminosity">
+<path d="M24.0002 12.1395C24.0002 18.6899 18.6901 24 12.1398 24C5.58944 24 0.279297 18.6899 0.279297 12.1395C0.279297 5.58922 5.58944 0.279083 12.1398 0.279083C18.6901 0.279083 24.0002 5.58922 24.0002 12.1395Z" fill="#FFCC4D"/>
+<path d="M12.1397 14.2326C9.61194 14.2326 7.93473 13.9384 5.86068 13.5349C5.38682 13.4434 4.46533 13.5349 4.46533 14.9302C4.46533 17.7209 7.67129 21.2093 12.1397 21.2093C16.6077 21.2093 19.8142 17.7209 19.8142 14.9302C19.8142 13.5349 18.8927 13.4428 18.4188 13.5349C16.3448 13.9384 14.6676 14.2326 12.1397 14.2326ZM6.55835 8.65118C6.55835 8.65118 6.55835 7.25583 7.9537 7.25583C9.34905 7.25583 9.34905 8.65118 9.34905 8.65118V10.0465C9.34905 10.0465 9.34905 11.4419 7.9537 11.4419C6.55835 11.4419 6.55835 10.0465 6.55835 10.0465V8.65118ZM14.9304 8.65118C14.9304 8.65118 14.9304 7.25583 16.3258 7.25583C17.7211 7.25583 17.7211 8.65118 17.7211 8.65118V10.0465C17.7211 10.0465 17.7211 11.4419 16.3258 11.4419C14.9304 11.4419 14.9304 10.0465 14.9304 10.0465V8.65118Z" fill="#664500"/>
+<path d="M5.86084 14.9302C5.86084 14.9302 7.95386 15.6279 12.1399 15.6279C16.326 15.6279 18.419 14.9302 18.419 14.9302C18.419 14.9302 17.0236 17.7209 12.1399 17.7209C7.25619 17.7209 5.86084 14.9302 5.86084 14.9302Z" fill="white"/>
+</g>
+</svg>
diff --git a/components/dashboard/src/images/feedback/meh-emoji.svg b/components/dashboard/src/images/feedback/meh-emoji.svg
new file mode 100644
index 00000000000000..90ccc0c6e0ffc4
--- /dev/null
+++ b/components/dashboard/src/images/feedback/meh-emoji.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:luminosity">
+<path d="M23.75 12.125C23.75 18.6835 18.4335 24 11.875 24C5.317 24 0 18.6835 0 12.125C0 5.567 5.317 0.25 11.875 0.25C18.4335 0.25 23.75 5.567 23.75 12.125Z" fill="#FFCC4D"/>
+<path d="M9.08089 11.077C9.08089 12.428 8.29889 13.522 7.33439 13.522C6.36939 13.522 5.58789 12.428 5.58789 11.077C5.58789 9.72699 6.36989 8.63199 7.33439 8.63199C8.29939 8.63199 9.08089 9.72699 9.08089 11.077ZM18.1619 11.077C18.1619 12.428 17.3799 13.522 16.4154 13.522C15.4504 13.522 14.6689 12.428 14.6689 11.077C14.6689 9.72699 15.4509 8.63199 16.4154 8.63199C17.3804 8.63199 18.1619 9.72699 18.1619 11.077ZM7.68389 19.11C9.08089 15.6175 16.7644 15.6175 16.7644 17.015C16.7644 17.713 11.1764 16.316 7.68389 19.11" fill="#664500"/>
+</g>
+</svg>
diff --git a/components/dashboard/src/images/feedback/starry-eyed-emoji.svg b/components/dashboard/src/images/feedback/starry-eyed-emoji.svg
new file mode 100644
index 00000000000000..897593900c03d0
--- /dev/null
+++ b/components/dashboard/src/images/feedback/starry-eyed-emoji.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 12C24 18.6273 18.6273 24 12 24C5.37267 24 0 18.6273 0 12C0 5.37267 5.37267 0 12 0C18.6273 0 24 5.37267 24 12Z" fill="#FFCC4D"/>
+<path d="M11.9998 14C9.5845 14 7.98184 13.7187 5.99984 13.3333C5.54717 13.246 4.6665 13.3333 4.6665 14.6667C4.6665 17.3333 7.72984 20.6667 11.9998 20.6667C16.2692 20.6667 19.3332 17.3333 19.3332 14.6667C19.3332 13.3333 18.4525 13.2453 17.9998 13.3333C16.0178 13.7187 14.4152 14 11.9998 14Z" fill="#664500"/>
+<path d="M6 14.6667C6 14.6667 8 15.3333 12 15.3333C16 15.3333 18 14.6667 18 14.6667C18 14.6667 16.6667 17.3333 12 17.3333C7.33333 17.3333 6 14.6667 6 14.6667Z" fill="white"/>
+<path d="M10.4547 2.94199L7.42672 3.47599L5.86672 0.640661C5.78241 0.488831 5.65284 0.367081 5.49606 0.292374C5.33928 0.217667 5.16311 0.193723 4.99208 0.223879C4.82105 0.254035 4.66368 0.336788 4.54191 0.460609C4.42014 0.58443 4.34002 0.743152 4.31272 0.914661L3.81605 4.11266L0.788052 4.64666C0.613874 4.67731 0.453962 4.76257 0.331452 4.89012C0.208942 5.01766 0.130186 5.18088 0.10658 5.35615C0.0829726 5.53142 0.115738 5.70966 0.200137 5.86507C0.284535 6.02049 0.416189 6.14502 0.576052 6.22066L3.28938 7.50866L2.79072 10.7167C2.7726 10.8354 2.78031 10.9567 2.81332 11.0722C2.84634 11.1877 2.90389 11.2948 2.98204 11.386C3.0602 11.4773 3.15711 11.5506 3.26618 11.601C3.37525 11.6514 3.49391 11.6776 3.61405 11.678C3.83205 11.678 4.04738 11.5927 4.20805 11.43L6.54938 9.05599L9.56138 10.486C9.72054 10.5614 9.89949 10.5844 10.0726 10.5518C10.2456 10.5192 10.4039 10.4325 10.5247 10.3044C10.6454 10.1762 10.7225 10.013 10.7448 9.83835C10.7671 9.66365 10.7334 9.48639 10.6487 9.33199L9.08338 6.48666L11.1934 4.34799C11.3167 4.22183 11.3969 4.05984 11.4224 3.88526C11.4479 3.71069 11.4175 3.53252 11.3354 3.37633C11.2534 3.22014 11.1239 3.09398 10.9657 3.01594C10.8075 2.93791 10.6286 2.91202 10.4547 2.94199ZM13.5454 2.94199L16.5734 3.47599L18.1334 0.640661C18.2175 0.488727 18.347 0.36686 18.5038 0.292068C18.6606 0.217277 18.8368 0.193294 19.0078 0.223466C19.1789 0.253637 19.3362 0.336459 19.4579 0.46037C19.5796 0.584282 19.6596 0.743101 19.6867 0.914661L20.1834 4.11266L23.2114 4.64666C23.5687 4.70933 23.8441 4.99599 23.8921 5.35533C23.9401 5.71466 23.7514 6.06399 23.4234 6.21999L20.7101 7.50799L21.2087 10.716C21.2268 10.8348 21.2191 10.956 21.1861 11.0716C21.1531 11.1871 21.0955 11.2941 21.0174 11.3854C20.9392 11.4766 20.8423 11.5499 20.7333 11.6003C20.6242 11.6507 20.5055 11.677 20.3854 11.6773C20.1674 11.6773 19.9521 11.592 19.7914 11.4293L17.4501 9.05533L14.4381 10.4853C14.2789 10.5607 14.0999 10.5838 13.9269 10.5511C13.7538 10.5185 13.5955 10.4319 13.4748 10.3037C13.354 10.1755 13.2769 10.0124 13.2546 9.83768C13.2324 9.66299 13.266 9.48572 13.3507 9.33133L14.9161 6.48666L12.8061 4.34799C12.6821 4.22206 12.6013 4.06002 12.5753 3.88523C12.5493 3.71043 12.5794 3.53189 12.6614 3.37533C12.7443 3.2192 12.8744 3.09325 13.0332 3.01544C13.1919 2.93763 13.3712 2.91192 13.5454 2.94199V2.94199Z" fill="#E95F28"/>
+</svg>
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index a6d1c9712e8fd4..a6f669a7539b43 100644
--- a/components/dashboard/src/index.css
+++ b/components/dashboard/src/index.css
@@ -43,6 +43,12 @@
     .dark .dark\:filter-invert {
         @apply filter-invert;
     }
+    .grayed {
+        filter: grayscale(100%);
+    }
+    .grayed:hover {
+        filter: none;
+    }
 }
 
 @layer components {