From dfa8937df5aa8206a363b5139486accf79f78820 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Wed, 11 Jan 2023 18:59:31 +0530
Subject: [PATCH] style: added cta at the bottom of sidebar, added missing
 icons as well, showing dynamic workspace member count on workspace dropdown
 (#166)

---
 .../components/sidebar/workspace-options.tsx  |  4 +-
 apps/app/layouts/navbar/main-sidebar.tsx      | 83 +++++++++++++++++--
 apps/app/types/workspace.d.ts                 |  1 +
 apps/app/ui/icons/bolt-icon.tsx               | 18 ++++
 apps/app/ui/icons/comment-icon.tsx            | 18 ++++
 apps/app/ui/icons/discord-icon.tsx            | 25 ++++++
 apps/app/ui/icons/document-icon.tsx           | 18 ++++
 apps/app/ui/icons/github-icon.tsx             | 30 +++++++
 apps/app/ui/icons/index.ts                    |  6 ++
 .../ui/icons/question-mark-circle-icon.tsx    | 22 +++++
 yarn.lock                                     |  6 +-
 11 files changed, 222 insertions(+), 9 deletions(-)
 create mode 100644 apps/app/ui/icons/bolt-icon.tsx
 create mode 100644 apps/app/ui/icons/comment-icon.tsx
 create mode 100644 apps/app/ui/icons/discord-icon.tsx
 create mode 100644 apps/app/ui/icons/document-icon.tsx
 create mode 100644 apps/app/ui/icons/github-icon.tsx
 create mode 100644 apps/app/ui/icons/question-mark-circle-icon.tsx

diff --git a/apps/app/components/sidebar/workspace-options.tsx b/apps/app/components/sidebar/workspace-options.tsx
index 52fcfa9ac..10da3eaad 100644
--- a/apps/app/components/sidebar/workspace-options.tsx
+++ b/apps/app/components/sidebar/workspace-options.tsx
@@ -185,7 +185,9 @@ const WorkspaceOptions: React.FC<Props> = ({ sidebarCollapse }) => {
                                 </div>
                                 <div className="text-left">
                                   <h5 className="text-sm">{workspace.name}</h5>
-                                  <div className="text-xs text-gray-500">1 members</div>
+                                  <div className="text-xs text-gray-500">
+                                    {workspace.total_members} members
+                                  </div>
                                 </div>
                               </button>
                             )}
diff --git a/apps/app/layouts/navbar/main-sidebar.tsx b/apps/app/layouts/navbar/main-sidebar.tsx
index e453bbddb..a0f961ac3 100644
--- a/apps/app/layouts/navbar/main-sidebar.tsx
+++ b/apps/app/layouts/navbar/main-sidebar.tsx
@@ -1,4 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
+
+import Link from "next/link";
+
+import { Transition } from "@headlessui/react";
 
 // hooks
 import useTheme from "lib/hooks/useTheme";
@@ -10,16 +14,46 @@ import {
   Cog6ToothIcon,
   RectangleStackIcon,
   ArrowLongLeftIcon,
-  QuestionMarkCircleIcon,
   RectangleGroupIcon,
 } from "@heroicons/react/24/outline";
-import { CyclesIcon } from "ui/icons";
+import {
+  CyclesIcon,
+  QuestionMarkCircleIcon,
+  BoltIcon,
+  DocumentIcon,
+  DiscordIcon,
+  GithubIcon,
+  CommentIcon,
+} from "ui/icons";
 
 type Props = {
   toggleSidebar: boolean;
   setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
+const helpOptions = [
+  {
+    name: "Documentation",
+    href: "https://docs.plane.so/",
+    Icon: DocumentIcon,
+  },
+  {
+    name: "Join our Discord",
+    href: "https://discord.com/invite/A92xrEGCge",
+    Icon: DiscordIcon,
+  },
+  {
+    name: "Report a bug",
+    href: "https://github.com/makeplane/plane/issues/new/choose",
+    Icon: GithubIcon,
+  },
+  {
+    name: "Chat with us",
+    href: "mailto:hello@plane.so",
+    Icon: CommentIcon,
+  },
+];
+
 const navigation = (workspaceSlug: string, projectId: string) => [
   {
     name: "Issues",
@@ -46,6 +80,8 @@ const navigation = (workspaceSlug: string, projectId: string) => [
 const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
   const { collapsed: sidebarCollapse, toggleCollapsed } = useTheme();
 
+  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
+
   return (
     <nav className="relative z-20 h-screen md:z-0">
       <div
@@ -84,7 +120,7 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
               </button>
               <button
                 type="button"
-                className={`flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 ${
+                className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 ${
                   sidebarCollapse ? "w-full justify-center" : ""
                 }`}
                 onClick={() => {
@@ -96,8 +132,45 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
                 }}
                 title="Help"
               >
-                <QuestionMarkCircleIcon className="h-4 w-4 text-gray-500" />
+                <BoltIcon className="h-4 w-4 text-gray-500" />
+                {!sidebarCollapse && <span>Shortcuts</span>}
               </button>
+              <div className="relative">
+                <Transition
+                  show={isNeedHelpOpen}
+                  enter="transition ease-out duration-100"
+                  enterFrom="transform opacity-0 scale-95"
+                  enterTo="transform opacity-100 scale-100"
+                  leave="transition ease-in duration-75"
+                  leaveFrom="transform opacity-100 scale-100"
+                  leaveTo="transform opacity-0 scale-95"
+                >
+                  <div className="absolute bottom-0 left-full space-y-2 rounded-sm bg-white py-3 shadow-md">
+                    {helpOptions.map(({ name, Icon, href }) => (
+                      <Link href={href} key={name}>
+                        <a
+                          target="_blank"
+                          className="mx-3 flex items-center gap-x-2 rounded-md px-2 py-2 text-xs hover:bg-gray-100"
+                        >
+                          <Icon className="h-5 w-5 text-gray-500" />
+                          <span className="text-sm">{name}</span>
+                        </a>
+                      </Link>
+                    ))}
+                  </div>
+                </Transition>
+                <button
+                  type="button"
+                  className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 ${
+                    sidebarCollapse ? "w-full justify-center" : ""
+                  }`}
+                  onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+                  title="Help"
+                >
+                  <QuestionMarkCircleIcon className="h-4 w-4 text-gray-500" />
+                  {!sidebarCollapse && <span>Need help?</span>}
+                </button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/apps/app/types/workspace.d.ts b/apps/app/types/workspace.d.ts
index e52a6ab94..2871f31df 100644
--- a/apps/app/types/workspace.d.ts
+++ b/apps/app/types/workspace.d.ts
@@ -9,6 +9,7 @@ export interface IWorkspace {
   url: string;
   logo: string | null;
   slug: string;
+  readonly total_members: number;
   readonly slug: string;
   readonly created_by: string;
   readonly updated_by: string;
diff --git a/apps/app/ui/icons/bolt-icon.tsx b/apps/app/ui/icons/bolt-icon.tsx
new file mode 100644
index 000000000..f2cc9eff7
--- /dev/null
+++ b/apps/app/ui/icons/bolt-icon.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const BoltIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M10.6002 21C10.4169 21 10.2752 20.9417 10.1752 20.825C10.0752 20.7083 10.0419 20.5583 10.0752 20.375L11.0002 13.95H7.3502C7.16686 13.95 7.03353 13.8667 6.9502 13.7C6.86686 13.5333 6.86686 13.375 6.9502 13.225L12.8752 3.325C12.9252 3.24167 13.0085 3.16667 13.1252 3.1C13.2419 3.03333 13.3585 3 13.4752 3C13.6585 3 13.8002 3.05833 13.9002 3.175C14.0002 3.29167 14.0335 3.44167 14.0002 3.625L13.0752 10.025H16.6752C16.8585 10.025 16.996 10.1083 17.0877 10.275C17.1794 10.4417 17.1835 10.6 17.1002 10.75L11.2002 20.675C11.1502 20.7583 11.0669 20.8333 10.9502 20.9C10.8335 20.9667 10.7169 21 10.6002 21V21Z" />
+    </svg>
+  );
+};
diff --git a/apps/app/ui/icons/comment-icon.tsx b/apps/app/ui/icons/comment-icon.tsx
new file mode 100644
index 000000000..326a46d8e
--- /dev/null
+++ b/apps/app/ui/icons/comment-icon.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CommentIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M2 16.1V3.05C2 2.81667 2.10833 2.58333 2.325 2.35C2.54167 2.11667 2.76667 2 3 2H15.975C16.225 2 16.4583 2.1125 16.675 2.3375C16.8917 2.5625 17 2.8 17 3.05V11.95C17 12.1833 16.8917 12.4167 16.675 12.65C16.4583 12.8833 16.225 13 15.975 13H6L2.65 16.35C2.53333 16.4667 2.39583 16.4958 2.2375 16.4375C2.07917 16.3792 2 16.2667 2 16.1ZM3.5 3.5V11.5V3.5ZM7.025 18C6.79167 18 6.5625 17.8833 6.3375 17.65C6.1125 17.4167 6 17.1833 6 16.95V14.5H18.5V6H21C21.2333 6 21.4583 6.11667 21.675 6.35C21.8917 6.58333 22 6.825 22 7.075V21.075C22 21.2417 21.9208 21.3542 21.7625 21.4125C21.6042 21.4708 21.4667 21.4417 21.35 21.325L18.025 18H7.025ZM15.5 3.5H3.5V11.5H15.5V3.5Z" />
+    </svg>
+  );
+};
diff --git a/apps/app/ui/icons/discord-icon.tsx b/apps/app/ui/icons/discord-icon.tsx
new file mode 100644
index 000000000..a11b0a829
--- /dev/null
+++ b/apps/app/ui/icons/discord-icon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const DiscordIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_282_229)">
+        <path d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z" />
+      </g>
+      <defs>
+        <clipPath id="clip0_282_229">
+          <rect width={width} height={height} />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/apps/app/ui/icons/document-icon.tsx b/apps/app/ui/icons/document-icon.tsx
new file mode 100644
index 000000000..256fef4cb
--- /dev/null
+++ b/apps/app/ui/icons/document-icon.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const DocumentIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M7.27051 14.792H12.7288C12.9094 14.792 13.0587 14.733 13.1768 14.6149C13.2948 14.4969 13.3538 14.3475 13.3538 14.167C13.3538 13.9864 13.2948 13.8371 13.1768 13.7191C13.0587 13.601 12.9094 13.542 12.7288 13.542H7.27051C7.08995 13.542 6.94065 13.601 6.82259 13.7191C6.70454 13.8371 6.64551 13.9864 6.64551 14.167C6.64551 14.3475 6.70454 14.4969 6.82259 14.6149C6.94065 14.733 7.08995 14.792 7.27051 14.792ZM7.27051 11.2503H12.7288C12.9094 11.2503 13.0587 11.1913 13.1768 11.0732C13.2948 10.9552 13.3538 10.8059 13.3538 10.6253C13.3538 10.4448 13.2948 10.2955 13.1768 10.1774C13.0587 10.0594 12.9094 10.0003 12.7288 10.0003H7.27051C7.08995 10.0003 6.94065 10.0594 6.82259 10.1774C6.70454 10.2955 6.64551 10.4448 6.64551 10.6253C6.64551 10.8059 6.70454 10.9552 6.82259 11.0732C6.94065 11.1913 7.08995 11.2503 7.27051 11.2503ZM4.58301 18.3337C4.24967 18.3337 3.95801 18.2087 3.70801 17.9587C3.45801 17.7087 3.33301 17.417 3.33301 17.0837V2.91699C3.33301 2.58366 3.45801 2.29199 3.70801 2.04199C3.95801 1.79199 4.24967 1.66699 4.58301 1.66699H11.583C11.7497 1.66699 11.9129 1.70171 12.0726 1.77116C12.2323 1.8406 12.3677 1.93088 12.4788 2.04199L16.2913 5.85449C16.4025 5.9656 16.4927 6.10102 16.5622 6.26074C16.6316 6.42046 16.6663 6.58366 16.6663 6.75033V17.0837C16.6663 17.417 16.5413 17.7087 16.2913 17.9587C16.0413 18.2087 15.7497 18.3337 15.4163 18.3337H4.58301ZM11.4788 6.16699V2.91699H4.58301V17.0837H15.4163V6.79199H12.1038C11.9233 6.79199 11.774 6.73296 11.6559 6.61491C11.5379 6.49685 11.4788 6.34755 11.4788 6.16699ZM4.58301 2.91699V6.79199V2.91699V17.0837V2.91699Z" />
+    </svg>
+  );
+};
diff --git a/apps/app/ui/icons/github-icon.tsx b/apps/app/ui/icons/github-icon.tsx
new file mode 100644
index 000000000..37f0c65d7
--- /dev/null
+++ b/apps/app/ui/icons/github-icon.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const GithubIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_282_232)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
+          fill="#858E96"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_282_232">
+          <rect width={width} height={height} />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/apps/app/ui/icons/index.ts b/apps/app/ui/icons/index.ts
index d49db842d..66ad36664 100644
--- a/apps/app/ui/icons/index.ts
+++ b/apps/app/ui/icons/index.ts
@@ -22,3 +22,9 @@ export * from "./upcoming-cycle-icon";
 export * from "./user-group-icon";
 export * from "./user-icon-circle";
 export * from "./user-icon";
+export * from "./question-mark-circle-icon";
+export * from "./bolt-icon";
+export * from "./document-icon";
+export * from "./discord-icon";
+export * from "./github-icon";
+export * from "./comment-icon";
diff --git a/apps/app/ui/icons/question-mark-circle-icon.tsx b/apps/app/ui/icons/question-mark-circle-icon.tsx
new file mode 100644
index 000000000..f614d5674
--- /dev/null
+++ b/apps/app/ui/icons/question-mark-circle-icon.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const QuestionMarkCircleIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M12.1 17.825C12.3667 17.825 12.5917 17.7333 12.775 17.55C12.9583 17.3667 13.05 17.1417 13.05 16.875C13.05 16.6083 12.9583 16.3833 12.775 16.2C12.5917 16.0167 12.3667 15.925 12.1 15.925C11.8333 15.925 11.6083 16.0167 11.425 16.2C11.2417 16.3833 11.15 16.6083 11.15 16.875C11.15 17.1417 11.2417 17.3667 11.425 17.55C11.6083 17.7333 11.8333 17.825 12.1 17.825ZM12.075 7.5C12.6417 7.5 13.1 7.65417 13.45 7.9625C13.8 8.27083 13.975 8.66667 13.975 9.15C13.975 9.48333 13.875 9.8125 13.675 10.1375C13.475 10.4625 13.15 10.8167 12.7 11.2C12.2667 11.5833 11.9208 11.9875 11.6625 12.4125C11.4042 12.8375 11.275 13.225 11.275 13.575C11.275 13.7583 11.3458 13.9042 11.4875 14.0125C11.6292 14.1208 11.7917 14.175 11.975 14.175C12.175 14.175 12.3417 14.1083 12.475 13.975C12.6083 13.8417 12.6917 13.675 12.725 13.475C12.775 13.1417 12.8875 12.8458 13.0625 12.5875C13.2375 12.3292 13.5083 12.05 13.875 11.75C14.375 11.3333 14.7375 10.9167 14.9625 10.5C15.1875 10.0833 15.3 9.61667 15.3 9.1C15.3 8.21667 15.0125 7.50833 14.4375 6.975C13.8625 6.44167 13.1 6.175 12.15 6.175C11.5167 6.175 10.9333 6.3 10.4 6.55C9.86667 6.8 9.425 7.16667 9.075 7.65C8.94167 7.83333 8.8875 8.02083 8.9125 8.2125C8.9375 8.40417 9.01667 8.55 9.15 8.65C9.33333 8.78333 9.52917 8.825 9.7375 8.775C9.94583 8.725 10.1167 8.60833 10.25 8.425C10.4667 8.125 10.7292 7.89583 11.0375 7.7375C11.3458 7.57917 11.6917 7.5 12.075 7.5ZM12 22C10.6 22 9.29167 21.7458 8.075 21.2375C6.85833 20.7292 5.8 20.025 4.9 19.125C4 18.225 3.29167 17.1667 2.775 15.95C2.25833 14.7333 2 13.4167 2 12C2 10.6 2.25833 9.29167 2.775 8.075C3.29167 6.85833 4 5.8 4.9 4.9C5.8 4 6.85833 3.29167 8.075 2.775C9.29167 2.25833 10.6 2 12 2C13.3833 2 14.6833 2.25833 15.9 2.775C17.1167 3.29167 18.175 4 19.075 4.9C19.975 5.8 20.6875 6.85833 21.2125 8.075C21.7375 9.29167 22 10.6 22 12C22 13.4167 21.7375 14.7333 21.2125 15.95C20.6875 17.1667 19.975 18.225 19.075 19.125C18.175 20.025 17.1167 20.7292 15.9 21.2375C14.6833 21.7458 13.3833 22 12 22ZM12 20.5C14.35 20.5 16.3542 19.6667 18.0125 18C19.6708 16.3333 20.5 14.3333 20.5 12C20.5 9.66667 19.6708 7.66667 18.0125 6C16.3542 4.33333 14.35 3.5 12 3.5C9.61667 3.5 7.60417 4.33333 5.9625 6C4.32083 7.66667 3.5 9.66667 3.5 12C3.5 14.3333 4.32083 16.3333 5.9625 18C7.60417 19.6667 9.61667 20.5 12 20.5Z" />
+    </svg>
+  );
+};
diff --git a/yarn.lock b/yarn.lock
index 4af0c309e..695461b54 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -599,9 +599,9 @@
     tslib "^2.3.1"
 
 "@motionone/dom@^10.15.3":
-  version "10.15.3"
-  resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.15.3.tgz#afb27270032368a917f1ae8dd87e0069a6a9fe40"
-  integrity sha512-FQ7a2zMBXc1UeU8CG9G3yDpst55fbb0+C9A0VGfwOITitBCzigKZnXRgsRSWWR+FW57GSc13eGQxtYB0lKG0Ng==
+  version "10.15.5"
+  resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.15.5.tgz#4af18f8136d85c2fc997cac98121c969f6731802"
+  integrity sha512-Xc5avlgyh3xukU9tydh9+8mB8+2zAq+WlLsC3eEIp7Ax7DnXgY7Bj/iv0a4X2R9z9ZFZiaXK3BO0xMYHKbAAdA==
   dependencies:
     "@motionone/animation" "^10.15.1"
     "@motionone/generators" "^10.15.1"