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
package-lock.json
Generated
+20
View File
@@ -17,9 +17,11 @@
"eslint": "8.49.0", "eslint": "8.49.0",
"eslint-config-next": "13.4.19", "eslint-config-next": "13.4.19",
"next": "13.4.19", "next": "13.4.19",
"next-themes": "^0.2.1",
"postcss": "8.4.29", "postcss": "8.4.29",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-icons": "^4.11.0",
"tailwindcss": "3.3.3", "tailwindcss": "3.3.3",
"typescript": "5.2.2" "typescript": "5.2.2"
} }
@@ -3530,6 +3532,16 @@
} }
} }
}, },
"node_modules/next-themes": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
"integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==",
"peerDependencies": {
"next": "*",
"react": "*",
"react-dom": "*"
}
},
"node_modules/next/node_modules/postcss": { "node_modules/next/node_modules/postcss": {
"version": "8.4.14", "version": "8.4.14",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
@@ -4077,6 +4089,14 @@
"react": "^18.2.0" "react": "^18.2.0"
} }
}, },
"node_modules/react-icons": {
"version": "4.11.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
"integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
package.json
+2
View File
@@ -18,9 +18,11 @@
"eslint": "8.49.0", "eslint": "8.49.0",
"eslint-config-next": "13.4.19", "eslint-config-next": "13.4.19",
"next": "13.4.19", "next": "13.4.19",
"next-themes": "^0.2.1",
"postcss": "8.4.29", "postcss": "8.4.29",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-icons": "^4.11.0",
"tailwindcss": "3.3.3", "tailwindcss": "3.3.3",
"typescript": "5.2.2" "typescript": "5.2.2"
} }
src/app/account/[[...account]]/page.tsx
+6 -1
View File
@@ -1,3 +1,5 @@
'use client';
import { UserProfile } from '@clerk/nextjs'; import { UserProfile } from '@clerk/nextjs';
export default function AccountPage() { export default function AccountPage() {
@@ -6,7 +8,10 @@ export default function AccountPage() {
<UserProfile <UserProfile
appearance={{ appearance={{
elements: { 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 Navbar from '@/components/Navbar';
import ConvexProvider from '@/providers'; import { ConvexProvider, NextThemesProvider } from '@/providers';
import { ClerkProvider } from '@clerk/nextjs'; import { ClerkProvider } from '@clerk/nextjs';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { Inter } from 'next/font/google'; import { Inter } from 'next/font/google';
@@ -17,20 +17,25 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<ClerkProvider <html
publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY} lang='en'
className='w-full h-full'
suppressHydrationWarning
> >
<ConvexProvider> <body
<html className={`w-full h-full flex flex-col bg-white text-primary-gray dark:bg-primary-gray dark:text-white ${inter.className}`}
lang='en' >
className='w-full h-full' <ClerkProvider
publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
> >
<body className={`w-full h-full flex flex-col ${inter.className}`}> <ConvexProvider>
<Navbar /> <NextThemesProvider>
<div className='p-4'>{children}</div> <Navbar />
</body> <div className='p-4'>{children}</div>
</html> </NextThemesProvider>
</ConvexProvider> </ConvexProvider>
</ClerkProvider> </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() { export default function LoginPage() {
return ( return (
<main className='flex flex-col items-center'> <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> </main>
); );
} }
src/app/page.tsx
+1 -5
View File
@@ -1,7 +1,3 @@
export default function Home() { export default function Home() {
return ( return <main></main>;
<main>
<h1>conveX</h1>
</main>
);
} }
src/app/signup/[[...signup]]/page.tsx
+11 -1
View File
@@ -1,3 +1,5 @@
'use client';
import { SignUp } from '@clerk/nextjs'; import { SignUp } from '@clerk/nextjs';
export default function SignUpPage() { export default function SignUpPage() {
@@ -6,7 +8,15 @@ export default function SignUpPage() {
<SignUp <SignUp
appearance={{ appearance={{
elements: { 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',
}, },
}} }}
/> />
src/components/Navbar.tsx
+17 -6
View File
@@ -1,24 +1,35 @@
import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs'; import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
import Link from 'next/link'; import Link from 'next/link';
import ThemeButton from './ThemeButton';
export default function Navbar() { export default function Navbar() {
return ( return (
<nav className='flex items-center justify-between p-5 shadow-md'> <nav className='flex items-center justify-between p-5 shadow-md dark:bg-secondary-gray'>
<ul className='flex items-center gap-4'> <ul className='flex items-center gap-4'>
<li> <li>
<Link href='/'> <Link
href='/'
className='italic'
>
conve conve
<span className='font-bold italic text-4xl text-primary-accent'> <span className='font-bold text-4xl text-primary-accent'>X</span>
X
</span>
</Link> </Link>
</li> </li>
</ul> </ul>
<ul className='flex items-center gap-4'> <ul className='flex items-center gap-4'>
<li>
<ThemeButton />
</li>
<SignedIn> <SignedIn>
<li> <li>
<UserButton <UserButton
showName appearance={{
elements: {
card: 'dark:bg-secondary-gray [&_*]:dark:text-white',
userButtonTrigger:
'border-solid border-2 border-primary-accent focus:shadow-none',
},
}}
userProfileMode='navigation' userProfileMode='navigation'
userProfileUrl='/account' userProfileUrl='/account'
signInUrl='/login' signInUrl='/login'
src/components/ThemeButton.tsx
+30
View File
@@ -0,0 +1,30 @@
'use client';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
import { BsMoonStarsFill, BsSunFill } from 'react-icons/bs';
import { ImSpinner2 } from 'react-icons/im';
export default function ThemeButton() {
const [mounted, setMounted] = useState(false);
const { theme, setTheme } = useTheme();
useEffect(() => setMounted(true), []);
const isDark = theme === 'dark';
return (
<button
className='flex items-center justify-center'
onClick={() => setTheme(isDark ? 'light' : 'dark')}
>
{mounted === false ? (
<ImSpinner2 className='w-5 h-5 animate-spin' />
) : isDark ? (
<BsMoonStarsFill className='w-5 h-5' />
) : (
<BsSunFill className='w-5 h-5' />
)}
</button>
);
}
src/providers/index.tsx
+14 -1
View File
@@ -3,6 +3,7 @@
import { useAuth } from '@clerk/nextjs'; import { useAuth } from '@clerk/nextjs';
import { ConvexReactClient } from 'convex/react'; import { ConvexReactClient } from 'convex/react';
import { ConvexProviderWithClerk } from 'convex/react-clerk'; import { ConvexProviderWithClerk } from 'convex/react-clerk';
import { ThemeProvider } from 'next-themes';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL; const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL;
@@ -13,7 +14,7 @@ if (CONVEX_URL === undefined) {
const client = new ConvexReactClient(CONVEX_URL); const client = new ConvexReactClient(CONVEX_URL);
export default function ConvexProvider({ children }: { children: ReactNode }) { export function ConvexProvider({ children }: { children: ReactNode }) {
return ( return (
<ConvexProviderWithClerk <ConvexProviderWithClerk
client={client} client={client}
@@ -23,3 +24,15 @@ export default function ConvexProvider({ children }: { children: ReactNode }) {
</ConvexProviderWithClerk> </ConvexProviderWithClerk>
); );
} }
export function NextThemesProvider({ children }: { children: ReactNode }) {
return (
<ThemeProvider
attribute='class'
defaultTheme='light'
enableSystem
>
{children}
</ThemeProvider>
);
}
tailwind.config.ts
+3
View File
@@ -1,6 +1,7 @@
import type { Config } from 'tailwindcss'; import type { Config } from 'tailwindcss';
const config: Config = { const config: Config = {
darkMode: 'class',
content: [ content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}', './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}',
@@ -9,6 +10,8 @@ const config: Config = {
theme: { theme: {
extend: { extend: {
colors: { colors: {
'primary-gray': '#24272d',
'secondary-gray': '#2f333a',
'primary-accent': '#3743e5', 'primary-accent': '#3743e5',
}, },
}, },