profile: use ui/Card

apps/web/components/profile/profile-card.tsx

@@ -5,6 +5,7 @@ import { CheckboxWithText } from '@/components/profile/checkbox-with-text';
 import { ProfileField } from '@/components/profile/profile-field';
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
 import { Button } from '@repo/ui/components/ui/button';
+import { Card } from '@repo/ui/components/ui/card';
 import { useQuery } from '@tanstack/react-query';
 import Link from 'next/link';
 
@@ -30,7 +31,7 @@ export function ProfileFields({ telegramId }: ProfileProps) {
   if (!customer) return null;
 
   return (
-    <div className="rounded-md bg-background p-4">
+    <Card className="p-4">
       <div className="flex flex-col gap-4">
         {telegramId ? false : <ProfileFieldsHeader />}
         {telegramId ? (
@@ -77,7 +78,7 @@ export function ProfileFields({ telegramId }: ProfileProps) {
           false
         )}
       </div>
-    </div>
+    </Card>
   );
 }
 
@@ -90,7 +91,7 @@ function Person({ telegramId }: ProfileProps) {
   if (!customer) return null;
 
   return (
-    <div className="rounded-md bg-background p-4">
+    <Card className="p-4">
       <div className="flex flex-col items-center space-y-2">
         <Avatar className="size-20">
           <AvatarImage alt={customer?.name} src={customer.photoUrl || ''} />
@@ -98,7 +99,7 @@ function Person({ telegramId }: ProfileProps) {
         </Avatar>
         <h2 className="text-2xl font-bold">{customer?.name}</h2>
       </div>
-    </div>
+    </Card>
   );
 }
 

packages/ui/src/components/ui/card.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
     <div
-      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      className={cn('rounded-lg bg-card text-card-foreground shadow-sm', className)}
       ref={ref}
       {...props}
     />