change matched table styles

src/app/styles/violation-details.scss

@@ -289,7 +289,7 @@
 
 	.source-status {
 		padding: 4px 10px;
-		border-radius: 6px;
+		border-radius: 12px;
 		font-size: 11px;
 		font-weight: 600;
 		white-space: nowrap;
@@ -343,11 +343,12 @@
 		}
 	}
 
-	.btn-success {
+	.btn-resolve {
 		background: linear-gradient(135deg, #10b981, #059669);
 		color: white;
-		max-width: 200px;
-		padding: 6px 10px;
+		/* max-width: 200px; */
+		padding: 12px 30px;
+		white-space: nowrap;
 
 		&:hover {
 			transform: translateY(-2px);
@@ -393,8 +394,7 @@
 			border-bottom: 1px solid v.$border-color-1;
 			justify-content: space-between;
 			align-items: center;
-			margin-bottom: 20px;
-			padding-bottom: 15px;
+			margin-bottom: 5px;
 			display: flex;
 		}
 
@@ -455,9 +455,10 @@
 		&-right-side {
 			display: flex;
 			flex-direction: column;
-			gap: 10px;
+			/* gap: 10px; */
 		}
 
+		&-date,
 		&-source {
 			span {
 				color: #64748b;
@@ -470,15 +471,28 @@
 			}
 		}
 
-		&-date-status {
+		&-status {
 			display: flex;
 			gap: 10px;
+			align-items: center;
+			margin-top: auto;
 
 			.source-status {
 				margin-bottom: 0;
 			}
 		}
 
+		&-date-value {
+			display: flex;
+			gap: 8px;
+			font-weight: 600;
+		}
+
+		&-date-status {
+			display: flex;
+			gap: 10px;
+		}
+
 		&-action {
 			margin-top: auto;
 		}
@@ -489,13 +503,22 @@
 		}
 
 		&-header {
-			display: grid;
-			grid-template-columns: 300px auto;
-			gap: 10px;
 			flex-shrink: 0;
-			padding-bottom: 20px;
-
+			padding-bottom: 5px;
 			border-bottom: 1px solid rgb(226, 232, 240);
+
+			&-grid {
+				display: grid;
+				grid-template-columns: 300px auto;
+				gap: 10px;
+				margin-bottom: 10px;
+			}
+
+			&-bottom {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
 		}
 
 		&-case {
@@ -576,9 +599,11 @@
 				background: v.$bg-hover;
 				color: v.$text-p;
 				border: 2px solid transparent;
+				padding: 6px 30px;
 
 				&.active {
 					background: linear-gradient(135deg, v.$p-color, v.$s-color);
+					/* background: #3b82f6; */
 					color: v.$white;
 					border: 2px solid transparent;
 				}
@@ -659,25 +684,56 @@
 		}
 
 		.complaint-details {
-			h5 {
-				font-weight: 700;
-				font-size: 22px;
-			}
+			border: 1px solid #e0e0e0;
+			border-radius: 8px;
+			overflow: hidden;
+			background-color: v.$white;
+			max-width: 50%;
 
 			&-item {
-				margin-bottom: 10px;
+				border-bottom: 1px solid #f0f0f0;
+				background-color: v.$bg-hover;
+
+				&:last-child {
+					border-bottom: none;
+				}
+
+				&:first-child {
+					font-weight: 700;
+
+					.complaint-details-header {
+						/* background-color: v.$bg-hover; */
+					}
+				}
+			}
+
+			&-header {
+				background-color: #f8f9fa;
+				background-color: v.$b-color-1;
+				padding: 10px 16px;
+				border-bottom: 1px solid #e9ecef;
 			}
 
 			&-title {
-				color: v.$text-s;
-				font-size: 16px;
-				font-weight: 400;
+				color: #495057;
+				font-size: 14px;
+				font-weight: 500;
+				text-transform: uppercase;
+				letter-spacing: 0.5px;
 			}
 
-			&-text {
-				color: v.$text-p;
+			&-content {
+				padding: 12px 16px;
+				color: #212529;
+				font-size: 15px;
+				font-weight: 400;
+				line-height: 1.5;
+				background-color: #ffffff;
+			}
+
+			strong {
 				font-weight: 600;
-				font-size: 18px;
+				color: #212529;
 			}
 		}
 	}