Fix usages of gray shade that had spelling mistake with grey

.eslintrc.json

@@ -12,7 +12,6 @@
  "extends": [
  "eslint:recommended",
  "plugin:react-hooks/recommended",
- "plugin:prettier/recommended",
  "plugin:@typescript-eslint/eslint-recommended",
  "plugin:@typescript-eslint/recommended",
  "plugin:i18next/recommended",

src/Components/Facility/Consultations/Mews.tsx

@@ -73,7 +73,7 @@ export const Mews = ({ dailyRound }: { dailyRound: DailyRoundsModel }) => {
  return (
  <>
  <div className="tooltip flex flex-col items-center">
- <div className="border-grey-400 flex h-7 w-7 items-center justify-center rounded-full border-2">
+ <div className="flex h-7 w-7 items-center justify-center rounded-full border-2">
  <span className="text-sm font-semibold">-</span>
  </div>
  <span className="mt-1 text-xs font-medium text-secondary-700">

src/Components/Facility/CoverImageEditModal.tsx

@@ -390,7 +390,7 @@ const CoverImageEditModal = ({
  setIsCameraOpen(false);
  webRef.current.stopCamera();
  }}
- className="border-grey-200 my-2 w-full border-2"
+ className="my-2 w-full"
  >
  {t("close")}
  </ButtonV2>

src/Components/Facility/HospitalList.tsx

@@ -137,7 +137,7 @@ export const HospitalList = () => {
  ) : (
  <div>
  <div
- className="border-grey-500 mt-4 cursor-pointer whitespace-nowrap rounded-md border bg-white p-16 text-center text-sm font-semibold shadow hover:bg-secondary-300"
+ className="mt-4 cursor-pointer whitespace-nowrap rounded-md border bg-white p-16 text-center text-sm font-semibold shadow hover:bg-secondary-300"
  onClick={() => navigate("/facility/create")}
  >
  <CareIcon icon="l-plus" className="text-3xl" />

src/Components/Patient/FileUpload.tsx

@@ -1397,10 +1397,12 @@ export const FileUpload = (props: FileUploadProps) => {
  className="text-lg text-danger-500"
  />
  </div>
- <div className="text-grey-200 text-sm">
+ <div className="text-sm">
  <h1 className="text-xl text-black">Archive File</h1>
- This action is irreversible. Once a file is archived it cannot be
- unarchived.
+ <span className="text-sm text-secondary-600">
+ This action is irreversible. Once a file is archived it cannot
+ be unarchived.
+ </span>
  </div>
  </div>
  }
@@ -1447,10 +1449,12 @@ export const FileUpload = (props: FileUploadProps) => {
  className="text-lg text-primary-500"
  />
  </div>
- <div className="text-grey-200 text-sm">
+ <div className="text-sm">
  <h1 className="text-xl text-black">File Details</h1>
- This file is archived. Once a file is archived it cannot be
- unarchived.
+ <span className="text-sm font-normal text-secondary-600">
+ This file is archived. Once a file is archived it cannot be
+ unarchived.
+ </span>
  </div>
  </div>
  }

src/Utils/useFileManager.tsx

@@ -224,10 +224,12 @@ export default function useFileManager(
  className="text-lg text-danger-500"
  />
  </div>
- <div className="text-grey-200 text-sm">
+ <div className="text-sm">
  <h1 className="text-xl text-black">Archive File</h1>
- This action is irreversible. Once a file is archived it cannot be
- unarchived.
+ <span className="text-sm text-secondary-600">
+ This action is irreversible. Once a file is archived it cannot
+ be unarchived.
+ </span>
  </div>
  </div>
  }

tailwind.config.js

@@ -3,6 +3,7 @@ const colors = require("tailwindcss/colors");
 const defaultTheme = require("tailwindcss/defaultTheme");
 
 const gray = {
+ 50: "#F9FAFB",
  100: "#FBFAFC",
  200: "#F7F5FA",
  300: "#F1EDF7",