From 4b6fec0841dc98aeff14ff4869eccb85d6375d3d Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Sat, 9 Sep 2023 21:39:08 -0500
Subject: [PATCH] feat: add theming

---
 package-lock.json                       | 20 +++++++++++++++
 package.json                            |  2 ++
 src/app/account/[[...account]]/page.tsx |  7 +++++-
 src/app/layout.tsx                      | 33 ++++++++++++++-----------
 src/app/login/[[...login]]/page.tsx     | 20 +++++++++++++--
 src/app/page.tsx                        |  6 +----
 src/app/signup/[[...signup]]/page.tsx   | 12 ++++++++-
 src/components/Navbar.tsx               | 23 ++++++++++++-----
 src/components/ThemeButton.tsx          | 30 ++++++++++++++++++++++
 src/providers/index.tsx                 | 15 ++++++++++-
 tailwind.config.ts                      |  3 +++
 11 files changed, 141 insertions(+), 30 deletions(-)
 create mode 100644 src/components/ThemeButton.tsx

diff --git a/package-lock.json b/package-lock.json
index bf1826e..efa1e2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index ba873c3..f36290a 100644
--- a/package.json
+++ b/package.json
@@ -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"
   }
diff --git a/src/app/account/[[...account]]/page.tsx b/src/app/account/[[...account]]/page.tsx
index af51cee..95949a6 100644
--- a/src/app/account/[[...account]]/page.tsx
+++ b/src/app/account/[[...account]]/page.tsx
@@ -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',
           },
         }}
       />
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 39a7902..54ab28d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -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>
   );
 }
diff --git a/src/app/login/[[...login]]/page.tsx b/src/app/login/[[...login]]/page.tsx
index dad3ce0..44caa24 100644
--- a/src/app/login/[[...login]]/page.tsx
+++ b/src/app/login/[[...login]]/page.tsx
@@ -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>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fb5e8a9..7bff2ad 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,3 @@
 export default function Home() {
-  return (
-    <main>
-      <h1>conveX</h1>
-    </main>
-  );
+  return <main></main>;
 }
diff --git a/src/app/signup/[[...signup]]/page.tsx b/src/app/signup/[[...signup]]/page.tsx
index 1c38b2f..5b8ef4b 100644
--- a/src/app/signup/[[...signup]]/page.tsx
+++ b/src/app/signup/[[...signup]]/page.tsx
@@ -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',
           },
         }}
       />
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index dd8b184..c65709b 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -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'
diff --git a/src/components/ThemeButton.tsx b/src/components/ThemeButton.tsx
new file mode 100644
index 0000000..9df080e
--- /dev/null
+++ b/src/components/ThemeButton.tsx
@@ -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>
+  );
+}
diff --git a/src/providers/index.tsx b/src/providers/index.tsx
index 584a3f3..f58ff0c 100644
--- a/src/providers/index.tsx
+++ b/src/providers/index.tsx
@@ -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>
+  );
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fda34da..c3a3571 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -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',
       },
     },