diff --git a/src/components/Billing/UpgradeAccountModal.tsx b/src/components/Billing/UpgradeAccountModal.tsx index d62225d92..4fdd29127 100644 --- a/src/components/Billing/UpgradeAccountModal.tsx +++ b/src/components/Billing/UpgradeAccountModal.tsx @@ -1,6 +1,14 @@ import { useMutation, useQuery } from '@tanstack/react-query'; import type { LucideIcon } from 'lucide-react'; -import { Archive, Crown, Loader2, Map, MessageCircleIcon, X, Zap } from 'lucide-react'; +import { + Archive, + Crown, + Loader2, + Map, + MessageCircleIcon, + X, + Zap, +} from 'lucide-react'; import { useEffect, useState } from 'react'; import { useToast } from '../../hooks/use-toast'; import { getUser } from '../../lib/jwt'; @@ -261,9 +269,9 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) { const Icon = perk.icon; return (
+
{perk.title}
{perk.description}
@@ -284,23 +292,29 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) { disabled={ isCreatingCheckoutSession || currentPlan?.interval === 'year' } - className={`w-full h-11 rounded-lg px-4 text-sm font-medium transition-colors flex items-center justify-center disabled:opacity-50 ${ + className={`flex h-11 w-full items-center justify-center rounded-lg px-4 text-sm font-medium transition-colors disabled:opacity-50 ${ currentPlan?.interval === 'year' - ? 'bg-yellow-300 text-gray-700 cursor-not-allowed' + ? 'cursor-not-allowed bg-yellow-300 text-gray-700' : 'bg-yellow-400 text-black hover:bg-yellow-500' }`} > {isCreatingCheckoutSession && selectedPlan === 'year' ? (- By upgrading you agree to our terms and conditions + By upgrading you agree to our{' '} + + terms and conditions +