OAuth button alignment improvements

This commit is contained in:
Stan Wohlwend 2024-05-21 17:31:28 +02:00
parent fd5af14faa
commit ae5ff58175
3 changed files with 5 additions and 6 deletions

View File

@ -49,7 +49,7 @@ export default function AuthPage({
</Text>
)}
</div>
<OAuthGroup type='signin' mockProject={mockProject} />
<OAuthGroup type={type} mockProject={mockProject} />
{enableSeparator && <SeparatorWithText text={'Or continue with'} />}
{project.credentialEnabled && project.magicLinkEnabled ? (
<Tabs defaultValue='magic-link'>

View File

@ -11,7 +11,7 @@ export default function OAuthButton({
type,
}: {
provider: string,
type: 'signin' | 'signup',
type: 'sign-in' | 'sign-up',
}) {
const stackApp = useStackApp();
@ -113,10 +113,9 @@ export default function OAuthButton({
style={{ border: style.border }}
onClick={() => stackApp.signInWithOAuth(provider)}
>
<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
<div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '8px' }}>
{style.icon}
<span style={{ flexGrow: 1 }}>{type === 'signup' ? 'Sign up with ' : 'Sign in with '}{style.name}</span>
{<div style={{ visibility: 'hidden' }}>{style.icon}</div>}
<span style={{ flexGrow: 1 }}>{type === 'sign-up' ? 'Sign up with ' : 'Sign in with '}{style.name}</span>
</div>
</Button>
);

View File

@ -8,7 +8,7 @@ export default function OAuthGroup({
type,
mockProject,
}: {
type: 'signin' | 'signup',
type: 'sign-in' | 'sign-up',
mockProject?: ClientProjectJson,
}) {
const stackApp = useStackApp();