Responsive Notification System for React Apps

Design a notification UI for a mobile and desktop app. The notification icon should be placed in the top right corner of the header bar. When clicked, it opens a dropdown or a full page notification list depending on the device (mobile or desktop). Each notification in the list should include a title, short content, and time stamp, with unread notifications being highlighted (using bold text or a different background color). Users should be able to click on a notification to view its details. When a notification is clicked, a dialog should appear showing the notification's details. The dialog should include the title, date and time, content, and the status as 'Read.' The design should use distinct colors to visually differentiate read and unread notifications. The notification detail dialog should have a clean and modern style, with clear spacing and typography to enhance readability. If there are no notifications, display a message such as 'No notifications yet' with a friendly, simple illustration.