style: fix shadow on some clerk components

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "css.lint.unknownAtRules": "ignore",
-  "cSpell.words": ["nextjs", "signup"]
+  "cSpell.words": ["conve", "nextjs", "signup"]
 }

src/app/account/[[...account]]/page.tsx

@@ -3,7 +3,13 @@ import { UserProfile } from '@clerk/nextjs';
 export default function AccountPage() {
   return (
     <main className='flex flex-col items-center'>
-      <UserProfile />
+      <UserProfile
+        appearance={{
+          elements: {
+            card: 'shadow-md',
+          },
+        }}
+      />
     </main>
   );
 }

src/app/signup/[[...signup]]/page.tsx

@@ -3,7 +3,13 @@ import { SignUp } from '@clerk/nextjs';
 export default function SignUpPage() {
   return (
     <main className='flex flex-col items-center'>
-      <SignUp />
+      <SignUp
+        appearance={{
+          elements: {
+            card: 'shadow-md',
+          },
+        }}
+      />
     </main>
   );
 }

src/components/Navbar.tsx

@@ -4,7 +4,14 @@ import Link from 'next/link';
 export default function Navbar() {
   return (
     <nav className='flex items-center justify-between p-5 shadow-md'>
-      <ul className='flex items-center gap-4'></ul>
+      <ul className='flex items-center gap-4'>
+        <li>
+          conve
+          <span className='font-bold italic text-4xl text-primary-accent'>
+            X
+          </span>
+        </li>
+      </ul>
       <ul className='flex items-center gap-4'>
         <SignedIn>
           <li>

tailwind.config.ts

@@ -7,7 +7,11 @@ const config: Config = {
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'primary-accent': '#3743e5',
+      },
+    },
   },
   plugins: [],
 };