zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update UI styling and add checkout redirect ability

Browse Source 
This commit does two main things. First, it refactors UI styling in the alert component, changing the location of some utility classes and enhancing color gradients for different alert variants. Second, it introduces the ability to specify whether to redirect to checkout on the pricing page, thereby improving user experience. This adds more flexibility to the 'PricingTable' and 'CheckoutButton' components, allowing for optional redirection and enhanced configurability.
This commit is contained in:
giancarlo
2024-04-18 19:59:28 +08:00
parent 44fc04e3ea
commit 427ea2f845
4 changed files with 38 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/ui/src/shadcn/alert.tsx
View File

@@ -2,21 +2,21 @@ import * as React from 'react';
import { type VariantProps, cva } from 'class-variance-authority';
import { cn } from '../utils/cn';
import { cn } from '../utils';
const alertVariants = cva(
'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
'relative w-full bg-gradient-to-r rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
{
variants: {
variant: {
default: 'bg-background text-foreground',
destructive:
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive from-red-50 from-10% via-background to-background dark:from-red-500/10',
success:
'border-green-600/50 text-green-600 dark:border-green-600 [&>svg]:text-green-600',
'border-green-600/50 text-green-600 dark:border-green-600 [&>svg]:text-green-600 from-green-50 from-10% via-background to-background dark:from-green-500/10',
warning:
'border-orange-600/50 text-orange-600 dark:border-orange-600 [&>svg]:text-orange-600',
info: 'border-blue-600/50 text-blue-600 dark:border-blue-600 [&>svg]:text-blue-600',
'border-orange-600/50 text-orange-600 dark:border-orange-600 [&>svg]:text-orange-600 from-orange-50 from-10% via-background to-background dark:from-orange-500/10',
info: 'border-blue-600/50 text-blue-600 dark:border-blue-600 [&>svg]:text-blue-600 from-blue-50 from-10% via-background to-background dark:from-blue-500/10',
},
},
defaultVariants: {
@@ -44,7 +44,7 @@ const AlertTitle = React.forwardRef<
>(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn('mb-1 font-medium leading-none tracking-tight', className)}
className={cn('mb-1 font-semibold leading-none tracking-tight', className)}
{...props}
/>
));