synapse-react-client 2.0.59 → 2.0.60

package/dist/style/abstracts/_mixins.scss

@@ -53,7 +53,8 @@
   thead:first-child > tr:first-child > th {
     padding: 10px 6px 5px 7px;
     border: 1px solid #dddddf;
-    color: #515359;
+    background-color: map.get(SRC.$colors, 'gray-200');
+    color: map.get(SRC.$colors, 'gray-800');
     span {
       display: inline-block;
       float: right;
@@ -64,6 +65,28 @@
   }
 }
 
+@mixin sticky-column() {
+  border-collapse: separate;
+  .stickyColumn {
+    right: 0;
+    position: sticky;
+    z-index: 800;
+  }
+  // fix colors (icons, and set the cell background color to be opaque).
+  thead .stickyColumn {
+    text-align: center;
+  }
+  tbody tr > td.stickyColumn {
+    border-left: 1px solid map.get(SRC.$colors, 'gray-400');
+  }
+  tbody tr:nth-of-type(even) > .stickyColumn {
+    background-color: white;
+  }
+  tbody tr:nth-of-type(odd) > .stickyColumn {
+    background-color: #FBFBFC;
+  }
+}
+
 @mixin underline-tabs(
   $active-color: SRC.$secondary-action-color,
   $inactive-color: lightgray
@@ -108,6 +131,14 @@ $link-underline-color-default: adjust-color(
   $lightness: 40%
 ) !default;
 
+@mixin disabled() {
+  color: map.get(SRC.$colors, 'gray-600');
+  &:hover {
+    border-bottom: 1px solid $link-underline-color-default;
+    cursor: default;
+  }
+}
+
 // Core link styles across the portal main area.
 @mixin highlightLink() {
   color: SRC.$primary-action-color;
@@ -119,6 +150,9 @@ $link-underline-color-default: adjust-color(
     border-bottom: 2px solid map.get(SRC.$primary-color-palette, 700);
     margin-bottom: -1px;
   }
+  &.disabled {
+    @include disabled;
+  }
 }
 
 @mixin normalLink() {
@@ -131,6 +165,9 @@ $link-underline-color-default: adjust-color(
     border-bottom: 2px solid map.get(SRC.$primary-color-palette, 700);
     margin-bottom: 0px;
   }
+  &.disabled {
+    @include disabled;
+  }
 }
 
 @mixin ignoreLink() {
@@ -143,4 +180,7 @@ $link-underline-color-default: adjust-color(
     border-bottom: unset;
     margin-bottom: unset;
   }
+  &.disabled {
+    @include disabled;
+  }
 }

package/dist/style/abstracts/_variables.scss

@@ -47,10 +47,10 @@ $bootstrap-4-danger-bg: #f2dede !default;
 $bootstrap-4-danger-text-color: rgb(102, 102, 102) !default;
 $space-unit: 2.1rem;
 
-$green-affirmative: #35bf7d !default;
-$yellow-warning: #f0dc26 !default;
+$green-affirmative: map.get($colors, 'success') !default;
+$yellow-warning: map.get($colors, 'warning') !default;
 $red-delete: $red-error2 !default;
-$red-required: #c94281 !default;
+$red-required: map.get($colors, 'error') !default;
 
 $box-shadow-med: 0 1px 3px rgba(0, 0, 0, 0.5);
 $box-shadow-soft: 0 3px 10px rgba(93, 105, 171, 0.1);

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

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/_popover.scss

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