Replace usages of gray color shade with secondary (alias of gray) for…

… consistency and maintainability (#8138)

* Replace usages of `gray` shade with `secondary` shade

* remove irrelavant comment from tailwind config

src/CAREUI/display/Count.tsx

@@ -19,11 +19,11 @@ export default function CountBlock(props: Props) {
           <CareIcon icon={props.icon} className="text-primary-600" />
         </div>
         <div>
-          <dt className="my-2 truncate text-sm font-semibold text-gray-700">
+          <dt className="my-2 truncate text-sm font-semibold text-secondary-700">
             {props.text}
           </dt>
           {props.loading ? (
-            <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-gray-300" />
+            <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-secondary-300" />
           ) : (
             <dd id="count" className="text-5xl font-black leading-9">
               {props.count}

src/CAREUI/display/FilterBadge.tsx

@@ -16,13 +16,13 @@ const FilterBadge = ({ name, value, onRemove }: FilterBadgeProps) => {
       data-testid={name}
       className={`${
         !value && "hidden"
-      } flex flex-row items-center rounded-full border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-600`}
+      } flex flex-row items-center rounded-full border border-secondary-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-secondary-600`}
     >
       {`${name}: ${value}`}
       <CareIcon
         id="removeicon"
         icon="l-times"
-        className="ml-2 box-content cursor-pointer rounded-full text-base hover:bg-gray-500"
+        className="ml-2 box-content cursor-pointer rounded-full text-base hover:bg-secondary-500"
         onClick={onRemove}
       />
     </span>

src/CAREUI/display/SubHeading.tsx

@@ -13,11 +13,11 @@ export default function SubHeading(props: Props) {
   return (
     <div className="flex flex-wrap items-center justify-between py-2">
       <div className="flex items-center">
-        <span className="text-lg font-semibold leading-relaxed text-gray-900">
+        <span className="text-lg font-semibold leading-relaxed text-secondary-900">
           {props.title}
         </span>
         {props.lastModified && (
-          <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-gray-600">
+          <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-secondary-600">
             <CareIcon icon="l-history-alt" className="text-sm" />
             <RecordMeta time={props.lastModified} prefix="Last modified" />
           </div>

src/CAREUI/display/Timeline.tsx

@@ -62,7 +62,7 @@ export const TimelineNode = (props: TimelineNodeProps) => {
           "absolute left-0 top-0 flex w-6 justify-center",
         )}
       >
-        <div className="w-px bg-gray-300" />
+        <div className="w-px bg-secondary-300" />
       </div>
 
       <div
@@ -81,9 +81,9 @@ export const TimelineNode = (props: TimelineNodeProps) => {
             {props.title || (
               <TimelineNodeTitle event={props.event}>
                 <div className="flex w-full justify-between gap-2">
-                  <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600 md:w-2/3">
+                  <p className="flex-auto py-0.5 text-xs leading-5 text-secondary-600 md:w-2/3">
                     {props.event.by && (
-                      <span className="font-medium text-gray-900">
+                      <span className="font-medium text-secondary-900">
                         {props.event.by.username.startsWith("asset")
                           ? t("virtual_nursing_assistant")
                           : `${formatName(props.event.by)} ${
@@ -101,7 +101,7 @@ export const TimelineNode = (props: TimelineNodeProps) => {
                       <TimelineNodeActions>{props.actions}</TimelineNodeActions>
                     )}
                     <RecordMeta
-                      className="flex-none py-0.5 text-xs leading-5 text-gray-500"
+                      className="flex-none py-0.5 text-xs leading-5 text-secondary-500"
                       time={props.event.timestamp}
                     />
                   </div>
@@ -131,13 +131,13 @@ export const TimelineNodeTitle = (props: TimelineNodeTitleProps) => {
       <div
         className={classNames(
           props.event.iconWrapperStyle,
-          "relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500",
+          "relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-secondary-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500",
         )}
       >
         <CareIcon
           className={classNames(
             props.event.iconStyle,
-            "text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white",
+            "text-base text-secondary-700 transition-all duration-200 ease-in-out group-hover:text-white",
           )}
           aria-hidden="true"
           icon={props.event.icon}
@@ -171,9 +171,11 @@ export const TimelineNodeNotes = ({
   }
 
   return (
-    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-gray-200">
-      <CareIcon icon={icon} className="text-lg text-gray-700" />
-      <div className="mt-1 flex-auto text-xs text-gray-700">{children}</div>
+    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-secondary-200">
+      <CareIcon icon={icon} className="text-lg text-secondary-700" />
+      <div className="mt-1 flex-auto text-xs text-secondary-700">
+        {children}
+      </div>
     </div>
   );
 };

src/CAREUI/interactive/LegendInput.tsx

@@ -127,7 +127,7 @@ export default function LegendInput(props: InputProps) {
           required={props.required}
           autoComplete={props.autoComplete}
           className={classNames(
-            "cui-input w-full rounded-md border-gray-300 bg-gray-50 shadow-sm focus:border-2 focus:border-primary-500 focus:bg-gray-100 focus:outline-none focus:ring-0",
+            "cui-input bg-secondary-50 w-full rounded-md border-secondary-300 shadow-sm focus:border-2 focus:border-primary-500 focus:bg-secondary-100 focus:outline-none focus:ring-0",
             props.size === "small" && "px-3 py-2 text-xs",
             (!props.size || !["small", "large"].includes(props.size)) &&
               "px-4 py-3",

src/CAREUI/interactive/ScrollOverlay.tsx

@@ -19,7 +19,7 @@ export default function ScrollOverlay(props: Props) {
       <div ref={ref as any} />
       <div
         className={classNames(
-          "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-gray-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0",
+          "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-secondary-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0",
           hasScrollContent ? "h-16 opacity-75" : "h-0 opacity-0",
         )}
       >

src/CAREUI/interactive/Switch.tsx

@@ -26,7 +26,7 @@ export default function Switch<T extends string>({
               size === "lg" && "px-4 py-3 text-base",
               props.selected === tab
                 ? "border-primary-500 bg-primary-500 font-semibold text-white hover:bg-primary-600 focus:border-primary-500 focus:ring-primary-500"
-                : "border-gray-400 bg-gray-50 hover:bg-gray-200 focus:border-primary-500 focus:ring-primary-500",
+                : "bg-secondary-50 border-secondary-400 hover:bg-secondary-200 focus:border-primary-500 focus:ring-primary-500",
             )}
             onClick={() => props.onChange(tab as T)}
           >

src/Common/hooks/useFilters.tsx

@@ -196,7 +196,7 @@ export default function useFilters({
         {(activeFilters.length >= 1 || children) && (
           <button
             id="clear-all-filters"
-            className="rounded-full border border-gray-300 bg-white px-2 py-1 text-xs text-gray-600 hover:text-gray-800"
+            className="rounded-full border border-secondary-300 bg-white px-2 py-1 text-xs text-secondary-600 hover:text-secondary-800"
             onClick={() => removeFilters()}
           >
             {t("clear_all_filters")}

src/Components/ABDM/ABDMFacilityRecords.tsx

@@ -44,13 +44,13 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
             <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
               {/* eslint-disable-next-line tailwindcss/migration-from-tailwind-2 */}
               <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5  sm:rounded-lg">
-                <table className="min-w-full table-fixed divide-y divide-gray-300">
-                  <thead className="bg-gray-50">
+                <table className="min-w-full table-fixed divide-y divide-secondary-300">
+                  <thead className="bg-secondary-50">
                     <tr>
                       {TableHeads.map((head) => (
                         <th
                           scope="col"
-                          className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900"
+                          className="px-3 py-3.5 text-center text-sm font-semibold text-secondary-900"
                         >
                           {head}
                         </th>
@@ -62,20 +62,20 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                         <ButtonV2
                           onClick={() => refetch()}
                           ghost
-                          className="max-w-2xl text-sm text-gray-700 hover:text-gray-900"
+                          className="max-w-2xl text-sm text-secondary-700 hover:text-secondary-900"
                         >
                           <CareIcon icon="l-refresh" /> Refresh
                         </ButtonV2>
                         <span className="sr-only">View</span>
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-gray-200 bg-white">
+                  <tbody className="divide-y divide-secondary-200 bg-white">
                     {consentsResult?.results.map((consent) => (
                       <tr key={consent.id}>
                         <td className="px-3 py-4 text-center text-sm">
                           {consent.patient_abha_object?.name}
-                          <p className="text-gray-600">
+                          <p className="text-secondary-600">
                             ({consent.patient_abha})
                           </p>
                         </td>
@@ -104,7 +104,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
 
                         {/* <td className="px-3 py-4 text-center text-sm">
                           {`${consent.requester?.first_name} ${consent.requester?.last_name}`.trim()}
-                          <p className="text-gray-600">
+                          <p className="text-secondary-600">
                             ({consent.requester.username})
                           </p>
                         </td> */}
@@ -134,7 +134,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                               consent.consent_artefacts?.[0]?.hi_types ??
                               consent.hi_types
                             )?.map((hiType) => (
-                              <span className="mb-2 mr-2 rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600">
+                              <span className="mb-2 mr-2 rounded-full bg-secondary-100 px-2 py-1 text-xs font-medium text-secondary-600">
                                 {hiType}
                               </span>
                             ))}
@@ -159,7 +159,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                                 View
                               </Link>
                             ) : (
-                              <p className="cursor-not-allowed text-gray-600 opacity-70 ">
+                              <p className="cursor-not-allowed text-secondary-600 opacity-70 ">
                                 View
                               </p>
                             )}

src/Components/ABDM/ABDMRecordsTab.tsx

@@ -23,30 +23,32 @@ function ConsentArtefactCard({ artefact }: IConsentArtefactCardProps) {
     >
       <div className="flex flex-col items-center justify-between gap-4 px-4 py-5 sm:flex-row sm:gap-0 sm:px-6">
         <div className="flex flex-col items-center">
-          <h5 className="font-semibold leading-6 text-gray-900">
+          <h5 className="font-semibold leading-6 text-secondary-900">
             {artefact.hip}
           </h5>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             created {dayjs(artefact.created_date).fromNow()}
           </p>
         </div>
         <div className="flex flex-col items-center">
-          <h6 className="mt-1 leading-6 text-gray-700">{artefact.status}</h6>
-          <h6 className="mt-1 leading-6 text-gray-700">
+          <h6 className="mt-1 leading-6 text-secondary-700">
+            {artefact.status}
+          </h6>
+          <h6 className="mt-1 leading-6 text-secondary-700">
             {dayjs(artefact.from_time).format("MMM DD YYYY")} -{" "}
             {dayjs(artefact.to_time).format("MMM DD YYYY")}
           </h6>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             expires in {dayjs(artefact.expiry).fromNow()}
           </p>
         </div>
       </div>
-      <div className="flex flex-wrap items-center justify-center border-t border-gray-200 px-4 py-5 sm:gap-4">
+      <div className="flex flex-wrap items-center justify-center border-t border-secondary-200 px-4 py-5 sm:gap-4">
         {artefact.hi_types.map((hiType) => {
           return (
             <div
               key={hiType}
-              className="flex items-center justify-center rounded-full bg-gray-600 px-4 py-1.5 text-xs font-medium text-white"
+              className="flex items-center justify-center rounded-full bg-secondary-600 px-4 py-1.5 text-xs font-medium text-white"
             >
               {hiType}
             </div>
@@ -66,22 +68,22 @@ function ConsentRequestCard({ consent }: IConsentRequestCardProps) {
     <div className="overflow-hidden bg-white shadow sm:rounded-lg">
       <div className="flex flex-col items-center justify-between gap-4 px-4 py-5 sm:flex-row sm:gap-0 sm:px-6">
         <div className="flex flex-col items-center">
-          <h5 className="font-semibold leading-6 text-gray-900">
+          <h5 className="font-semibold leading-6 text-secondary-900">
             {
               ABDM_CONSENT_PURPOSE.find((p) => p.value === consent.purpose)
                 ?.label
             }
           </h5>
-          <h6 className="mt-1 leading-6 text-gray-700">
+          <h6 className="mt-1 leading-6 text-secondary-700">
             {consent.requester.first_name} {consent.requester.last_name}
           </h6>
         </div>
         <div className="flex flex-col items-center">
-          <h6 className="mt-1 leading-6 text-gray-700">
+          <h6 className="mt-1 leading-6 text-secondary-700">
             {dayjs(consent.from_time).format("MMM DD YYYY")} -{" "}
             {dayjs(consent.to_time).format("MMM DD YYYY")}
           </h6>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             expires in {dayjs(consent.expiry).fromNow()}
           </p>
         </div>
@@ -106,43 +108,43 @@ function ConsentRequestCard({ consent }: IConsentRequestCardProps) {
               }
             }}
             ghost
-            className="max-w-2xl text-sm text-gray-700 hover:text-gray-900"
+            className="max-w-2xl text-sm text-secondary-700 hover:text-secondary-900"
           >
             <CareIcon icon="l-refresh" /> check status
           </ButtonV2>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             created {dayjs(consent.created_date).fromNow()}
           </p>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             modified {dayjs(consent.modified_date).fromNow()}
           </p>
         </div>
       </div>
       {consent.consent_artefacts?.length ? (
-        <div className="flex flex-wrap items-center justify-center border-t border-gray-200 bg-gray-50 px-4 py-5 sm:gap-4">
+        <div className="bg-secondary-50 flex flex-wrap items-center justify-center border-t border-secondary-200 px-4 py-5 sm:gap-4">
           {consent.consent_artefacts?.map((artefact) => (
             <ConsentArtefactCard key={artefact.id} artefact={artefact} />
           ))}
         </div>
       ) : (
-        <div className="border-t border-gray-200 bg-gray-50 px-4 py-5 sm:gap-4">
-          <p className="text-center text-sm text-gray-800">
+        <div className="bg-secondary-50 border-t border-secondary-200 px-4 py-5 sm:gap-4">
+          <p className="text-center text-sm text-secondary-800">
             {consent.status === "REQUESTED"
               ? "Waiting for the Patient to approve the consent request"
               : "Patient has rejected the consent request"}
           </p>
         </div>
       )}
-      <div className="flex flex-wrap items-center justify-center border-t border-gray-200 px-4 py-5 sm:gap-4">
+      <div className="flex flex-wrap items-center justify-center border-t border-secondary-200 px-4 py-5 sm:gap-4">
         {consent.hi_types.map((hiType) => {
           return (
             <div
               key={hiType}
               className={classNames(
                 "flex items-center justify-center rounded-full px-4 py-1.5 text-xs font-medium text-white",
                 consent.consent_artefacts?.length
-                  ? "bg-gray-400"
-                  : "bg-gray-600",
+                  ? "bg-secondary-400"
+                  : "bg-secondary-600",
               )}
             >
               {hiType}
@@ -173,8 +175,8 @@ export default function ABDMRecordsTab({ patientId }: IProps) {
   if (!data?.results.length) {
     return (
       <div className="mt-12 flex flex-col items-center justify-center gap-2.5">
-        <p className="font-semibold text-gray-600">No Records found</p>
-        <p className="text-sm text-gray-600">
+        <p className="font-semibold text-secondary-600">No Records found</p>
+        <p className="text-sm text-secondary-600">
           Raise a consent request to fetch patient records over ABDM
         </p>
       </div>

src/Components/ABDM/ABHAProfileModal.tsx

@@ -106,15 +106,15 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
           ].map((item, index) =>
             item.value ? (
               <div key={index}>
-                <div className="text-xs text-gray-700">{item.label}</div>
+                <div className="text-xs text-secondary-700">{item.label}</div>
                 <div>{item.value}</div>
               </div>
             ) : null,
           )}
         </div>
       </div>
 
-      <div className="mt-4 flex flex-col text-xs text-gray-700">
+      <div className="mt-4 flex flex-col text-xs text-secondary-700">
         {abha?.created_date && (
           <div className="flex items-center gap-1">
             <span className="">Created On: </span>

src/Components/ABDM/ConfigureHealthFacility.tsx

@@ -162,7 +162,7 @@ export const ConfigureHealthFacility = (props: any) => {
                   {state.form.health_facility?.registered ? (
                     <>
                       <div className="tooltip-text -ml-20 -mt-36 flex w-48 flex-col gap-4 whitespace-break-spaces">
-                        <span className="text-gray-100">
+                        <span className="text-secondary-100">
                           The ABDM health facility is successfully linked with
                           care{" "}
                           <strong>and registered as a service in bridge</strong>
@@ -176,7 +176,7 @@ export const ConfigureHealthFacility = (props: any) => {
                   ) : (
                     <>
                       <div className="tooltip-text -ml-20 -mt-44 flex w-48 flex-col gap-4 whitespace-break-spaces">
-                        <span className="text-gray-100">
+                        <span className="text-secondary-100">
                           The ABDM health facility is successfully linked with
                           care{" "}
                           <strong>