Small style tweak to notifications to not show bottom border on singl…

…e notification

webapp/src/components/Notification.tsx

@@ -13,10 +13,10 @@ const Markdown = dynamic(() => import('react-markdown'), {
 	ssr: false,
 });
 
-export function Notification({ title, description, date, seen, _id, markSeen }) {
+export function Notification({ index, title, description, date, seen, _id, markSeen }) {
 	const [gone, setGone] = useState(false);
 	return (
-		<div className={`p-4 border-b ${seen ? 'bg-gray-100' : 'bg-white'} transition-all duration-500 max-h-[500px] overflow-hidden ${gone ? 'max-h-0 opacity-0' : ''}`}>
+		<div className={`p-4 ${index === 0 ? '' : 'border-t'} ${seen ? 'bg-gray-100' : 'bg-white'} transition-all duration-500 max-h-[500px] overflow-hidden ${gone ? 'max-h-0 opacity-0' : ''}`}>
 			{!seen && <div className='ml-3 flex h-7 items-center cursor-pointer rounded-full right-5 absolute w-4 h-4'>
 				<button
 					type='button'
@@ -46,7 +46,7 @@ export function NotificationBox({ notifications }) {
 	return (
 		<div className='max-w-sm max-h-20 w-full bg-white shadow-md rounded-lg overflow-hidden'>
 			{notifications.slice(0, 5).map((notification, index) => (
-				<Notification key={index} {...notification} />
+				<Notification key={index} index={index} {...notification} />
 			))}
 		</div>
 	);