improvement(signup): modify signup and login pages to not show social sign in when not configured, increase logo size (#1103)

Author: waleedlatif1

apps/sim/app/(auth)/components/social-login-buttons.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useState } from 'react'
 import { GithubIcon, GoogleIcon } from '@/components/icons'
 import { Button } from '@/components/ui/button'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { client } from '@/lib/auth-client'
 
 interface SocialLoginButtonsProps {
@@ -114,58 +113,16 @@ export function SocialLoginButtons({
     </Button>
   )
 
-  const renderGithubButton = () => {
-    if (githubAvailable) return githubButton
-
-    return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div>{githubButton}</div>
-          </TooltipTrigger>
-          <TooltipContent className='border-neutral-700 bg-neutral-800 text-white'>
-            <p>
-              GitHub login requires OAuth credentials to be configured. Add the following
-              environment variables:
-            </p>
-            <ul className='mt-2 space-y-1 text-neutral-300 text-xs'>
-              <li>• GITHUB_CLIENT_ID</li>
-              <li>• GITHUB_CLIENT_SECRET</li>
-            </ul>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    )
-  }
+  const hasAnyOAuthProvider = githubAvailable || googleAvailable
 
-  const renderGoogleButton = () => {
-    if (googleAvailable) return googleButton
-
-    return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div>{googleButton}</div>
-          </TooltipTrigger>
-          <TooltipContent className='border-neutral-700 bg-neutral-800 text-white'>
-            <p>
-              Google login requires OAuth credentials to be configured. Add the following
-              environment variables:
-            </p>
-            <ul className='mt-2 space-y-1 text-neutral-300 text-xs'>
-              <li>• GOOGLE_CLIENT_ID</li>
-              <li>• GOOGLE_CLIENT_SECRET</li>
-            </ul>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    )
+  if (!hasAnyOAuthProvider) {
+    return null
   }
 
   return (
     <div className='grid gap-3'>
-      {renderGithubButton()}
-      {renderGoogleButton()}
+      {githubAvailable && githubButton}
+      {googleAvailable && googleButton}
     </div>
   )
 }

apps/sim/app/(auth)/layout.tsx

@@ -28,12 +28,12 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
               <img
                 src={brand.logoUrl}
                 alt={`${brand.name} Logo`}
-                width={42}
-                height={42}
-                className='h-[42px] w-[42px] object-contain'
+                width={56}
+                height={56}
+                className='h-[56px] w-[56px] object-contain'
               />
             ) : (
-              <Image src='/sim.svg' alt={`${brand.name} Logo`} width={42} height={42} />
+              <Image src='/sim.svg' alt={`${brand.name} Logo`} width={56} height={56} />
             )}
           </Link>
         </div>

apps/sim/app/(auth)/login/login-form.tsx

@@ -366,11 +366,13 @@ export default function LoginPage({
             callbackURL={callbackUrl}
           />
 
-          <div className='relative mt-2 py-4'>
-            <div className='absolute inset-0 flex items-center'>
-              <div className='w-full border-neutral-700/50 border-t' />
+          {(githubAvailable || googleAvailable) && (
+            <div className='relative mt-2 py-4'>
+              <div className='absolute inset-0 flex items-center'>
+                <div className='w-full border-neutral-700/50 border-t' />
+              </div>
             </div>
-          </div>
+          )}
 
           <form onSubmit={onSubmit} className='space-y-5'>
             <div className='space-y-4'>

apps/sim/app/(auth)/signup/signup-form.tsx

@@ -381,11 +381,13 @@ function SignupFormContent({
             isProduction={isProduction}
           />
 
-          <div className='relative mt-2 py-4'>
-            <div className='absolute inset-0 flex items-center'>
-              <div className='w-full border-neutral-700/50 border-t' />
+          {(githubAvailable || googleAvailable) && (
+            <div className='relative mt-2 py-4'>
+              <div className='absolute inset-0 flex items-center'>
+                <div className='w-full border-neutral-700/50 border-t' />
+              </div>
             </div>
-          </div>
+          )}
 
           <form onSubmit={onSubmit} className='space-y-5'>
             <div className='space-y-4'>