Stevan/conve-x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add theming

Browse Source
This commit is contained in:
Stevan Freeborn
2023-09-09 21:39:08 -05:00
parent 272355d9a0
commit 4b6fec0841
11 changed files with 141 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/account/[[...account]]/page.tsx
+6 -1
View File
@@ -1,3 +1,5 @@
'use client';
import { UserProfile } from '@clerk/nextjs';
export default function AccountPage() {
@@ -6,7 +8,10 @@ export default function AccountPage() {
<UserProfile
appearance={{
elements: {
card: 'shadow-md',
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white',
navbar: 'dark:bg-secondary-gray [&_*]:dark:text-white',
formFieldInput: 'dark:bg-primary-gray dark:text-white',
profileSectionTitle: 'dark:border-white dark:border-opacity-10',
},
}}
/>
src/app/layout.tsx
+19 -14
View File
@@ -1,5 +1,5 @@
import Navbar from '@/components/Navbar';
import ConvexProvider from '@/providers';
import { ConvexProvider, NextThemesProvider } from '@/providers';
import { ClerkProvider } from '@clerk/nextjs';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
@@ -17,20 +17,25 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<ClerkProvider
publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
<html
lang='en'
className='w-full h-full'
suppressHydrationWarning
>
<ConvexProvider>
<html
lang='en'
className='w-full h-full'
<body
className={`w-full h-full flex flex-col bg-white text-primary-gray dark:bg-primary-gray dark:text-white ${inter.className}`}
>
<ClerkProvider
publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
>
<body className={`w-full h-full flex flex-col ${inter.className}`}>
<Navbar />
<div className='p-4'>{children}</div>
</body>
</html>
</ConvexProvider>
</ClerkProvider>
<ConvexProvider>
<NextThemesProvider>
<Navbar />
<div className='p-4'>{children}</div>
</NextThemesProvider>
</ConvexProvider>
</ClerkProvider>
</body>
</html>
);
}
src/app/login/[[...login]]/page.tsx
+18 -2
View File
@@ -1,9 +1,25 @@
import { SignIn } from '@clerk/nextjs/app-beta';
'use client';
import { SignIn } from '@clerk/nextjs';
export default function LoginPage() {
return (
<main className='flex flex-col items-center'>
<SignIn appearance={{ elements: { card: 'shadow-md' } }} />
<SignIn
appearance={{
elements: {
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white',
socialButtonsIconButton__github:
'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__google:
'hover:bg-gradient-to-r from-blue-500 via-green-500 to-yellow-500 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__microsoft:
'hover:bg-gradient-to-r from-red-600 via-green-600 to-blue-600 dark:border-white dark:border-opacity-10',
dividerLine: 'dark:bg-white dark:bg-opacity-10',
formFieldInput: 'dark:bg-primary-gray dark:text-white',
},
}}
/>
</main>
);
}
src/app/page.tsx
+1 -5
View File
@@ -1,7 +1,3 @@
export default function Home() {
return (
<main>
<h1>conveX</h1>
</main>
);
return <main></main>;
}
src/app/signup/[[...signup]]/page.tsx
+11 -1
View File
@@ -1,3 +1,5 @@
'use client';
import { SignUp } from '@clerk/nextjs';
export default function SignUpPage() {
@@ -6,7 +8,15 @@ export default function SignUpPage() {
<SignUp
appearance={{
elements: {
card: 'shadow-md',
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a):not(svg)]:dark:text-white',
socialButtonsIconButton__github:
'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__google:
'hover:bg-gradient-to-r from-blue-500 via-green-500 to-yellow-500 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__microsoft:
'hover:bg-gradient-to-r from-red-600 via-green-600 to-blue-600 dark:border-white dark:border-opacity-10',
dividerLine: 'dark:bg-white dark:bg-opacity-10',
formFieldInput: 'dark:bg-primary-gray dark:text-white',
},
}}
/>