From b96d40f106f6bf3bff1835542d380555c3b9ef76 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Tue, 21 Mar 2023 12:46:12 +0530 Subject: [PATCH] style: auth screens (#478) * style: sign in page * style: github and google sign * style: sign with code and password * style: not a member and not authorized for project setting * style: join project icon * chore: comment removed --- .../components/account/email-code-form.tsx | 16 +++--- .../account/email-password-form.tsx | 2 +- .../components/account/email-signin-form.tsx | 22 -------- .../account/github-login-button.tsx | 26 ++++------ apps/app/components/account/google-login.tsx | 4 +- .../components/core/not-authorized-view.tsx | 21 ++++---- apps/app/components/project/join-project.tsx | 33 ++++++++---- apps/app/layouts/app-layout/index.tsx | 12 +++-- apps/app/pages/signin.tsx | 31 +++++------ apps/app/public/join-project.svg | 52 +++++++++++++++++++ apps/app/public/project-setting.svg | 44 ++++++++++++++++ 11 files changed, 178 insertions(+), 85 deletions(-) create mode 100644 apps/app/public/join-project.svg create mode 100644 apps/app/public/project-setting.svg diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx index 6cb9f9ba0..ad46b6758 100644 --- a/apps/app/components/account/email-code-form.tsx +++ b/apps/app/components/account/email-code-form.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; // ui import { CheckCircleIcon } from "@heroicons/react/20/solid"; -import { Input, SecondaryButton } from "components/ui"; +import { Input, PrimaryButton, SecondaryButton } from "components/ui"; // services import authenticationService from "services/authentication.service"; import useToast from "hooks/use-toast"; @@ -90,7 +90,7 @@ export const EmailCodeForm = ({ onSuccess }: any) => { return ( <> -
+ {(codeSent || codeResent) && (
@@ -121,7 +121,7 @@ export const EmailCodeForm = ({ onSuccess }: any) => { ) || "Email ID is not valid", }} error={errors.email} - placeholder="Enter your Email ID" + placeholder="Enter you email Id" />
@@ -169,18 +169,20 @@ export const EmailCodeForm = ({ onSuccess }: any) => { )}
{codeSent ? ( - {isSubmitting ? "Signing in..." : "Sign in"} - + ) : ( - { handleSubmit(onSubmit)().then(() => { setResendCodeTimer(30); @@ -189,7 +191,7 @@ export const EmailCodeForm = ({ onSuccess }: any) => { 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 b9368a570..ca654c81c 100644 --- a/apps/app/components/account/email-password-form.tsx +++ b/apps/app/components/account/email-password-form.tsx @@ -60,7 +60,7 @@ export const EmailPasswordForm = ({ onSuccess }: any) => { }; return ( <> -
+
= (props) => { ) : ( )} -
-
-
-
-
-
- or -
-
- {/*
- -
*/} -
); }; diff --git a/apps/app/components/account/github-login-button.tsx b/apps/app/components/account/github-login-button.tsx index 80faecec5..92e9cdccd 100644 --- a/apps/app/components/account/github-login-button.tsx +++ b/apps/app/components/account/github-login-button.tsx @@ -3,7 +3,7 @@ import Link from "next/link"; import Image from "next/image"; import { useRouter } from "next/router"; // images -import githubImage from "/public/logos/github.png"; +import githubImage from "/public/logos/github-black.png"; const { NEXT_PUBLIC_GITHUB_ID } = process.env; @@ -33,19 +33,15 @@ 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 078eef518..478ffc67e 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: document.getElementById("googleSignInButton")?.offsetWidth, + width: "410", text: "continue_with", } as GsiButtonConfiguration // customization attributes ); @@ -47,7 +47,7 @@ export const GoogleLoginButton: FC = (props) => { return ( <>