Implement text color changes across components

The commit involves modifications in various components to change 'text-gray-500' to 'text-muted-foreground'. The purpose of this change is to create uniformity in text colors across the application, enhancing the user interface's overall look and making color scheme tweaks easier in the future.

apps/web/app/(dashboard)/home/[account]/_components/account-layout-sidebar.tsx

@@ -123,8 +123,7 @@ function CollapsibleButton({
     `bg-background absolute -right-[10.5px] bottom-4 cursor-pointer block`,
   );
 
-  const iconClassName =
-    'bg-background text-gray-300 dark:text-gray-600 h-5 w-5';
+  const iconClassName = 'bg-background text-muted-foreground h-5 w-5';
 
   return (
     <TooltipProvider>

apps/web/app/(marketing)/docs/_components/docs-page-link.tsx

@@ -30,10 +30,7 @@ export function DocsPageLink({
 
       <span className={'flex flex-col space-y-1.5'}>
         <span
-          className={
-            'text-xs font-semibold uppercase dark:text-gray-400' +
-            ' text-gray-500'
-          }
+          className={'text-xs font-semibold uppercase text-muted-foreground'}
         >
           {before ? `Previous` : ``}
           {after ? `Next` : ``}

packages/billing/gateway/src/components/billing-session-status.tsx

@@ -69,9 +69,7 @@ function SuccessSessionStatus({
           🎉
         </Heading>
 
-        <div
-          className={'flex flex-col space-y-4 text-gray-500 dark:text-gray-400'}
-        >
+        <div className={'text-muted-foreground flex flex-col space-y-4'}>
           <p>
             <Trans
               i18nKey={'billing:checkoutSuccessDescription'}

packages/billing/gateway/src/components/pricing-table.tsx

@@ -12,7 +12,6 @@ import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
-import { Separator } from '@kit/ui/separator';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -110,7 +110,7 @@ export function PersonalAccountDropdown({
           <div
             className={'flex flex-col justify-start truncate text-left text-xs'}
           >
-            <div className={'text-gray-500'}>
+            <div className={'text-muted-foreground'}>
               <Trans i18nKey={'common:signedInAs'} />
             </div>
 

packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx

@@ -78,7 +78,7 @@ function DeleteTeamContainer(props: {
           <Trans i18nKey={'teams:deleteTeam'} />
         </span>
 
-        <p className={'text-sm text-gray-500'}>
+        <p className={'text-muted-foreground text-sm'}>
           <Trans
             i18nKey={'teams:deleteTeamDescription'}
             values={{

packages/ui/src/makerkit/image-upload-input.tsx

@@ -148,7 +148,7 @@ export const ImageUploadInput = forwardRef<React.ElementRef<'input'>, Props>(
         <div className={'flex items-center space-x-4'}>
           <div className={'flex'}>
             <If condition={!state.image}>
-              <UploadCloud className={'dark:text-dark-500 h-5 text-gray-500'} />
+              <UploadCloud className={'h-5 text-muted-foreground'} />
             </If>
 
             <If condition={state.image}>

packages/ui/src/makerkit/stepper.tsx

@@ -98,7 +98,7 @@ function getClassNameBuilder() {
       {
         variant: 'default',
         selected: false,
-        className: 'text-gray-400 dark:text-gray-500',
+        className: 'text-muted-foreground',
       },
       {
         variant: 'default',
@@ -108,7 +108,7 @@ function getClassNameBuilder() {
       {
         variant: 'default',
         selected: false,
-        className: 'bg-gray-300 dark:bg-gray-800',
+        className: 'bg-muted',
       },
       {
         variant: 'numbers',
@@ -118,7 +118,7 @@ function getClassNameBuilder() {
       {
         variant: 'numbers',
         selected: false,
-        className: 'text-gray-400 dark:text-gray-500',
+        className: 'text-muted-foreground',
       },
     ],
     defaultVariants: {
@@ -135,7 +135,7 @@ function StepDivider({
   selected: boolean;
 }>) {
   const spanClassName = cn('font-medium text-sm', {
-    ['text-gray-400 dark:text-gray-500']: !selected,
+    ['text-muted-foreground']: !selected,
     ['text-primary']: selected,
   });