fix status config banner colors

Author: lyubov-voloshko

frontend/src/app/components/dashboard/dashboard.component.css

@@ -189,25 +189,24 @@
 	padding: 12px 20px;
 	width: 100%;
 	border: none;
-	border-left: 3px solid #2563eb;
+	border-left: 3px solid var(--color-accentedPalette-500);
 	border-radius: 0;
-	background: #ebf2ff;
+	background: var(--color-accentedPalette-50);
 	font-size: 13px;
-	color: #1e293b;
 }
 
-.status-banner--done {
-	border-left-color: #16a34a;
-	background: #edfaf3;
+/* .status-banner--done {
+	border-left-color: var(--success-color);
+	background: var(--success-background-color);
 }
 
 .status-banner--done .status-banner__icon {
-	color: #16a34a;
-}
+	color: var(--success-color);
+} */
 
 .status-banner__icon {
 	flex-shrink: 0;
-	color: #2563eb;
+	color: var(--color-accentedPalette-500);
 	font-size: 20px;
 	width: 20px;
 	height: 20px;
@@ -222,37 +221,37 @@
 }
 
 .status-banner__title {
-	color: #1e293b;
+	color: var(--color-accentedPalette-900);
 	white-space: nowrap;
 }
 
 .status-banner__subtitle {
-	color: #475569;
+	color: var(--color-accentedPalette-700);
 }
 
 .status-banner__link {
-	color: #2563eb;
+	color: var(--color-accentedPalette-500);
 	text-decoration: underline;
 }
 
 .status-banner__link:hover {
-	color: #1d4ed8;
+	color: var(--color-accentedPalette-700);
 }
 
 .status-banner__progress {
 	flex-shrink: 0;
 	width: 80px;
 	height: 3px;
 	border-radius: 2px;
-	background: rgba(37, 99, 235, 0.15);
+	background: var(--color-accentedPalette-100);
 	overflow: hidden;
 }
 
 .status-banner__progress-fill {
 	width: 40%;
 	height: 100%;
 	border-radius: 2px;
-	background: #2563eb;
+	background: var(--color-accentedPalette-500);
 	animation: banner-indeterminate 1.5s ease-in-out infinite;
 }
 
@@ -263,31 +262,30 @@
 
 @media (prefers-color-scheme: dark) {
 	.status-banner {
-		background: #1a2744;
-		color: #93c5fd;
+		background: var(--color-accentedPalette-900);
 	}
 
 	.status-banner__title {
-		color: #e2e8f0;
+		color: var(--color-accentedPalette-100);
 	}
 
 	.status-banner__subtitle {
-		color: #93c5fd;
+		color: var(--color-accentedPalette-200);
 	}
 
 	.status-banner__link {
-		color: #60a5fa;
+		color: var(--color-accentedPalette-500);
 	}
 
 	.status-banner__link:hover {
-		color: #93c5fd;
+		color: var(--color-accentedPalette-200);
 	}
 
 	.status-banner__icon {
-		color: #60a5fa;
+		color: var(--color-accentedPalette-500);
 	}
 
-	.status-banner--done {
+	/* .status-banner--done {
 		background: #0f2a1a;
 		color: #86efac;
 	}
@@ -302,14 +300,14 @@
 
 	.status-banner--done .status-banner__subtitle {
 		color: #86efac;
-	}
+	} */
 
 	.status-banner__progress {
-		background: rgba(96, 165, 250, 0.15);
+		background: var(--color-accentedPalette-800);
 	}
 
 	.status-banner__progress-fill {
-		background: #60a5fa;
+		background: var(--color-accentedPalette-300);
 	}
 }
 

frontend/src/app/components/dashboard/dashboard.component.html

@@ -56,15 +56,16 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
                 <div class="status-banner__progress-fill"></div>
             </div>
         </div>
-    } @else if (configurationDone) {
+    } 
+    <!--@else if (configurationDone) {
         <div class="status-banner status-banner--done">
             <mat-icon class="status-banner__icon">check_circle</mat-icon>
             <div class="status-banner__body">
                 <strong class="status-banner__title">All tables configured</strong>
                 <span class="status-banner__subtitle">Everything is ready to use.</span>
             </div>
         </div>
-    }
+    } -->
 
     <mat-sidenav-container class="table-list-sidenav-container">
         <mat-sidenav #sideList mode="side" [(opened)]="shownTableTitles"

frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css

@@ -591,29 +591,6 @@
 	max-width: calc(100% - 40px);
 }
 
-.folder-name.editing {
-	background: white;
-	border: 1px solid #2196f3;
-	border-radius: 2px;
-	padding: 2px 6px;
-	margin: 0 4px;
-	flex: 1;
-	max-width: 100%;
-}
-
-.enter-icon {
-	font-size: 16px;
-	width: 16px;
-	height: 16px;
-	color: #9e9e9e;
-	cursor: pointer;
-	margin-left: 4px;
-}
-
-.enter-icon:hover {
-	color: #757575;
-}
-
 .folder-icon {
 	font-size: 20px;
 	width: 20px;
@@ -724,59 +701,13 @@
 }
 
 .table-link_active {
-	background: rgba(37, 99, 235, 0.08);
 	border-radius: 4px;
 	margin: 0 -12px;
 	padding: 0 12px;
 }
 
 .table-link_active .table-name {
-	color: #2563eb;
-}
-
-@media (prefers-color-scheme: dark) {
-	.table-link_active {
-		background: rgba(96, 165, 250, 0.1);
-	}
-
-	.table-link_active .table-name {
-		color: #60a5fa;
-	}
-}
-
-/* ── Dot indicators ── */
-
-.table-dot {
-	flex-shrink: 0;
-	width: 6px;
-	height: 6px;
-	border-radius: 50%;
-	background: transparent;
-	margin-right: 6px;
-}
-
-.table-dot--configured {
-	background: #16a34a;
-}
-
-.table-dot--configuring {
-	background: #2563eb;
-	animation: dot-pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes dot-pulse {
-	0%, 100% { opacity: 1; transform: scale(1); }
-	50% { opacity: 0.4; transform: scale(0.75); }
-}
-
-@media (prefers-color-scheme: dark) {
-	.table-dot--configured {
-		background: #4ade80;
-	}
-
-	.table-dot--configuring {
-		background: #60a5fa;
-	}
+	color: var(--color-accentedPalette-500);
 }
 
 .table-name {

frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html

@@ -161,11 +161,6 @@
                                             (dragstart)="accessLevel === 'edit' && onTableDragStart($event, table)"
                                             (dragend)="accessLevel === 'edit' && onTableDragEnd($event)"
                                             (click)="closeSidebar()">
-                                            <span class="table-dot"
-                                                [ngClass]="{
-                                                    'table-dot--configured': table.configured,
-                                                    'table-dot--configuring': table.configuring
-                                                }"></span>
                                             <span class="table-name">{{getTableName(table)}}</span>
                                         </a>
                                     </div>