From 9c101cdcfd7b7eb47a587564bab29bb5345b9a4a Mon Sep 17 00:00:00 2001
From: nikhilagastya <72994295+nikhilagastya@users.noreply.github.com>
Date: Tue, 30 May 2023 16:48:23 +0530
Subject: [PATCH] Adds Illustration when no notices available + Replaced
 Material UI components in NoticeBoard page (#5552)

* Date picker not closing on selecting date fixed

* No Notice Component added

* Notice board Empty componenet

* Notice board empty component with tailwind css

* Changes made regarding styling in NoticeBoard.tsx

* Direct path of img given in NoticeBoard.tsx

* minor fix: consistent design

* button classes removed

* Closed change of Material UI components in Notice Board

* added key prop

* fixed page issue

* removed Notificationsbell.png

* merged NoticeBoard changes

* NoticeBoard full page

* Update src/Components/Notifications/NoticeBoard.tsx

* Update src/Components/Notifications/NoticeBoard.tsx

* Update src/Components/Notifications/NoticeBoard.tsx

* Bell Slash Icon added

---------

Co-authored-by: Rithvik Nishad <rithvikn2001@gmail.com>
Co-authored-by: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Co-authored-by: Khavin Shankar <khavinshankar@gmail.com>
---
 package.json                                  |  2 +-
 .../CriticalCare__PressureSoreInputModal.res  |  2 +-
 src/Components/Notifications/NoticeBoard.tsx  | 58 +++++++++----------
 3 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index 5d20bce652a..1a6b488a1c7 100644
--- a/package.json
+++ b/package.json
@@ -209,4 +209,4 @@
   "engines": {
     "node": "18.x"
   }
-}
+}
\ No newline at end of file
diff --git a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
index db303b6c38f..190731aca11 100644
--- a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
+++ b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
@@ -207,4 +207,4 @@ let make = (
       </div>
     </div>
   </div>
-}
+}
\ No newline at end of file
diff --git a/src/Components/Notifications/NoticeBoard.tsx b/src/Components/Notifications/NoticeBoard.tsx
index 8ce910e2e73..01a2af1a469 100644
--- a/src/Components/Notifications/NoticeBoard.tsx
+++ b/src/Components/Notifications/NoticeBoard.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { getNotifications } from "../../Redux/actions";
-import PageTitle from "../Common/PageTitle";
-import { Card, CardContent } from "@material-ui/core";
+import Page from "../Common/components/Page";
 import Loading from "../Common/Loading";
 import { formatDate } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
+import CareIcon from "../../CAREUI/icons/CareIcon";
 
 export const NoticeBoard: any = () => {
   const dispatch: any = useDispatch();
@@ -30,50 +30,48 @@ export const NoticeBoard: any = () => {
   }, [dispatch]);
 
   let notices;
+
   if (data && data.length) {
     notices = (
       <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-6">
         {data.map((item) => (
-          <Card key={`usr_${item.id}`} className="rounded w-full shadow">
-            <CardContent>
-              <div className="bg-white">
-                <div className="text-justify text-lg">{item.message}</div>
-                <div className="text-gray-700 text-md mt-2">
-                  {`${item.caused_by.first_name} ${item.caused_by.last_name}`} -{" "}
-                  <span className="text-primary-700 font-bold">
-                    {item.caused_by.user_type}
-                  </span>
-                </div>
-                <div className="text-xs text-gray-900">
-                  {t("on")}: {formatDate(item.created_date)}
-                </div>
+          <div
+            key={`usr_${item.id}`}
+            className="rounded overflow-hidden shadow-md"
+          >
+            <div className="px-6 py-4">
+              <div className="text-justify text-lg">{item.message}</div>
+              <div className="text-gray-700 text-md mb-2 mt-2">
+                {`${item.caused_by.first_name} ${item.caused_by.last_name}`} -{" "}
+                <span className="text-primary-700 font-bold">
+                  {item.caused_by.user_type}
+                </span>
+              </div>
+              <div className="text-gray-900 text-xs">
+                {t("on")}: {formatDate(item.created_date)}
               </div>
-            </CardContent>
-          </Card>
+            </div>
+          </div>
         ))}
       </div>
     );
   } else {
     notices = (
-      <Card key="no-notice" className="my-4 rounded-lg">
-        <CardContent>
-          <div className="text-xl text-center semibold">
-            {t("no_notices_for_you")}
+      <div className=" m-auto max-w-xs flex items-center ">
+        <div className="my-36">
+          <CareIcon className=" text-gray-500 h-auto care-l-bell-slash" />
+          <div className=" m-auto text-gray-500 text-2xl mt-6">
+            No Notice Available
           </div>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     );
   }
 
   if (isLoading) return <Loading />;
   return (
-    <div className="px-6">
-      <PageTitle
-        title={t("Notice Board")}
-        hideBack={true}
-        breadcrumbs={false}
-      />
+    <Page title={t("Notice Board")} hideBack={true} breadcrumbs={false}>
       <div>{notices}</div>
-    </div>
+    </Page>
   );
 };