wip: refresh design

apps/web/src/app/(dashboard)/settings/billing/page.tsx

@@ -0,0 +1,29 @@
+import { redirect } from 'next/navigation';
+
+import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+
+import { PasswordForm } from '~/components/forms/password';
+
+export default async function BillingSettingsPage() {
+  const user = await getRequiredServerComponentSession();
+
+  // Redirect if subscriptions are not enabled.
+  if (!IS_SUBSCRIPTIONS_ENABLED) {
+    redirect('/settings/profile');
+  }
+
+  return (
+    <div>
+      <h3 className="text-lg font-medium">Billing</h3>
+
+      <p className="mt-2 text-sm text-slate-500">
+        Here you can update and manage your subscription.
+      </p>
+
+      <hr className="my-4" />
+
+      <PasswordForm user={user} className="max-w-xl" />
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/settings/layout.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { DesktopNav } from '~/components/(dashboard)/settings/layout/desktop-nav';
+import { MobileNav } from '~/components/(dashboard)/settings/layout/mobile-nav';
+
+export type DashboardSettingsLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function DashboardSettingsLayout({ children }: DashboardSettingsLayoutProps) {
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <h1 className="text-4xl font-semibold">Settings</h1>
+
+      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
+        <DesktopNav className="hidden md:col-span-3 md:flex" />
+        <MobileNav className="col-span-12 mb-8 md:hidden" />
+
+        <div className="col-span-12 md:col-span-9">{children}</div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/settings/page.tsx

@@ -0,0 +1,8 @@
+import { redirect } from 'next/navigation';
+
+export default function SettingsPage() {
+  redirect('/settings/profile');
+
+  // Page is intentionally empty because it will be redirected to /settings/profile
+  return <div />;
+}

apps/web/src/app/(dashboard)/settings/password/page.tsx

@@ -0,0 +1,19 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+
+import { PasswordForm } from '~/components/forms/password';
+
+export default async function PasswordSettingsPage() {
+  const user = await getRequiredServerComponentSession();
+
+  return (
+    <div>
+      <h3 className="text-lg font-medium">Password</h3>
+
+      <p className="mt-2 text-sm text-slate-500">Here you can update your password.</p>
+
+      <hr className="my-4" />
+
+      <PasswordForm user={user} className="max-w-xl" />
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/settings/profile/page.tsx

@@ -0,0 +1,19 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+
+import { ProfileForm } from '~/components/forms/profile';
+
+export default async function ProfileSettingsPage() {
+  const user = await getRequiredServerComponentSession();
+
+  return (
+    <div>
+      <h3 className="text-lg font-medium">Profile</h3>
+
+      <p className="mt-2 text-sm text-slate-500">Here you can edit your personal details.</p>
+
+      <hr className="my-4" />
+
+      <ProfileForm user={user} className="max-w-xl" />
+    </div>
+  );
+}