From 368bcf4dffc6286d00292028946d5ffbe93898b4 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Fri, 5 Apr 2024 12:13:58 +0800
Subject: [PATCH] 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.
---
 .../home/[account]/_components/account-layout-sidebar.tsx | 3 +--
 .../app/(marketing)/docs/_components/docs-page-link.tsx   | 5 +----
 .../gateway/src/components/billing-session-status.tsx     | 4 +---
 packages/billing/gateway/src/components/pricing-table.tsx | 1 -
 .../accounts/src/components/personal-account-dropdown.tsx | 2 +-
 .../src/components/settings/team-account-danger-zone.tsx  | 2 +-
 packages/ui/src/makerkit/image-upload-input.tsx           | 2 +-
 packages/ui/src/makerkit/stepper.tsx                      | 8 ++++----
 8 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/apps/web/app/(dashboard)/home/[account]/_components/account-layout-sidebar.tsx b/apps/web/app/(dashboard)/home/[account]/_components/account-layout-sidebar.tsx
index b516ed054..6bd0272dc 100644
--- a/apps/web/app/(dashboard)/home/[account]/_components/account-layout-sidebar.tsx
+++ b/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>
diff --git a/apps/web/app/(marketing)/docs/_components/docs-page-link.tsx b/apps/web/app/(marketing)/docs/_components/docs-page-link.tsx
index ac06ed56d..8fb42fd57 100644
--- a/apps/web/app/(marketing)/docs/_components/docs-page-link.tsx
+++ b/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` : ``}
diff --git a/packages/billing/gateway/src/components/billing-session-status.tsx b/packages/billing/gateway/src/components/billing-session-status.tsx
index 060b74722..102e04192 100644
--- a/packages/billing/gateway/src/components/billing-session-status.tsx
+++ b/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'}
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 291ae6b95..41940dba1 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/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';
 
diff --git a/packages/features/accounts/src/components/personal-account-dropdown.tsx b/packages/features/accounts/src/components/personal-account-dropdown.tsx
index 6d5d50d20..cab659cee 100644
--- a/packages/features/accounts/src/components/personal-account-dropdown.tsx
+++ b/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>
 
diff --git a/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx b/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx
index 7b3265566..860bc13b7 100644
--- a/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx
+++ b/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={{
diff --git a/packages/ui/src/makerkit/image-upload-input.tsx b/packages/ui/src/makerkit/image-upload-input.tsx
index 9399ccb1c..b82a7e7e1 100644
--- a/packages/ui/src/makerkit/image-upload-input.tsx
+++ b/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}>
diff --git a/packages/ui/src/makerkit/stepper.tsx b/packages/ui/src/makerkit/stepper.tsx
index b5dbaf093..278e8101f 100644
--- a/packages/ui/src/makerkit/stepper.tsx
+++ b/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,
   });