Update UI styles in Button and Page components

Updated the link style in the Button component and streamlined the layout styles in the Page component. This gives the UI a more uniform appearance and improves overall readability. Also, adjusted padding in several classes within the Page component to optimize the layout on large screens.
This commit is contained in:
giancarlo
2024-05-10 13:34:00 +07:00
parent 6746ae3859
commit 1c20d4e052
2 changed files with 4 additions and 6 deletions

View File

@@ -42,9 +42,7 @@ function PageWithSidebar(props: PageProps) {
>
{MobileNavigation}
<div className={'flex flex-col space-y-4 lg:mt-4 lg:px-4'}>
{Children}
</div>
<div className={'flex flex-1 flex-col space-y-4'}>{Children}</div>
</div>
</div>
);
@@ -103,7 +101,7 @@ export function PageBody(
className?: string;
}>,
) {
const className = cn('w-full flex flex-col flex-1', props.className);
const className = cn('w-full flex flex-col flex-1 lg:px-4', props.className);
return <div className={className}>{props.children}</div>;
}
@@ -145,7 +143,7 @@ export function PageHeader({
description?: string | React.ReactNode;
}>) {
return (
<div className={'flex items-center justify-between'}>
<div className={'flex h-20 items-center justify-between lg:px-4'}>
{title ? (
<div className={'flex flex-col space-y-1.5'}>
<PageTitle>{title}</PageTitle>

View File

@@ -20,7 +20,7 @@ const buttonVariants = cva(
secondary:
'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
link: 'decoration-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-9 px-4 py-2',