change matched table styles

src/app/styles/variable.scss

@@ -28,7 +28,8 @@ $color-document: #a561e6;
 
 $status-new: #fab005;
 $status-showed: #5a6e8a;
-$status-in-work: #3b82f6;
+/* $status-in-work: #3b82f6; */
+$status-in-work: #6366f1;
 $authorized-use: #2ecc71;
 
 :root {

src/app/styles/violation-details.scss

@@ -158,11 +158,15 @@
 	}
 
 	.btn-primary-small {
-		background: linear-gradient(135deg, #6366f1, #8b5cf6);
-		color: white;
+		/* background: linear-gradient(135deg, #6366f1, #8b5cf6);
+		color: white; */
+
+		border: 2px solid v.$status-in-work;
+		color: v.$status-in-work;
 
 		&:hover {
-			box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+			background: v.$status-in-work;
+			color: white;
 		}
 	}
 
@@ -227,6 +231,8 @@
 				&-left {
 					display: flex;
 					flex-direction: column;
+					flex: 0 0 auto;
+					width: 140px;
 				}
 
 				&-right {
@@ -237,25 +243,28 @@
 			}
 
 			.source-image {
-				max-height: 80%;
-				min-height: 50px;
-				height: 100%;
+				width: 100%;
+				height: auto;
+				aspect-ratio: 16 / 9;
+
+				background: #f5f5f5;
+				border-radius: 8px;
 				position: relative;
+				overflow: hidden;
 
 				img {
-					position: relative !important;
-					height: 100% !important;
-					border-radius: 8px;
-					width: auto !important;
+					object-fit: contain;
 				}
 			}
 
 			.source-url-block {
 				margin-top: auto;
+				width: 100%;
+				word-break: break-word;
 			}
 
 			.source-url {
-				color: #6366f1;
+				color: v.$status-in-work;
 				font-weight: 600;
 				font-size: 14px;
 				text-decoration: none;
@@ -315,7 +324,9 @@
 		}
 
 		&.authorized_use {
-			background: v.$authorized-use;
+			/* background: v.$authorized-use; */
+			color: v.$authorized-use;
+			background: #2ecc7027;
 		}
 	}
 
@@ -348,14 +359,19 @@
 
 	.btn-resolve {
 		/* background: linear-gradient(135deg, #10b981, #059669); */
-		background: #10b981;
-		color: white;
+		/* 		background: #10b981;
+		color: white; */
 		padding: 12px 30px;
 		white-space: nowrap;
+		color: #10b981;
+		border: 2px solid #10b981;
+		font-weight: 700;
 
 		&:hover {
-			transform: translateY(-2px);
-			box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
+			/* 			transform: translateY(-2px);
+			box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); */
+			background: #10b981;
+			color: white;
 		}
 	}
 
@@ -458,6 +474,7 @@
 		&-right-side {
 			display: flex;
 			flex-direction: column;
+			justify-content: space-between;
 			/* gap: 10px; */
 		}
 
@@ -469,8 +486,13 @@
 			}
 
 			a {
-				color: #6366f1;
+				/* color: v.$text-p; */
 				word-break: break-all;
+				font-weight: 500;
+
+				&:hover {
+					text-decoration: underline;
+				}
 			}
 		}
 
@@ -479,6 +501,7 @@
 			gap: 10px;
 			align-items: center;
 			margin-top: auto;
+			display: none;
 
 			.source-status {
 				margin-bottom: 0;
@@ -599,16 +622,23 @@
 			}
 
 			.btn-primary {
-				background: v.$bg-hover;
-				color: v.$text-p;
-				border: 2px solid transparent;
 				padding: 6px 30px;
 
+				color: v.$status-in-work;
+				border: 2px solid v.$status-in-work;
+
+				background: v.$white;
+
+
 				&.active {
-					background: linear-gradient(135deg, v.$p-color, v.$s-color);
-					/* background: #3b82f6; */
+					/* 					background: v.$status-in-work;
 					color: v.$white;
+					border: 2px solid transparent; */
 					border: 2px solid transparent;
+
+					color: white;
+					background: v.$status-in-work;
+
 				}
 			}
 		}