thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-1385] style: oauth button enhancement (#4539)

Browse Source 
* style: oauth button enhancement

* style: space app applied issue filter section styling updated

* style: space app sidebar icon consistency

* chore: issue title input improvement

* fix: create workspace and invite workspace theme issue

* fix: member invite modal improvement
This commit is contained in:
Anmol Singh Bhatia 2024-05-21 16:29:30 +05:30 committed by GitHub
parent afc2ca65cf
commit 846991332a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 108 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
space/components/issues/filters/applied-filters/filters-list.tsx
View File

@ -23,7 +23,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
const { appliedFilters = {}, handleRemoveAllFilters, handleRemoveFilter, states } = props;
return (
<div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
<div className="flex flex-wrap items-stretch gap-2">
{Object.entries(appliedFilters).map(([key, value]) => {
const filterKey = key as keyof TFilters;
const filterValue = value as TFilters[keyof TFilters];

6
space/components/issues/peek-overview/header.tsx
View File

@ -62,7 +62,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
<div className="flex items-center gap-4">
{peekMode === "side" && (
<button type="button" onClick={handleClose}>
<MoveRight className="h-3.5 w-3.5" strokeWidth={2} />
<MoveRight className="h-4 w-4" strokeWidth={2} />
</button>
)}
<Listbox
@ -72,7 +72,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
className="relative flex-shrink-0 text-left"
>
<Listbox.Button className={`grid place-items-center ${peekMode === "full" ? "rotate-45" : ""}`}>
<Icon iconName={peekModes.find((m) => m.key === peekMode)?.icon ?? ""} />
<Icon iconName={peekModes.find((m) => m.key === peekMode)?.icon ?? ""} className="text-[1rem]" />
</Listbox.Button>
<Transition
@ -120,7 +120,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
{(peekMode === "side" || peekMode === "modal") && (
<div className="flex flex-shrink-0 items-center gap-2">
<button type="button" onClick={handleCopyLink} className="-rotate-45 focus:outline-none" tabIndex={1}>
<Icon iconName="link" />
<Icon iconName="link" className="text-[1rem]" />
</button>
</div>
)}

1
space/components/issues/peek-overview/issue-reaction.tsx
View File

@ -19,7 +19,6 @@ export const IssueReactions: React.FC = () => {
<div className="flex items-center gap-2">
<IssueVotes workspaceSlug={workspaceSlug} projectId={projectId} />
</div>
<div className="h-8 w-0.5 bg-custom-background-200" />
</>
)}
{canReact && (

4
space/components/issues/peek-overview/issue-vote-reactions.tsx
View File

@ -97,7 +97,7 @@ export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
if (user) handleVote(e, 1);
else router.push(`/?next_path=${pathName}?${queryParam}`);
}}
className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 h-7 focus:outline-none ${
isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-custom-border-300"
}`}
>
@ -131,7 +131,7 @@ export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
if (user) handleVote(e, -1);
else router.push(`/?next_path=${pathName}?${queryParam}`);
}}
className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
className={`flex items-center justify-center gap-x-1 h-7 overflow-hidden rounded border px-2 focus:outline-none ${
isDownVotedByUser ? "border-red-600 text-red-600" : "border-custom-border-300"
}`}
>

4
web/components/account/oauth/github-button.tsx
View File

@ -25,8 +25,8 @@ export const GithubOAuthButton: FC<GithubOAuthButtonProps> = (props) => {
return (
<button
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300 ${
resolvedTheme === "dark" ? "border-[#43484F]" : "border-[#D9E4FF]"
}`}
onClick={handleSignIn}
>

4
web/components/account/oauth/google-button.tsx
View File

@ -24,8 +24,8 @@ export const GoogleOAuthButton: FC<GoogleOAuthButtonProps> = (props) => {
return (
<button
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300 ${
resolvedTheme === "dark" ? "border-[#43484F]" : "border-[#D9E4FF]"
}`}
onClick={handleSignIn}
>

85
web/components/issues/title-input.tsx
View File

@ -47,13 +47,18 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
useEffect(() => {
const textarea = document.querySelector("#title-input");
if (debouncedValue && debouncedValue !== value) {
issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }).finally(() => {
if (debouncedValue.trim().length > 0) {
issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }).finally(() => {
setIsSubmitting("saved");
if (textarea && !textarea.matches(":focus")) {
const trimmedTitle = debouncedValue.trim();
if (trimmedTitle !== title) setTitle(trimmedTitle);
}
});
} else {
setTitle(value || "");
setIsSubmitting("saved");
if (textarea && !textarea.matches(":focus")) {
const trimmedTitle = debouncedValue.trim();
if (trimmedTitle !== title) setTitle(trimmedTitle);
}
});
}
}
// DO NOT Add more dependencies here. It will cause multiple requests to be sent.
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -63,8 +68,13 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
const handleBlur = () => {
const trimmedTitle = title.trim();
if (trimmedTitle !== title && isSubmitting !== "submitting") {
setTitle(trimmedTitle);
setIsSubmitting("submitting");
if (trimmedTitle.length > 0) {
setTitle(trimmedTitle);
setIsSubmitting("submitting");
} else {
setTitle(value || "");
setIsSubmitting("saved");
}
}
};
@ -91,35 +101,38 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
if (disabled) return <div className="text-2xl font-medium">{title}</div>;
return (
<div className={cn("relative", containerClassName)}>
<TextArea
id="title-input"
className={cn(
"block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-0 text-2xl font-medium outline-none ring-0",
{
"ring-red-400": title.length === 0,
},
className
)}
disabled={disabled}
value={title}
onChange={handleTitleChange}
maxLength={255}
placeholder="Issue title"
onFocus={() => setIsLengthVisible(true)}
onBlur={() => setIsLengthVisible(false)}
/>
<div
className={cn(
"pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
{
"opacity-100": isLengthVisible,
}
)}
>
<span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
/255
<div className="flex flex-col gap-1.5">
<div className={cn("relative", containerClassName)}>
<TextArea
id="title-input"
className={cn(
"block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-0 text-2xl font-medium outline-none ring-0",
{
"ring-1 ring-red-400 mx-3": title.length === 0,
},
className
)}
disabled={disabled}
value={title}
onChange={handleTitleChange}
maxLength={255}
placeholder="Issue title"
onFocus={() => setIsLengthVisible(true)}
onBlur={() => setIsLengthVisible(false)}
/>
<div
className={cn(
"pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
{
"opacity-100": isLengthVisible,
}
)}
>
<span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
/255
</div>
</div>
{title.length === 0 && <span className="text-sm text-red-500">Title is required</span>}
</div>
);
});

10
web/components/project/send-project-invitation-modal.tsx
View File

@ -206,9 +206,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
{fields.map((field, index) => (
<div
key={field.id}
className="group mb-1 grid grid-cols-6 sm:grid-cols-12 items-start gap-x-4 text-sm"
className="group mb-1 flex items-center justify-between gap-x-4 text-sm w-full"
>
<div className="col-span-4 sm:col-span-10 flex flex-col gap-1">
<div className="flex flex-col gap-1 flex-grow w-full">
<Controller
control={control}
name={`members.${index}.member_id`}
@ -250,8 +250,8 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
)}
</div>
<div className="col-span-2 sm:col-span-2 flex items-center justify-between gap-2">
<div className="flex w-full flex-col gap-1">
<div className="flex items-center justify-between gap-2 flex-shrink-0 ">
<div className="flex flex-col gap-1">
<Controller
name={`members.${index}.role`}
control={control}
@ -260,7 +260,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
<CustomSelect
{...field}
customButton={
<div className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 px-3 py-2.5 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
<div className="flex w-24 items-center justify-between gap-1 rounded-md border border-custom-border-200 px-3 py-2.5 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
<span className="capitalize">
{field.value ? ROLE[field.value] : "Select role"}
</span>

73
web/components/workspace/send-workspace-invitation-modal.tsx
View File

@ -121,7 +121,10 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
<div className="mb-3 space-y-4">
{fields.map((field, index) => (
<div key={field.id} className="group relative flex items-start gap-4">
<div
key={field.id}
className="relative group mb-1 flex items-start justify-between gap-x-4 text-sm w-full"
>
<div className="w-full">
<Controller
control={control}
@ -155,39 +158,43 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
)}
/>
</div>
<div className="flex items-center gap-2">
<Controller
control={control}
name={`emails.${index}.role`}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
onChange={onChange}
optionsClassName="w-full"
className="flex-grow"
input
>
{Object.entries(ROLE).map(([key, value]) => {
if (currentWorkspaceRole && currentWorkspaceRole >= parseInt(key))
return (
<CustomSelect.Option key={key} value={parseInt(key)}>
{value}
</CustomSelect.Option>
);
})}
</CustomSelect>
)}
/>
<div className="flex items-center justify-between gap-2 flex-shrink-0 ">
<div className="flex flex-col gap-1">
<Controller
control={control}
name={`emails.${index}.role`}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
onChange={onChange}
optionsClassName="w-full"
className="flex-grow w-24"
input
>
{Object.entries(ROLE).map(([key, value]) => {
if (currentWorkspaceRole && currentWorkspaceRole >= parseInt(key))
return (
<CustomSelect.Option key={key} value={parseInt(key)}>
{value}
</CustomSelect.Option>
);
})}
</CustomSelect>
)}
/>
</div>
{fields.length > 1 && (
<button
type="button"
className="grid place-items-center self-center rounded flex-shrink-0"
onClick={() => remove(index)}
>
<X className="h-3.5 w-3.5 text-custom-text-200" />
</button>
<div className="flex-item flex w-6">
<button
type="button"
className="place-items-center self-center rounded"
onClick={() => remove(index)}
>
<X className="h-4 w-4 text-custom-text-200" />
</button>
</div>
)}
</div>
</div>

4
web/pages/create-workspace.tsx
View File

@ -33,7 +33,7 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => {
organization_size: "",
});
// hooks
const { theme } = useTheme();
const { resolvedTheme } = useTheme();
const onSubmit = async (workspace: IWorkspace) => {
await updateUserProfile({ last_workspace_id: workspace.id }).then(() => router.push(`/${workspace.slug}`));
@ -50,7 +50,7 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => {
href="/"
>
<div className="h-[30px] w-[133px]">
{theme === "light" ? (
{resolvedTheme === "light" ? (
<Image src={BlackHorizontalLogo} alt="Plane black logo" />
) : (
<Image src={WhiteHorizontalLogo} alt="Plane white logo" />

4
web/pages/invitations/index.tsx
View File

@ -49,7 +49,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
const { fetchWorkspaces } = useWorkspace();
// next-themes
const { theme } = useTheme();
const { resolvedTheme } = useTheme();
const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS", () => workspaceService.userWorkspaceInvitations());
@ -135,7 +135,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
<div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
<div className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3">
<div className="h-[30px] w-[133px]">
{theme === "light" ? (
{resolvedTheme === "light" ? (
<Image src={BlackHorizontalLogo} alt="Plane black logo" />
) : (
<Image src={WhiteHorizontalLogo} alt="Plane white logo" />