api keys update

web/src/app/app/(settings_layout)/settings/(restricted-width)/api-keys/ApiKeyCreatedModal.tsx

@@ -26,11 +26,13 @@ const ApiKeyCreatedModal = React.memo(({ apiKey, onCopy, onClose }: ApiKeyCreate
       }}
       onClose={onClose}>
       <div className="space-y-4">
-        <div className="mb-4 rounded-lg bg-yellow-100 p-4 text-sm text-yellow-700" role="alert">
+        <div
+          className="mb-4 rounded-lg border border-yellow-200 bg-yellow-100 p-4 text-sm text-yellow-700 shadow"
+          role="alert">
           <span className="font-medium">Important:</span> This API key will only be shown once.
           Please copy it now and store it safely.
         </div>
-        <Paragraph className="mt-4 rounded-sm border bg-gray-50 p-4 font-mono break-all">
+        <Paragraph className="mt-4 rounded-sm border bg-gray-50 p-4 font-mono break-all shadow">
           {apiKey}
         </Paragraph>
       </div>

web/src/app/app/(settings_layout)/settings/(restricted-width)/api-keys/ApiKeyListItem.tsx

@@ -23,14 +23,12 @@ export const ApiKeyListItem: React.FC<ApiKeyListItemProps> = ({ apiKey, onDelete
   });
 
   return (
-    <div className="flex items-center justify-between rounded-md border border-gray-200 bg-white p-3 transition-shadow hover:shadow-xs">
-      <div className="flex flex-col">
-        <Text>{apiKey.owner_email}</Text>
-        <div className="flex items-center gap-1">
-          <Text variant="secondary" size="sm">
-            {`Created at: ${date}`}
-          </Text>
-        </div>
+    <div className="flex items-center justify-between space-y-1 rounded-md border bg-white p-3 shadow transition-shadow hover:shadow-xs">
+      <div className="flex flex-col space-y-1">
+        <Text size={'md'}>{apiKey.owner_email}</Text>
+        <Text variant="secondary" size="sm">
+          {`Created on: ${date}`}
+        </Text>
       </div>
       <Button variant="danger" prefix={<Trash />} onClick={handleDelete}>
         Delete

web/src/app/app/(settings_layout)/settings/(restricted-width)/profile/page.tsx

@@ -6,8 +6,6 @@ import { useUserConfigContextSelector } from '@/context/Users';
 import { formatDate } from '@/lib/date';
 import { Title, Text } from '@/components/ui/typography';
 import { Avatar } from '@/components/ui/avatar';
-import { Card, CardHeader } from '@/components/ui/card/CardBase';
-import { cn } from '@/lib/classMerge';
 
 export default function ProfilePage() {
   const user = useUserConfigContextSelector((state) => state.user);
@@ -19,28 +17,35 @@ export default function ProfilePage() {
   return (
     <div>
       <SettingsPageHeader title="Profile" description="Manage your profile & information" />
-      <Card>
-        <CardHeader>
-          <div className={'flex items-center space-x-2.5'}>
-            <Avatar name={name} className="h-[48px] w-[48px]" />
-            <Title as="h4">{name}</Title>
-          </div>
-        </CardHeader>
-        <div className={'flex flex-col space-y-0.5'}>
-          <div className={cn('flex items-center space-x-2.5')}>
-            <Text variant="secondary" className={'w-full max-w-[120px]'}>
-              Email
-            </Text>
-            <Text className={'flex-1'}>{email}</Text>
-          </div>
-          <div className={cn('flex items-center space-x-2.5')}>
-            <Text variant="secondary" className={'w-full max-w-[120px]'}>
-              Member Since
-            </Text>
-            <Text className={'flex-1'}>{formatDate({ date: created_at, format: 'll' })}</Text>
+
+      <div className="bg-background border-border/30 rounded-lg border shadow">
+        {/* Header Section */}
+        <div className="border-border/30 flex flex-col items-center gap-4 border-b p-6 sm:flex-row sm:items-start">
+          <Avatar name={name} className="h-12 w-12" />
+          <div className="flex flex-col justify-center gap-1">
+            <Title as="h3" className="text-foreground">
+              {name}
+            </Title>
+            <Text className="text-muted-foreground mt-1">{email}</Text>
           </div>
         </div>
-      </Card>
+
+        {/* Info Section */}
+        <div className="space-y-4 p-6">
+          <div className="flex items-center justify-between">
+            <Text variant="secondary">Member Since</Text>
+            <Text className="font-medium">{formatDate({ date: created_at, format: 'll' })}</Text>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Text variant="secondary">Account Status</Text>
+            <div className="flex items-center gap-2">
+              <span className="h-2.5 w-2.5 rounded-full bg-green-500"></span>
+              <Text>Active</Text>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }