Make styles closer to spec

hubmapconsortium · Oct 2, 2024 · 6422ebf · 6422ebf
1 parent 7a7cc08
commit 6422ebf
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 35 deletions.
diff --git a/apps/cde-ui/src/app/components/file-upload/file-upload.component.scss b/apps/cde-ui/src/app/components/file-upload/file-upload.component.scss
@@ -52,10 +52,4 @@
       font-size: 2rem;
     }
   }
-
-  .use-template {
-    &.loaded {
-      margin-top: 1.5rem;
-    }
-  }
 }
diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html
@@ -149,11 +149,10 @@ <h2 class="header">
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field hraSelectSize="medium" subscriptSizing="dynamic">
+      <mat-form-field class="cell-type-select" hraSelectSize="medium" subscriptSizing="dynamic">
         <mat-label>Cell Type</mat-label>
         <mat-select
           disableRipple
-          class="mat-body-2"
           formControlName="cellType"
           [panelClass]="['options-container', 'options-container-medium']"
           cdeMarkEmptyFormControl

diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss
@@ -7,13 +7,14 @@
 
   hra-nav-header {
     border-bottom: 1px solid var(--sys-outline);
+    height: 5rem;
   }
 
   ::ng-deep .app-logo .app-description {
-    border-radius: 2px;
+    border-radius: 0.125rem;
     width: fit-content;
-    padding: 0 4px;
-    font: 500 10px/1rem Metropolis !important;
+    padding: 0 0.25rem;
+    font: 500 0.625rem/1rem Metropolis !important;
   }
 
   .content {
@@ -83,7 +84,7 @@
       font-weight: var(--sys-label-large-weight);
       padding-left: 1rem;
       text-align: left;
-      min-width: 216px;
+      min-width: 13.5rem;
       height: 1.5rem;
     }
 
@@ -103,9 +104,10 @@
     width: fit-content;
   }
 
-  // mat-form-field {
-  //   margin: 1rem 0;
-  // }
+  mat-form-field {
+    --mat-form-field-container-height: 3rem;
+    height: 3rem;
+  }
 
   .data-upload {
     display: grid;
@@ -142,6 +144,10 @@
       grid-area: subheader;
       margin-bottom: 1rem;
     }
+
+    .cell-type-select {
+      margin-top: 1.5rem;
+    }
   }
 
   .parameters {
@@ -161,11 +167,13 @@
 
   .metadata {
     display: grid;
+    gap: 2rem;
     column-gap: 1.5rem;
     grid: 'header header';
 
     .header {
       grid-area: header;
+      margin-bottom: 0;
     }
   }
 

diff --git a/...de-ui/src/app/pages/create-visualization-page/create-visualization-page.component.spec.ts b/...de-ui/src/app/pages/create-visualization-page/create-visualization-page.component.spec.ts
@@ -118,7 +118,7 @@ describe('CreateVisualizationPageComponent', () => {
       fixture.autoDetectChanges();
       await new Promise((resolve) => setTimeout(resolve, 50));
       expect(spy).toHaveBeenCalledTimes(0);
-      expect(instance.columnErrorActionMessage).toMatch(/Please select the required column headers: Cell Type/);
+      expect(instance.columnErrorActionMessage).toMatch(/Please select the required column header: Cell Type/);
     });
 
     it('sets nodes', async () => {

diff --git a/...ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss b/...ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss
@@ -1,8 +1,8 @@
 cde-create-visualization-page {
-  .page-nav {
-    .title {
-      color: var(--sys-secondary);
-    }
+  color: var(--sys-secondary);
+
+  hra-nav-header {
+    background-color: var(--sys-surface-container-high) !important;
   }
 
   .app-description {
@@ -12,11 +12,12 @@ cde-create-visualization-page {
 
   .card {
     background-color: var(--sys-surface-container-low);
-  }
 
-  th {
-    color: var(--sys-secondary);
+    .header {
+      --mat-icon-color: var(--sys-secondary);
+    }
   }
+
   td {
     color: var(--sys-primary);
   }

diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts
@@ -24,7 +24,12 @@ import {
 } from '@hra-ui/cde-visualization';
 import { BreadcrumbsComponent } from '@hra-ui/design-system/breadcrumbs';
 import { ButtonModule } from '@hra-ui/design-system/button';
+import { ToggleButtonSizeDirective } from '@hra-ui/design-system/button-toggle';
 import { FooterComponent } from '@hra-ui/design-system/footer';
+import { NavHeaderComponent } from '@hra-ui/design-system/nav-header';
+import { SelectSizeDirective } from '@hra-ui/design-system/select';
+import { StepIndicatorComponent } from '@hra-ui/design-system/step-indicator';
+import { TooltipCardComponent, TooltipContent } from '@hra-ui/design-system/tooltip-card';
 import { ParseError } from 'papaparse';
 
 import { MarkEmptyFormControlDirective } from '../../components/empty-form-control/empty-form-control.directive';
@@ -33,11 +38,6 @@ import { HeaderComponent } from '../../components/header/header.component';
 import { VisualizationDataService } from '../../services/visualization-data-service/visualization-data.service';
 import { validateInteger } from '../../shared/form-validators/is-integer';
 import { OrganEntry } from '../../shared/resolvers/organs/organs.resolver';
-import { StepIndicatorComponent } from '@hra-ui/design-system/step-indicator';
-import { TooltipCardComponent, TooltipContent } from '@hra-ui/design-system/tooltip-card';
-import { ToggleButtonSizeDirective } from '@hra-ui/design-system/button-toggle';
-import { NavHeaderComponent } from '@hra-ui/design-system/nav-header';
-import { SelectSizeDirective } from '@hra-ui/design-system/select';
 
 /** Error when missing required columns in uploaded csv */
 export interface MissingKeyError {
@@ -74,18 +74,18 @@ function optionalValue<T>(): T | null {
     MatSelectModule,
     MatTableModule,
 
+    BreadcrumbsComponent,
+    ButtonModule,
     FileUploadComponent,
     FooterComponent,
     HeaderComponent,
     MarkEmptyFormControlDirective,
+    NavHeaderComponent,
     OverlayModule,
-    ButtonModule,
-    BreadcrumbsComponent,
+    SelectSizeDirective,
     StepIndicatorComponent,
-    TooltipCardComponent,
     ToggleButtonSizeDirective,
-    SelectSizeDirective,
-    NavHeaderComponent,
+    TooltipCardComponent,
   ],
   templateUrl: './create-visualization-page.component.html',
   styleUrl: './create-visualization-page.component.scss',
@@ -180,6 +180,7 @@ export class CreateVisualizationPageComponent {
   /** Tooltip position config */
   readonly tooltipPosition = TOOLTIP_POSITION_BELOW;
 
+  /** Tooltip content */
   readonly tooltips: TooltipContent[][] = [
     [
       {
@@ -286,7 +287,7 @@ export class CreateVisualizationPageComponent {
     const errorColumns = [xError, yError, ctError].filter((e) => !!e);
 
     return errorColumns.length > 0
-      ? `Please select the required column headers: ${[xError, yError, ctError].filter((e) => !!e).join(', ')}`
+      ? `Please select the required column header${errorColumns.length === 1 ? '' : 's'}: ${[xError, yError, ctError].filter((e) => !!e).join(', ')}`
       : undefined;
   }
 
@@ -523,7 +524,7 @@ export class CreateVisualizationPageComponent {
   private formatErrorMessage(error: ExtendedFileLoadError): string {
     switch (error.type) {
       case 'missing-key-error':
-        return `Required columns missing: ${error.keys.join(', ')}`;
+        return `Required column${error.keys.length === 1 ? '' : 's'} missing: ${error.keys.join(', ')}`;
 
       case 'type-error':
         return `Invalid file type: ${error.received}, expected csv`;