fix(ui): improve text contrast on renew and purchasing pages (#30)

Author: web-ppanel

apps/user/src/sections/subscribe/duration-selector.tsx

@@ -40,7 +40,7 @@ const DurationSelector: React.FC<DurationSelectorProps> = ({
     <div className="relative">
       <RadioGroupItem className="peer sr-only" id={value} value={value} />
       <Label
-        className="relative flex h-full flex-col items-center justify-center gap-2 rounded-md border-2 border-muted bg-popover p-2 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary"
+        className="relative flex h-full flex-col items-center justify-center gap-2 rounded-md border-2 border-muted bg-popover p-2 text-popover-foreground hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/10 peer-data-[state=checked]:text-foreground"
         htmlFor={value}
       >
         {label}

apps/user/src/sections/subscribe/payment-methods.tsx

@@ -66,8 +66,8 @@ const PaymentMethods: React.FC<PaymentMethodsProps> = ({
             />
             <Label
               className={cn(
-                "flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover py-2 hover:bg-accent hover:text-accent-foreground",
-                String(value) === String(item.id) ? "border-primary" : ""
+                "flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover py-2 text-popover-foreground hover:bg-accent hover:text-accent-foreground",
+                String(value) === String(item.id) ? "border-primary bg-primary/10 text-foreground" : ""
               )}
               htmlFor={String(item.id)}
             >

apps/user/src/sections/subscribe/renewal.tsx

@@ -164,7 +164,7 @@ export default function Renewal({ id, subscribe }: Readonly<RenewalProps>) {
               />
             </div>
             <Button
-              className="sticky bottom-0 left-0 w-full bg-background md:relative md:mt-6"
+              className="sticky bottom-0 left-0 w-full md:relative md:mt-6"
               disabled={loading}
               onClick={handleSubmit}
             >