From 1c20d4e052021655702ece8165e4d0e642f8ab72 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Fri, 10 May 2024 13:34:00 +0700
Subject: [PATCH] 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.
---
 packages/ui/src/makerkit/page.tsx | 8 +++-----
 packages/ui/src/shadcn/button.tsx | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/makerkit/page.tsx b/packages/ui/src/makerkit/page.tsx
index 9261f24f3..9230b2ee2 100644
--- a/packages/ui/src/makerkit/page.tsx
+++ b/packages/ui/src/makerkit/page.tsx
@@ -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>
diff --git a/packages/ui/src/shadcn/button.tsx b/packages/ui/src/shadcn/button.tsx
index f44df9277..744edd466 100644
--- a/packages/ui/src/shadcn/button.tsx
+++ b/packages/ui/src/shadcn/button.tsx
@@ -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',