Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[examples] Update styling for with-supabase example #51751

Merged
merged 9 commits into from Jun 29, 2023
Merged

[examples] Update styling for with-supabase example #51751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
03ce12a
update with-supabase example
fsansalvadore Jun 23, 2023
0287b0e
Merge branch 'vercel:canary' into update-with-supabase-example
fsansalvadore Jun 24, 2023
b59b483
adjust supabase logo
fsansalvadore Jun 24, 2023
081c3ae
Merge branch 'canary' into update-with-supabase-example
fsansalvadore Jun 27, 2023
d2a61e4
install @supabase/supabase-js
fsansalvadore Jun 28, 2023
1355e9e
Merge branch 'vercel:canary' into update-with-supabase-example
fsansalvadore Jun 28, 2023
f887a3d
Merge branch 'canary' into update-with-supabase-example
leerob Jun 29, 2023
2f0bfb8
lint fix
ijjk Jun 29, 2023
0fb335c
Merge branch 'canary' into update-with-supabase-example
ijjk Jun 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
49 changes: 32 additions & 17 deletions examples/with-supabase/app/globals.css
View file
Open in desktop
Expand Up @@ -2,26 +2,41 @@
@tailwind components;
@tailwind utilities;

:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
@layer base {
:root {
--background: 200 20% 98%;
--btn-background: 200 10% 91%;
--btn-background-hover: 200 10% 89%;
--foreground: 200 50% 3%;
}

@media (prefers-color-scheme: dark) {
:root {
--background: 200 50% 3%;
--btn-background: 200 10% 9%;
--btn-background-hover: 200 10% 12%;
--foreground: 200 20% 96%;
}
}
}

@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
@layer base {
* {
@apply border-foreground/20;
}
}

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
.animate-in {
animation: animateIn 0.3s ease 0.15s both;
}

@keyframes animateIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
2 changes: 1 addition & 1 deletion examples/with-supabase/app/layout.tsx
View file
Open in desktop
Expand Up @@ -13,7 +13,7 @@ export default function RootLayout({
return (
<html lang="en">
<body>
<main className="min-h-screen bg-neutral-900 flex flex-col items-center">
<main className="min-h-screen bg-background flex flex-col items-center">
{children}
</main>
</body>
Expand Down
60 changes: 41 additions & 19 deletions examples/with-supabase/app/login/page.tsx
View file
Open in desktop
Expand Up @@ -3,6 +3,7 @@
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import Link from 'next/link'

export default function Login() {
const [email, setEmail] = useState('')
Expand Down Expand Up @@ -30,73 +31,94 @@ export default function Login() {
password,
})
router.push('/')
router.refresh()
}

return (
<div className="flex-1 flex flex-col w-full max-w-sm justify-center gap-2">
<div className="flex-1 flex flex-col w-full px-8 sm:max-w-md justify-center gap-2">
<Link
href="/"
className="absolute left-8 top-8 py-2 px-4 rounded-md no-underline text-foreground bg-btn-background hover:bg-btn-background-hover flex items-center group text-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-1"
>
<polyline points="15 18 9 12 15 6" />
</svg>{' '}
Back
</Link>
{view === 'check-email' ? (
<p className="text-center text-neutral-400">
Check <span className="font-bold text-white">{email}</span> to
continue signing up
<p className="text-center text-foreground">
Check <span className="font-bold">{email}</span> to continue signing
up
</p>
) : (
<form
className="flex-1 flex flex-col w-full max-w-sm justify-center gap-2"
className="flex-1 flex flex-col w-full justify-center gap-2 text-foreground"
onSubmit={view === 'sign-in' ? handleSignIn : handleSignUp}
>
<label className="text-md text-neutral-400" htmlFor="email">
<label className="text-md" htmlFor="email">
Email
</label>
<input
className="rounded-md px-4 py-2 bg-inherit border mb-6 text-neutral-100"
className="rounded-md px-4 py-2 bg-inherit border mb-6"
name="email"
onChange={(e) => setEmail(e.target.value)}
value={email}
placeholder="you@example.com"
/>
<label className="text-md text-neutral-400" htmlFor="password">
<label className="text-md" htmlFor="password">
Password
</label>
<input
className="rounded-md px-4 py-2 bg-inherit border mb-6 text-neutral-100"
className="rounded-md px-4 py-2 bg-inherit border mb-6"
type="password"
name="password"
onChange={(e) => setPassword(e.target.value)}
value={password}
placeholder="••••••••"
/>
{view === 'sign-in' ? (
{view === 'sign-in' && (
<>
<button className="bg-green-700 rounded px-4 py-2 text-neutral-200 mb-6">
<button className="bg-green-700 rounded px-4 py-2 text-white mb-6">
Sign In
</button>
<p className="text-sm text-neutral-500 text-center">
<p className="text-sm text-center">
Don't have an account?
<button
className="ml-1 text-white underline"
className="ml-1 underline"
onClick={() => setView('sign-up')}
>
Sign Up Now
</button>
</p>
</>
) : null}
{view === 'sign-up' ? (
)}
{view === 'sign-up' && (
<>
<button className="bg-green-700 rounded px-4 py-2 text-neutral-200 mb-6">
<button className="bg-green-700 rounded px-4 py-2 text-white mb-6">
Sign Up
</button>
<p className="text-sm text-neutral-500 text-center">
<p className="text-sm text-center">
Already have an account?
<button
className="ml-1 text-white underline"
className="ml-1 underline"
onClick={() => setView('sign-in')}
>
Sign In Now
</button>
</p>
</>
) : null}
)}
</form>
)}
</div>
Expand Down