ui: fix color in darkmode

This commit is contained in:
Sosokker 2024-11-13 08:16:16 +07:00
parent 9c6395078e
commit 0b76ed64da
2 changed files with 14 additions and 12 deletions

View File

@ -34,18 +34,20 @@ export const BusinessProfile = async ({ userId }: { userId: string }) => {
return ( return (
<div className="container max-w-screen-xl px-4"> <div className="container max-w-screen-xl px-4">
<Card className="mb-6 shadow-md rounded-lg bg-white"> <Card className="mb-6 shadow-md rounded-lg bg-white dark:bg-slate-900">
<CardHeader> <CardHeader>
<div className="flex flex-col sm:flex-row justify-between items-center"> <div className="flex flex-col sm:flex-row justify-between items-center">
<div className="text-center sm:text-left"> <div className="text-center sm:text-left">
<CardTitle className="text-2xl font-semibold">{data.business_name}</CardTitle> <CardTitle className="text-2xl font-semibold">{data.business_name}</CardTitle>
<CardDescription className="text-md text-gray-600">{data.business_type}</CardDescription> <CardDescription className="text-md text-gray-600 dark:text-gray-400">
{data.business_type}
</CardDescription>
</div> </div>
<div className="mt-4 sm:mt-0"> <div className="mt-4 sm:mt-0">
<p className="text-lg text-gray-700"> <p className="text-lg text-gray-700 dark:text-gray-400">
<strong>Location:</strong> {data.location} <strong>Location:</strong> {data.location}
</p> </p>
<p className="text-lg text-gray-700"> <p className="text-lg text-gray-700 dark:text-gray-400">
<strong>Joined on:</strong> {new Date(data.joined_date).toLocaleDateString()} <strong>Joined on:</strong> {new Date(data.joined_date).toLocaleDateString()}
</p> </p>
</div> </div>
@ -55,16 +57,16 @@ export const BusinessProfile = async ({ userId }: { userId: string }) => {
<CardContent className="py-3"> <CardContent className="py-3">
<div className="grid gap-4"> <div className="grid gap-4">
<div> <div>
<p className="text-md font-semibold text-gray-800">Business ID:</p> <p className="text-md font-semibold text-gray-800 dark:text-gray-500">Business ID:</p>
<p className="text-md text-gray-600">{data.business_id}</p> <p className="text-md text-gray-600 dark:text-gray-400">{data.business_id}</p>
</div> </div>
<div> <div>
<p className="text-md font-semibold text-gray-800">Business Type:</p> <p className="text-md font-semibold text-gray-800 dark:text-gray-500">Business Type:</p>
<p className="text-md text-gray-600">{data.business_type}</p> <p className="text-md text-gray-600 dark:text-gray-400">{data.business_type}</p>
</div> </div>
<div> <div>
<p className="text-md font-semibold text-gray-800">User ID:</p> <p className="text-md font-semibold text-gray-800 dark:text-gray-500">User ID:</p>
<p className="text-md text-gray-600">{data.user_id}</p> <p className="text-md text-gray-600 dark:text-gray-400">{data.user_id}</p>
</div> </div>
</div> </div>
</CardContent> </CardContent>

View File

@ -40,12 +40,12 @@ export const ProjectProfileSection = async ({ userId }: { userId: string }) => {
<div className="overflow-y-auto max-h-screen flex flex-col gap-6"> <div className="overflow-y-auto max-h-screen flex flex-col gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
{data.map((project) => ( {data.map((project) => (
<Card key={project.id} className="shadow-lg rounded-lg bg-white overflow-hidden"> <Card key={project.id} className="shadow-lg rounded-lg bg-white dark:bg-slate-900 overflow-hidden">
<CardHeader> <CardHeader>
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center"> <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center">
<div className="text-center sm:text-left"> <div className="text-center sm:text-left">
<CardTitle className="text-2xl font-semibold">{project.project_name}</CardTitle> <CardTitle className="text-2xl font-semibold">{project.project_name}</CardTitle>
<CardDescription className="text-md text-gray-600"> <CardDescription className="text-md text-gray-600 dark:text-gray-500">
{project.project_short_description} {project.project_short_description}
</CardDescription> </CardDescription>
</div> </div>