fix(agora): float download button and modal-link right (AG-1658), round buttons (AG-1701), fix icons, style dropdowns

apps/agora/app/src/app/myPrimeNGPreset.ts

@@ -4074,11 +4074,11 @@ export const MyPreset = definePreset(Lara, {
         paddingY: '{form.field.padding.y}',
         borderRadius: '{form.field.border.radius}',
         focusRing: {
-          width: '{form.field.focus.ring.width}',
-          style: '{form.field.focus.ring.style}',
-          color: '{form.field.focus.ring.color}',
-          offset: '{form.field.focus.ring.offset}',
-          shadow: '{form.field.focus.ring.shadow}',
+          width: '0',
+          style: 'none',
+          color: 'transparent',
+          offset: '0',
+          shadow: 'none',
         },
         transitionDuration: '{form.field.transition.duration}',
         sm: {

libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.html

@@ -28,12 +28,12 @@
     <div>
       @if (activePane > 0) {
         <button class="gct-how-to-panel-previous" (click)="previous()">
-          <i class="fa-solid fa-angle-left"></i> Back
+          <fa-icon [icon]="faAngleLeft"></fa-icon> Back
         </button>
       }
       @if (activePane !== panes.length - 1) {
         <button class="gct-how-to-panel-next" (click)="next()">
-          Next <i class="fa-solid fa-angle-right"></i>
+          Next <fa-icon [icon]="faAngleRight"></fa-icon>
         </button>
       }
       @if (activePane === panes.length - 1) {

libs/agora/gene-comparison-tool/src/lib/components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component.ts

@@ -1,14 +1,16 @@
 // -------------------------------------------------------------------------- //
 // External
 // -------------------------------------------------------------------------- //
+import { CommonModule } from '@angular/common';
 import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { CookieService } from 'ngx-cookie-service';
+import { FormsModule } from '@angular/forms';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import { LoadingIconComponent } from '@sagebionetworks/agora/shared';
+import { CookieService } from 'ngx-cookie-service';
 import { CheckboxModule } from 'primeng/checkbox';
 import { DialogModule } from 'primeng/dialog';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { LoadingIconComponent } from '@sagebionetworks/agora/shared';
 
 // -------------------------------------------------------------------------- //
 // Internal
@@ -25,7 +27,14 @@ interface Pane {
 // -------------------------------------------------------------------------- //
 @Component({
   selector: 'agora-gene-comparison-tool-how-to-panel',
-  imports: [CommonModule, FormsModule, CheckboxModule, DialogModule, LoadingIconComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    CheckboxModule,
+    DialogModule,
+    FontAwesomeModule,
+    LoadingIconComponent,
+  ],
   providers: [CookieService],
   templateUrl: './gene-comparison-tool-how-to-panel.component.html',
   styleUrls: ['./gene-comparison-tool-how-to-panel.component.scss'],
@@ -38,6 +47,8 @@ export class GeneComparisonToolHowToPanelComponent implements OnInit {
   isActive = false;
   willHide = false;
   willHideCookieName = 'gct_hide_how_to';
+  faAngleRight = faAngleRight;
+  faAngleLeft = faAngleLeft;
 
   panes: Pane[] = [
     {

libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html

@@ -8,9 +8,10 @@
     <div class="gct-header">
       <div class="gct-header-inner">
         <div class="gct-header-left">
-          <button
-            class="btn btn-rounded btn-primary"
+          <p-button
             (click)="filterPanel.toggle()"
+            size="small"
+            rounded="true"
             pTooltip="Filter genes by Nominations, Teams, Cohort, and more"
             tooltipPosition="right"
             tooltipStyleClass="tooltip"
@@ -28,21 +29,23 @@
               />
             </svg>
             Filter Genes
-          </button>
+          </p-button>
         </div>
         <div class="gct-header-middle">
           <h1 class="gct-heading h2">Gene Comparison Tool</h1>
         </div>
         <div class="gct-header-right">
-          <button
-            class="btn btn-rounded btn-outlined-primary"
+          <p-button
+            size="small"
+            rounded="true"
+            variant="outlined"
             (click)="copyUrl()"
             pTooltip="Copy the URL that captures the table's current filters, sorting, and pinned genes"
             tooltipPosition="left"
             tooltipStyleClass="tooltip"
           >
             Share URL
-          </button>
+          </p-button>
         </div>
       </div>
     </div>
@@ -103,11 +106,11 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
               <div class="gct-controls-right-top">
                 <div class="gct-category-selector">
                   <div>
-                    <p-dropdown
+                    <p-select
                       [options]="categories"
                       [(ngModel)]="category"
                       (onChange)="onCategoryChange()"
-                    ></p-dropdown>
+                    ></p-select>
                   </div>
                   <div>
                     <agora-overlay-panel-link
@@ -224,12 +227,12 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
               <div class="gct-controls-right-bottom">
                 <div class="gct-filter-label">{{ subCategoryLabel }}</div>
                 <div class="gct-sub-category-selector">
-                  <p-dropdown
+                  <p-select
                     id="subCategory"
                     [options]="subCategories"
                     [(ngModel)]="subCategory"
                     (onChange)="onSubCategoryChange()"
-                  ></p-dropdown>
+                  ></p-select>
                 </div>
               </div>
             </div>

libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.scss

@@ -128,28 +128,24 @@
       font-weight: 900;
     }
 
-    .p-dropdown {
+    .p-select {
       padding: 0;
       border: none;
       background-color: transparent;
 
-      .p-dropdown-label {
+      .p-select-label {
         padding-left: 0;
         font-size: 14px;
         font-weight: 400;
         color: var(--color-text);
       }
 
-      .p-dropdown-trigger {
-        margin-left: 8px;
-      }
-
-      .p-dropdown-trigger-icon {
+      .p-select-dropdown-icon {
         font-size: 14px;
         color: var(--color-text);
       }
 
-      .p-dropdown-panel {
+      .p-select-list-container {
         background-color: #fff;
         box-shadow: 0 1px 10px 0 rgb(0 0 0 / 15%);
         border-radius: 5px;
@@ -195,7 +191,7 @@
       }
 
       &:hover {
-        .p-dropdown-trigger-icon {
+        .p-select-dropdown-icon {
           color: var(--color-action-primary);
         }
       }
@@ -226,12 +222,12 @@
       }
     }
 
-    .p-dropdown-label {
+    .p-select-label {
       text-transform: uppercase;
       font-weight: 700 !important;
     }
 
-    .p-dropdown-panel {
+    .p-select-panel {
       ul {
         li {
           span {

libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts

@@ -26,42 +26,44 @@ import {
 import { HelperService } from '@sagebionetworks/agora/services';
 import { cloneDeep } from 'lodash';
 import { FilterService, MessageService, SortEvent } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
 import { Table, TableModule } from 'primeng/table';
 import { TooltipModule } from 'primeng/tooltip';
 import { combineLatest, Subscription } from 'rxjs';
 
-import * as variables from './gene-comparison-tool.variables';
 import * as helpers from './gene-comparison-tool.helpers';
+import * as variables from './gene-comparison-tool.variables';
 
-import { GeneComparisonToolScorePanelComponent as ScorePanelComponent } from './components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component';
 import { GeneComparisonToolDetailsPanelComponent as DetailsPanelComponent } from './components/gene-comparison-tool-details-panel/gene-comparison-tool-details-panel.component';
 import { GeneComparisonToolFilterPanelComponent as FilterPanelComponent } from './components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component';
 import { GeneComparisonToolPinnedGenesModalComponent as PinnedGenesModalComponent } from './components/gene-comparison-tool-pinned-genes-modal/gene-comparison-tool-pinned-genes-modal.component';
+import { GeneComparisonToolScorePanelComponent as ScorePanelComponent } from './components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component';
 
-import { GeneComparisonToolScorePanelComponent } from './components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component';
 import { GeneComparisonToolDetailsPanelComponent } from './components/gene-comparison-tool-details-panel/gene-comparison-tool-details-panel.component';
 import { GeneComparisonToolFilterPanelComponent } from './components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component';
 import { GeneComparisonToolPinnedGenesModalComponent } from './components/gene-comparison-tool-pinned-genes-modal/gene-comparison-tool-pinned-genes-modal.component';
+import { GeneComparisonToolScorePanelComponent } from './components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component';
 
-import { DropdownModule } from 'primeng/dropdown';
+import { FormsModule } from '@angular/forms';
+import { OverlayPanelLinkComponent } from '@sagebionetworks/agora/genes';
+import { LoadingIconComponent, SvgIconComponent } from '@sagebionetworks/agora/shared';
 import { InputSwitchModule } from 'primeng/inputswitch';
 import { OverlayPanelModule } from 'primeng/overlaypanel';
-import { FormsModule } from '@angular/forms';
+import { SelectModule } from 'primeng/select';
+import { GeneComparisonToolFilterListComponent } from './components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component';
 import { GeneComparisonToolHowToPanelComponent } from './components/gene-comparison-tool-how-to-panel/gene-comparison-tool-how-to-panel.component';
 import { GeneComparisonToolLegendPanelComponent } from './components/gene-comparison-tool-legend-panel/gene-comparison-tool-legend-panel.component';
-import { GeneComparisonToolFilterListComponent } from './components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component';
-import { OverlayPanelLinkComponent } from '@sagebionetworks/agora/genes';
-import { LoadingIconComponent, SvgIconComponent } from '@sagebionetworks/agora/shared';
 
 @Component({
   selector: 'agora-gene-comparison-tool',
   imports: [
     CommonModule,
+    ButtonModule,
     FormsModule,
     RouterModule,
     TableModule,
     TooltipModule,
-    DropdownModule,
+    SelectModule,
     InputSwitchModule,
     OverlayPanelLinkComponent,
     OverlayPanelModule,

libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.html

@@ -1,6 +1,6 @@
-<button type="button" class="btn btn-rounded btn-primary" (click)="op.toggle($event)">
+<p-button type="button" rounded="true" size="small" (click)="op.toggle($event)">
   <fa-icon [icon]="downloadIcon"></fa-icon>
-</button>
+</p-button>
 <p-overlayPanel
   #op
   styleClass="download-dom-image-panel"
@@ -11,24 +11,18 @@
     {{ heading }}
   </div>
   <div class="download-dom-image-body">
-    <div *ngFor="let type of types">
-      <p-radioButton
+    <div class="download-dom-image-option" *ngFor="let type of types">
+      <p-radiobutton
         value="{{ type.value }}"
-        inputId="download-radio"
+        inputId="download-radio-{{ type.label }}"
         [(ngModel)]="selectedType"
-      ></p-radioButton>
-      <label for="download-radio">{{ type.label }}</label>
+      ></p-radiobutton>
+      <label for="download-radio-{{ type.label }}">{{ type.label }}</label>
     </div>
     <div>
-      <button
-        pButton
-        type="button"
-        label="Download"
-        class="btn-rounded btn-primary"
-        (click)="download()"
-      >
+      <p-button label="Download" rounded="true" size="small" (click)="download()">
         <fa-icon *ngIf="isLoading" [icon]="spinnerIcon" animation="spin"></fa-icon>
-      </button>
+      </p-button>
       <div *ngIf="error" class="download-dom-image-error">{{ error }}</div>
     </div>
   </div>

libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.scss

@@ -10,6 +10,10 @@
 .download-dom-image-panel {
   margin-top: 5px;
 
+  .download-dom-image-option {
+    display: flex;
+  }
+
   .p-overlaypanel-content {
     width: 290px;
     padding: 25px;

libs/agora/genes/src/lib/components/gene-details/gene-details.component.html

@@ -8,7 +8,7 @@
             class="gene-details-nav-scroll gene-details-nav-scroll-prev"
             (click)="slideNavigation(-1)"
           >
-            <i class="fa-solid fa-angle-left"></i>
+            <fa-icon [icon]="faAngleLeft"></fa-icon>
           </button>
         }
         <div class="gene-details-nav-container">
@@ -54,7 +54,7 @@
             class="gene-details-nav-scroll gene-details-nav-scroll-next"
             (click)="slideNavigation(1)"
           >
-            <i class="fa-solid fa-angle-right"></i>
+            <fa-icon [icon]="faAngleRight"></fa-icon>
           </button>
         }
       </div>

libs/agora/genes/src/lib/components/gene-details/gene-details.component.ts

@@ -1,25 +1,27 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
+import { CommonModule, Location } from '@angular/common';
 import {
-  Component,
-  OnInit,
+  AfterViewChecked,
   AfterViewInit,
+  Component,
   HostListener,
   inject,
-  AfterViewChecked,
+  OnInit,
 } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { CommonModule, Location } from '@angular/common';
 
-import { HelperService } from '@sagebionetworks/agora/services';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { Gene, GenesService } from '@sagebionetworks/agora/api-client-angular';
-import { GeneSoeComponent } from '../gene-soe/gene-soe.component';
-import { GeneHeroComponent } from '../gene-hero/gene-hero.component';
-import { GeneEvidenceRnaComponent } from '../gene-evidence-rna/gene-evidence-rna.component';
-import { GeneResourcesComponent } from '../gene-resources/gene-resources.component';
-import { GeneEvidenceProteomicsComponent } from '../gene-evidence-proteomics/gene-evidence-proteomics.component';
+import { HelperService } from '@sagebionetworks/agora/services';
 import { GeneEvidenceMetabolomicsComponent } from '../gene-evidence-metabolomics/gene-evidence-metabolomics.component';
+import { GeneEvidenceProteomicsComponent } from '../gene-evidence-proteomics/gene-evidence-proteomics.component';
+import { GeneEvidenceRnaComponent } from '../gene-evidence-rna/gene-evidence-rna.component';
 import { ExperimentalValidationComponent } from '../gene-experimental-validation/gene-experimental-validation.component';
+import { GeneHeroComponent } from '../gene-hero/gene-hero.component';
 import { GeneNominationsComponent } from '../gene-nominations/gene-nominations.component';
+import { GeneResourcesComponent } from '../gene-resources/gene-resources.component';
+import { GeneSoeComponent } from '../gene-soe/gene-soe.component';
 
 interface Panel {
   name: string;
@@ -40,6 +42,7 @@ interface Panel {
     ExperimentalValidationComponent,
     GeneNominationsComponent,
     GeneResourcesComponent,
+    FontAwesomeModule,
   ],
   providers: [HelperService, GenesService],
   templateUrl: './gene-details.component.html',
@@ -52,6 +55,9 @@ export class GeneDetailsComponent implements OnInit, AfterViewInit, AfterViewChe
   helperService = inject(HelperService);
   geneService = inject(GenesService);
 
+  faAngleRight = faAngleRight;
+  faAngleLeft = faAngleLeft;
+
   gene: Gene | undefined;
 
   panels: Panel[] = [

libs/agora/genes/src/lib/components/gene-model-selector/gene-model-selector.component.html

@@ -1,9 +1,10 @@
 <div class="gene-model-selector">
-  <p-dropdown
+  <p-select
     [options]="_options"
     optionLabel="name"
     [(ngModel)]="selected"
     (onChange)="_onChange()"
     placeholder="Select a model"
-  ></p-dropdown>
+    fluid="true"
+  ></p-select>
 </div>