fix: Make the "create workspace" option more obvious (#4177)

open-sauced · Oct 22, 2024 · 9d8ae39 · 9d8ae39
1 parent 1f838fa
commit 9d8ae39
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 27 deletions.
diff --git a/components/Contributors/AddToContributorInsightDrawer.tsx b/components/Contributors/AddToContributorInsightDrawer.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { BsGithub } from "react-icons/bs";
 import { usePostHog } from "posthog-js/react";
 import { safeParse } from "valibot";
+import { PlusIcon } from "@heroicons/react/24/outline";
 import SingleSelect from "components/atoms/Select/single-select";
 import Button from "components/shared/Button/button";
 import { fetchApiData } from "helpers/fetchApiData";
@@ -118,7 +119,16 @@ export default function AddToContributorInsightDrawer({
           ) : (
             <SingleSelect
               options={[
-                { label: "Create new insight...", value: "new" },
+                {
+                  label: "Create new insight...",
+                  value: "new",
+                  icon: (
+                    <PlusIcon
+                      style={{ strokeWidth: "3px" }}
+                      className="w-5 text-gray-500 h-5 p-0.5 -ml-1 text-semibold group-hover:bg-orange-100 rounded-md"
+                    />
+                  ),
+                },
                 ...contributorInsights.map(({ id, name }) => ({
                   label: name,
                   value: id,

diff --git a/components/Contributors/AddToContributorInsightModal.tsx b/components/Contributors/AddToContributorInsightModal.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { BsGithub } from "react-icons/bs";
 import { usePostHog } from "posthog-js/react";
 import { safeParse } from "valibot";
+import { PlusIcon } from "@heroicons/react/24/outline";
 import Card from "components/atoms/Card/card";
 import SingleSelect from "components/atoms/Select/single-select";
 import { Dialog, DialogContent } from "components/molecules/Dialog/dialog";
@@ -119,7 +120,16 @@ export default function AddToContributorInsightModal({
                 ) : (
                   <SingleSelect
                     options={[
-                      { label: "Create new insight...", value: "new" },
+                      {
+                        label: "Create new insight...",
+                        value: "new",
+                        icon: (
+                          <PlusIcon
+                            style={{ strokeWidth: "3px" }}
+                            className="w-5 text-gray-500 h-5 p-0.5 -ml-1 text-semibold group-hover:bg-orange-100 rounded-md"
+                          />
+                        ),
+                      },
                       ...contributorInsights.map(({ id, name }) => ({
                         label: name,
                         value: id,

diff --git a/components/Repositories/AddToWorkspaceModal.tsx b/components/Repositories/AddToWorkspaceModal.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { BsGithub } from "react-icons/bs";
 import { usePostHog } from "posthog-js/react";
+import { PlusIcon } from "@heroicons/react/24/outline";
 import Card from "components/atoms/Card/card";
 import SingleSelect from "components/atoms/Select/single-select";
 import { Dialog, DialogContent } from "components/molecules/Dialog/dialog";
@@ -114,7 +115,16 @@ export default function AddToWorkspaceModal({ repository, isOpen, onCloseModal,
                     ) : (
                       <SingleSelect
                         options={[
-                          { label: "Create new workspace...", value: "new" },
+                          {
+                            label: "Create new workspace...",
+                            value: "new",
+                            icon: (
+                              <PlusIcon
+                                style={{ strokeWidth: "3px" }}
+                                className="w-5 text-gray-500 h-5 p-0.5 -ml-1 text-semibold group-hover:bg-orange-100 rounded-md"
+                              />
+                            ),
+                          },
                           ...workspaces.map(({ id, name }) => ({
                             label: name,
                             value: id,

diff --git a/components/atoms/Select/single-select.tsx b/components/atoms/Select/single-select.tsx
@@ -11,7 +11,7 @@ interface SingleSelectProps {
   onValueChange: (value: string) => void;
   placeholder?: string;
   inputPlaceholder?: string;
-  options: { label: string; value: string }[];
+  options: { label: string; value: string; icon?: React.ReactElement }[];
   position?: "popper" | "item-aligned";
   isSearchable?: boolean;
   insetLabel?: string;
@@ -90,28 +90,38 @@ const SingleSelect = ({
               )}
               <CommandGroup className="flex flex-col overflow-x-hidden overflow-y-scroll max-h-52">
                 {isOpen && options.length > 0
-                  ? options.map((option) => (
-                      <CommandItem
-                        key={option.value}
-                        onSelect={(value) => {
-                          setInputValue("");
-                          setIsOpen(false);
-                          onValueChange(option.value);
-                        }}
-                        onMouseDown={(e) => {
-                          e.preventDefault();
-                          setIsOpen(false);
-                          onValueChange(option.value);
-                        }}
-                        onClick={() => {
-                          setIsOpen(false);
-                          onValueChange(option.value);
-                        }}
-                        className="!z-50 !cursor-pointer flex justify-between min-w-[7rem] items-center !px-3 rounded-md truncate break-words w-full"
-                      >
-                        {option.label}
-                      </CommandItem>
-                    ))
+                  ? options.map((option) => {
+                      const Icon = option.icon;
+                      return (
+                        <CommandItem
+                          key={option.value}
+                          onSelect={(value) => {
+                            setInputValue("");
+                            setIsOpen(false);
+                            onValueChange(option.value);
+                          }}
+                          onMouseDown={(e) => {
+                            e.preventDefault();
+                            setIsOpen(false);
+                            onValueChange(option.value);
+                          }}
+                          onClick={() => {
+                            setIsOpen(false);
+                            onValueChange(option.value);
+                          }}
+                          className="!z-50 !cursor-pointer flex justify-between min-w-[7rem] items-center !px-3 rounded-md truncate break-words w-full"
+                        >
+                          {Icon ? (
+                            <div className="flex items-center">
+                              {Icon}
+                              <span className="ml-1">{option.label}</span>
+                            </div>
+                          ) : (
+                            option.label
+                          )}
+                        </CommandItem>
+                      );
+                    })
                   : null}
               </CommandGroup>
             </Command>

diff --git a/components/shared/AppSidebar/AppSidebar.tsx b/components/shared/AppSidebar/AppSidebar.tsx
@@ -110,7 +110,16 @@ export const AppSideBar = ({ workspaceId, hideSidebar, sidebarCollapsed }: AppSi
                 <SingleSelect
                   isSearchable={!!user}
                   options={[
-                    { label: "Create new workspace...", value: "new" },
+                    {
+                      label: "Create new workspace...",
+                      value: "new",
+                      icon: (
+                        <PlusIcon
+                          style={{ strokeWidth: "3px" }}
+                          className="w-5 text-gray-500 h-5 p-0.5 -ml-1 text-semibold group-hover:bg-orange-100 rounded-md"
+                        />
+                      ),
+                    },
                     ...workspaces.map(({ id, name }) => ({
                       label: name,
                       value: id,