synapse-react-client 2.1.21 → 3.0.0

package/dist/style/abstracts/_variables.scss

@@ -38,6 +38,8 @@ $text-color-disabled: #bbbbbc !default;
 $secondary-action-color: #469285 !default;
 $secondary-action-color-dark: #5660e5 !default;
 
+$tertiary-action-color: #F1D285 !default;
+
 $gray-formtext: #515359 !default;
 $gray-regular: #515359 !default;
 $gray-deemphasized: #ababac !default;
@@ -97,6 +99,18 @@ $secondary-color-palette: (
   900: adjust-color($secondary-action-color, $saturation: 24%, $lightness: -18%),
 ) !default;
 
+$tertiary-color-palette: (
+  100: adjust-color($tertiary-action-color, $saturation: -25%, $lightness: 50%),
+  200: adjust-color($tertiary-action-color, $saturation: -13%, $lightness: 20%),
+  300: adjust-color($tertiary-action-color, $saturation: -3%, $lightness: 10%),
+  400: adjust-color($tertiary-action-color, $saturation: -1%, $lightness: 5%),
+  500: $tertiary-action-color,
+  600: adjust-color($tertiary-action-color, $saturation: 5%, $lightness: -4%),
+  700: adjust-color($tertiary-action-color, $saturation: 11%, $lightness: -8%),
+  800: adjust-color($tertiary-action-color, $saturation: 18%, $lightness: -10%),
+  900: adjust-color($tertiary-action-color, $saturation: 24%, $lightness: -18%),
+) !default;
+
 /// Breakpoints map
 /// @prop {String} keys - Keys are identifiers mapped to a given length
 /// @prop {Map} values - Values are actual breakpoints expressed in pixels

package/dist/style/components/_bar-loader.scss

@@ -1,3 +1,6 @@
+@use '../abstracts/variables' as SRC;
+@use 'sass:map';
+
 .bar-loader {
   display: flex;
   justify-content: center;
@@ -5,10 +8,16 @@
   height: 30px;
   width: 100%;
   .bar-background-color {
-    background-color: rgba(49, 95, 124, 0.05);
+    background-color: map.get(SRC.$colors, 'gray-400');
   }
   .bar-color {
-    background-color: #878787;
+    background-color:  map.get(SRC.$tertiary-color-palette, 400);
+  }
+  .MuiLinearProgress-determinate {
+    margin-bottom: 20px;
+    border-radius: 6px;
+    height: 10px;
+    width: 180px;
   }
   > div {
     width: 30%;

package/dist/style/components/_spinner.scss

@@ -11,13 +11,13 @@
   position: relative;
   width: 20px;
   height: 20px;
-  background-image: url('../../assets/logos/logo.svg');
+  background-image: url('https://s3.amazonaws.com/static.synapse.org/images/synapse-logo.svg');
   animation: spinner 1s linear infinite;
   background-size: 20px 20px;
   background-repeat: no-repeat;
 
   &.white {
-    background-image: url('../../assets/logos/logo-white.svg');
+    background-image: url('https://s3.amazonaws.com/static.synapse.org/images/synapse-logo-white.svg');
   }
   + .spinner__text {
     margin-left: 5px;

package/dist/style/components/entity_finder/_tree-node-browse.scss

@@ -5,17 +5,13 @@
 
 .TreeView.BrowseTree {
   .Node.BrowseNode {
-    .NodeContent {
-      grid-template-columns: [toggle] 20px [name] auto;
-      padding: 5px 10px 5px 20px;
-      .ExpandButton {
-        font-size: 15px;
-      }
+    grid-template-columns: [toggle] 20px [name] auto;
+    padding: 0px 10px;
+    .ExpandButton {
+      font-size: 18px;
     }
   }
-  .Node[aria-disabled='false'][aria-selected='false']
-    > .NodeContent
-    > .EntityName {
+  .Node[aria-disabled='false'][aria-selected='false'] > .EntityName {
     @include SrcMixins.normalLink();
     font-weight: normal;
 
@@ -26,7 +22,6 @@
   }
 
   .Node.BrowseNode[aria-disabled='false'][aria-selected='true']
-    > .NodeContent
     > .EntityName
     > span {
     font-weight: bold;

package/dist/style/components/entity_finder/_tree-node-select.scss

@@ -13,37 +13,31 @@
   .Tree {
     .Node.SelectNode {
       border-top: 1px solid white;
-      .NodeContent {
-        grid-template-columns: [toggle] 15px [icon] 27px [name] auto [badge] auto;
-        padding: 16px 20px;
-        .ExpandButton {
-          font-size: large;
-          color: unset;
-        }
+      grid-template-columns: [toggle] 15px [icon] 27px [name] auto [badge] auto;
+      padding: 16px 20px;
+      .ExpandButton {
+        font-size: large;
+        color: unset;
+      }
 
-        .EntityIcon {
-          text-align: center;
-          grid-column: icon / span 1;
-          margin-bottom: 3px;
-        }
+      .EntityIcon {
+        text-align: center;
+        grid-column: icon / span 1;
+        margin-bottom: 3px;
       }
     }
     .Node.SelectNode[aria-selected='true'] {
-      > .NodeContent {
-        background: $-selected-background-color;
-        color: $-selected-color;
-        > .ExpandButton {
-          color: rgb(255, 255, 255);
-        }
+      background: $-selected-background-color;
+      color: $-selected-color;
+      > .ExpandButton {
+        color: rgb(255, 255, 255);
       }
-      > .NodeContent:hover {
+      &:hover {
         @include -hover($-selected-hover-background-color);
       }
     }
   }
-  .Node[aria-disabled='false'] {
-    > .NodeContent:hover {
-      @include -hover();
-    }
+  .Node[aria-disabled='false']:hover {
+    @include -hover();
   }
 }

package/dist/style/components/entity_finder/_tree-view.scss

@@ -21,28 +21,25 @@
     // Other classes may override for specific components
     // See _tree-node-*.scss files
     .Node {
-      .NodeContent {
-        transition: background-color 200ms ease-in;
-        width: 100%;
-        align-items: center;
-        display: inline-grid;
-        // grid-template-columns are defined in `tree-node-browse` and `tree-node-select` files
-        .ExpandButton {
-          grid-column: toggle / span 1;
-          text-align: center;
-          color: SRC.$primary-action-color-active;
-          cursor: pointer;
-        }
-
-        .EntityName {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
+      transition: background-color 200ms ease-in;
+      width: 100%;
+      align-items: center;
+      display: inline-grid;
+      align-items: center;
+      // grid-template-columns are defined in `tree-node-browse` and `tree-node-select` files
+      .ExpandButton {
+        grid-column: toggle / span 1;
+        text-align: center;
+        color: SRC.$primary-action-color-active;
+        cursor: pointer;
       }
 
-      .NodeChildren[aria-hidden='true'] {
-        display: none;
+      .EntityName {
+        grid-column: name / span 1;
+        white-space: nowrap;
+        overflow-y: visible;
+        overflow-x: clip;
+        text-overflow: ellipsis;
       }
     }
 

package/dist/style/main.css

@@ -19078,6 +19078,17 @@ button:hover .SRC-column-light-theme .SRC-light-column {
   padding-top: 10px;
 }
 
+.page-progress button,
+.page-progress button:active,
+.page-progress button:focus,
+.page-progress button:active:focus, .terms-conditions .view-terms a,
+.terms-conditions .view-terms a:active:focus {
+  border: 0;
+  outline: none;
+  box-shadow: none;
+  border-radius: 2px;
+}
+
 .bar-loader {
   display: flex;
   justify-content: center;
@@ -19086,10 +19097,16 @@ button:hover .SRC-column-light-theme .SRC-light-column {
   width: 100%;
 }
 .bar-loader .bar-background-color {
-  background-color: rgba(49, 95, 124, 0.05);
+  background-color: #dfe2e6;
 }
 .bar-loader .bar-color {
-  background-color: #878787;
+  background-color: #f3da9c;
+}
+.bar-loader .MuiLinearProgress-determinate {
+  margin-bottom: 20px;
+  border-radius: 6px;
+  height: 10px;
+  width: 180px;
 }
 .bar-loader > div {
   width: 30%;
@@ -21015,26 +21032,26 @@ button:hover .SRC-column-light-theme .SRC-light-column {
   height: 455px;
   overflow: auto;
 }
-.TreeView .Tree .Node .NodeContent {
+.TreeView .Tree .Node {
   transition: background-color 200ms ease-in;
   width: 100%;
   align-items: center;
   display: inline-grid;
+  align-items: center;
 }
-.TreeView .Tree .Node .NodeContent .ExpandButton {
+.TreeView .Tree .Node .ExpandButton {
   grid-column: toggle/span 1;
   text-align: center;
   color: #0888d8;
   cursor: pointer;
 }
-.TreeView .Tree .Node .NodeContent .EntityName {
+.TreeView .Tree .Node .EntityName {
+  grid-column: name/span 1;
   white-space: nowrap;
-  overflow: hidden;
+  overflow-y: visible;
+  overflow-x: clip;
   text-overflow: ellipsis;
 }
-.TreeView .Tree .Node .NodeChildren[aria-hidden=true] {
-  display: none;
-}
 .TreeView .Tree .Node[aria-disabled=true] {
   opacity: 0.5;
 }
@@ -21190,40 +21207,40 @@ button:hover .SRC-column-light-theme .SRC-light-column {
   background-color: transparent;
 }
 
-.TreeView.BrowseTree .Node.BrowseNode .NodeContent {
+.TreeView.BrowseTree .Node.BrowseNode {
   grid-template-columns: [toggle] 20px [name] auto;
-  padding: 5px 10px 5px 20px;
+  padding: 0px 10px;
 }
-.TreeView.BrowseTree .Node.BrowseNode .NodeContent .ExpandButton {
-  font-size: 15px;
+.TreeView.BrowseTree .Node.BrowseNode .ExpandButton {
+  font-size: 18px;
 }
-.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .NodeContent > .EntityName {
+.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .EntityName {
   color: #407ba0;
   text-decoration: none;
   font-weight: 700;
   letter-spacing: 0.5px;
   font-weight: normal;
 }
-.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .NodeContent > .EntityName:hover {
+.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .EntityName:hover {
   text-decoration: underline;
   text-underline-offset: 4px;
   text-decoration-thickness: 2px;
   text-decoration-color: #2a678d;
 }
-.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .NodeContent > .EntityName.disabled {
+.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .EntityName.disabled {
   color: #aeb5bc;
 }
-.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .NodeContent > .EntityName.disabled:hover {
+.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .EntityName.disabled:hover {
   text-decoration: underline;
   text-underline-offset: 4px;
   text-decoration-thickness: 1px;
   text-decoration-color: #d6d6d6;
   cursor: default;
 }
-.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .NodeContent > .EntityName:hover {
+.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .EntityName:hover {
   text-underline-offset: 2px;
 }
-.TreeView.BrowseTree .Node.BrowseNode[aria-disabled=false][aria-selected=true] > .NodeContent > .EntityName > span {
+.TreeView.BrowseTree .Node.BrowseNode[aria-disabled=false][aria-selected=true] > .EntityName > span {
   font-weight: bold;
 }
 
@@ -21355,31 +21372,29 @@ button:hover .SRC-column-light-theme .SRC-light-column {
 }
 .TreeView.SelectTree .Tree .Node.SelectNode {
   border-top: 1px solid white;
-}
-.TreeView.SelectTree .Tree .Node.SelectNode .NodeContent {
   grid-template-columns: [toggle] 15px [icon] 27px [name] auto [badge] auto;
   padding: 16px 20px;
 }
-.TreeView.SelectTree .Tree .Node.SelectNode .NodeContent .ExpandButton {
+.TreeView.SelectTree .Tree .Node.SelectNode .ExpandButton {
   font-size: large;
   color: unset;
 }
-.TreeView.SelectTree .Tree .Node.SelectNode .NodeContent .EntityIcon {
+.TreeView.SelectTree .Tree .Node.SelectNode .EntityIcon {
   text-align: center;
   grid-column: icon/span 1;
   margin-bottom: 3px;
 }
-.TreeView.SelectTree .Tree .Node.SelectNode[aria-selected=true] > .NodeContent {
+.TreeView.SelectTree .Tree .Node.SelectNode[aria-selected=true] {
   background: #0888d8;
   color: white;
 }
-.TreeView.SelectTree .Tree .Node.SelectNode[aria-selected=true] > .NodeContent > .ExpandButton {
+.TreeView.SelectTree .Tree .Node.SelectNode[aria-selected=true] > .ExpandButton {
   color: white;
 }
-.TreeView.SelectTree .Tree .Node.SelectNode[aria-selected=true] > .NodeContent:hover {
+.TreeView.SelectTree .Tree .Node.SelectNode[aria-selected=true]:hover {
   background-color: #0778bf;
 }
-.TreeView.SelectTree .Node[aria-disabled=false] > .NodeContent:hover {
+.TreeView.SelectTree .Node[aria-disabled=false]:hover {
   background-color: rgba(8, 136, 216, 0.2);
 }
 

package/dist/umd/synapse-react-client.development.css

@@ -19135,6 +19135,17 @@ button:hover .SRC-column-light-theme .SRC-light-column {
   padding: 15px;
   padding-top: 10px;
 }
+.page-progress button,
+.page-progress button:active,
+.page-progress button:focus,
+.page-progress button:active:focus,
+.terms-conditions .view-terms a,
+.terms-conditions .view-terms a:active:focus {
+  border: 0;
+  outline: none;
+  box-shadow: none;
+  border-radius: 2px;
+}
 .bar-loader {
   display: flex;
   justify-content: center;
@@ -19143,10 +19154,16 @@ button:hover .SRC-column-light-theme .SRC-light-column {
   width: 100%;
 }
 .bar-loader .bar-background-color {
-  background-color: rgba(49, 95, 124, 0.05);
+  background-color: #dfe2e6;
 }
 .bar-loader .bar-color {
-  background-color: #878787;
+  background-color: #f3da9c;
+}
+.bar-loader .MuiLinearProgress-determinate {
+  margin-bottom: 20px;
+  border-radius: 6px;
+  height: 10px;
+  width: 180px;
 }
 .bar-loader > div {
   width: 30%;
@@ -21018,26 +21035,26 @@ button:hover .SRC-column-light-theme .SRC-light-column {
   height: 455px;
   overflow: auto;
 }
-.TreeView .Tree .Node .NodeContent {
+.TreeView .Tree .Node {
   transition: background-color 200ms ease-in;
   width: 100%;
   align-items: center;
   display: inline-grid;
+  align-items: center;
 }
-.TreeView .Tree .Node .NodeContent .ExpandButton {
+.TreeView .Tree .Node .ExpandButton {
   grid-column: toggle/span 1;
   text-align: center;
   color: #0888d8;
   cursor: pointer;
 }
-.TreeView .Tree .Node .NodeContent .EntityName {
+.TreeView .Tree .Node .EntityName {
+  grid-column: name/span 1;
   white-space: nowrap;
-  overflow: hidden;
+  overflow-y: visible;
+  overflow-x: clip;
   text-overflow: ellipsis;
 }
-.TreeView .Tree .Node .NodeChildren[aria-hidden=true] {
-  display: none;
-}
 .TreeView .Tree .Node[aria-disabled=true] {
   opacity: 0.5;
 }
@@ -21170,40 +21187,40 @@ button:hover .SRC-column-light-theme .SRC-light-column {
   border-right: none;
   background-color: transparent;
 }
-.TreeView.BrowseTree .Node.BrowseNode .NodeContent {
+.TreeView.BrowseTree .Node.BrowseNode {
   grid-template-columns: [toggle] 20px [name] auto;
-  padding: 5px 10px 5px 20px;
+  padding: 0px 10px;
 }
-.TreeView.BrowseTree .Node.BrowseNode .NodeContent .ExpandButton {
-  font-size: 15px;
+.TreeView.BrowseTree .Node.BrowseNode .ExpandButton {
+  font-size: 18px;
 }
-.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .NodeContent > .EntityName {
+.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .EntityName {
   color: #407ba0;
   text-decoration: none;
   font-weight: 700;
   letter-spacing: 0.5px;
   font-weight: normal;
 }
-.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .NodeContent > .EntityName:hover {
+.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .EntityName:hover {
   text-decoration: underline;
   text-underline-offset: 4px;
   text-decoration-thickness: 2px;
   text-decoration-color: #2a678d;
 }
-.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .NodeContent > .EntityName.disabled {
+.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .EntityName.disabled {
   color: #aeb5bc;
 }
-.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .NodeContent > .EntityName.disabled:hover {
+.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .EntityName.disabled:hover {
   text-decoration: underline;
   text-underline-offset: 4px;
   text-decoration-thickness: 1px;
   text-decoration-color: #d6d6d6;
   cursor: default;
 }
-.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .NodeContent > .EntityName:hover {
+.TreeView.BrowseTree .Node[aria-disabled=false][aria-selected=false] > .EntityName:hover {
   text-underline-offset: 2px;
 }
-.TreeView.BrowseTree .Node.BrowseNode[aria-disabled=false][aria-selected=true] > .NodeContent > .EntityName > span {
+.TreeView.BrowseTree .Node.BrowseNode[aria-disabled=false][aria-selected=true] > .EntityName > span {
   font-weight: bold;
 }
 .terms-conditions .view-terms a,
@@ -21316,31 +21333,29 @@ button:hover .SRC-column-light-theme .SRC-light-column {
 }
 .TreeView.SelectTree .Tree .Node.SelectNode {
   border-top: 1px solid white;
-}
-.TreeView.SelectTree .Tree .Node.SelectNode .NodeContent {
   grid-template-columns: [toggle] 15px [icon] 27px [name] auto [badge] auto;
   padding: 16px 20px;
 }
-.TreeView.SelectTree .Tree .Node.SelectNode .NodeContent .ExpandButton {
+.TreeView.SelectTree .Tree .Node.SelectNode .ExpandButton {
   font-size: large;
   color: unset;
 }
-.TreeView.SelectTree .Tree .Node.SelectNode .NodeContent .EntityIcon {
+.TreeView.SelectTree .Tree .Node.SelectNode .EntityIcon {
   text-align: center;
   grid-column: icon/span 1;
   margin-bottom: 3px;
 }
-.TreeView.SelectTree .Tree .Node.SelectNode[aria-selected=true] > .NodeContent {
+.TreeView.SelectTree .Tree .Node.SelectNode[aria-selected=true] {
   background: #0888d8;
   color: white;
 }
-.TreeView.SelectTree .Tree .Node.SelectNode[aria-selected=true] > .NodeContent > .ExpandButton {
+.TreeView.SelectTree .Tree .Node.SelectNode[aria-selected=true] > .ExpandButton {
   color: white;
 }
-.TreeView.SelectTree .Tree .Node.SelectNode[aria-selected=true] > .NodeContent:hover {
+.TreeView.SelectTree .Tree .Node.SelectNode[aria-selected=true]:hover {
   background-color: #0778bf;
 }
-.TreeView.SelectTree .Node[aria-disabled=false] > .NodeContent:hover {
+.TreeView.SelectTree .Node[aria-disabled=false]:hover {
   background-color: rgba(8, 136, 216, 0.2);
 }
 .terms-conditions .view-terms a,
@@ -22974,6 +22989,31 @@ table.DownloadListTableV2 td {
   margin-bottom: 0;
 }
 
+/* sass-plugin-0:/home/runner/work/Synapse-React-Client/Synapse-React-Client/src/lib/style/components/_spinner.scss */
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.spinner {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: auto;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  background-image: url(https://s3.amazonaws.com/static.synapse.org/images/synapse-logo.svg);
+  animation: spinner 1s linear infinite;
+  background-size: 20px 20px;
+  background-repeat: no-repeat;
+}
+.spinner.white {
+  background-image: url(https://s3.amazonaws.com/static.synapse.org/images/synapse-logo-white.svg);
+}
+.spinner + .spinner__text {
+  margin-left: 5px;
+}
+
 /* sass-plugin-0:/home/runner/work/Synapse-React-Client/Synapse-React-Client/node_modules/@brainhubeu/react-carousel/lib/style.css */
 .BrainhubCarouselItem {
   display: flex;