chore(web): improve account page ui

This commit is contained in:
isra el
2025-03-15 20:03:08 +03:00
parent 4745ea0091
commit 6019199055

View File

@@ -249,6 +249,26 @@ export default function AccountSettings() {
</div>
<div className='grid grid-cols-2 gap-3'>
<div className='flex items-center space-x-2 bg-white dark:bg-gray-800 p-2 rounded-md shadow-sm'>
<Calendar className='h-4 w-4 text-blue-600 dark:text-blue-400' />
<div>
<p className='text-xs text-gray-500 dark:text-gray-400'>
Start Date
</p>
<p className='text-sm font-medium text-gray-900 dark:text-white'>
{currentSubscription?.subscriptionStartDate
? new Date(
currentSubscription?.subscriptionStartDate
).toLocaleDateString('en-US', {
month: 'long',
day: 'numeric',
year: 'numeric',
})
: '-:-'}
</p>
</div>
</div>
<div className='flex items-center space-x-2 bg-white dark:bg-gray-800 p-2 rounded-md shadow-sm'>
<Calendar className='h-4 w-4 text-blue-600 dark:text-blue-400' />
<div>
@@ -269,19 +289,12 @@ export default function AccountSettings() {
</div>
</div>
<div className='flex items-center space-x-2 bg-white dark:bg-gray-800 p-2 rounded-md shadow-sm'>
<Shield className='h-4 w-4 text-purple-600 dark:text-purple-400' />
<div>
<p className='text-xs text-gray-500 dark:text-gray-400'>Quota</p>
<p className='text-sm font-medium text-gray-900 dark:text-white'>
{currentSubscription?.plan?.quota}
</p>
</div>
</div>
<div className='col-span-2 bg-white dark:bg-gray-800 p-2 rounded-md shadow-sm'>
<div className='grid grid-cols-3 gap-2'>
<div>
<div className='col-span-2 bg-white dark:bg-gray-800 p-3 rounded-md shadow-sm'>
<p className='text-xs text-gray-500 dark:text-gray-400 mb-2 font-medium'>
Usage Limits
</p>
<div className='grid grid-cols-3 gap-3'>
<div className='bg-gray-50 dark:bg-gray-700/50 p-2 rounded-md'>
<p className='text-xs text-gray-500 dark:text-gray-400'>
Daily
</p>
@@ -305,7 +318,7 @@ export default function AccountSettings() {
)}
</p>
</div>
<div>
<div className='bg-gray-50 dark:bg-gray-700/50 p-2 rounded-md'>
<p className='text-xs text-gray-500 dark:text-gray-400'>
Monthly
</p>
@@ -322,14 +335,14 @@ export default function AccountSettings() {
</span>
</TooltipTrigger>
<TooltipContent>
<p>Unlimited (within monthly limit)</p>
<p>Unlimited (within fair usage)</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</p>
</div>
<div>
<div className='bg-gray-50 dark:bg-gray-700/50 p-2 rounded-md'>
<p className='text-xs text-gray-500 dark:text-gray-400'>Bulk</p>
<p className='text-sm font-medium text-gray-900 dark:text-white'>
{currentSubscription?.plan?.bulkSendLimit === -1
@@ -355,7 +368,7 @@ export default function AccountSettings() {
</div>
</div>
<div className='mt-3 flex justify-end gap-2'>
<div className='mt-4 flex justify-end gap-2'>
{currentSubscription?.plan?.name?.toLowerCase() === 'free' ? (
<Link
href='/checkout/pro'
@@ -366,7 +379,7 @@ export default function AccountSettings() {
) : (
<Link
href='https://polar.sh/textbee/portal/'
className='text-xs font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white'
className='text-xs font-medium bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 px-3 py-1.5 rounded-md transition-colors'
>
Manage Subscription
</Link>