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

@@ -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

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%;

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,
+                                    ['border-primary']: selected,
-                                    ['hover:bg-secondary']: !selected,
+                                    ['hover:border-primary']: !selected,
                                   },
                                 )}
                               >

packages/features/accounts/src/components/account-selector.tsx

@@ -240,21 +240,24 @@ export function AccountSelector({
           <Separator />
 
           <If condition={features.enableTeamCreation}>
-            <Button
+            <div className={'p-1'}>
-              data-test={'create-team-account-trigger'}
+              <Button
-              variant="ghost"
+                data-test={'create-team-account-trigger'}
-              className="w-full justify-start rounded-none"
+                variant="ghost"
-              onClick={() => {
+                size={'sm'}
-                setIsCreatingAccount(true);
+                className="w-full justify-start text-sm font-normal"
-                setOpen(false);
+                onClick={() => {
-              }}
+                  setIsCreatingAccount(true);
-            >
+                  setOpen(false);
-              <Plus className="mr-3 h-4 w-4" />
+                }}
+              >
+                <Plus className="mr-3 h-4 w-4" />
 
-              <span>
+                <span>
-                <Trans i18nKey={'teams:createTeam'} />
+                  <Trans i18nKey={'teams:createTeam'} />
-              </span>
+                </span>
-            </Button>
+              </Button>
+            </div>
           </If>
         </PopoverContent>
       </Popover>

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 =
+  const active = props.active ?? isRouteActive(props.path, pathname, props.end);
-    props.active ??
-    isRouteActive(props.path, pathname, props.end);
 
   return (
     <NavigationMenuItem>
-      <Button asChild variant={'ghost'} className={'relative'}>
+      <Button asChild variant={'ghost'} className={'relative active:shadow-sm'}>
-        <Link href={props.path} className={'text-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>
   );
-}
+}

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':
+              'sticky top-0 z-10 backdrop-blur-md': props.sticky ?? true,
-                props.sticky ?? true,
             },
           )}
         >

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: {

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,
         },
       )}
     >