feat(web): Redesign the user settings page

1 files changed, 48 insertions, 23 deletions

diff --git a/apps/web/components/settings/UserDetails.tsx b/apps/web/components/settings/UserDetails.tsx
index af6698ad..6135df47 100644
--- a/apps/web/components/settings/UserDetails.tsx
+++ b/apps/web/components/settings/UserDetails.tsx
@@ -1,35 +1,60 @@
 import { Input } from "@/components/ui/input";
 import { useTranslation } from "@/lib/i18n/server";
 import { api } from "@/server/api/client";
+import { Mail, User } from "lucide-react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Label } from "../ui/label";
 
 export default async function UserDetails() {
   const { t } = await useTranslation();
   const whoami = await api.users.whoami();
 
-  const details = [
-    {
-      label: t("common.name"),
-      value: whoami.name ?? undefined,
-    },
-    {
-      label: t("common.email"),
-      value: whoami.email ?? undefined,
-    },
-  ];
-
   return (
-    <div className="flex w-full flex-col sm:flex-row">
-      <div className="mb-4 w-full text-lg font-medium sm:w-1/3">
-        {t("settings.info.basic_details")}
-      </div>
-      <div className="w-full">
-        {details.map(({ label, value }) => (
-          <div className="mb-2" key={label}>
-            <div className="mb-2 text-sm font-medium">{label}</div>
-            <Input value={value} disabled />
+    <Card>
+      <CardHeader>
+        <div className="flex items-center space-x-4">
+          <div className="space-y-1">
+            <CardTitle className="flex items-center gap-2">
+              <User className="h-5 w-5" />
+              {t("settings.info.basic_details")}
+            </CardTitle>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="grid gap-6 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="name" className="text-sm font-medium">
+              {t("common.name")}
+            </Label>
+            <Input
+              id="name"
+              defaultValue={whoami.name ?? ""}
+              className="h-11"
+              disabled
+            />
+          </div>
+          <div className="space-y-2">
+            <Label
+              htmlFor="email"
+              className="flex items-center gap-2 text-sm font-medium"
+            >
+              <Mail className="h-4 w-4" />
+              {t("common.email")}
+            </Label>
+            <div className="relative">
+              <Input
+                id="email"
+                type="email"
+                defaultValue={whoami.email ?? ""}
+                className="h-11"
+                disabled
+              />
+            </div>
           </div>
-        ))}
-      </div>
-    </div>
+        </div>
+      </CardContent>
+    </Card>
   );
 }