edit styles

src/app/styles/pages-styles.scss

@@ -463,6 +463,24 @@
 		border-bottom: 1px solid var(--color-gray-200);
 	}
 
+	.tanstak-table-title {
+		font-size: 18px;
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+		color: #1f2937;
+		margin-bottom: 20px;
+
+		&::before {
+			content: '';
+			width: 6px;
+			height: 6px;
+			background: #6366f1;
+			border-radius: 50%;
+			margin-right: 10px;
+		}
+	}
+
 	.tanstak-table-filtres {
 		display: flex;
 		flex-direction: column;
@@ -544,6 +562,12 @@
 				border: 2px solid #e2e8f0;
 				border-radius: 10px;
 				box-shadow: 0 1px 2px #0000000d;
+				color: v.$p-color;
+
+				.icon {
+					width: 18px;
+				}
+
 				/*  */
 
 				&:hover {
@@ -562,12 +586,10 @@
 				gap: 0.25rem;
 
 				button {
-					border: 2px solid v.$p-color;
-					padding-left: 0.75rem;
-					padding-right: 0.75rem;
-					padding-top: 0.25rem;
-					padding-bottom: 0.25rem;
+					border: 2px solid #e2e8f0;
+					padding: 0.25rem 0.75rem;
 					border-radius: 10px;
+					color: v.$p-color;
 
 					&.current {
 						background-color: v.$p-color;
@@ -592,8 +614,7 @@
 
 	.tanstak-table {
 		width: 100%;
-		table-layout: fixed;
-		/* table-layout: auto; */
+		/* table-layout: fixed; */
 
 		@media (max-width: 1200px) {
 			width: 1200px;
@@ -663,11 +684,49 @@
 			}
 
 			td {
-				padding-left: 1rem;
-				padding-right: 1rem;
-				padding-top: 1rem;
-				padding-bottom: 1rem;
+				padding: 15px 0;
 				white-space: nowrap;
+
+				&:first-child {
+					padding-left: 15px;
+				}
+
+				&:last-child {
+					padding-right: 15px;
+				}
+			}
+
+			.table-item {
+				color: v.$text-s;
+				font-size: 14px;
+			}
+
+			.table-item-protected {
+				color: #10b981;
+				font-size: 12px;
+				position: relative;
+				margin-left: 5px;
+				padding-left: 5px;
+
+				&::before {
+					content: '•';
+					color: v.$text-s;
+					position: absolute;
+					left: -5px;
+					top: 50%;
+					transform: translateY(-50%);
+				}
+			}
+
+			.table-item-extension {
+				text-transform: uppercase;
+				font-size: 14px;
+			}
+
+			.table-item-status {
+				padding: 2px 10px;
+				border-radius: 15px;
+				background-color: v.$b-color-2;
 			}
 
 			.actions {
@@ -685,15 +744,43 @@
 					padding: 4px 12px;
 					font-size: 14px;
 					line-height: 20px;
-					border-radius: 4px;
+					border-radius: 8px;
 					color: v.$white;
+					cursor: pointer;
+					transition: all 0.3s ease-in;
 
-					.icon {}
+					.icon {
+						width: 18px;
+					}
 
 					@media (max-width: 1200px) {
 						padding: 4px;
 					}
 				}
+
+				span {
+					padding-left: 5px;
+				}
+			}
+
+			.table-action-download {
+				display: flex;
+				background-color: #3b72e0;
+				align-items: center;
+
+				&:hover {
+					background-color: #2d56a8;
+				}
+			}
+
+			.table-action-delete {
+				display: flex;
+				background-color: #e80a14;
+				align-items: center;
+
+				&:hover {
+					background-color: #9f0712;
+				}
 			}
 		}
 	}
@@ -1245,7 +1332,7 @@
 			right: -50%;
 			width: 200%;
 			height: 200%;
-			background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+			background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
 			opacity: 0;
 			transition: opacity 0.4s ease;
 		}