💄 Update billing page and refine ui components (#830)

This commit is contained in:
Luke Vella 2023-08-29 17:29:26 +01:00 committed by GitHub
parent 1b100481a0
commit d261ef0d59
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 321 additions and 238 deletions

View file

@ -6,7 +6,7 @@ import * as React from "react";
import { cn } from "./lib/utils";
const buttonVariants = cva(
"inline-flex border font-medium disabled:text-muted-foreground focus:ring-1 focus:ring-gray-200 disabled:bg-muted disabled:pointer-events-none select-none items-center justify-center gap-x-2 whitespace-nowrap rounded-md border",
"inline-flex border font-medium disabled:text-muted-foreground focus:ring-1 focus:ring-gray-200 disabled:bg-muted disabled:pointer-events-none select-none items-center justify-center whitespace-nowrap rounded-md border",
{
variants: {
variant: {
@ -22,8 +22,8 @@ const buttonVariants = cva(
link: "underline-offset-4 hover:underline text-primary",
},
size: {
default: "h-9 px-2.5 text-sm",
sm: "h-7 text-xs px-1.5 rounded-md",
default: "h-9 px-2.5 gap-x-2.5 text-sm",
sm: "h-7 text-xs px-2 gap-x-1.5 rounded-md",
lg: "h-11 text-base px-4 rounded-md",
},
},
@ -78,7 +78,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{loading ? (
<SpinnerIcon className="inline-block h-4 w-4 animate-spin" />
) : Icon ? (
<Icon className="h-4 w-4" />
<Icon className="-ml-0.5 h-4 w-4" />
) : null}
{children}
</>

View file

@ -51,7 +51,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"animate-in data-[state=open]:fade-in-90 sm:zoom-in-90 shadow-huge fixed z-50 grid w-full gap-4 overflow-hidden bg-white p-5 sm:rounded-md",
"sm:zoom-in-90 shadow-huge fixed z-50 grid w-full gap-4 overflow-hidden bg-white p-5 sm:rounded-md",
{
"sm:max-w-sm": size === "sm",
"sm:max-w-md": size === "md",
@ -62,14 +62,14 @@ const DialogContent = React.forwardRef<
{...props}
>
{children}
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
{!hideCloseButton ? (
{!hideCloseButton ? (
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
<>
<XIcon className="h-4 w-4" />
<span className="sr-only">Close</span>
</>
) : null}
</DialogPrimitive.Close>
</DialogPrimitive.Close>
) : null}
</DialogPrimitive.Content>
</DialogPortal>
));

View file

@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
<TabsPrimitive.Content
ref={ref}
className={cn(
"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
"ring-offset-background focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
className,
)}
{...props}