Color fixes

frontend/src/app/components/charts/chart-delete-dialog/chart-delete-dialog.component.html

@@ -1,4 +1,4 @@
-<h2 mat-dialog-title>Delete Saved Query</h2>
+<h2 mat-dialog-title>Delete saved query</h2>
 
 <mat-dialog-content>
     <div class="warning-container">
@@ -18,6 +18,6 @@ <h2 mat-dialog-title>Delete Saved Query</h2>
         (click)="onDelete()"
         [disabled]="submitting()"
         data-testid="delete-chart-confirm-button">
-        {{submitting() ? 'Deleting...' : 'Delete Query'}}
+        {{submitting() ? 'Deleting...' : 'Delete query'}}
     </button>
 </mat-dialog-actions>

frontend/src/app/components/charts/chart-edit/chart-edit.component.css

@@ -1,20 +1,33 @@
+:host {
+	display: block;
+	height: calc(100vh - 44px);
+	margin-bottom: -60px;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+}
+
 .chart-edit-layout {
 	display: flex;
-	height: calc(100vh - 64px);
+	height: 100%;
 }
 
 .chart-edit-main {
 	flex: 1;
 	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
 }
 
 .chart-edit-page {
 	display: flex;
 	flex-direction: column;
-	min-height: 100%;
+	flex: 1;
 	padding: 0 clamp(40px, 5vw, 100px);
 	max-width: 1400px;
 	margin: 3em auto;
+	width: 100%;
+	box-sizing: border-box;
 }
 
 @media (width <= 600px) {
@@ -47,7 +60,6 @@
 	flex-direction: column;
 	gap: 24px;
 	flex: 1;
-	overflow-y: auto;
 	padding-bottom: 24px;
 }
 
@@ -130,17 +142,11 @@
 
 .code-editor-box {
 	height: 300px;
-	border: 1px solid rgba(0, 0, 0, 0.12);
+	border: 1px solid var(--mat-sidenav-container-divider-color);
 	border-radius: 4px;
 	overflow: hidden;
 }
 
-@media (prefers-color-scheme: dark) {
-	.code-editor-box {
-		border-color: rgba(255, 255, 255, 0.12);
-	}
-}
-
 .code-editor-box ngs-code-editor {
 	height: 100%;
 }
@@ -222,26 +228,34 @@
 }
 
 .no-results mat-icon {
-	color: #1976d2;
+	color: var(--color-accentedPalette-500);
 }
 
 .actions {
+	position: sticky;
+	bottom: 0;
 	display: flex;
-	justify-content: flex-end;
+	align-items: center;
+	justify-content: space-between;
 	gap: 16px;
-	padding: 16px 0;
-	border-top: 1px solid rgba(0, 0, 0, 0.12);
-	background-color: #fff;
+	padding: 0 clamp(40px, 5vw, 100px);
+	background-color: var(--mat-sidenav-content-background-color);
+	box-shadow: var(--shadow);
+	height: 64px;
 	flex-shrink: 0;
-	position: sticky;
-	bottom: 0;
-	margin-top: auto;
+	z-index: 10;
+	--shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 @media (prefers-color-scheme: dark) {
 	.actions {
-		border-top-color: rgba(255, 255, 255, 0.12);
-		background-color: #1e1e1e;
+		--shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.5), 0 2px 2px 0 rgba(0, 0, 0, 0.64), 0 1px 5px 0 rgba(0, 0, 0, 0.85);
+	}
+}
+
+@media (width <= 600px) {
+	.actions {
+		padding: 0 16px;
 	}
 }
 

frontend/src/app/components/charts/chart-edit/chart-edit.component.html

@@ -9,10 +9,7 @@
 
         <div class="chart-edit-page">
     <div class="chart-edit-header">
-        <button mat-icon-button (click)="cancel()" matTooltip="Back to list">
-            <mat-icon>arrow_back</mat-icon>
-        </button>
-        <h1 class="mat-h1">{{ isEditMode() ? 'Edit Widget' : 'Create Widget' }}</h1>
+        <h1 class="mat-h1">{{ isEditMode() ? 'Edit widget' : 'Create widget' }}</h1>
     </div>
 
     <div *ngIf="loading()" class="loading-container">
@@ -22,7 +19,7 @@ <h1 class="mat-h1">{{ isEditMode() ? 'Edit Widget' : 'Create Widget' }}</h1>
     <div *ngIf="!loading()" class="chart-edit-content">
         <div class="query-details">
             <mat-form-field appearance="outline" class="name-field">
-                <mat-label>Query Name</mat-label>
+                <mat-label>Query name</mat-label>
                 <input matInput
                     [ngModel]="queryName()"
                     (ngModelChange)="queryName.set($event)"
@@ -44,15 +41,15 @@ <h1 class="mat-h1">{{ isEditMode() ? 'Edit Widget' : 'Create Widget' }}</h1>
         <div class="editor-preview-container">
             <div class="editor-section">
                 <div class="section-header">
-                    <h3>SQL Query</h3>
+                    <h3>SQL query</h3>
                     <button mat-stroked-button
                         (click)="testQuery()"
                         [disabled]="!canTest()"
                         class="test-query-button"
                         data-testid="test-query-button">
                         <mat-icon *ngIf="!testing()">play_arrow</mat-icon>
                         <mat-spinner *ngIf="testing()" diameter="18" class="button-spinner"></mat-spinner>
-                        {{ testing() ? 'Testing...' : 'Test Query' }}
+                        {{ testing() ? 'Testing...' : 'Test query' }}
                     </button>
                 </div>
                 <div class="code-editor-box ph-no-capture">
@@ -68,15 +65,15 @@ <h3>SQL Query</h3>
             <div class="right-panel" *ngIf="showResults()">
                 <div class="config-section">
                     <div class="section-header">
-                        <h3>Chart Configuration</h3>
+                        <h3>Chart configuration</h3>
                         <span class="execution-time" *ngIf="executionTime() !== null">
                             Executed in {{ executionTime() }}ms
                         </span>
                     </div>
 
                     <div class="chart-config">
                         <mat-form-field appearance="outline" class="chart-config-field">
-                            <mat-label>Chart Type</mat-label>
+                            <mat-label>Chart type</mat-label>
                             <mat-select [ngModel]="chartType()" (ngModelChange)="chartType.set($event)" data-testid="chart-type-select">
                                 <mat-option *ngFor="let type of chartTypes" [value]="type.value">
                                     {{ type.label }}
@@ -85,7 +82,7 @@ <h3>Chart Configuration</h3>
                         </mat-form-field>
 
                         <mat-form-field appearance="outline" class="chart-config-field">
-                            <mat-label>Label Column</mat-label>
+                            <mat-label>Label column</mat-label>
                             <mat-select [ngModel]="labelColumn()" (ngModelChange)="labelColumn.set($event)" data-testid="label-column-select">
                                 <mat-option *ngFor="let col of resultColumns()" [value]="col">
                                     {{ col }}
@@ -94,7 +91,7 @@ <h3>Chart Configuration</h3>
                         </mat-form-field>
 
                         <mat-form-field appearance="outline" class="chart-config-field" *ngIf="showLabelTypeOption()">
-                            <mat-label>Label Type</mat-label>
+                            <mat-label>Label type</mat-label>
                             <mat-select [ngModel]="labelType()" (ngModelChange)="labelType.set($event)" data-testid="label-type-select">
                                 <mat-option *ngFor="let type of labelTypes" [value]="type.value">
                                     {{ type.label }}
@@ -103,7 +100,7 @@ <h3>Chart Configuration</h3>
                         </mat-form-field>
 
                         <mat-form-field appearance="outline" class="chart-config-field">
-                            <mat-label>Value Column</mat-label>
+                            <mat-label>Value column</mat-label>
                             <mat-select [ngModel]="valueColumn()" (ngModelChange)="valueColumn.set($event)" data-testid="value-column-select">
                                 <mat-option *ngFor="let col of resultColumns()" [value]="col">
                                     {{ col }}
@@ -115,7 +112,7 @@ <h3>Chart Configuration</h3>
 
                 <div class="preview-section">
                     <div class="section-header">
-                        <h3>Chart Preview</h3>
+                        <h3>Chart preview</h3>
                     </div>
 
                     <div class="chart-container" *ngIf="hasChartData()">
@@ -137,7 +134,7 @@ <h3>Chart Preview</h3>
 
         <div class="results-section" *ngIf="showResults() && testResults().length > 0">
             <div class="section-header">
-                <h3>Query Results ({{ testResults().length }} rows)</h3>
+                <h3>Query results ({{ testResults().length }} rows)</h3>
             </div>
             <div class="results-table-container">
                 <table mat-table [dataSource]="testResults()" class="results-table mat-elevation-z1">
@@ -158,18 +155,17 @@ <h3>Query Results ({{ testResults().length }} rows)</h3>
         </div>
     </div>
 
-    <div class="actions" *ngIf="!loading()">
-        <button mat-button (click)="cancel()" data-testid="cancel-button">
-            Cancel
-        </button>
-        <button mat-flat-button color="primary"
-            (click)="saveQuery()"
-            [disabled]="!canSave()"
-            data-testid="save-query-button">
-            <mat-spinner *ngIf="saving()" diameter="18"></mat-spinner>
-            {{ saving() ? 'Saving...' : (isEditMode() ? 'Update Query' : 'Save Query') }}
-        </button>
-    </div>
+        </div>
+
+        <div class="actions" *ngIf="!loading()">
+            <a mat-stroked-button [routerLink]="['/charts', connectionId()]" data-testid="cancel-button">Back</a>
+            <button mat-flat-button color="primary"
+                (click)="saveQuery()"
+                [disabled]="!canSave()"
+                data-testid="save-query-button">
+                <mat-spinner *ngIf="saving()" diameter="18"></mat-spinner>
+                {{ saving() ? 'Saving...' : (isEditMode() ? 'Update query' : 'Save query') }}
+            </button>
         </div>
     </div>
 </div>

frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts

@@ -247,13 +247,6 @@ describe('ChartEditComponent', () => {
 		});
 	});
 
-	describe('cancel', () => {
-		it('should navigate to charts list', () => {
-			component.cancel();
-			expect(router.navigate).toHaveBeenCalledWith(['/charts', 'conn-1']);
-		});
-	});
-
 	describe('onCodeChange', () => {
 		it('should update queryText', () => {
 			const testable = component as ChartEditComponentTestable;

frontend/src/app/components/charts/chart-edit/chart-edit.component.ts

@@ -259,7 +259,4 @@ export class ChartEditComponent implements OnInit {
 		}
 	}
 
-	cancel(): void {
-		this.router.navigate(['/charts', this.connectionId()]);
-	}
 }

frontend/src/app/components/charts/charts-list/charts-list.component.css

@@ -1,6 +1,15 @@
+:host {
+	display: block;
+	height: calc(100vh - 44px);
+	margin-bottom: -60px;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+}
+
 .charts-layout {
 	display: flex;
-	height: calc(100vh - 64px);
+	height: 100%;
 }
 
 .charts-main {
@@ -70,6 +79,17 @@
 
 .widgets-table tr.mat-mdc-row {
 	height: 64px;
+	cursor: pointer;
+}
+
+.widgets-table tr.mat-mdc-row:hover {
+	background-color: rgba(0, 0, 0, 0.04);
+}
+
+@media (prefers-color-scheme: dark) {
+	.widgets-table tr.mat-mdc-row:hover {
+		background-color: rgba(255, 255, 255, 0.04);
+	}
 }
 
 .widgets-table th.mat-mdc-header-cell {
@@ -98,7 +118,6 @@
 	justify-content: center;
 	width: 56px;
 	height: 56px;
-	text-decoration: none;
 	overflow: hidden;
 }
 
@@ -107,21 +126,9 @@
 	height: 40px;
 }
 
-/* Name Link */
-.widget-name-link {
+/* Name Cell */
+.widget-name-cell {
 	font-weight: 500;
-	color: inherit;
-	text-decoration: none;
-}
-
-.widget-name-link:hover {
-	color: #673ab7;
-}
-
-@media (prefers-color-scheme: dark) {
-	.widget-name-link:hover {
-		color: #b388ff;
-	}
 }
 
 /* Description Cell */
@@ -212,11 +219,11 @@
 }
 
 .delete-action {
-	color: #c62828;
+	color: var(--color-warnPalette-500);
 }
 
 @media (prefers-color-scheme: dark) {
 	.delete-action {
-		color: #ef5350;
+		color: var(--color-warnDarkPalette-500);
 	}
 }