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

style: update OAuth buttons UI (#3061)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-12-11 15:52:21 +05:30 committed by GitHub
parent 26d37fbd38
commit dd87bd0ee2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 41 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
space/components/accounts/github-login-button.tsx → space/components/accounts/github-sign-in.tsx
View File

@ -8,12 +8,12 @@ import { useTheme } from "next-themes";
import githubBlackImage from "public/logos/github-black.svg";
import githubWhiteImage from "public/logos/github-white.svg";
export interface GithubLoginButtonProps {
type Props = {
handleSignIn: React.Dispatch<string>;
clientId: string;
}
};
export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
export const GitHubSignInButton: FC<Props> = (props) => {
const { handleSignIn, clientId } = props;
// states
const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);

9
space/components/accounts/google-login.tsx → space/components/accounts/google-sign-in.tsx
View File

@ -1,12 +1,12 @@
import { FC, useEffect, useRef, useCallback, useState } from "react";
import Script from "next/script";
export interface IGoogleLoginButton {
type Props = {
clientId: string;
handleSignIn: React.Dispatch<any>;
}
};
export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
export const GoogleSignInButton: FC<Props> = (props) => {
const { handleSignIn, clientId } = props;
// refs
const googleSignInButton = useRef<HTMLDivElement>(null);
@ -30,6 +30,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
size: "large",
logo_alignment: "center",
text: "signin_with",
width: 384,
} as GsiButtonConfiguration // customization attributes
);
} catch (err) {
@ -53,7 +54,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
return (
<>
<Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
<div className="w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
<div className="!w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
</>
);
};

4
space/components/accounts/index.ts
View File

@ -1,5 +1,5 @@
export * from "./github-login-button";
export * from "./google-login";
export * from "./github-sign-in";
export * from "./google-sign-in";
export * from "./onboarding-form";
export * from "./user-logged-in";
export * from "./sign-in-forms";

8
space/components/accounts/sign-in-forms/o-auth-options.tsx
View File

@ -7,7 +7,7 @@ import { AppConfigService } from "services/app-config.service";
// hooks
import useToast from "hooks/use-toast";
// components
import { GithubLoginButton, GoogleLoginButton } from "components/accounts";
import { GitHubSignInButton, GoogleSignInButton } from "components/accounts";
type Props = {
handleSignInRedirection: () => Promise<void>;
@ -73,12 +73,12 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
<p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">Or continue with</p>
<hr className="w-full border-onboarding-border-100" />
</div>
<div className="mx-auto flex flex-col items-center gap-2 overflow-hidden pt-7 sm:w-96 sm:flex-row">
<div className="mx-auto space-y-4 overflow-hidden pt-7 sm:w-96">
{envConfig?.google_client_id && (
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
<GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
)}
{envConfig?.github_client_id && (
<GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
<GitHubSignInButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
)}
</div>
</>

6
space/components/common/latest-feature-block.tsx
View File

@ -20,7 +20,11 @@ export const LatestFeatureBlock = () => {
</Link>
</p>
</div>
<div className="mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 bg-onboarding-background-100 object-cover sm:h-52 sm:w-96">
<div
className={`mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 object-cover sm:h-52 sm:w-96 ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
}`}
>
<div className="h-[90%]">
<Image
src={latestFeatures}

6
web/components/account/github-login-button.tsx → web/components/account/github-sign-in.tsx
View File

@ -9,12 +9,12 @@ import { useTheme } from "next-themes";
import githubLightModeImage from "/public/logos/github-black.png";
import githubDarkModeImage from "/public/logos/github-dark.svg";
export interface GithubLoginButtonProps {
type Props = {
handleSignIn: React.Dispatch<string>;
clientId: string;
}
};
export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
export const GitHubSignInButton: FC<Props> = (props) => {
const { handleSignIn, clientId } = props;
// states
const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);

9
web/components/account/google-login.tsx → web/components/account/google-sign-in.tsx
View File

@ -1,12 +1,12 @@
import { FC, useEffect, useRef, useCallback, useState } from "react";
import Script from "next/script";
export interface IGoogleLoginButton {
type Props = {
handleSignIn: React.Dispatch<any>;
clientId: string;
}
};
export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
export const GoogleSignInButton: FC<Props> = (props) => {
const { handleSignIn, clientId } = props;
// refs
const googleSignInButton = useRef<HTMLDivElement>(null);
@ -30,6 +30,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
size: "large",
logo_alignment: "center",
text: "signin_with",
width: 384,
} as GsiButtonConfiguration // customization attributes
);
} catch (err) {
@ -53,7 +54,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
return (
<>
<Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
<div className="w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
<div className="!w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
</>
);
};

4
web/components/account/index.ts
View File

@ -1,5 +1,5 @@
export * from "./sign-in-forms";
export * from "./deactivate-account-modal";
export * from "./github-login-button";
export * from "./google-login";
export * from "./github-sign-in";
export * from "./google-sign-in";
export * from "./email-signup-form";

8
web/components/account/sign-in-forms/o-auth-options.tsx
View File

@ -6,7 +6,7 @@ import { AuthService } from "services/auth.service";
// hooks
import useToast from "hooks/use-toast";
// components
import { GithubLoginButton, GoogleLoginButton } from "components/account";
import { GitHubSignInButton, GoogleSignInButton } from "components/account";
type Props = {
handleSignInRedirection: () => Promise<void>;
@ -73,12 +73,12 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
<p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">Or continue with</p>
<hr className="w-full border-onboarding-border-100" />
</div>
<div className="mx-auto flex flex-col items-center gap-2 overflow-hidden pt-7 sm:w-96 sm:flex-row">
<div className="mx-auto space-y-4 overflow-hidden mt-7 sm:w-96">
{envConfig?.google_client_id && (
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
<GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
)}
{envConfig?.github_client_id && (
<GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
<GitHubSignInButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
)}
</div>
</>

8
web/components/common/latest-feature-block.tsx
View File

@ -20,14 +20,18 @@ export const LatestFeatureBlock = () => {
</Link>
</p>
</div>
<div className="mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 bg-onboarding-background-100 object-cover sm:h-52 sm:w-96">
<div
className={`mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 object-cover sm:h-52 sm:w-96 ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
}`}
>
<div className="h-[90%]">
<Image
src={latestFeatures}
alt="Plane Issues"
className={`-mt-2 ml-10 h-full rounded-md ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
} `}
}`}
/>
</div>
</div>

8
web/components/workspace/sidebar-quick-action.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from "react";
// ui
import { ChevronDown, PenSquare, Search } from "lucide-react";
import { ChevronUp, PenSquare, Search } from "lucide-react";
// hooks
import useLocalStorage from "hooks/use-local-storage";
// components
@ -37,7 +37,6 @@ export const WorkspaceSidebarQuickAction = observer(() => {
}}
fieldsToShow={["all"]}
/>
<div
className={`mt-4 flex w-full cursor-pointer items-center justify-between px-4 ${
isSidebarCollapsed ? "flex-col gap-1" : "gap-2"
@ -74,10 +73,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
isSidebarCollapsed ? "hidden" : "block"
}`}
>
<ChevronDown
size={16}
className="rotate-0 transform !text-custom-sidebar-text-300 transition-transform duration-300 group-hover:rotate-180"
/>
<ChevronUp className="h-4 w-4 transform !text-custom-sidebar-text-300 transition-transform duration-300 rotate-180 group-hover:rotate-0" />
</button>
<div