continue: add notification page styles

src/app/styles/pages-styles.scss

@@ -5054,14 +5054,21 @@
 		overflow-x: auto;
 		border-radius: 0.5rem;
 		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		max-width: calc(100vw - var(--side-bar-width) - 60px);
+
+		@media (max-width: 440px) {
+			max-width: calc(100vw - var(--side-bar-width) - 30px);
+		}
 	}
 
 	&-header {
-		background-color: v.$bg-light;
 		padding: 20px 20px;
 		font-size: 18px;
 		font-weight: 600;
 		border-bottom: 1px solid v.$b-color-2;
+		background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+		color: v.$white;
+
 
 		display: flex;
 		justify-content: space-between;
@@ -5076,15 +5083,22 @@
 	}
 
 	&-action {
+		display: flex;
+		gap: 10px;
+
 		.btn-primary {
-			/* background: v.$p-color; */
+			background: white;
-			background: #2b7fff;
+			color: black;
+			font-weight: 600;
+			font-size: 14px;
 			padding: 5px 20px;
+			box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 		}
 	}
 
 	&-body {
 		padding: 0;
+		background: v.$white;
 
 		.notification {
 			&-item {
@@ -5098,6 +5112,57 @@
 				}
 			}
 
+			&-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
+
+			&-body {
+				flex-grow: 1;
+			}
+
+			&-title {
+				font-weight: 600;
+				font-size: 18px;
+				margin-bottom: 4px;
+			}
+
+			&-text {
+				color: v.$text-s;
+				margin-bottom: 4px;
+			}
+
+			&-status {
+				background: v.$b-color-2;
+				padding: 4px 8px;
+				border-radius: 12px;
+				font-size: 12px;
+				user-select: none;
+			}
+
+			&-footer {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.btn-remove {
+					color: v.$white;
+					background: v.$status-new;
+					padding: 4px 18px;
+
+					&:hover {
+						background: #ff9100;
+					}
+				}
+			}
+
+			&-date {
+				color: v.$text-m;
+				font-size: 14px;
+				text-align: start;
+			}
+
 			&-check {
 				display: flex;
 				align-items: center;
@@ -5118,8 +5183,6 @@
 					}
 				}
 			}
-
-			&-text {}
 		}
 	}
 }

src/app/ui/notifications/notifications-list.tsx

@@ -9,6 +9,8 @@ interface Notification {
 	notificationText: string,
 	data: string,
 	link: string,
+	title: string,
+	status: string,
 }
 
 const noitficationList: Notification[] = [
@@ -16,31 +18,41 @@ const noitficationList: Notification[] = [
 		id: '1',
 		notificationText: 'text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1',
 		data: '20.20.20',
-		link: '#'
+		link: '#',
+		title: 'title 1',
+		status: 'status'
 	},
 	{
 		id: '2',
-		notificationText: 'text2',
+		notificationText: 'text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 ',
 		data: '20.20.20',
-		link: '#'
+		link: '#',
+		title: 'title 2',
+		status: 'status'
 	},
 	{
 		id: '3',
-		notificationText: 'text3',
+		notificationText: 'text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 ',
 		data: '20.20.20',
-		link: '#'
+		link: '#',
+		title: 'title 3',
+		status: 'status'
 	},
 	{
 		id: '4',
-		notificationText: 'text4',
+		notificationText: 'text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 ',
 		data: '20.20.20',
-		link: '#'
+		link: '#',
+		title: 'title 4',
+		status: 'status'
 	},
 	{
 		id: '5',
-		notificationText: 'text5',
+		notificationText: 'text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 ',
 		data: '20.20.20',
-		link: '#'
+		link: '#',
+		title: 'title 5',
+		status: 'status'
 	}
 ];
 
@@ -50,7 +62,8 @@ export function NotificationsList() {
 
 	function selectHandler(fileId: string) {
 		setSelectedFiles((prev) => {
-			const newSet = new Set(prev)
+			const newSet = new Set(prev);
+
 			if (newSet.has(fileId)) {
 				newSet.delete(fileId)
 			} else {
@@ -64,68 +77,110 @@ export function NotificationsList() {
 		setSelectedFiles(new Set());
 	}
 
+	function selectAllHandler() {
+		setSelectedFiles(new Set(noitficationList.map(item => item.id)));
+	}
+
 	return (
 		<div
-			className="block-wrapper"
+			className="notifications-list-wrapper"
 		>
 			<div
-				className="notifications-list-wrapper"
+				className="notifications-list-header"
 			>
-				<div
+				<h4>
-					className="notifications-list-header"
+					{t('all-notifications')}
-				>
+				</h4>
-					<h4>
-						{t('all-notifications')}
-					</h4>
 
-					<div
-						className="notifications-list-action"
-					>
-						{(selectedFiles.size !== 0) && (
-							<button
-								className="btn btn-primary"
-								onClick={() => {
-									clearHandler();
-								}}
-							>
-								{t('deselect')}
-							</button>
-						)}
-					</div>
-				</div>
 				<div
-					className="notifications-list-body"
+					className="notifications-list-action"
 				>
-					{(noitficationList.length !== 0) && (
+					{(selectedFiles.size !== 0) && (
-						noitficationList.map(item => {
+						<button
-							return (
+							className="btn btn-primary"
+							onClick={() => {
+								clearHandler();
+							}}
+						>
+							{t('deselect')}
+						</button>
+					)}
+					<button
+						className="btn btn-primary"
+						onClick={() => {
+							selectAllHandler();
+						}}
+					>
+						{t('select-all')}
+					</button>
+				</div>
+			</div>
+			<div
+				className="notifications-list-body"
+			>
+				{(noitficationList.length !== 0) && (
+					noitficationList.map(item => {
+						return (
+							<div
+								className="notification-item"
+								key={item.id}
+							>
 								<div
-									className="notification-item"
+									className="notification-check"
+								>
+									<button
+										onClick={() => {
+											selectHandler(item.id);
+										}}
+									>
+										{selectedFiles.has(item.id) && (
+											<IconCheck />
+										)}
+									</button>
+								</div>
+
+								<div
+									className="notification-body"
 								>
 									<div
-										className="notification-check"
+										className="notification-header"
 									>
-										<button
+										<div
-											onClick={() => {
+											className="notification-title"
-												selectHandler(item.id);
-											}}
 										>
-											{selectedFiles.has(item.id) && (
+											{item.title}
-												<IconCheck />
+										</div>
-											)}
+										<div
-										</button>
+											className="notification-status"
+										>
+											{item.status}
+										</div>
 									</div>
-
 									<div
 										className="notification-text"
 									>
 										{item.notificationText}
 									</div>
+									<div
+										className="notification-footer"
+									>
+										<div
+											className="notification-date"
+										>
+											{item.data}
+										</div>
+
+										<button
+											className="btn btn-remove"
+										>
+											{t('remove')}
+										</button>
+									</div>
 								</div>
-							)
+							</div>
-						})
+						)
-					)}
+					})
-				</div>
+				)}
 			</div>
 		</div>
 	)

src/i18n/messages/en.json

@@ -386,7 +386,8 @@
 		"all": "All",
 		"mark-all-as-read": "Mark all as read",
 		"all-notifications": "All notifications",
-		"deselect": "Deselect"
+		"deselect": "Deselect",
+		"select-all": "Select all"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -386,7 +386,8 @@
 		"all": "Все",
 		"mark-all-as-read": "Отметить все как прочитанное",
 		"all-notifications": "Все уведомления",
-		"deselect": "Снять выделение"
+		"deselect": "Снять выделение",
+		"select-all": "Выбрать все"
 	},
 	"Login-register-form": {
 		"and": "и",