From 5fadf535800c053a357fa4210db58b83cb37fdad Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Mon, 17 Jul 2023 13:00:44 +0530 Subject: [PATCH] style: auth screens (#1531) * chore: invitations empty state * style: new auth screens * chore: update typography * chore: update border colors * chore: resend code text --- .../components/account/email-code-form.tsx | 103 +++++++-------- .../account/email-password-form.tsx | 72 ++++++----- .../account/email-reset-password-form.tsx | 15 ++- .../account/github-login-button.tsx | 32 +++-- apps/app/components/account/google-login.tsx | 4 +- .../create-update-analytics-modal.tsx | 2 +- .../custom-analytics/graph/custom-tooltip.tsx | 2 +- .../analytics/custom-analytics/sidebar.tsx | 2 +- .../analytics/custom-analytics/table.tsx | 8 +- .../components/analytics/project-modal.tsx | 6 +- .../analytics/scope-and-demand/demand.tsx | 4 +- .../scope-and-demand/leaderboard.tsx | 2 +- .../analytics/scope-and-demand/scope.tsx | 6 +- .../scope-and-demand/year-wise-issues.tsx | 4 +- .../command-palette/command-pallette.tsx | 4 +- .../command-palette/shortcuts-modal.tsx | 14 +-- .../components/core/board-view/all-boards.tsx | 2 +- .../core/board-view/single-issue.tsx | 6 +- .../core/calendar-view/calendar-header.tsx | 8 +- .../core/calendar-view/calendar.tsx | 2 +- .../core/calendar-view/single-date.tsx | 4 +- .../core/calendar-view/single-issue.tsx | 8 +- apps/app/components/core/feeds.tsx | 2 +- .../core/filters/due-date-filter-modal.tsx | 2 +- .../components/core/filters/filters-list.tsx | 6 +- .../core/filters/issues-view-filter.tsx | 6 +- .../components/core/image-picker-popover.tsx | 6 +- apps/app/components/core/issues-view.tsx | 2 +- .../core/list-view/single-issue.tsx | 8 +- .../core/modals/bulk-delete-issues-modal.tsx | 4 +- .../modals/existing-issues-list-modal.tsx | 6 +- .../core/modals/gpt-assistant-modal.tsx | 2 +- .../core/modals/image-upload-modal.tsx | 4 +- .../core/sidebar/progress-chart.tsx | 2 +- .../core/sidebar/sidebar-progress-stats.tsx | 8 +- .../core/spreadsheet-view/single-issue.tsx | 22 ++-- .../spreadsheet-view/spreadsheet-view.tsx | 8 +- .../core/theme/color-picker-input.tsx | 2 +- .../cycles/active-cycle-details.tsx | 18 +-- .../components/cycles/active-cycle-stats.tsx | 6 +- apps/app/components/cycles/cycles-view.tsx | 4 +- .../components/cycles/delete-cycle-modal.tsx | 2 +- apps/app/components/cycles/form.tsx | 2 +- apps/app/components/cycles/modal.tsx | 2 +- apps/app/components/cycles/select.tsx | 2 +- apps/app/components/cycles/sidebar.tsx | 12 +- .../components/cycles/single-cycle-card.tsx | 4 +- .../cycles/transfer-issues-modal.tsx | 2 +- .../components/emoji-icon-picker/index.tsx | 8 +- .../create-update-estimate-modal.tsx | 2 +- .../estimates/delete-estimate-modal.tsx | 2 +- .../components/gantt-chart/blocks/index.tsx | 4 +- .../components/gantt-chart/chart/bi-week.tsx | 8 +- apps/app/components/gantt-chart/chart/day.tsx | 8 +- .../components/gantt-chart/chart/hours.tsx | 8 +- .../components/gantt-chart/chart/index.tsx | 14 +-- .../components/gantt-chart/chart/month.tsx | 8 +- .../components/gantt-chart/chart/quarter.tsx | 8 +- .../app/components/gantt-chart/chart/week.tsx | 8 +- .../app/components/gantt-chart/chart/year.tsx | 8 +- .../components/inbox/accept-issue-modal.tsx | 2 +- .../components/inbox/decline-issue-modal.tsx | 2 +- .../components/inbox/delete-issue-modal.tsx | 2 +- .../app/components/inbox/filters-dropdown.tsx | 2 +- apps/app/components/inbox/filters-list.tsx | 4 +- .../components/inbox/inbox-action-headers.tsx | 8 +- .../app/components/inbox/inbox-issue-card.tsx | 6 +- .../components/inbox/inbox-main-content.tsx | 2 +- .../components/inbox/issues-list-sidebar.tsx | 2 +- .../app/components/inbox/select-duplicate.tsx | 4 +- .../integration/delete-import-modal.tsx | 2 +- .../components/integration/github/root.tsx | 6 +- apps/app/components/integration/guide.tsx | 6 +- .../integration/jira/import-users.tsx | 2 +- apps/app/components/integration/jira/root.tsx | 10 +- .../integration/single-integration-card.tsx | 2 +- apps/app/components/issues/activity.tsx | 2 +- .../components/issues/attachment-upload.tsx | 2 +- apps/app/components/issues/attachments.tsx | 2 +- .../issues/comment/comment-card.tsx | 4 +- .../components/issues/delete-issue-modal.tsx | 2 +- apps/app/components/issues/form.tsx | 2 +- apps/app/components/issues/modal.tsx | 2 +- .../components/issues/my-issues-list-item.tsx | 12 +- .../issues/parent-issues-list-modal.tsx | 2 +- apps/app/components/issues/select/date.tsx | 2 +- apps/app/components/issues/select/label.tsx | 6 +- .../issues/sidebar-select/blocked.tsx | 4 +- .../issues/sidebar-select/blocker.tsx | 4 +- .../issues/sidebar-select/parent.tsx | 2 +- apps/app/components/issues/sidebar.tsx | 16 +-- .../components/issues/view-select/label.tsx | 2 +- .../issues/view-select/priority.tsx | 2 +- .../labels/create-update-label-inline.tsx | 2 +- .../components/labels/delete-label-modal.tsx | 2 +- .../components/labels/labels-list-modal.tsx | 2 +- .../components/labels/single-label-group.tsx | 4 +- apps/app/components/labels/single-label.tsx | 2 +- .../modules/delete-module-modal.tsx | 2 +- apps/app/components/modules/form.tsx | 2 +- apps/app/components/modules/modal.tsx | 2 +- apps/app/components/modules/sidebar.tsx | 14 +-- .../components/modules/single-module-card.tsx | 2 +- .../components/onboarding/join-workspaces.tsx | 2 +- apps/app/components/pages/create-block.tsx | 2 +- .../pages/create-update-block-inline.tsx | 2 +- .../pages/create-update-page-modal.tsx | 2 +- .../components/pages/delete-page-modal.tsx | 2 +- apps/app/components/pages/pages-view.tsx | 6 +- .../pages/single-page-detailed-item.tsx | 2 +- .../pages/single-page-list-item.tsx | 2 +- .../project/create-project-modal.tsx | 2 +- .../project/delete-project-modal.tsx | 2 +- .../project/send-project-invitation-modal.tsx | 4 +- .../project/settings/single-label.tsx | 2 +- .../project/single-integration-card.tsx | 2 +- .../app/components/rich-text-editor/index.tsx | 6 +- .../toolbar/float-tool-tip.tsx | 4 +- apps/app/components/search-listbox/index.tsx | 2 +- apps/app/components/states/single-state.tsx | 2 +- apps/app/components/ui/avatar.tsx | 4 +- .../ui/buttons/secondary-button.tsx | 4 +- apps/app/components/ui/context-menu.tsx | 4 +- apps/app/components/ui/custom-menu.tsx | 4 +- .../components/ui/custom-search-select.tsx | 6 +- apps/app/components/ui/custom-select.tsx | 6 +- apps/app/components/ui/date.tsx | 2 +- apps/app/components/ui/datepicker.tsx | 2 +- apps/app/components/ui/empty-space.tsx | 2 +- apps/app/components/ui/input/index.tsx | 2 +- apps/app/components/ui/labels-list.tsx | 2 +- apps/app/components/ui/multi-input.tsx | 2 +- .../components/ui/multi-level-dropdown.tsx | 2 +- apps/app/components/ui/multi-level-select.tsx | 4 +- .../components/ui/product-updates-modal.tsx | 4 +- apps/app/components/ui/range-datepicker.tsx | 2 +- apps/app/components/ui/text-area/index.tsx | 2 +- apps/app/components/ui/toggle-switch.tsx | 2 +- .../components/views/delete-view-modal.tsx | 2 +- apps/app/components/views/modal.tsx | 2 +- .../workspace/completed-issues-graph.tsx | 4 +- .../workspace/create-workspace-form.tsx | 2 +- .../workspace/delete-workspace-modal.tsx | 2 +- .../app/components/workspace/help-section.tsx | 2 +- apps/app/components/workspace/issues-list.tsx | 2 +- .../components/workspace/issues-pie-chart.tsx | 4 +- .../app/components/workspace/issues-stats.tsx | 10 +- .../workspace/single-invitation.tsx | 2 +- .../workspace/upgrade-to-pro-modal.tsx | 2 +- apps/app/constants/workspace.ts | 6 - apps/app/layouts/app-layout/app-header.tsx | 4 +- apps/app/layouts/default-layout/index.tsx | 13 +- apps/app/layouts/settings-navbar.tsx | 2 +- apps/app/pages/[workspaceSlug]/analytics.tsx | 4 +- apps/app/pages/[workspaceSlug]/index.tsx | 6 +- .../pages/[workspaceSlug]/me/my-issues.tsx | 4 +- .../archived-issues/[archivedIssueId].tsx | 4 +- .../[projectId]/archived-issues/index.tsx | 4 +- .../projects/[projectId]/cycles/index.tsx | 2 +- .../projects/[projectId]/inbox/[inboxId].tsx | 2 +- .../projects/[projectId]/issues/[issueId].tsx | 4 +- .../projects/[projectId]/pages/[pageId].tsx | 2 +- .../projects/[projectId]/pages/index.tsx | 2 +- .../[projectId]/settings/estimates.tsx | 2 +- .../[projectId]/settings/features.tsx | 2 +- .../projects/[projectId]/settings/index.tsx | 2 +- .../projects/[projectId]/settings/members.tsx | 2 +- .../projects/[projectId]/settings/states.tsx | 4 +- .../projects/[projectId]/views/index.tsx | 2 +- .../[workspaceSlug]/settings/billing.tsx | 2 +- .../[workspaceSlug]/settings/members.tsx | 2 +- apps/app/pages/index.tsx | 89 ++++++++----- apps/app/pages/invitations.tsx | 71 ++++++----- apps/app/pages/reset-password.tsx | 117 ++++++++++-------- apps/app/pages/sign-up.tsx | 43 ++++--- .../app/pages/workspace-member-invitation.tsx | 2 +- apps/app/public/empty-state/empty-project.svg | 56 --------- apps/app/public/empty-state/invitation.svg | 23 ++++ .../logos/{github.png => github-white.png} | Bin apps/app/styles/globals.css | 5 + apps/app/tailwind.config.js | 4 +- 181 files changed, 682 insertions(+), 645 deletions(-) delete mode 100644 apps/app/public/empty-state/empty-project.svg create mode 100644 apps/app/public/empty-state/invitation.svg rename apps/app/public/logos/{github.png => github-white.png} (100%) diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx index ba8c759af..e6b3eeac3 100644 --- a/apps/app/components/account/email-code-form.tsx +++ b/apps/app/components/account/email-code-form.tsx @@ -32,6 +32,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => { setError, setValue, getValues, + watch, formState: { errors, isSubmitting, isValid, isDirty }, } = useForm({ defaultValues: { @@ -112,43 +113,34 @@ export const EmailCodeForm = ({ handleSignIn }: any) => { return ( <> -
- {(codeSent || codeResent) && ( -
-
-
-
-
-

- {codeResent - ? "Please check your mail for new code." - : "Please check your mail for code."} -

-
-
-
- )} -
+ {(codeSent || codeResent) && ( +

+ We have sent the sign in code. +
+ Please check your inbox at {watch("email")} +

+ )} + +
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test( value - ) || "Email ID is not valid", + ) || "Email address is not valid", }} error={errors.email} - placeholder="Enter your Email ID" + placeholder="Enter your email address..." />
{codeSent && ( -
+ <> { required: "Code is required", }} error={errors.token} - placeholder="Enter code" + placeholder="Enter code..." /> -
+ + )} + {codeSent ? ( + + {isLoading ? "Signing in..." : "Sign in"} + + ) : ( + { + handleSubmit(onSubmit)().then(() => { + setResendCodeTimer(30); + }); + }} + disabled={!isValid && isDirty} + loading={isSubmitting} + > + {isSubmitting ? "Sending code..." : "Send sign in code"} + )} -
- {codeSent ? ( - - {isLoading ? "Signing in..." : "Sign in"} - - ) : ( - { - handleSubmit(onSubmit)().then(() => { - setResendCodeTimer(30); - }); - }} - loading={isSubmitting || (!isValid && isDirty)} - > - {isSubmitting ? "Sending code..." : "Send code"} - - )} -
); diff --git a/apps/app/components/account/email-password-form.tsx b/apps/app/components/account/email-password-form.tsx index 97da2b9e4..ab902ee96 100644 --- a/apps/app/components/account/email-password-form.tsx +++ b/apps/app/components/account/email-password-form.tsx @@ -8,7 +8,7 @@ import { useForm } from "react-hook-form"; // components import { EmailResetPasswordForm } from "components/account"; // ui -import { Input, SecondaryButton } from "components/ui"; +import { Input, PrimaryButton } from "components/ui"; // types type EmailPasswordFormValues = { email: string; @@ -42,28 +42,38 @@ export const EmailPasswordForm: React.FC = ({ onSubmit }) => { return ( <> +

+ {isResettingPassword + ? "Reset your password" + : isSignUpPage + ? "Sign up on Plane" + : "Sign in to Plane"} +

{isResettingPassword ? ( ) : ( -
-
+ +
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test( value - ) || "Email ID is not valid", + ) || "Email address is not valid", }} error={errors.email} - placeholder="Enter your email ID" + placeholder="Enter your email address..." />
-
+
= ({ onSubmit }) => { required: "Password is required", }} error={errors.password} - placeholder="Enter your password" + placeholder="Enter your password..." />
-
-
- {isSignUpPage ? ( - - - Already have an account? Sign in. - - - ) : ( - - )} -
+
+ {isSignUpPage ? ( + + + Already have an account? Sign in. + + + ) : ( + + )}
-
- + = ({ onSubmit }) => { {isSignUpPage ? isSubmitting ? "Signing up..." - : "Sign Up" + : "Sign up" : isSubmitting ? "Signing in..." - : "Sign In"} - + : "Sign in"} + {!isSignUpPage && ( - + Don{"'"}t have an account? Sign up. diff --git a/apps/app/components/account/email-reset-password-form.tsx b/apps/app/components/account/email-reset-password-form.tsx index 03ea69042..2fa787a5f 100644 --- a/apps/app/components/account/email-reset-password-form.tsx +++ b/apps/app/components/account/email-reset-password-form.tsx @@ -59,25 +59,28 @@ export const EmailResetPasswordForm: React.FC = ({ setIsResettingPassword }; return ( - -
+ +
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test( value - ) || "Email ID is not valid", + ) || "Email address is not valid", }} error={errors.email} - placeholder="Enter registered Email ID" + placeholder="Enter registered email address.." />
-
+
setIsResettingPassword(false)} diff --git a/apps/app/components/account/github-login-button.tsx b/apps/app/components/account/github-login-button.tsx index 889d46405..844f32355 100644 --- a/apps/app/components/account/github-login-button.tsx +++ b/apps/app/components/account/github-login-button.tsx @@ -1,9 +1,14 @@ import { useEffect, useState, FC } from "react"; + import Link from "next/link"; import Image from "next/image"; import { useRouter } from "next/router"; + +// next-themes +import { useTheme } from "next-themes"; // images -import githubImage from "/public/logos/github-black.png"; +import githubBlackImage from "/public/logos/github-black.png"; +import githubWhiteImage from "/public/logos/github-white.png"; const { NEXT_PUBLIC_GITHUB_ID } = process.env; @@ -11,15 +16,15 @@ export interface GithubLoginButtonProps { handleSignIn: React.Dispatch; } -export const GithubLoginButton: FC = (props) => { - const { handleSignIn } = props; - // router +export const GithubLoginButton: FC = ({ handleSignIn }) => { + const [loginCallBackURL, setLoginCallBackURL] = useState(undefined); + const [gitCode, setGitCode] = useState(null); + const { query: { code }, } = useRouter(); - // states - const [loginCallBackURL, setLoginCallBackURL] = useState(undefined); - const [gitCode, setGitCode] = useState(null); + + const { theme } = useTheme(); useEffect(() => { if (code && !gitCode) { @@ -35,13 +40,18 @@ export const GithubLoginButton: FC = (props) => { }, []); return ( -
+
-
diff --git a/apps/app/components/account/google-login.tsx b/apps/app/components/account/google-login.tsx index c12fb4e24..a2cdb7750 100644 --- a/apps/app/components/account/google-login.tsx +++ b/apps/app/components/account/google-login.tsx @@ -27,7 +27,7 @@ export const GoogleLoginButton: FC = (props) => { theme: "outline", size: "large", logo_alignment: "center", - width: "410", + width: "360", text: "continue_with", } as GsiButtonConfiguration // customization attributes ); @@ -48,7 +48,7 @@ export const GoogleLoginButton: FC = (props) => { <>