Skip to content
This repository was archived by the owner on Jun 19, 2025. It is now read-only.

Commit 9d8ae39

Browse files
Anish0203Anish0203
authored
fix: Make the "create workspace" option more obvious (#4177)
1 parent 1f838fa commit 9d8ae39

File tree

5 files changed

+76
-27
lines changed

5 files changed

+76
-27
lines changed

‎components/Contributors/AddToContributorInsightDrawer.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
33
import { BsGithub } from "react-icons/bs";
44
import { usePostHog } from "posthog-js/react";
55
import { safeParse } from "valibot";
6+
import { PlusIcon } from "@heroicons/react/24/outline";
67
import SingleSelect from "components/atoms/Select/single-select";
78
import Button from "components/shared/Button/button";
89
import { fetchApiData } from "helpers/fetchApiData";
@@ -118,7 +119,16 @@ export default function AddToContributorInsightDrawer({
118119
) : (
119120
<SingleSelect
120121
options={[
121-
{ label: "Create new insight...", value: "new" },
122+
{
123+
label: "Create new insight...",
124+
value: "new",
125+
icon: (
126+
<PlusIcon
127+
style={{ strokeWidth: "3px" }}
128+
className="w-5 text-gray-500 h-5 p-0.5 -ml-1 text-semibold group-hover:bg-orange-100 rounded-md"
129+
/>
130+
),
131+
},
122132
...contributorInsights.map(({ id, name }) => ({
123133
label: name,
124134
value: id,

‎components/Contributors/AddToContributorInsightModal.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
33
import { BsGithub } from "react-icons/bs";
44
import { usePostHog } from "posthog-js/react";
55
import { safeParse } from "valibot";
6+
import { PlusIcon } from "@heroicons/react/24/outline";
67
import Card from "components/atoms/Card/card";
78
import SingleSelect from "components/atoms/Select/single-select";
89
import { Dialog, DialogContent } from "components/molecules/Dialog/dialog";
@@ -119,7 +120,16 @@ export default function AddToContributorInsightModal({
119120
) : (
120121
<SingleSelect
121122
options={[
122-
{ label: "Create new insight...", value: "new" },
123+
{
124+
label: "Create new insight...",
125+
value: "new",
126+
icon: (
127+
<PlusIcon
128+
style={{ strokeWidth: "3px" }}
129+
className="w-5 text-gray-500 h-5 p-0.5 -ml-1 text-semibold group-hover:bg-orange-100 rounded-md"
130+
/>
131+
),
132+
},
123133
...contributorInsights.map(({ id, name }) => ({
124134
label: name,
125135
value: id,

‎components/Repositories/AddToWorkspaceModal.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
22
import { useRouter } from "next/router";
33
import { BsGithub } from "react-icons/bs";
44
import { usePostHog } from "posthog-js/react";
5+
import { PlusIcon } from "@heroicons/react/24/outline";
56
import Card from "components/atoms/Card/card";
67
import SingleSelect from "components/atoms/Select/single-select";
78
import { Dialog, DialogContent } from "components/molecules/Dialog/dialog";
@@ -114,7 +115,16 @@ export default function AddToWorkspaceModal({ repository, isOpen, onCloseModal,
114115
) : (
115116
<SingleSelect
116117
options={[
117-
{ label: "Create new workspace...", value: "new" },
118+
{
119+
label: "Create new workspace...",
120+
value: "new",
121+
icon: (
122+
<PlusIcon
123+
style={{ strokeWidth: "3px" }}
124+
className="w-5 text-gray-500 h-5 p-0.5 -ml-1 text-semibold group-hover:bg-orange-100 rounded-md"
125+
/>
126+
),
127+
},
118128
...workspaces.map(({ id, name }) => ({
119129
label: name,
120130
value: id,

‎components/atoms/Select/single-select.tsx

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface SingleSelectProps {
1111
onValueChange: (value: string) => void;
1212
placeholder?: string;
1313
inputPlaceholder?: string;
14-
options: { label: string; value: string }[];
14+
options: { label: string; value: string; icon?: React.ReactElement }[];
1515
position?: "popper" | "item-aligned";
1616
isSearchable?: boolean;
1717
insetLabel?: string;
@@ -90,28 +90,38 @@ const SingleSelect = ({
9090
)}
9191
<CommandGroup className="flex flex-col overflow-x-hidden overflow-y-scroll max-h-52">
9292
{isOpen && options.length > 0
93-
? options.map((option) => (
94-
<CommandItem
95-
key={option.value}
96-
onSelect={(value) => {
97-
setInputValue("");
98-
setIsOpen(false);
99-
onValueChange(option.value);
100-
}}
101-
onMouseDown={(e) => {
102-
e.preventDefault();
103-
setIsOpen(false);
104-
onValueChange(option.value);
105-
}}
106-
onClick={() => {
107-
setIsOpen(false);
108-
onValueChange(option.value);
109-
}}
110-
className="!z-50 !cursor-pointer flex justify-between min-w-[7rem] items-center !px-3 rounded-md truncate break-words w-full"
111-
>
112-
{option.label}
113-
</CommandItem>
114-
))
93+
? options.map((option) => {
94+
const Icon = option.icon;
95+
return (
96+
<CommandItem
97+
key={option.value}
98+
onSelect={(value) => {
99+
setInputValue("");
100+
setIsOpen(false);
101+
onValueChange(option.value);
102+
}}
103+
onMouseDown={(e) => {
104+
e.preventDefault();
105+
setIsOpen(false);
106+
onValueChange(option.value);
107+
}}
108+
onClick={() => {
109+
setIsOpen(false);
110+
onValueChange(option.value);
111+
}}
112+
className="!z-50 !cursor-pointer flex justify-between min-w-[7rem] items-center !px-3 rounded-md truncate break-words w-full"
113+
>
114+
{Icon ? (
115+
<div className="flex items-center">
116+
{Icon}
117+
<span className="ml-1">{option.label}</span>
118+
</div>
119+
) : (
120+
option.label
121+
)}
122+
</CommandItem>
123+
);
124+
})
115125
: null}
116126
</CommandGroup>
117127
</Command>

‎components/shared/AppSidebar/AppSidebar.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,16 @@ export const AppSideBar = ({ workspaceId, hideSidebar, sidebarCollapsed }: AppSi
110110
<SingleSelect
111111
isSearchable={!!user}
112112
options={[
113-
{ label: "Create new workspace...", value: "new" },
113+
{
114+
label: "Create new workspace...",
115+
value: "new",
116+
icon: (
117+
<PlusIcon
118+
style={{ strokeWidth: "3px" }}
119+
className="w-5 text-gray-500 h-5 p-0.5 -ml-1 text-semibold group-hover:bg-orange-100 rounded-md"
120+
/>
121+
),
122+
},
114123
...workspaces.map(({ id, name }) => ({
115124
label: name,
116125
value: id,

0 commit comments

Comments
 (0)