mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
style: ui consistency and improvement (#2725)
* style: create/update issue modal properties ui improvement * style: create update issue modal improvement * style: modal ui consistency
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
83e0c4ebbd
commit
4096136b44
@ -87,8 +87,8 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
|
||||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
|
||||
input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
|
||||
className={`flex items-center justify-between gap-1 w-full rounded border-[0.5px] border-custom-border-300 ${
|
||||
input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
|
||||
} ${
|
||||
disabled
|
||||
? "cursor-not-allowed text-custom-text-200"
|
||||
|
||||
@ -65,8 +65,8 @@ const CustomSelect = (props: ICustomSelectProps) => {
|
||||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
|
||||
input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
|
||||
className={`flex items-center justify-between gap-1 w-full rounded border-[0.5px] border-custom-border-300 ${
|
||||
input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
|
||||
} ${
|
||||
disabled
|
||||
? "cursor-not-allowed text-custom-text-200"
|
||||
|
||||
@ -135,7 +135,7 @@ export const CycleForm: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200 ">
|
||||
<div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-100 ">
|
||||
<Button variant="neutral-primary" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
@ -339,8 +339,8 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
||||
onChange={onChange}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.name)}
|
||||
placeholder="Title"
|
||||
className="resize-none text-xl w-full"
|
||||
placeholder="Issue Title"
|
||||
className="resize-none text-xl w-full focus:border-blue-400"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@ -348,7 +348,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
||||
)}
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
|
||||
<div className="relative">
|
||||
<div className="flex justify-end">
|
||||
<div className="absolute bottom-3.5 right-3.5 z-10 border-0.5 flex rounded bg-custom-background-80">
|
||||
{issueName && issueName !== "" && (
|
||||
<button
|
||||
type="button"
|
||||
@ -390,7 +390,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
||||
? watch("description_html")
|
||||
: value
|
||||
}
|
||||
customClassName="min-h-[150px]"
|
||||
customClassName="min-h-[7rem] border-custom-border-100"
|
||||
onChange={(description: Object, description_html: string) => {
|
||||
onChange(description_html);
|
||||
setValue("description", description);
|
||||
@ -545,27 +545,26 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
||||
customButton={
|
||||
<button
|
||||
type="button"
|
||||
className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200"
|
||||
className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
|
||||
>
|
||||
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80">
|
||||
{watch("parent") ? (
|
||||
<>
|
||||
<LayoutPanelTop className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
<span className="whitespace-nowrap text-custom-text-100">
|
||||
<div className="flex items-center gap-1 text-custom-text-200">
|
||||
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
|
||||
<span className="whitespace-nowrap">
|
||||
{selectedParentIssue &&
|
||||
`${selectedParentIssue.project__identifier}-
|
||||
${selectedParentIssue.sequence_id}`}
|
||||
</span>
|
||||
</>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<LayoutPanelTop className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
<div className="flex items-center gap-1 text-custom-text-300">
|
||||
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
|
||||
<span className="whitespace-nowrap">Add Parent</span>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
}
|
||||
placement="bottom-start"
|
||||
>
|
||||
{watch("parent") ? (
|
||||
<>
|
||||
@ -603,24 +602,27 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
|
||||
<div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5">
|
||||
<div
|
||||
className="flex cursor-pointer items-center gap-1"
|
||||
className="flex cursor-default items-center gap-1.5"
|
||||
onClick={() => setCreateMore((prevData) => !prevData)}
|
||||
>
|
||||
<div className="flex cursor-pointer items-center justify-center">
|
||||
<ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
|
||||
</div>
|
||||
<span className="text-xs">Create more</span>
|
||||
<ToggleSwitch value={createMore} onChange={() => {}} size="md" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
handleDiscardClose();
|
||||
}}
|
||||
>
|
||||
Discard
|
||||
</Button>
|
||||
<Button variant="primary" type="submit" loading={isSubmitting}>
|
||||
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
|
||||
{status
|
||||
? isSubmitting
|
||||
? "Updating Issue..."
|
||||
|
||||
@ -3,8 +3,7 @@ import useSWR from "swr";
|
||||
// services
|
||||
import { ProjectService } from "services/project";
|
||||
// ui
|
||||
import { Avatar, AvatarGroup, CustomSearchSelect } from "@plane/ui";
|
||||
import { User2 } from "lucide-react";
|
||||
import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
|
||||
// fetch-keys
|
||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
|
||||
@ -58,9 +57,9 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
|
||||
</AvatarGroup>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
|
||||
<User2 className="h-4 w-4" />
|
||||
<span className="text-custom-text-200">Assignee</span>
|
||||
<div className="flex items-center justify-center gap-1 w-full text-custom-text-300 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs">
|
||||
<UserGroupIcon className="h-3 w-3" />
|
||||
<span>Assignee</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -55,17 +55,15 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
|
||||
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
|
||||
|
||||
const label = selectedCycle ? (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
|
||||
<ContrastIcon />
|
||||
</span>
|
||||
<div className="flex items-center gap-1 text-custom-text-200">
|
||||
<ContrastIcon className="h-3 w-3" />
|
||||
<div className="truncate">{selectedCycle.name}</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-1 text-custom-text-300">
|
||||
<ContrastIcon className="h-3 w-3" />
|
||||
<span>Select Cycle</span>
|
||||
</>
|
||||
<span>Cycle</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
@ -80,9 +78,7 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
|
||||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex items-center justify-between gap-1 w-full text-xs px-2 py-1 rounded-md shadow-sm text-custom-text-200 border border-custom-border-300 duration-300 focus:outline-none ${
|
||||
false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
||||
}`}
|
||||
className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
|
||||
onClick={fetchCycles}
|
||||
>
|
||||
{label}
|
||||
|
||||
@ -30,19 +30,20 @@ export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onCh
|
||||
<Popover.Button>
|
||||
<div
|
||||
ref={setReferenceElement}
|
||||
className="cursor-pointer rounded-md border border-custom-border-200 shadow-sm duration-200 flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80"
|
||||
className="flex items-center justify-center gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
|
||||
>
|
||||
{value ? (
|
||||
<>
|
||||
<span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
|
||||
<CalendarDays className="h-3 w-3 flex-shrink-0" />
|
||||
<span>{renderShortDateWithYearFormat(value)}</span>
|
||||
<button onClick={() => onChange(null)}>
|
||||
<X className="h-3 w-3" />
|
||||
<X className="h-3 w-3 flex-shrink-0" />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
<span>{label}</span>
|
||||
<CalendarDays className="h-3 w-3 flex-shrink-0 text-custom-text-300" />
|
||||
<span className="text-custom-text-300">{label}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -21,9 +21,9 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
<CustomSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<Triangle className={`h-3.5 w-3.5 ${value !== null ? "text-custom-text-100" : "text-custom-text-200"}`} />
|
||||
<span className={value !== null ? "text-custom-text-100" : "text-custom-text-200"}>
|
||||
<div className="flex items-center justify-center gap-1 text-xs">
|
||||
<Triangle className={`h-3 w-3 ${value !== null ? "text-custom-text-200" : "text-custom-text-300"}`} />
|
||||
<span className={value !== null ? "text-custom-text-200" : "text-custom-text-300"}>
|
||||
{estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -68,10 +68,10 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
/>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
|
||||
<Tag className="h-3.5 w-3.5 text-custom-text-200" />
|
||||
<span className=" text-custom-text-200">Label</span>
|
||||
</span>
|
||||
<div className="flex items-center justify-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs hover:bg-custom-background-80">
|
||||
<Tag className="h-3 w-3 text-custom-text-300" />
|
||||
<span className="text-custom-text-300">Label</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Combobox.Button>
|
||||
|
||||
@ -55,34 +55,24 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
|
||||
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
|
||||
|
||||
const label = selectedModule ? (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
|
||||
<DiceIcon />
|
||||
</span>
|
||||
<div className="truncate">{selectedModule.name}</div>
|
||||
<div className="flex items-center gap-1 text-custom-text-200">
|
||||
<DiceIcon className="h-3 w-3" />
|
||||
<span className="truncate">{selectedModule.name}</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-1 text-custom-text-300">
|
||||
<DiceIcon className="h-3 w-3" />
|
||||
<span>Select Module</span>
|
||||
</>
|
||||
<span>Module</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Combobox
|
||||
as="div"
|
||||
className={`flex-shrink-0 text-left`}
|
||||
value={value}
|
||||
onChange={(val: string) => onChange(val)}
|
||||
disabled={false}
|
||||
>
|
||||
<Combobox as="div" className={`flex-shrink-0 text-left`} value={value} onChange={(val: string) => onChange(val)}>
|
||||
<Combobox.Button as={React.Fragment}>
|
||||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex items-center justify-between gap-1 w-full text-xs px-2 py-1 rounded-md shadow-sm text-custom-text-200 border border-custom-border-300 duration-300 focus:outline-none ${
|
||||
false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
||||
}`}
|
||||
className="flex items-center justify-between gap-1 w-full text-xs px-2 py-1 cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={fetchModules}
|
||||
>
|
||||
{label}
|
||||
|
||||
@ -16,11 +16,9 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
|
||||
<CustomSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center justify-center gap-2 text-xs">
|
||||
<span className="flex items-center">
|
||||
<PriorityIcon priority={value} className={`h-3.5 w-3.5 ${value ? "" : "text-custom-text-200"}`} />
|
||||
</span>
|
||||
<span className={`${value ? "" : "text-custom-text-200"} capitalize`}>{value ?? "Priority"}</span>
|
||||
<div className="flex items-center justify-center gap-1 text-custom-text-200">
|
||||
<PriorityIcon priority={value} className="h-3 w-3" />
|
||||
<span className="text-xs capitalize">{value ?? "Priority"}</span>
|
||||
</div>
|
||||
}
|
||||
onChange={onChange}
|
||||
|
||||
@ -73,20 +73,12 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<Combobox
|
||||
as="div"
|
||||
className={`flex-shrink-0 text-left`}
|
||||
value={value}
|
||||
onChange={(val: string) => onChange(val)}
|
||||
disabled={false}
|
||||
>
|
||||
<Combobox as="div" className="flex-shrink-0 text-left" value={value} onChange={(val: string) => onChange(val)}>
|
||||
<Combobox.Button as={React.Fragment}>
|
||||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex items-center justify-between gap-1 w-full text-xs px-2 py-1 rounded-md shadow-sm text-custom-text-200 border border-custom-border-300 duration-300 focus:outline-none ${
|
||||
false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
||||
}`}
|
||||
className="flex items-center justify-center gap-1 w-full text-xs px-2 py-1 rounded text-custom-text-300 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
|
||||
@ -56,17 +56,15 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
label={
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1 text-custom-text-200">
|
||||
{selectedOption ? (
|
||||
<StateGroupIcon stateGroup={selectedOption.group} color={selectedOption.color} />
|
||||
) : currentDefaultState ? (
|
||||
<StateGroupIcon stateGroup={currentDefaultState.group} color={currentDefaultState.color} />
|
||||
) : (
|
||||
<DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
|
||||
<DoubleCircleIcon className="h-3 w-3" />
|
||||
)}
|
||||
{selectedOption?.name
|
||||
? selectedOption.name
|
||||
: currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
|
||||
{selectedOption?.name ? selectedOption.name : currentDefaultState?.name ?? <span>State</span>}
|
||||
</div>
|
||||
}
|
||||
footerOption={
|
||||
|
||||
@ -50,9 +50,13 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
{selectedOption ? (
|
||||
<Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
|
||||
) : (
|
||||
<UserCircle className="h-4 w-4 text-custom-text-200" />
|
||||
<UserCircle className="h-3 w-3 text-custom-text-300" />
|
||||
)}
|
||||
{selectedOption ? (
|
||||
selectedOption?.display_name
|
||||
) : (
|
||||
<span className={`${selectedOption ? "text-custom-text-200" : "text-custom-text-300"}`}>Lead</span>
|
||||
)}
|
||||
{selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">Lead</span>}
|
||||
</div>
|
||||
}
|
||||
onChange={onChange}
|
||||
|
||||
@ -55,9 +55,9 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
<span className="text-custom-text-200">{value.length} Assignees</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<UserGroupIcon className="h-4 w-4 text-custom-text-200" />
|
||||
<span className="text-custom-text-200">Assignee</span>
|
||||
<div className="flex items-center justify-center gap-2 text-custom-text-300">
|
||||
<UserGroupIcon className="h-3 w-3" />
|
||||
<span>Assignee</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -265,7 +265,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
onChange={handleNameChange(onChange)}
|
||||
hasError={Boolean(errors.name)}
|
||||
placeholder="Project Title"
|
||||
className="w-full"
|
||||
className="w-full focus:border-blue-400"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@ -298,7 +298,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
onChange={handleIdentifierChange(onChange)}
|
||||
hasError={Boolean(errors.identifier)}
|
||||
placeholder="Identifier"
|
||||
className="text-xs w-full"
|
||||
className="text-xs w-full focus:border-blue-400"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@ -316,7 +316,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
tabIndex={3}
|
||||
placeholder="Description..."
|
||||
onChange={onChange}
|
||||
className="text-sm !h-24"
|
||||
className="text-sm !h-24 focus:border-blue-400"
|
||||
hasError={Boolean(errors?.description)}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -21,22 +21,21 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label, minDate, m
|
||||
<Popover className="relative flex items-center justify-center rounded-lg">
|
||||
{({ close }) => (
|
||||
<>
|
||||
<Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-300 hover:bg-custom-background-80">
|
||||
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
|
||||
<Popover.Button className="flex items-center justify-center gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80">
|
||||
{value ? (
|
||||
<>
|
||||
<span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
|
||||
<CalendarDays className="h-3 w-3 flex-shrink-0" />
|
||||
<span>{renderShortDateWithYearFormat(value)}</span>
|
||||
<button onClick={() => onChange(null)}>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CalendarDays className="h-4 w-4 flex-shrink-0" />
|
||||
<span>{label}</span>
|
||||
<CalendarDays className="h-3 w-3 flex-shrink-0 text-custom-text-300" />
|
||||
<span className="text-custom-text-300">{label}</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
|
||||
@ -17,7 +17,7 @@ export const IssueLabelsList: FC<IssueLabelsListProps> = (props) => {
|
||||
{labels && (
|
||||
<>
|
||||
<Tooltip position="top" tooltipHeading="Labels" tooltipContent={labels.map((l) => l?.name).join(", ")}>
|
||||
<div className="flex items-center gap-1.5 px-2 py-1 text-custom-text-200 rounded shadow-sm border border-custom-border-300">
|
||||
<div className="flex items-center gap-1 px-2 py-1 text-xs text-custom-text-200 rounded border-[0.5px] border-custom-border-300">
|
||||
<span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
|
||||
{`${labels.length} Labels`}
|
||||
</div>
|
||||
|
||||
@ -88,7 +88,7 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
|
||||
onChange={onChange}
|
||||
hasError={Boolean(errors.name)}
|
||||
placeholder="Title"
|
||||
className="resize-none text-xl"
|
||||
className="resize-none w-full text-xl focus:border-blue-400"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -48,10 +48,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
|
||||
: options?.filter((option) => option.member.display_name.toLowerCase().includes(query.toLowerCase()));
|
||||
|
||||
const label = (
|
||||
<div
|
||||
className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded-md border border-custom-border-300 duration-300 focus:outline-none
|
||||
"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded border-[0.5px] border-custom-border-300">
|
||||
{value ? (
|
||||
<>
|
||||
<Avatar name={value?.member.display_name} src={value?.member.avatar} />
|
||||
@ -81,7 +78,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
|
||||
</Listbox.Button>
|
||||
<Listbox.Options>
|
||||
<div
|
||||
className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1`}
|
||||
className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs focus:outline-none w-48 whitespace-nowrap my-1`}
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user