synapse-react-client 2.0.57 → 2.0.61

package/dist/style/base/_core.scss

@@ -4,6 +4,7 @@
 // from // from SWC.scss and core.scss
 @use '../abstracts/variables' as SRC;
 @use '../abstracts/mixins' as SRC_Mixins;
+@use 'sass:map';
 
 // Fix scrollbar not showing for some people when css set to scroll: auto
 // Ref: https://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar
@@ -1057,22 +1058,22 @@ a.dropdown-item {
   }
 }
 .SRC-success-color {
-  color: #28a745;
+  color: map.get(SRC.$colors, 'success');
 }
 .SRC-success-color-bg {
-  background-color: #28a745;
+  background-color: map.get(SRC.$colors, 'success');
 }
 .SRC-warning-color {
-  color: #e0b603;
+  color: map.get(SRC.$colors, 'warning');
 }
 .SRC-warning-color-bg {
-  background-color: #e0b603;
+  background-color: map.get(SRC.$colors, 'warning');
 }
 .SRC-danger-color {
-  color: #eb5757;
+  color: map.get(SRC.$colors, 'error');
 }
 .SRC-danger-color-bg {
-  background-color: #eb5757;
+  background-color: map.get(SRC.$colors, 'error');
 }
 
 // PORTALS-965: add a max-width to the bootstrap container-fluid class

package/dist/style/bootstrap4_backports/_overrides.scss

@@ -1,4 +1,5 @@
 @use '../abstracts/variables' as SRC;
+@use 'sass:map';
 
 //overrides to bootstrap 4 that are directly applied to Bootstrap 4 class names
 .bootstrap-4-backport {
@@ -61,6 +62,11 @@
       padding-bottom: 0.75rem;
     }
   }
+
+  //Tables
+  .table-striped tbody tr:nth-of-type(odd) {
+    background-color: map.get(SRC.$colors, 'gray-100');
+  }
 }
 
 // Popovers
@@ -81,7 +87,6 @@ html:not(#synapse\.org) {
   .modal-content {
     padding: 5px 30px;
     .modal-header {
-      align-items: center;
       padding: 10px 0px;
       button.close {
         font-size: 28px;

package/dist/style/components/_all.scss

@@ -16,5 +16,6 @@
   './experimental-mode', './user-search-box', './entity-metadata',
   './download-cart-page', './global-alert', './annotations', 'plotlywrapper',
   './synapse-nav-drawer', './favorites-page', './skeletons', './toasts',
-  './user-profile-links', './blocking-loader', './transition', './popover', './featured-tool-card',
-  './row_renderers/observation-card', './subsection-row-renderer';
+  './user-profile-links', './blocking-loader', './transition', './popover',
+  './featured-tool-card', './row_renderers/observation-card',
+  './subsection-row-renderer', './dataset-editor', './fluid-modal';

package/dist/style/components/_dataset-editor.scss

@@ -0,0 +1,75 @@
+@use '../abstracts/variables' as SRC;
+@use '../abstracts/mixins' as SrcMixins;
+@use 'sass:map';
+
+.DatasetEditor {
+  border: 1px solid map.get(SRC.$colors, 'gray-300');
+  .DatasetEditorTopBottomPanel {
+    display: flex;
+    justify-content: flex-end;
+    gap: 7px;
+    width: 100%;
+    height: 70px;
+    background: #f9f9f9;
+    align-items: center;
+    padding: 15px 20px;
+
+    .ItemCount {
+      p {
+        margin-bottom: 0;
+      }
+      margin-right: auto;
+    }
+  }
+  .DatasetEditorTableContainer {
+    width: 100%;
+    overflow-x: auto;
+    .DatasetEditorTable {
+      p {
+        margin-bottom: unset;
+      }
+    }
+  }
+  .DatasetItemsEditorSkeleton {
+    margin: 15px;
+  }
+
+  .NoItemsPlaceholder {
+    height: 350px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    .AddItemsButton {
+      width: 150px;
+      span {
+        margin: 5px;
+      }
+    }
+  }
+
+  select.form-control {
+    margin-bottom: 0px;
+    width: 130px;
+  }
+}
+
+.EntityNameWithIconRenderer {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.EntityErrorRenderer {
+  color: map.get(SRC.$colors, 'warning');
+  svg {
+    font-size: large;
+  }
+}
+
+$table-prefix: DatasetEditorTable;
+$table-font-size: 14px;
+$header-background-color: map.get(SRC.$colors, 'gray-200');
+$row-hovered-background-color: unset;
+$table-padding-left: 5px;
+@import 'node_modules/@sage-bionetworks/react-base-table/es/BaseTable';

package/dist/style/components/_download-cart-page.scss

@@ -86,6 +86,23 @@
     padding: 30px 0px;
     background-color: SRC.$background-color-gray;
   }
+
+  .DownloadListTabContent {
+    .subSectionOverview {
+      display: flex;
+      column-gap: 10px;
+      >* {
+        padding: 0px 50px;
+      }
+      >*:first-child {
+        border-right: 1px solid #D0D4D9; 
+      }
+      .headlineWithHelp {
+        display: flex;
+        column-gap: 10px;
+      }
+    }
+  }
   &__explore-all {
     text-align: center;
     padding-top: 20px;

package/dist/style/components/_download-list-v2.scss

@@ -1,24 +1,65 @@
 @use '../abstracts/variables' as SRC;
 @use '../abstracts/mixins' as SRCMixins;
+@use 'sass:map';
 
-.DownloadListTableV2 {
+table.DownloadListTableV2 {
   white-space: pre;
-  .ineligibileIcon {
-    padding-left: 15px;
-    padding-right: 5px;
-  }
   .eligibileIcon {
-    padding-right: 5px;
+    color: map.get(SRC.$colors, 'gray-800');
     svg {
       width: 15px;
     }
   }
-  tbody>tr>td:first-child { // file name column
+  .ineligibileIcon {
+    color: map.get(SRC.$colors, 'warning');
+    svg {
+      width: 18px;
+    }
+  }
+  .ineligibleForPackagingTd {
+    background-color: #F9F5E7;
+  }
+  thead:first-child > tr:first-child {
+    > th {
+      min-width: 120px;
+      &:first-child {
+        border-right: none;  
+        min-width: unset;
+      }
+      &:nth-child(2) {
+        border-left: none;
+      }
+    }
+  }
+  tbody tr > td:first-child { // file name column
     overflow-x: hidden;
     max-width: 310px;
     text-overflow: ellipsis;
   }
-  @include SRCMixins.sortable-table()
+
+  // Floating (sticky) Action column
+  @include SRCMixins.sticky-column();
+
+  // Download List Table specific styles to the sticky column:
+  tbody .stickyColumn .actionsContainer {
+    color: map.get(SRC.$colors, 'gray-700'); // make all icons gray-700
+    display: grid;
+    grid-template-columns: repeat(2, 45px); // TODO: change to 3 once we have the programmatic access item
+    * {
+      justify-self: center;
+    }
+    .downloadItem {
+      grid-column: 1 / span 1;
+    }
+    .removeItem {
+      grid-column: 2 / span 1;
+    }
+    // .programmaticAccessItem {
+    //   grid-column: 3 / span 1;
+    // }
+  }
+
+  @include SRCMixins.sortable-table();
 }
 .sort {
   padding-left: 5px;
@@ -26,12 +67,13 @@
 .DownloadDetailsV2 {
   font-weight: bold;
   .item {
-    margin-right: 15px;
+    margin-right: 35px;
     svg {
       margin-right: 5px;
+      margin-top: -4px;
     }
     #icon-packagableFile svg {
-      margin-bottom: -5px;
+      margin-top: 0px;
     }
   }
 }

package/dist/style/components/_fluid-modal.scss

@@ -0,0 +1,42 @@
+// See SWC-5801
+
+.FluidModal {
+  .modal-dialog {
+    width: auto;
+    max-width: 90vw;
+    @media (max-height: 500px) {
+      margin: 3vh auto;
+      margin-bottom: 0px;
+    }
+    .modal-content {
+      border-radius: 0px;
+      min-height: 300px;
+      .modal-header {
+        min-height: 50px;
+        max-height: 65px;
+        height: 8vh;
+        margin: 15px 0px 5px;
+      }
+
+      .modal-body {
+        max-height: 70vh;
+
+        @media (max-height: 600px) {
+          max-height: 65vh;
+        }
+
+        overflow-y: auto;
+      }
+      .modal-footer {
+        min-height: 45px;
+        max-height: 60px;
+        height: 6vh;
+        margin-bottom: 15px;
+
+        .btn {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}

package/dist/style/components/_popover.scss

@@ -56,4 +56,5 @@
 
 .PopoverContainer {
   display: inline-block;
+  cursor: pointer;
 }