Adds Illustration when no notices available + Replaced Material UI co…

…mponents 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 <[email protected]> Co-authored-by: Mohammed Nihal <[email protected]> Co-authored-by: Khavin Shankar <[email protected]>
ohcnetwork · May 30, 2023 · 9c101cd · 9c101cd
1 parent 4216382
commit 9c101cd
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -209,4 +209,4 @@
   "engines": {
     "node": "18.x"
   }
-}
+}
diff --git 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>
-}
+}
diff --git 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>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -209,4 +209,4 @@ @@
       "engines": {
         "node": "18.x"
       }
-    }
+    }