Update UI styling and fix bug in tier limits

Modified styles in radio-group, line-item-details and plan-picker components for improved user interface consistency. Specifically, certain font weights and transitions were adjusted, and some CSS classes were changed. Additionally, a bug in line-item-details was fixed where the 'unlimited' value wasn't properly returned for the previous tier's limit.

packages/billing/gateway/src/components/line-item-details.tsx

@@ -165,11 +165,11 @@ function Tiers({
     const isNoLimit = tier.upTo === 'unlimited';
 
     const previousTierFrom =
-      tier.upTo === 'unlimited'
+      previousTier?.upTo === 'unlimited'
         ? 'unlimited'
         : previousTier === undefined
           ? 0
-          : (previousTier?.upTo as number) + 1 || 0;
+          : previousTier.upTo + 1 || 0;
 
     const upTo = tier.upTo;
     const isIncluded = tier.cost === 0;

packages/billing/gateway/src/components/plan-picker.tsx

@@ -144,7 +144,7 @@ export function PlanPicker(
                                 className={cn(
                                   'hover:bg-muted flex items-center space-x-2 rounded-md border border-transparent px-4 py-2',
                                   {
-                                    ['border-border']: selected,
+                                    ['border-primary']: selected,
                                     ['hover:bg-muted']: !selected,
                                   },
                                 )}
@@ -167,7 +167,12 @@ export function PlanPicker(
                                   }}
                                 />
 
-                                <span className={'text-sm font-bold'}>
+                                <span
+                                  className={cn('text-sm', {
+                                    ['font-semibold']: selected,
+                                    ['cursor-pointer']: !selected,
+                                  })}
+                                >
                                   <Trans
                                     i18nKey={`billing:billingInterval.${interval}`}
                                   />
@@ -248,7 +253,7 @@ export function PlanPicker(
                                 'flex flex-col justify-center space-y-2'
                               }
                             >
-                              <span className="font-bold">
+                              <span className="font-semibold">
                                 <Trans
                                   i18nKey={`billing:products.${product.id}.name`}
                                   defaults={product.name}
@@ -389,7 +394,7 @@ function PlanDetails({
     <div
       key={key}
       className={
-        'fade-in animate-in flex w-full flex-col space-y-4 rounded-lg border p-4 duration-500'
+        'fade-in animate-in zoom-in-95 flex w-full flex-col space-y-4 px-8 py-2'
       }
     >
       <div className={'flex flex-col space-y-0.5'}>
@@ -429,6 +434,8 @@ function PlanDetails({
         />
       </div>
 
+      <Separator />
+
       <div className={'flex flex-col space-y-2'}>
         <span className={'text-sm font-semibold'}>
           <Trans i18nKey={'billing:featuresLabel'} />

packages/ui/src/shadcn/radio-group.tsx

@@ -54,7 +54,7 @@ const RadioGroupItemLabel = (
         props.className,
         'flex cursor-pointer rounded-md' +
           ' items-center space-x-4 border border-input hover:bg-muted' +
-          ' transition-duration-500 p-4 text-sm transition-colors focus-within:border-primary',
+          ' transition-duration-500 p-4 text-sm transition-all focus-within:border-primary',
         {
           [`border-primary`]: props.selected,
         },