From e88ae7268ab088f839290785ee2c584dc8d1057e Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Thu, 16 May 2024 15:56:25 +0700
Subject: [PATCH] Update UI styles and behavior across various components

This commit updates a variety of user interface styles and interactivity across multiple components. Changes include altering color schemes and border styles, modifying button interactivity and behaviors, and updating font weights. An emphasis has been placed on enhancing visual appearance, improving user experience, and maintaining a more consistent look-and-feel across the application.
---
 apps/web/lib/fonts.ts                         |  2 +-
 apps/web/styles/globals.css                   |  2 +-
 .../gateway/src/components/plan-picker.tsx    |  6 ++--
 .../src/components/account-selector.tsx       | 31 ++++++++++---------
 .../src/makerkit/bordered-navigation-menu.tsx | 19 +++++++-----
 packages/ui/src/makerkit/page.tsx             |  5 ++-
 packages/ui/src/makerkit/sidebar.tsx          |  4 ++-
 packages/ui/src/shadcn/radio-group.tsx        |  5 +--
 8 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/apps/web/lib/fonts.ts b/apps/web/lib/fonts.ts
index 85572e07a..8a3c6a41f 100644
--- a/apps/web/lib/fonts.ts
+++ b/apps/web/lib/fonts.ts
@@ -23,7 +23,7 @@ const heading = HeadingFont({
   variable: '--font-heading',
   fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
   preload: true,
-  weight: ['500', '700'],
+  weight: ['500', '600'],
 });
 
 // we export these fonts into the root layout
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 4551fa264..b70fea9bc 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -13,7 +13,7 @@
     --popover: 0deg 0% 100%;
     --popover-foreground: 222.2deg 47.4% 11.2%;
 
-    --border: 214.3deg 31.8% 91.4%;
+    --border: 214.3deg 31.8% 94.4%;
     --input: 214.3deg 31.8% 91.4%;
 
     --card: 0deg 0% 100%;
diff --git a/packages/billing/gateway/src/components/plan-picker.tsx b/packages/billing/gateway/src/components/plan-picker.tsx
index 1c95ec4cc..0d0991dbd 100644
--- a/packages/billing/gateway/src/components/plan-picker.tsx
+++ b/packages/billing/gateway/src/components/plan-picker.tsx
@@ -142,10 +142,10 @@ export function PlanPicker(
                                 htmlFor={interval}
                                 key={interval}
                                 className={cn(
-                                  'hover:bg-secondary flex items-center space-x-2 rounded-md border border-transparent px-4 py-2',
+                                  'flex items-center space-x-2 rounded-md border border-transparent px-4 py-2 transition-colors',
                                   {
-                                    ['border-primary bg-secondary']: selected,
-                                    ['hover:bg-secondary']: !selected,
+                                    ['border-primary']: selected,
+                                    ['hover:border-primary']: !selected,
                                   },
                                 )}
                               >
diff --git a/packages/features/accounts/src/components/account-selector.tsx b/packages/features/accounts/src/components/account-selector.tsx
index 309031cea..f19a3ef2e 100644
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/packages/features/accounts/src/components/account-selector.tsx
@@ -240,21 +240,24 @@ export function AccountSelector({
           <Separator />
 
           <If condition={features.enableTeamCreation}>
-            <Button
-              data-test={'create-team-account-trigger'}
-              variant="ghost"
-              className="w-full justify-start rounded-none"
-              onClick={() => {
-                setIsCreatingAccount(true);
-                setOpen(false);
-              }}
-            >
-              <Plus className="mr-3 h-4 w-4" />
+            <div className={'p-1'}>
+              <Button
+                data-test={'create-team-account-trigger'}
+                variant="ghost"
+                size={'sm'}
+                className="w-full justify-start text-sm font-normal"
+                onClick={() => {
+                  setIsCreatingAccount(true);
+                  setOpen(false);
+                }}
+              >
+                <Plus className="mr-3 h-4 w-4" />
 
-              <span>
-                <Trans i18nKey={'teams:createTeam'} />
-              </span>
-            </Button>
+                <span>
+                  <Trans i18nKey={'teams:createTeam'} />
+                </span>
+              </Button>
+            </div>
           </If>
         </PopoverContent>
       </Popover>
diff --git a/packages/ui/src/makerkit/bordered-navigation-menu.tsx b/packages/ui/src/makerkit/bordered-navigation-menu.tsx
index 718dacb37..7f8a05dd3 100644
--- a/packages/ui/src/makerkit/bordered-navigation-menu.tsx
+++ b/packages/ui/src/makerkit/bordered-navigation-menu.tsx
@@ -9,7 +9,6 @@ import {
   NavigationMenuItem,
   NavigationMenuList,
 } from '../shadcn/navigation-menu';
-
 import { cn, isRouteActive } from '../utils';
 import { Trans } from './trans';
 
@@ -31,20 +30,24 @@ export function BorderedNavigationMenuItem(props: {
 }) {
   const pathname = usePathname();
 
-  const active =
-    props.active ??
-    isRouteActive(props.path, pathname, props.end);
+  const active = props.active ?? isRouteActive(props.path, pathname, props.end);
 
   return (
     <NavigationMenuItem>
-      <Button asChild variant={'ghost'} className={'relative'}>
-        <Link href={props.path} className={'text-sm'}>
+      <Button asChild variant={'ghost'} className={'relative active:shadow-sm'}>
+        <Link
+          href={props.path}
+          className={cn('text-sm', {
+            'text-primary': active,
+            'text-primary/80 hover:text-primary': !active,
+          })}
+        >
           <Trans i18nKey={props.label} defaults={props.label} />
 
           {active ? (
             <span
               className={cn(
-                'absolute -bottom-2.5 left-0 h-1 w-full bg-primary animate-in fade-in zoom-in-90',
+                'absolute -bottom-2.5 left-0 h-0.5 w-full bg-primary animate-in fade-in zoom-in-90',
               )}
             />
           ) : null}
@@ -52,4 +55,4 @@ export function BorderedNavigationMenuItem(props: {
       </Button>
     </NavigationMenuItem>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/ui/src/makerkit/page.tsx b/packages/ui/src/makerkit/page.tsx
index 9230b2ee2..b15b795d2 100644
--- a/packages/ui/src/makerkit/page.tsx
+++ b/packages/ui/src/makerkit/page.tsx
@@ -72,10 +72,9 @@ function PageWithHeader(props: PageProps) {
       >
         <div
           className={cn(
-            'dark:border-primary-900 flex h-14 items-center justify-between px-4 shadow-sm dark:shadow-primary/10 lg:justify-start',
+            'dark:border-primary-900 flex h-14 items-center justify-between bg-muted/30 px-4 shadow-sm dark:shadow-primary/10 lg:justify-start',
             {
-              'sticky top-0 z-10 bg-background/80 backdrop-blur-md':
-                props.sticky ?? true,
+              'sticky top-0 z-10 backdrop-blur-md': props.sticky ?? true,
             },
           )}
         >
diff --git a/packages/ui/src/makerkit/sidebar.tsx b/packages/ui/src/makerkit/sidebar.tsx
index 6effbb6b2..7ae911a3b 100644
--- a/packages/ui/src/makerkit/sidebar.tsx
+++ b/packages/ui/src/makerkit/sidebar.tsx
@@ -193,7 +193,9 @@ export function SidebarItem({
 
 function getClassNameBuilder() {
   return cva(
-    ['flex box-content h-screen flex-col border-r border-border relative'],
+    [
+      'flex box-content h-screen flex-col relative bg-muted/20 shadow-sm dark:shadow-primary/20',
+    ],
     {
       variants: {
         collapsed: {
diff --git a/packages/ui/src/shadcn/radio-group.tsx b/packages/ui/src/shadcn/radio-group.tsx
index fc026b615..631164857 100644
--- a/packages/ui/src/shadcn/radio-group.tsx
+++ b/packages/ui/src/shadcn/radio-group.tsx
@@ -53,10 +53,11 @@ const RadioGroupItemLabel = (
       className={cn(
         props.className,
         'flex cursor-pointer rounded-md' +
-          ' items-center space-x-4 border border-input hover:bg-secondary' +
+          ' items-center space-x-4 border border-input' +
           ' transition-duration-500 p-4 text-sm transition-all focus-within:border-primary',
         {
-          [`border-primary bg-secondary`]: props.selected,
+          [`border-primary`]: props.selected,
+          [`hover:border-primary`]: !props.selected,
         },
       )}
     >