style: update OAuth buttons UI (#3061)

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);

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} />
     </>
   );
 };

space/components/accounts/index.ts

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

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>
     </>

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}

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);

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} />
     </>
   );
 };

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 "./github-sign-in";
-export * from "./google-login";
+export * from "./google-sign-in";
 export * from "./email-signup-form";

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>
     </>

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>

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
+                <ChevronUp className="h-4 w-4 transform !text-custom-sidebar-text-300 transition-transform duration-300 rotate-180 group-hover:rotate-0" />
-                  size={16}
-                  className="rotate-0 transform !text-custom-sidebar-text-300 transition-transform duration-300 group-hover:rotate-180"
-                />
               </button>
 
               <div