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-config-next": "13.4.19",
"next": "13.4.19",
"next-themes": "^0.2.1",
"postcss": "8.4.29",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.11.0",
"tailwindcss": "3.3.3",
"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": {
"version": "8.4.14",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
@@ -4077,6 +4089,14 @@
"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": {
"version": "16.13.1",
"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-config-next": "13.4.19",
"next": "13.4.19",
"next-themes": "^0.2.1",
"postcss": "8.4.29",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.11.0",
"tailwindcss": "3.3.3",
"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';
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
+13 -8
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 (
<html
lang='en'
className='w-full h-full'
suppressHydrationWarning
>
<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}
>
<ConvexProvider>
<html
lang='en'
className='w-full h-full'
>
<body className={`w-full h-full flex flex-col ${inter.className}`}>
<NextThemesProvider>
<Navbar />
<div className='p-4'>{children}</div>
</body>
</html>
</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',
},
}}
/>
src/components/Navbar.tsx
+17 -6
View File
@@ -1,24 +1,35 @@
import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
import Link from 'next/link';
import ThemeButton from './ThemeButton';
export default function Navbar() {
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'>
<li>
<Link href='/'>
<Link
href='/'
className='italic'
>
conve
<span className='font-bold italic text-4xl text-primary-accent'>
X
</span>
<span className='font-bold text-4xl text-primary-accent'>X</span>
</Link>
</li>
</ul>
<ul className='flex items-center gap-4'>
<li>
<ThemeButton />
</li>
<SignedIn>
<li>
<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'
userProfileUrl='/account'
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 { ConvexReactClient } from 'convex/react';
import { ConvexProviderWithClerk } from 'convex/react-clerk';
import { ThemeProvider } from 'next-themes';
import { ReactNode } from 'react';
const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL;
@@ -13,7 +14,7 @@ if (CONVEX_URL === undefined) {
const client = new ConvexReactClient(CONVEX_URL);
export default function ConvexProvider({ children }: { children: ReactNode }) {
export function ConvexProvider({ children }: { children: ReactNode }) {
return (
<ConvexProviderWithClerk
client={client}
@@ -23,3 +24,15 @@ export default function ConvexProvider({ children }: { children: ReactNode }) {
</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';
const config: Config = {
darkMode: 'class',
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
@@ -9,6 +10,8 @@ const config: Config = {
theme: {
extend: {
colors: {
'primary-gray': '#24272d',
'secondary-gray': '#2f333a',
'primary-accent': '#3743e5',
},
},