improve notifications message

radekm2000 · May 3, 2024 · c09576c · c09576c
1 parent 5e159b9
commit c09576c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/client/ecommerce/src/components/PopoverPopupState.tsx b/client/ecommerce/src/components/PopoverPopupState.tsx
@@ -11,6 +11,7 @@ import {
   Popover,
   Typography,
 } from "@mui/material";
+import NotificationsActiveOutlinedIcon from "@mui/icons-material/NotificationsActiveOutlined";
 import NotificationsIcon from "@mui/icons-material/Notifications";
 import { Link } from "wouter";
 import { useDeleteProductNotificationsMutation } from "../hooks/useDeleteProductNotificationsMutation";
@@ -96,8 +97,19 @@ export default function PopoverPopupState({
                 ))
               ) : (
                 <Box>
-                  <CardContent>
-                    <Typography>No notifications</Typography>
+                  <CardContent
+                    sx={{
+                      display: "flex",
+                      flexDirection: "column",
+                      justifyContent: "center",
+                      alignItems: "center",
+                    }}
+                  >
+                    <NotificationsActiveOutlinedIcon sx={{width: '48px', height: '48px', mb: '10px'}} />
+                    <Typography>No notifications yet</Typography>
+                    <Typography sx={{ fontSize: "13px", color: "#4D4D4D" }}>
+                      This is where you'll find your notifications
+                    </Typography>
                   </CardContent>
                 </Box>
               )}

diff --git a/client/ecommerce/src/components/inbox/InboxSidebar.tsx b/client/ecommerce/src/components/inbox/InboxSidebar.tsx
@@ -9,12 +9,16 @@ import {
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { markNotificationsAsRead } from "../../api/axios";
 const displayLastMessage = (lastMessage: Message) => {
+  if (!lastMessage) {
+    return "";
+  }
   if (!lastMessage.content && lastMessage.imageName) {
     return "User sent a photo";
   }
   if (lastMessage.content.length > 20) {
     return lastMessage.content.slice(0, 20).concat("...");
   }
+
   return lastMessage.content;
 };