Migrate Notifications page to tailwind, Add in teams (#4474)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `SettingsNotificationsPage` component to handle notification settings in the dashboard.

### Detailed summary
- Added `SettingsNotificationsPage` component to manage notification settings
- Refactored `Page` component to use `SettingsNotificationsPage`
- Updated UI for notification settings with switches and labels

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/notifications/NotificationsPage.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Separator } from "@/components/ui/separator";
+import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
+import { Notifications } from "components/settings/Account/Notifications";
+
+export const SettingsNotificationsPage = () => {
+  const meQuery = useAccount();
+  const account = meQuery.data;
+
+  if (!account) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <Spinner className="size-10" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold tracking-tight mb-0.5">
+        Notification Settings
+      </h1>
+
+      <p className="text-muted-foreground mb-7">
+        Configure your email notification preferences
+      </p>
+
+      <Separator />
+      <Notifications account={account} />
+    </div>
+  );
+};

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/notifications/page.tsx

@@ -1,9 +1,10 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import { SettingsNotificationsPage } from "./NotificationsPage";
+
 export default function Page() {
   return (
-    <div className="h-full py-6 container flex items-center justify-center">
-      <h1 className="text-4xl tracking-tighter text-muted-foreground">
-        Notification Settings
-      </h1>
-    </div>
+    <ChakraProviderSetup>
+      <SettingsNotificationsPage />
+    </ChakraProviderSetup>
   );
 }

apps/dashboard/src/components/settings/Account/Notifications.tsx

@@ -1,12 +1,12 @@
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 import {
   type Account,
   useUpdateNotifications,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { Divider, Flex, HStack, Switch, VStack } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { useState } from "react";
-import { Heading, Text } from "tw-components";
 
 interface NotificationsProps {
   account: Account;
@@ -58,42 +58,46 @@ export const Notifications: React.FC<NotificationsProps> = ({ account }) => {
   };
 
   return (
-    <VStack alignItems="flex-start" maxW="xl" gap={6}>
-      <Divider />
+    <div>
+      <SettingSwitch
+        checked={preferences?.billing === "email"}
+        onCheckedChange={(v) => handleChange("billing", v)}
+        label="Reminders"
+        description="Approaching and exceeding usage credits"
+        id="reminders"
+      />
 
-      <HStack
-        gap={8}
-        alignItems="flex-start"
-        justifyContent="space-between"
-        w="full"
-      >
-        <Flex flexDir="column" gap={1}>
-          <Heading size="label.lg">Reminders</Heading>
-          <Text>Approaching and exceeding usage credits.</Text>
-        </Flex>
-        <Switch
-          isChecked={preferences?.billing === "email"}
-          onChange={(e) => handleChange("billing", e.target.checked)}
-        />
-      </HStack>
-
-      <Divider />
-
-      <HStack
-        gap={8}
-        alignItems="flex-start"
-        justifyContent="space-between"
-        w="full"
-      >
-        <Flex flexDir="column" gap={1}>
-          <Heading size="label.lg">Product Updates</Heading>
-          <Text>New features and key product updates.</Text>
-        </Flex>
-        <Switch
-          isChecked={preferences?.updates === "email"}
-          onChange={(e) => handleChange("updates", e.target.checked)}
-        />
-      </HStack>
-    </VStack>
+      <SettingSwitch
+        checked={preferences?.updates === "email"}
+        onCheckedChange={(v) => handleChange("updates", v)}
+        label="Product Updates"
+        description="New features and key product updates"
+        id="product-updates"
+      />
+    </div>
   );
 };
+
+function SettingSwitch(props: {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  label: string;
+  description: string;
+  id: string;
+}) {
+  return (
+    <div className="flex gap-6 justify-between border-b border-border py-6 items-center">
+      <div>
+        <Label className="text-foreground text-lg" htmlFor={props.id}>
+          {props.label}
+        </Label>
+        <p className="text-muted-foreground text-sm"> {props.description}</p>
+      </div>
+      <Switch
+        checked={props.checked}
+        onCheckedChange={props.onCheckedChange}
+        id={props.id}
+      />
+    </div>
+  );
+}

apps/dashboard/src/pages/dashboard/settings/notifications.tsx

@@ -1,45 +1,20 @@
-import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex } from "@chakra-ui/react";
 import { AppLayout } from "components/app-layouts/app";
-import { Notifications } from "components/settings/Account/Notifications";
 import { SettingsSidebar } from "core-ui/sidebar/settings";
 import { PageId } from "page-id";
-import { Heading, Text } from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
+import { SettingsNotificationsPage } from "../../../app/team/[team_slug]/(team)/~/settings/notifications/NotificationsPage";
 
-const SettingsNotificationsPage: ThirdwebNextPage = () => {
-  const meQuery = useAccount();
-
-  if (meQuery.isLoading || !meQuery.data) {
-    return null;
-  }
-
-  const account = meQuery.data;
-
-  return (
-    <Flex flexDir="column" gap={8}>
-      <Flex direction="column" gap={2}>
-        <Heading size="title.lg" as="h1" h={10}>
-          Notification Settings
-        </Heading>
-        <Text size="body.md">
-          Configure your email notification preferences.
-        </Text>
-      </Flex>
-
-      <Notifications account={account} />
-    </Flex>
-  );
+const Page: ThirdwebNextPage = () => {
+  return <SettingsNotificationsPage />;
 };
 
-SettingsNotificationsPage.getLayout = (page, props) => (
+Page.getLayout = (page, props) => (
   <AppLayout {...props} hasSidebar={true}>
     <SettingsSidebar activePage="notifications" />
-
     {page}
   </AppLayout>
 );
 
-SettingsNotificationsPage.pageId = PageId.SettingsNotifications;
+Page.pageId = PageId.SettingsNotifications;
 
-export default SettingsNotificationsPage;
+export default Page;