feat: registering process key generation and recovery codes(only fron…

…tend display)

package.json

@@ -17,7 +17,7 @@
     "@phosphor-icons/react": "2.1.7",
     "axios": "1.7.2",
     "formik": "2.4.6",
-    "framer-motion": "11.3.8",
+    "framer-motion": "11.3.12",
     "i18next": "23.12.2",
     "i18next-resources-to-backend": "1.2.1",
     "next": "14.2.5",
@@ -30,10 +30,10 @@
     "yup": "1.4.0"
   },
   "devDependencies": {
-    "@types/node": "20.14.11",
+    "@types/node": "20.14.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.16.1",
+    "@typescript-eslint/eslint-plugin": "7.17.0",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.5",
     "eslint-config-prettier": "9.1.0",
@@ -47,6 +47,6 @@
     "prettier-plugin-sort-json": "4.0.0",
     "prettier-plugin-tailwindcss": "0.6.5",
     "tailwindcss": "3.4.6",
-    "typescript": "5.5.3"
+    "typescript": "5.5.4"
   }
 }

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

@@ -27,7 +27,9 @@ const Home: FunctionComponent<HomeProps> = async ({ params: { locale } }) => {
     <TranslationsProvider resources={resources} locale={locale} namespaces={i18nNamespaces}>
       <div>
         <Card className="w-[80vw] max-w-[500px] p-5">
-          <CardHeader>{t('signup:title')}</CardHeader>
+          <CardHeader>
+            <h3>{t('signup:title')}</h3>
+          </CardHeader>
           <SignupForm />
         </Card>
       </div>

src/app/globals.css

@@ -1,3 +1,25 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* This are the headings still cause tailwind preflight removers defaults */
+@layer base {
+  h1 {
+    @apply text-4xl font-bold;
+  }
+  h2 {
+    @apply text-3xl font-bold;
+  }
+  h3 {
+    @apply text-2xl font-bold;
+  }
+  h4 {
+    @apply text-xl font-bold;
+  }
+  h5 {
+    @apply text-lg font-bold;
+  }
+  h6 {
+    @apply text-base font-bold;
+  }
+}

src/app/providers.tsx

@@ -1,10 +1,15 @@
+'use client';
 import { NextUIProvider } from '@nextui-org/react';
 import { ThemeProvider } from 'next-themes';
+import { useRouter } from 'next/navigation';
 import { FunctionComponent, PropsWithChildren } from 'react';
 
 const Providers: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  // using the useRouter hook to get the router object for next ui link to navigate with the proper router and not just anchors
+  // https://nextui.org/docs/guide/routing
+  const router = useRouter();
   return (
-    <NextUIProvider>
+    <NextUIProvider navigate={router.push}>
       <ThemeProvider attribute="class" defaultTheme="dark">
         {children}
       </ThemeProvider>