Added Accent 2 colour palette and updated blue banner style (#1722)

dockstore · Mar 7, 2023 · f3aaa31 · f3aaa31
1 parent 0007b98
commit f3aaa31
Show file tree

Hide file tree

Showing 23 changed files with 65 additions and 49 deletions.
diff --git a/src/app/container/container.component.html b/src/app/container/container.component.html
@@ -30,14 +30,14 @@
       (tool?.mode === ModeEnum.AUTODETECTQUAYTAGSAUTOMATEDBUILDS || tool?.mode === ModeEnum.AUTODETECTQUAYTAGSWITHMIXED) && !tool?.gitUrl
     "
   >
-    <mat-card class="alert alert-info" role="alert">
+    <mat-card class="alert alert-info mat-elevation-z" role="alert">
       <mat-icon>warning</mat-icon> This Quay.io tool does not have an associated Git repository. Please view the Quay.io repository and add
       a build trigger for a valid Git repository. Once the build has been added, refresh the tool.
     </mat-card>
   </div>
 
   <div class="row m-1" *ngIf="tool?.mode === ModeEnum.HOSTED && tool?.workflowVersions?.length === 0">
-    <mat-card class="alert alert-info" role="alert">
+    <mat-card class="alert alert-info mat-elevation-z" role="alert">
       <mat-icon>warning</mat-icon> Your manually added tool does not have any tags. Go to the versions tab to add one.
     </mat-card>
   </div>
@@ -443,7 +443,7 @@ <h3>DOI</h3>
 </div>
 <ng-template #noVersions>
   <div class="p-3">
-    <mat-card class="alert alert-info p-3" role="alert">
+    <mat-card class="alert alert-info mat-elevation-z p-3" role="alert">
       <mat-icon>info</mat-icon>
       <span *ngIf="tool?.mode === ModeEnum.HOSTED"> To see versions, please add a new version in the Files tab. </span>
       <span *ngIf="tool?.mode === ModeEnum.MANUALIMAGEPATH"> To see versions, click the Add Tag button below. </span>

diff --git a/src/app/container/files/files.component.html b/src/app/container/files/files.component.html
@@ -50,5 +50,7 @@
 </mat-tab-group>
 
 <div *ngIf="!versions">
-  <mat-card class="alert alert-info" role="alert"> <mat-icon>warning</mat-icon> No files will be shown for invalid versions. </mat-card>
+  <mat-card class="alert alert-info mat-elevation-z" role="alert">
+    <mat-icon>warning</mat-icon> No files will be shown for invalid versions.
+  </mat-card>
 </div>
diff --git a/src/app/home-page/new-dashboard/new-dashboard.component.html b/src/app/home-page/new-dashboard/new-dashboard.component.html
@@ -4,7 +4,7 @@
   <div fxFlex="calc(100vw - 11rem)">
     <app-header>My Dockstore: Dashboard</app-header>
     <div fxLayout="column" fxLayoutAlign="start start" fxLayoutGap="2.5rem" class="p-4">
-      <mat-card class="alert alert-info mx-1 w-100" role="alert"> Major Release: TODO</mat-card>
+      <mat-card class="alert alert-info mat-elevation-z mx-1 w-100" role="alert"> Major Release: TODO</mat-card>
       <div fxFlex fxLayout fxLayout.lt-md="column" fxLayoutGap="2.5rem" class="w-100">
         <app-entry-box fxFlex="33" fxFlex.lt-md="100" class="entry-holder" entryType="WORKFLOW"></app-entry-box>
         <app-entry-box fxFlex="33" fxFlex.lt-md="100" class="entry-holder" entryType="TOOL"></app-entry-box>

diff --git a/src/app/home-page/recent-events/recent-events.component.html b/src/app/home-page/recent-events/recent-events.component.html
@@ -1,6 +1,6 @@
 <app-loading [loading]="loading$ | async">
   <div *ngIf="noEvents$ | async">
-    <mat-card class="alert alert-info mx-1" role="alert">
+    <mat-card class="alert alert-info mat-elevation-z mx-1" role="alert">
       <mat-icon>info</mat-icon> No events found. Star entries or organizations to see events for them. Read
       <a [href]="starringDocUrl" target="_blank" rel="noopener noreferrer">Starring Tools and Workflows</a>
       to learn how to star entries.

diff --git a/src/app/loginComponents/requests/requests.component.html b/src/app/loginComponents/requests/requests.component.html
@@ -7,7 +7,7 @@
   <div *ngIf="(isAdmin$ | async) || (isCurator$ | async)" class="p-3">
     <h3>Curator Requests</h3>
     <p>As a curator/admin, you can approve and reject organization requests.</p>
-    <mat-card class="alert alert-info" role="alert" *ngIf="(allPendingOrganizations$ | async)?.length === 0">
+    <mat-card class="alert alert-info mat-elevation-z" role="alert" *ngIf="(allPendingOrganizations$ | async)?.length === 0">
       <mat-icon>info</mat-icon> There are no organizations waiting for approval.
     </mat-card>
 
@@ -69,7 +69,7 @@ <h3>Curator Requests</h3>
   <div class="p-3">
     <h3>My Requests</h3>
     <p>The following organizations that you have created are pending approval.</p>
-    <mat-card class="alert alert-info" role="alert" *ngIf="(myPendingOrganizationRequests$ | async)?.length === 0">
+    <mat-card class="alert alert-info mat-elevation-z" role="alert" *ngIf="(myPendingOrganizationRequests$ | async)?.length === 0">
       <mat-icon>info</mat-icon> You have no organizations pending approval.
     </mat-card>
 
@@ -102,7 +102,7 @@ <h3>My Requests</h3>
     </div>
 
     <p class="pt-2">The following organizations that you have created are rejected.</p>
-    <mat-card class="alert alert-info" role="alert" *ngIf="(myRejectedOrganizationRequests$ | async)?.length === 0">
+    <mat-card class="alert alert-info mat-elevation-z" role="alert" *ngIf="(myRejectedOrganizationRequests$ | async)?.length === 0">
       <mat-icon>info</mat-icon> You have no rejected organizations.
     </mat-card>
     <div fxLayout="column" fxLayoutGap="32px">
@@ -150,7 +150,7 @@ <h3>My Requests</h3>
   <div class="p-3">
     <h3>Organization Invites</h3>
     <p>Accept and decline invitations to join organizations.</p>
-    <mat-card class="alert alert-info" role="alert" *ngIf="(myOrganizationInvites$ | async)?.length === 0">
+    <mat-card class="alert alert-info mat-elevation-z" role="alert" *ngIf="(myOrganizationInvites$ | async)?.length === 0">
       <mat-icon>info</mat-icon> You have no pending organization invites.
     </mat-card>
 

diff --git a/src/app/mytools/my-tool/my-tool.component.html b/src/app/mytools/my-tool/my-tool.component.html
@@ -83,7 +83,7 @@
             "
           >
             <div fxFlex>
-              <mat-card class="alert alert-info" role="alert">
+              <mat-card class="alert alert-info mat-elevation-z" role="alert">
                 <p>
                   <mat-icon>info</mat-icon>
                   There are currently no tools registered under this account, to add your first tool, do one of the following:

diff --git a/src/app/myworkflows/my-workflow/my-workflow.component.html b/src/app/myworkflows/my-workflow/my-workflow.component.html
@@ -145,7 +145,7 @@ <h3>Shared with me</h3>
             fxLayout
           >
             <div fxFlex>
-              <mat-card class="alert alert-info" role="alert">
+              <mat-card class="alert alert-info mat-elevation-z" role="alert">
                 <p>
                   <mat-icon>info</mat-icon>
                   There are currently no {{ entryType$ | async }}s registered under this account. To add your first

diff --git a/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.html b/src/app/myworkflows/sidebar-accordion/github-apps-logs/github-apps-logs.component.html
@@ -4,7 +4,7 @@ <h1 mat-dialog-title>GitHub App Logs</h1>
     <mat-card *ngIf="showContent === 'error'" class="alert alert-warning mat-elevation-z" role="alert">
       <mat-icon class="alert-warning-icon">warning</mat-icon> There were problems retrieving GitHub App logs for this organization.
     </mat-card>
-    <mat-card *ngIf="showContent === 'empty'" class="alert alert-info" role="alert">
+    <mat-card *ngIf="showContent === 'empty'" class="alert alert-info mat-elevation-z" role="alert">
       <mat-icon>warning</mat-icon> There are no GitHub App logs for this organization.
     </mat-card>
     <!-- *ngIf doesn't work with the sorting implementation, using hidden for now -->

diff --git a/src/app/organizations/collection/add-entry/add-entry.component.html b/src/app/organizations/collection/add-entry/add-entry.component.html
@@ -19,7 +19,7 @@ <h1 mat-dialog-title>Add to collection</h1>
     <div fxLayout="column">
       <div fxFlex *ngIf="memberships$ | async as memberships">
         <ng-template #noMemberships>
-          <mat-card class="alert alert-info" role="alert">
+          <mat-card class="alert alert-info mat-elevation-z" role="alert">
             <mat-icon>info</mat-icon> You must be part of an organization to add to a collection
           </mat-card>
         </ng-template>
@@ -39,7 +39,7 @@ <h1 mat-dialog-title>Add to collection</h1>
       </div>
       <div fxFlex *ngIf="selectedOrganizationId && collections$ | async as collections">
         <ng-template #noCollections>
-          <mat-card class="alert alert-info" role="alert">
+          <mat-card class="alert alert-info mat-elevation-z" role="alert">
             <mat-icon>info</mat-icon> The selected organization has no collections that can be added
           </mat-card>
         </ng-template>

diff --git a/src/app/organizations/collection/collection.component.html b/src/app/organizations/collection/collection.component.html
@@ -31,7 +31,7 @@
 <app-loading [loading]="(loadingCollection$ | async) || (loadingOrganization$ | async)">
   <div *ngIf="organization$ | async as organization">
     <div class="container mb-5" *ngIf="collection$ | async as collection" fxLayout="column">
-      <mat-card fxFlex class="my-3 alert alert-info" *ngIf="organization?.status === pendingEnum">
+      <mat-card fxFlex class="my-3 alert alert-info mat-elevation-z" *ngIf="organization?.status === pendingEnum">
         <mat-icon>info</mat-icon> This collection is part of an organization that is pending approval by a Dockstore curator.
         <span *ngIf="(isAdmin$ | async) || (isCurator$ | async); else notAdminOrCurator">
           You can approve/reject this pending organization request on the requests tab of the
@@ -43,7 +43,7 @@
         </ng-template>
       </mat-card>
 
-      <mat-card fxFlex class="my-3 alert alert-info" *ngIf="organization?.status === 'REJECTED'">
+      <mat-card fxFlex class="my-3 alert alert-info mat-elevation-z" *ngIf="organization?.status === 'REJECTED'">
         <mat-icon>info</mat-icon> This collection is part of an organization that has been rejected by a curator. Members can re-request
         approval on the <a [routerLink]="'/accounts'" style="text-decoration: underline">accounts page</a>.
       </mat-card>
@@ -90,7 +90,7 @@ <h2>
           </button>
         </mat-card-actions>
       </div>
-      <mat-card class="alert alert-info" *ngIf="collection?.entries?.length === 0">
+      <mat-card class="alert alert-info mat-elevation-z" *ngIf="collection?.entries?.length === 0">
         <mat-icon>info</mat-icon> This collection has no associated entries. To add an entry, navigate to the public page of the tool or
         workflow you want to add and select `Add to collection`
       </mat-card>

diff --git a/src/app/organizations/collections/collections.component.html b/src/app/organizations/collections/collections.component.html
@@ -26,7 +26,7 @@
 </div>
 <app-loading [loading]="loading$ | async">
   <div *ngIf="(collections$ | async | json) === '{}'; else hasCollections">
-    <mat-card class="alert alert-info mx-1" role="alert"> <mat-icon>info</mat-icon> No collections found. </mat-card>
+    <mat-card class="alert alert-info mat-elevation-z mx-1" role="alert"> <mat-icon>info</mat-icon> No collections found. </mat-card>
   </div>
   <ng-template #hasCollections>
     <div class="pt-2" fxLayout="column" fxLayoutGap="1rem">

diff --git a/src/app/organizations/organization/organization.component.html b/src/app/organizations/organization/organization.component.html
@@ -37,7 +37,7 @@
   <!-- Organization header -->
   <div class="container mb-5" *ngIf="organization$ | async as org" fxLayout="column" fxLayoutGap="10px">
     <app-json-ld [json]="schema$ | async" class="m-0"></app-json-ld>
-    <mat-card fxFlex class="my-3 alert alert-info" *ngIf="org?.status === 'PENDING'">
+    <mat-card fxFlex class="my-3 alert alert-info mat-elevation-z" *ngIf="org?.status === 'PENDING'">
       <mat-icon>info</mat-icon> This organization is pending approval by a Dockstore curator.
       <span *ngIf="(isAdmin$ | async) || (isCurator$ | async); else notAdminOrCurator">
         You can approve/reject this pending organization request on the requests tab of the
@@ -49,7 +49,7 @@
       </ng-template>
     </mat-card>
 
-    <mat-card fxFlex class="my-3 alert alert-info" *ngIf="org?.status === 'REJECTED'">
+    <mat-card fxFlex class="my-3 alert alert-info mat-elevation-z" *ngIf="org?.status === 'REJECTED'">
       <mat-icon>info</mat-icon> This organization has been rejected by a curator. Members can re-request approval on the
       <a [routerLink]="'/accounts'" [queryParams]="{ tab: 'requests' }">accounts page</a>.
     </mat-card>

diff --git a/src/app/organizations/organizations/organizations.component.html b/src/app/organizations/organizations/organizations.component.html
@@ -127,6 +127,6 @@ <h5 class="text-break">{{ org.displayName }}</h5>
     ></mat-paginator>
   </div>
   <ng-template #noOrganizationsFound>
-    <mat-card class="alert alert-info"><mat-icon class="pr-5">info</mat-icon>No organizations found</mat-card>
+    <mat-card class="alert alert-info mat-elevation-z"><mat-icon class="pr-5">info</mat-icon>No organizations found</mat-card>
   </ng-template>
 </div>
diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html
@@ -247,7 +247,7 @@
         </mat-card>
 
         <div *ngIf="searchService.hasSearchText(advancedSearchObject, searchTerm, hits) || searchService.hasFilters(filters)">
-          <mat-card class="alert alert-info text-break">
+          <mat-card class="alert alert-info mat-elevation-z text-break">
             <button
               data-cy="share_button"
               mat-raised-button
@@ -302,7 +302,7 @@
           </mat-card>
         </div>
         <mat-card
-          class="alert alert-info"
+          class="alert alert-info mat-elevation-z"
           *ngIf="hits?.length > query_size - 1 && searchService.hasNarrowedSearch(advancedSearchObject, searchTerm, hits, filters)"
         >
           <p>

diff --git a/src/app/shared/code-editor-list/code-editor-list.component.html b/src/app/shared/code-editor-list/code-editor-list.component.html
@@ -1,5 +1,5 @@
 <div>
-  <mat-card class="alert alert-info" role="alert" *ngIf="sourcefiles?.length === 0"> No files exist. </mat-card>
+  <mat-card class="alert alert-info mat-elevation-z" role="alert" *ngIf="sourcefiles?.length === 0"> No files exist. </mat-card>
   <div *ngFor="let sourcefile of sourcefiles; let i = index" style="margin-top: 10px; margin-bottom: 10px">
     <div *ngIf="sourcefile?.content !== null && showSourcefile(sourcefile?.type)">
       <mat-toolbar color="primary">

diff --git a/src/app/stargazers/stargazers.component.html b/src/app/stargazers/stargazers.component.html
@@ -14,7 +14,7 @@
   ~    limitations under the License.
   -->
 
-<mat-card class="alert alert-info" data-cy="noStargazers" role="alert" *ngIf="starGazers?.length === 0">
+<mat-card class="alert alert-info mat-elevation-z" data-cy="noStargazers" role="alert" *ngIf="starGazers?.length === 0">
   <mat-card-header>
     <mat-card-title>Stargazers</mat-card-title>
   </mat-card-header>

diff --git a/src/app/starredentries/starredentries.component.html b/src/app/starredentries/starredentries.component.html
@@ -46,8 +46,7 @@
               <span class="tab-display">{{ starredWorkflows?.length }}</span>
             </div>
           </ng-template>
-          <mat-card class="alert alert-info starred-header" role="alert" *ngIf="starredWorkflows?.length === 0">
-            <mat-icon>warning</mat-icon>
+          <mat-card class="alert alert-info mat-elevation-z starred-header" role="alert" *ngIf="starredWorkflows?.length === 0">
             You have no starred workflows.
           </mat-card>
           <div fxLayout="column" fxLayoutGap="1rem" class="mb-2 mx-1">
@@ -66,8 +65,7 @@
             </div>
           </ng-template>
           <div>
-            <mat-card class="alert alert-info starred-header" role="alert" *ngIf="starredTools?.length === 0">
-              <mat-icon>warning</mat-icon>
+            <mat-card class="alert alert-info mat-elevation-z starred-header" role="alert" *ngIf="starredTools?.length === 0">
               You have no starred tools.
             </mat-card>
             <div fxLayout="column" fxLayoutGap="1rem" class="mb-2 mx-1">
@@ -191,10 +189,7 @@ <h4>{{ tool?.namespace + '/' + tool?.name + (tool?.toolname ? '/' + tool?.toolna
               <span class="tab-display">0</span>
             </div>
           </ng-template>
-          <mat-card class="alert alert-info starred-header" role="alert">
-            <mat-icon>warning</mat-icon>
-            You have no starred services.
-          </mat-card>
+          <mat-card class="alert alert-info mat-elevation-z starred-header" role="alert"> You have no starred services. </mat-card>
         </mat-tab>
 
         <mat-tab>
@@ -205,8 +200,7 @@ <h4>{{ tool?.namespace + '/' + tool?.name + (tool?.toolname ? '/' + tool?.toolna
               <span class="tab-display">{{ starredOrganizations?.length }}</span>
             </div>
           </ng-template>
-          <mat-card class="alert alert-info starred-header" role="alert" *ngIf="starredOrganizations?.length === 0">
-            <mat-icon>warning</mat-icon>
+          <mat-card class="alert alert-info mat-elevation-z starred-header" role="alert" *ngIf="starredOrganizations?.length === 0">
             You have no starred organizations.
           </mat-card>
           <div *ngIf="starredOrganizations?.length > 0">

diff --git a/src/app/workflow/info-tab/info-tab.component.html b/src/app/workflow/info-tab/info-tab.component.html
@@ -15,7 +15,7 @@
   -->
 <div class="p-3">
   <mat-card
-    class="alert alert-info"
+    class="alert alert-info mat-elevation-z"
     *ngIf="
       !isPublic &&
       workflow?.source_control_provider === 'GITHUB' &&

diff --git a/src/app/workflow/launch/launch.component.html b/src/app/workflow/launch/launch.component.html
@@ -27,7 +27,7 @@
     </div>
     <div *ngIf="_selectedVersion.valid" fxLayout="column" fxLayoutGap="1rem">
       <div fxLayout="column" fxLayoutGap="1rem">
-        <mat-card *ngIf="entryType === EntryType.Tool" class="alert alert-info" role="alert">
+        <mat-card *ngIf="entryType === EntryType.Tool" class="alert alert-info mat-elevation-z" role="alert">
           <mat-icon>info</mat-icon> GitHub App Tools are launched in workflow mode with the Dockstore CLI
         </mat-card>
         <mat-card *ngIf="(isNFL$ | async) === false" matTooltip="Commands for creating a runtime JSON template">

diff --git a/src/app/workflow/workflow-file-editor/workflow-file-editor.component.html b/src/app/workflow/workflow-file-editor/workflow-file-editor.component.html
@@ -40,7 +40,7 @@
         [entryType]="'workflow'"
         [entrypath]="entrypath"
       ></app-code-editor-list>
-      <mat-card class="alert alert-info" role="alert" *ngIf="isNFL$ | async">
+      <mat-card class="alert alert-info mat-elevation-z" role="alert" *ngIf="isNFL$ | async">
         <mat-icon>warning</mat-icon>
         &nbsp; Nextflow does not have the concept of a test parameter file.
       </mat-card>

diff --git a/src/app/workflow/workflow.component.html b/src/app/workflow/workflow.component.html
@@ -277,19 +277,19 @@ <h3>
             </div>
             <ng-template #noVersionsVersionTab>
               <div [ngSwitch]="workflow.mode" class="p-3">
-                <mat-card *ngSwitchCase="WorkflowModel.ModeEnum.HOSTED" class="alert alert-info" role="alert">
+                <mat-card *ngSwitchCase="WorkflowModel.ModeEnum.HOSTED" class="alert alert-info mat-elevation-z" role="alert">
                   <mat-icon>info</mat-icon> To see versions, please add a new version in the Files tab.
                 </mat-card>
-                <mat-card *ngSwitchCase="WorkflowModel.ModeEnum.STUB" class="alert alert-info" role="alert">
+                <mat-card *ngSwitchCase="WorkflowModel.ModeEnum.STUB" class="alert alert-info mat-elevation-z" role="alert">
                   <mat-icon>info</mat-icon> To see versions, please refresh the workflow.
                 </mat-card>
-                <mat-card *ngSwitchCase="WorkflowModel.ModeEnum.DOCKSTOREYML" class="alert alert-info" role="alert">
+                <mat-card *ngSwitchCase="WorkflowModel.ModeEnum.DOCKSTOREYML" class="alert alert-info mat-elevation-z" role="alert">
                   <mat-icon>info</mat-icon> This {{ entryType }} does not have any versions because there are no GitHub branches or
                   releases/tags with a .dockstore.yml that references this {{ entryType }}. Create a valid .dockstore.yml on GitHub that
                   references this {{ entryType }} to add a new version.
                 </mat-card>
                 <!-- This also handles FULL -->
-                <mat-card *ngSwitchDefault class="alert alert-info" role="alert">
+                <mat-card *ngSwitchDefault class="alert alert-info mat-elevation-z" role="alert">
                   <mat-icon>info</mat-icon> This {{ entryType }} does not have any versions.
                 </mat-card>
               </div>
@@ -306,19 +306,19 @@ <h3>
               </div>
               <ng-template #noVersionsFilesTab>
                 <div [ngSwitch]="workflow.mode" class="p-3">
-                  <mat-card *ngSwitchCase="WorkflowModel.ModeEnum.STUB" class="alert alert-info" role="alert">
+                  <mat-card *ngSwitchCase="WorkflowModel.ModeEnum.STUB" class="alert alert-info mat-elevation-z" role="alert">
                     <mat-icon>info</mat-icon> To see files, please refresh the {{ entryType }}.
                   </mat-card>
                   <div *ngSwitchCase="WorkflowModel.ModeEnum.HOSTED">
                     <ng-container *ngTemplateOutlet="hostedComponent"></ng-container>
                   </div>
-                  <mat-card *ngSwitchCase="WorkflowModel.ModeEnum.DOCKSTOREYML" class="alert alert-info" role="alert">
+                  <mat-card *ngSwitchCase="WorkflowModel.ModeEnum.DOCKSTOREYML" class="alert alert-info mat-elevation-z" role="alert">
                     <mat-icon>info</mat-icon> This {{ entryType }} does not have any versions because there are no GitHub branches or
                     releases/tags with a .dockstore.yml that references this {{ entryType }}. Create a valid .dockstore.yml on GitHub that
                     references this {{ entryType }} to add a new version.
                   </mat-card>
                   <!-- This also handles FULL -->
-                  <mat-card *ngSwitchDefault class="alert alert-info" role="alert">
+                  <mat-card *ngSwitchDefault class="alert alert-info mat-elevation-z" role="alert">
                     <mat-icon>info</mat-icon> This {{ entryType }} does not have any versions.
                   </mat-card>
                 </div>