join styles and lint

client/admin/notificationUtils/notificationAdd/notificationAdd.jsx

@@ -1,3 +1,4 @@
+require('./notificationAdd.less');
 const React = require('react');
 const { useState, useRef } = require('react');
 const cx = require('classnames');

client/admin/notificationUtils/notificationAdd/notificationAdd.less

@@ -1,20 +1,39 @@
+.notificationAdd {
+	position       : relative;
+	display        : flex;
+	flex-direction : column;
+	width          : 500px;
 
-.notificationAdd{
-	input{
-		height        : 33px;
-		margin-bottom : 20px;
-		padding       : 0px 10px;
-		font-family   : monospace;
+	.field {
+		display               : grid;
+		grid-template-columns : 120px 150px;
+		align-items           : center;
+		justify-items         : stretch;
+		width                 : 100%;
+		margin-bottom         : 20px;
+   
+	
+		input {
+			height        : 33px;
+			padding       : 0px 10px;
+			margin-bottom : unset;
+			font-family   : monospace;
+		}
+	
+		textarea {
+			width      : 50ch;
+			min-height : 7em;
+			max-height : 25em;
+			resize     : vertical;
+		}
 	}
-	button{
-		vertical-align : middle;
-		height         : 37px;
-	}
-	.fieldLabel{
-		display: inline-block;
-		width: 10%;
-	}
-	.fieldInput{
-		margin-bottom: 5px;
+
+	button {
+	
+		position : absolute;
+		right    : 0;
+		bottom   : 0;
+		
+		i { margin-right : 10px; }
 	}
 }

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

@@ -125,7 +125,7 @@ const NotificationLookup = () => {
         }
 
         if (notifications.length === 0) {
-            return <div className="noNotifications">No notifications available.</div>;
+            return <div className="noNotification">No notifications available.</div>;
         }
 
         return (
@@ -143,7 +143,7 @@ const NotificationLookup = () => {
     return (
         <div className="notificationLookup">
             <div className="byId">
-                <h2>Lookup</h2>
+                <h2>Lookup by dissmiss key</h2>
                 <input
                     type="text"
                     ref={lookupRef}
@@ -166,7 +166,7 @@ const NotificationLookup = () => {
                 {renderFoundNotification()}
             </div>
             <div className="all">
-                <h2>All Notifications</h2>
+                <h2>Check all Notifications</h2>
                 <button onClick={lookupAll}>
                     <i
                         className={cx('fas', {

client/admin/notificationUtils/notificationLookup/notificationLookup.less

@@ -1,30 +1,35 @@
 
-.notificationLookup{
-	input{
-		height        : 33px;
-		margin-bottom : 20px;
-		padding       : 0px 10px;
-		font-family   : monospace;
-	}
-	button{
-		vertical-align : middle;
-		height         : 37px;
-	}
-	dl{
-		@maxItemWidth : 132px;
-		dt{
-			float      : left;
-			clear      : left;
-			width      : @maxItemWidth;
-			text-align : right;
-			&::after {
-				content: " : ";
+.notificationLookup {
+	width     : max-content;
+	min-width : 450px;
+
+	.notificationList {
+		display        : flex;
+		flex-direction : column;
+		gap            : px;
+		margin-block   : 20px;
+		border         : 1px solid;
+		border-radius  : 5px;
+		
+		details {
+			padding    : 10px;
+			background : #CCCCCC;
+				
+			&:nth-child(even) { background : #DDDDDD; }
+			&:first-child {
+				border-top-left-radius  : 5px;
+				border-top-right-radius : 5px;
+			}
+			&:last-child {
+				border-bottom-right-radius : 5px;
+				border-bottom-left-radius  : 5px;
+			}
+				
+			summary {
+				font-size   : 20px;
+				font-weight : 900;
 			}
 		}
-		dd{
-			height      : 1em;
-			margin-left : @maxItemWidth + 6px;
-			padding     : 0 0 0.5em 0;
-		}
 	}
+	.noNotification { margin-block : 20px; }
 }