From dd87bd0ee2bc15f33563e9481bda742505b89053 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 11 Dec 2023 15:52:21 +0530
Subject: [PATCH] style: update OAuth buttons UI (#3061)

---
 .../{github-login-button.tsx => github-sign-in.tsx}      | 6 +++---
 .../accounts/{google-login.tsx => google-sign-in.tsx}    | 9 +++++----
 space/components/accounts/index.ts                       | 4 ++--
 .../components/accounts/sign-in-forms/o-auth-options.tsx | 8 ++++----
 space/components/common/latest-feature-block.tsx         | 6 +++++-
 .../{github-login-button.tsx => github-sign-in.tsx}      | 6 +++---
 .../account/{google-login.tsx => google-sign-in.tsx}     | 9 +++++----
 web/components/account/index.ts                          | 4 ++--
 web/components/account/sign-in-forms/o-auth-options.tsx  | 8 ++++----
 web/components/common/latest-feature-block.tsx           | 8 ++++++--
 web/components/workspace/sidebar-quick-action.tsx        | 8 ++------
 11 files changed, 41 insertions(+), 35 deletions(-)
 rename space/components/accounts/{github-login-button.tsx => github-sign-in.tsx} (93%)
 rename space/components/accounts/{google-login.tsx => google-sign-in.tsx} (87%)
 rename web/components/account/{github-login-button.tsx => github-sign-in.tsx} (94%)
 rename web/components/account/{google-login.tsx => google-sign-in.tsx} (86%)

diff --git a/space/components/accounts/github-login-button.tsx b/space/components/accounts/github-sign-in.tsx
similarity index 93%
rename from space/components/accounts/github-login-button.tsx
rename to space/components/accounts/github-sign-in.tsx
index 46e4cd18db..322011ae3c 100644
--- a/space/components/accounts/github-login-button.tsx
+++ b/space/components/accounts/github-sign-in.tsx
@@ -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);
diff --git a/space/components/accounts/google-login.tsx b/space/components/accounts/google-sign-in.tsx
similarity index 87%
rename from space/components/accounts/google-login.tsx
rename to space/components/accounts/google-sign-in.tsx
index 707aec919c..3d637e949c 100644
--- a/space/components/accounts/google-login.tsx
+++ b/space/components/accounts/google-sign-in.tsx
@@ -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} />
     </>
   );
 };
diff --git a/space/components/accounts/index.ts b/space/components/accounts/index.ts
index db170180f7..949f0828ee 100644
--- a/space/components/accounts/index.ts
+++ b/space/components/accounts/index.ts
@@ -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";
diff --git a/space/components/accounts/sign-in-forms/o-auth-options.tsx b/space/components/accounts/sign-in-forms/o-auth-options.tsx
index ea7514a7b9..28da6fb7d6 100644
--- a/space/components/accounts/sign-in-forms/o-auth-options.tsx
+++ b/space/components/accounts/sign-in-forms/o-auth-options.tsx
@@ -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>
     </>
diff --git a/space/components/common/latest-feature-block.tsx b/space/components/common/latest-feature-block.tsx
index 885cf2bc87..c1b5db954d 100644
--- a/space/components/common/latest-feature-block.tsx
+++ b/space/components/common/latest-feature-block.tsx
@@ -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}
diff --git a/web/components/account/github-login-button.tsx b/web/components/account/github-sign-in.tsx
similarity index 94%
rename from web/components/account/github-login-button.tsx
rename to web/components/account/github-sign-in.tsx
index 2d5db0c920..27a8bf01c8 100644
--- a/web/components/account/github-login-button.tsx
+++ b/web/components/account/github-sign-in.tsx
@@ -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);
diff --git a/web/components/account/google-login.tsx b/web/components/account/google-sign-in.tsx
similarity index 86%
rename from web/components/account/google-login.tsx
rename to web/components/account/google-sign-in.tsx
index f9653a768f..48488e07e1 100644
--- a/web/components/account/google-login.tsx
+++ b/web/components/account/google-sign-in.tsx
@@ -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} />
     </>
   );
 };
diff --git a/web/components/account/index.ts b/web/components/account/index.ts
index 1184c4d2f9..275f7ff087 100644
--- a/web/components/account/index.ts
+++ b/web/components/account/index.ts
@@ -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";
diff --git a/web/components/account/sign-in-forms/o-auth-options.tsx b/web/components/account/sign-in-forms/o-auth-options.tsx
index 5de4defea4..0dcb6ae2f5 100644
--- a/web/components/account/sign-in-forms/o-auth-options.tsx
+++ b/web/components/account/sign-in-forms/o-auth-options.tsx
@@ -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>
     </>
diff --git a/web/components/common/latest-feature-block.tsx b/web/components/common/latest-feature-block.tsx
index 885cf2bc87..a34fda43f0 100644
--- a/web/components/common/latest-feature-block.tsx
+++ b/web/components/common/latest-feature-block.tsx
@@ -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>
diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
index ca76a24d66..b88fe26f8d 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -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