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:
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user