Skip to content

Commit 14ef16e

Browse files
jahoomajahooma
committed
Better styling for login page
1 parent 837af2a commit 14ef16e

File tree

4 files changed

+95
-51
lines changed

4 files changed

+95
-51
lines changed

‎freebuff/web/src/app/login/page.tsx‎

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
import { env } from '@codebuff/common/env'
44

5+
import { BackgroundBeams } from '@/components/background-beams'
6+
import { HeroGrid } from '@/components/hero-grid'
57
import { LoginCard } from '@/components/login/login-card'
68
import {
79
Card,
@@ -25,29 +27,44 @@ export default async function LoginPage({
2527

2628
if (parseInt(expiresAt) < Date.now()) {
2729
return (
28-
<main className="container mx-auto flex flex-col items-center py-20">
29-
<Card>
30-
<CardHeader>
31-
<CardTitle>Auth code expired</CardTitle>
32-
<CardDescription>
33-
Please try starting Freebuff in your terminal again.
34-
</CardDescription>
35-
</CardHeader>
36-
<CardContent>
37-
<p className="text-sm text-muted-foreground">
38-
If the problem persists, reach out to{' '}
39-
{env.NEXT_PUBLIC_SUPPORT_EMAIL}.
40-
</p>
41-
</CardContent>
42-
</Card>
43-
</main>
30+
<div className="relative min-h-screen overflow-hidden">
31+
<div className="absolute inset-0 bg-gradient-to-b from-dark-forest-green via-black/95 to-black" />
32+
<div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-10%,rgba(124,255,63,0.12),transparent_50%)]" />
33+
<HeroGrid />
34+
<BackgroundBeams />
35+
<main className="relative z-10 container mx-auto flex flex-col items-center justify-center min-h-screen py-20">
36+
<div className="w-full sm:w-1/2 md:w-1/3">
37+
<Card className="border-zinc-800/80 bg-zinc-950/80 backdrop-blur-sm">
38+
<CardHeader>
39+
<CardTitle className="text-white">Auth code expired</CardTitle>
40+
<CardDescription>
41+
Please try starting Freebuff in your terminal again.
42+
</CardDescription>
43+
</CardHeader>
44+
<CardContent>
45+
<p className="text-sm text-muted-foreground">
46+
If the problem persists, reach out to{' '}
47+
{env.NEXT_PUBLIC_SUPPORT_EMAIL}.
48+
</p>
49+
</CardContent>
50+
</Card>
51+
</div>
52+
</main>
53+
</div>
4454
)
4555
}
4656
}
4757

4858
return (
49-
<main className="py-20">
50-
<LoginCard authCode={authCode} />
51-
</main>
59+
<div className="relative min-h-screen overflow-hidden">
60+
<div className="absolute inset-0 bg-gradient-to-b from-dark-forest-green via-black/95 to-black" />
61+
<div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-10%,rgba(124,255,63,0.12),transparent_50%)]" />
62+
<div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_40%_at_50%_80%,rgba(124,255,63,0.06),transparent_50%)]" />
63+
<HeroGrid />
64+
<BackgroundBeams />
65+
<main className="relative z-10 flex flex-col items-center justify-center min-h-screen py-20">
66+
<LoginCard authCode={authCode} />
67+
</main>
68+
</div>
5269
)
5370
}

‎freebuff/web/src/components/login/login-card.tsx‎

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use client'
22

3+
import Image from 'next/image'
34
import { useSearchParams } from 'next/navigation'
45
import { useSession, signIn } from 'next-auth/react'
56
import { Suspense } from 'react'
@@ -9,7 +10,6 @@ import { Button } from '@/components/ui/button'
910
import {
1011
Card,
1112
CardHeader,
12-
CardTitle,
1313
CardDescription,
1414
CardContent,
1515
CardFooter,
@@ -48,15 +48,34 @@ export function LoginCard({ authCode }: { authCode?: string | null }) {
4848
}
4949

5050
return (
51-
<main className="container mx-auto flex flex-col items-center relative z-10">
52-
<div className="w-full sm:w-1/2 md:w-1/3">
51+
<div className="container mx-auto flex flex-col items-center">
52+
<div className="w-full max-w-sm">
5353
<Suspense>
54-
<Card>
55-
<CardHeader>
56-
<CardTitle className="mb-2">
57-
{authCode ? 'Authenticate' : 'Login'}
58-
</CardTitle>
59-
<CardDescription>
54+
{/* Logo + brand */}
55+
<div className="flex flex-col items-center mb-8">
56+
<div className="relative mb-4">
57+
<div
58+
className="absolute inset-0 rounded-full"
59+
style={{
60+
boxShadow: '0 0 40px 10px rgba(124, 255, 63, 0.15), 0 0 80px 20px rgba(124, 255, 63, 0.08)',
61+
}}
62+
/>
63+
<Image
64+
src="/logo-icon.png"
65+
alt="Freebuff"
66+
width={48}
67+
height={48}
68+
className="relative rounded-sm"
69+
/>
70+
</div>
71+
<span className="text-2xl tracking-widest font-serif text-white">
72+
freebuff
73+
</span>
74+
</div>
75+
76+
<Card className="border-zinc-800/80 bg-zinc-950/80 backdrop-blur-sm gradient-border-shine">
77+
<CardHeader className="text-center">
78+
<CardDescription className="text-white text-base">
6079
{authCode
6180
? 'Continue to sign in to Freebuff.'
6281
: 'Sign in to get started with Freebuff.'}
@@ -66,41 +85,44 @@ export function LoginCard({ authCode }: { authCode?: string | null }) {
6685
{session?.user ? (
6786
<>
6887
<CardContent className="space-y-4">
69-
<div className="flex items-center space-x-3">
70-
<div className="relative h-12 w-12 rounded-full overflow-hidden bg-secondary">
88+
<div className="flex items-center space-x-3 p-3 rounded-lg bg-zinc-900/60 border border-zinc-800/60">
89+
<div className="relative h-10 w-10 rounded-full overflow-hidden bg-secondary flex-shrink-0">
7190
{session.user.image ? (
7291
<img
7392
src={session.user.image}
7493
alt={session.user.name || ''}
7594
className="h-full w-full object-cover"
7695
/>
7796
) : (
78-
<div className="h-full w-full flex items-center justify-center text-lg font-medium">
97+
<div className="h-full w-full flex items-center justify-center text-sm font-medium text-acid-matrix">
7998
{session.user.name?.charAt(0) ||
8099
session.user.email?.charAt(0) ||
81100
'U'}
82101
</div>
83102
)}
84103
</div>
85-
<div className="flex-1">
86-
<p className="font-medium">{session.user.name}</p>
87-
<p className="text-sm text-muted-foreground">
104+
<div className="flex-1 min-w-0">
105+
<p className="font-medium text-white truncate">{session.user.name}</p>
106+
<p className="text-sm text-muted-foreground truncate">
88107
{session.user.email}
89108
</p>
90109
</div>
91110
</div>
92-
<p className="text-sm text-muted-foreground">
93-
Do you want to use this account or sign in with another?
111+
<p className="text-sm text-muted-foreground text-center">
112+
Continue with this account or sign in with another.
94113
</p>
95114
</CardContent>
96115
<CardFooter className="flex flex-col space-y-2">
97-
<Button onClick={handleContinueAsUser} className="w-full">
116+
<Button
117+
onClick={handleContinueAsUser}
118+
className="w-full bg-acid-matrix/90 text-black font-medium hover:bg-acid-matrix hover:shadow-[0_0_20px_rgba(124,255,63,0.3)] transition-all duration-300"
119+
>
98120
Continue as {session.user.name || session.user.email}
99121
</Button>
100122
<Button
101123
variant="outline"
102124
onClick={handleUseAnotherAccount}
103-
className="w-full"
125+
className="w-full border-zinc-700 hover:border-acid-matrix/40 hover:text-acid-matrix transition-all duration-300"
104126
>
105127
Use another account
106128
</Button>
@@ -112,6 +134,6 @@ export function LoginCard({ authCode }: { authCode?: string | null }) {
112134
</Card>
113135
</Suspense>
114136
</div>
115-
</main>
137+
</div>
116138
)
117139
}

‎freebuff/web/src/components/sign-in/sign-in-button.tsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -44,22 +44,27 @@ export function SignInButton({
4444
})
4545
}
4646

47+
const displayName =
48+
providerName === 'github'
49+
? 'GitHub'
50+
: providerName.charAt(0).toUpperCase() + providerName.slice(1)
51+
4752
return (
4853
<Button
4954
onClick={handleSignIn}
5055
disabled={isPending}
51-
className="flex items-center gap-2"
56+
className="flex items-center gap-2 w-full bg-zinc-900 border border-zinc-700 text-white hover:border-acid-matrix/60 hover:shadow-[0_0_20px_rgba(124,255,63,0.15)] transition-all duration-300"
5257
>
53-
{isPending && <Icons.loader className="mr-2 size-4 animate-spin" />}
54-
<img
55-
src={`https://s2.googleusercontent.com/s2/favicons?domain=${providerDomain}`}
56-
className="rounded-full"
57-
alt={`${providerName} logo`}
58-
/>
59-
Continue with{' '}
60-
{providerName === 'github'
61-
? 'GitHub'
62-
: providerName.charAt(0).toUpperCase() + providerName.slice(1)}
58+
{isPending ? (
59+
<Icons.loader className="mr-2 size-4 animate-spin" />
60+
) : (
61+
<img
62+
src={`https://s2.googleusercontent.com/s2/favicons?domain=${providerDomain}`}
63+
className="rounded-full"
64+
alt={`${providerName} logo`}
65+
/>
66+
)}
67+
Continue with {displayName}
6368
</Button>
6469
)
6570
}

‎freebuff/web/src/components/sign-in/sign-in-card-footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { CardFooter } from '../ui/card'
33

44
export function SignInCardFooter() {
55
return (
6-
<CardFooter className="flex flex-col space-y-2">
6+
<CardFooter className="flex flex-col space-y-3 pb-8">
77
<SignInButton providerDomain="github.com" providerName="github" />
88
</CardFooter>
99
)

0 commit comments

Comments
 (0)