table view:

- light background on AI insights button;
- columns coumter gray.

Author: lyubov-voloshko

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css

@@ -126,7 +126,7 @@
 .actions {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 8px;
     margin-top: -16px;
 }
 
@@ -159,6 +159,26 @@
     pointer-events: none;
 }
 
+@media (prefers-color-scheme: light) {
+    .ai-insights-button {
+        background: var(--color-accentedPalette-50);
+    }
+
+    .ai-insights-button:hover {
+        background: var(--color-accentedPalette-100) !important;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .ai-insights-button {
+        background: var(--color-accentedPalette-900);
+    }
+
+    .ai-insights-button:hover {
+        background: var(--color-accentedPalette-800) !important;
+    }
+}
+
 @media (prefers-color-scheme: dark) {
     .ai-icon ::ng-deep svg path {
         fill: #fff;
@@ -169,6 +189,22 @@
     display: inline-block;
 }
 
+.db-table-manage-columns-button__count {
+    margin-left: 2px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .db-table-manage-columns-button__count {
+        color: rgba(255, 255, 255, 0.56);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .db-table-manage-columns-button__count {
+        color: rgba(0, 0, 0, 0.64);
+    }
+}
+
 .active-filters {
     display: flex;
     align-items: center;

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html

@@ -65,6 +65,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
             </form>
             <div class="actions">
                 <button mat-button type="button"
+                    class="ai-insights-button"
                     matTooltip="AI assistant"
                     angulartics2On="click"
                     angularticsAction="Dashboard: AI is clicked"
@@ -96,9 +97,12 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                         angulartics2On="click"
                         angularticsAction="Dashboard: columns multiselect is clicked">
                         <mat-icon fontSet="material-icons-outlined">view_week</mat-icon>
-                        Columns ({{ tableData.displayedDataColumns.length   }}
-                            /
-                            {{ tableData.columns.length }})
+                        Columns
+                            <span class="db-table-manage-columns-button__count">
+                                ({{ tableData.displayedDataColumns.length   }}
+                                /
+                                {{ tableData.columns.length }})
+                            </span>
                     </button>
                     <mat-menu #menu="matMenu">
                         <button mat-menu-item