Merge branch 'develop' into feature/switch-mobile-desktop

client/modules/IDE/components/AddToCollectionList.jsx

@@ -14,7 +14,7 @@ import Loader from '../../App/components/loader';
 import QuickAddList from './QuickAddList';
 
 const projectInCollection = (project, collection) =>
-  collection.items.find(item => item.project.id === project.id) != null;
+  collection.items.find(item => item.projectId === project.id) != null;
 
 class CollectionList extends React.Component {
   constructor(props) {
@@ -81,6 +81,7 @@ class CollectionList extends React.Component {
     }
 
     return (
+      <div className="collection-add-sketch">
         <div className="quick-add-wrapper">
           <Helmet>
             <title>{this.getTitle()}</title>
@@ -88,6 +89,7 @@ class CollectionList extends React.Component {
 
           {content}
         </div>
+      </div>
     );
   }
 }

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -72,12 +72,14 @@ class SketchList extends React.Component {
     }
 
     return (
+      <div className="collection-add-sketch">
         <div className="quick-add-wrapper">
           <Helmet>
             <title>{this.getSketchesTitle()}</title>
           </Helmet>
           {content}
         </div>
+      </div>
     );
   }
 }

client/modules/IDE/components/CollectionList/CollectionList.jsx

@@ -170,12 +170,10 @@ class CollectionList extends React.Component {
               closeOverlay={this.hideAddSketches}
               isFixedHeight
             >
-              <div className="collection-add-sketch">
               <AddToCollectionSketchList
                 username={this.props.username}
                 collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}
               />
-              </div>
             </Overlay>
           )
         }

client/modules/User/components/Collection.jsx

@@ -398,9 +398,10 @@ class Collection extends React.Component {
                     closeOverlay={this.hideAddSketches}
                     isFixedHeight
                   >
-                    <div className="collection-add-sketch">
+                    <AddToCollectionSketchList
-                      <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
+                      username={this.props.username}
-                    </div>
+                      collection={this.props.collection}
+                    />
                   </Overlay>
                 )
               }

client/styles/abstracts/_variables.scss

@@ -88,6 +88,7 @@ $themes: (
     nav-border-color: $middle-light,
     error-color: $p5js-pink,
     table-row-stripe-color: $medium-light,
+    table-row-stripe-color-alternate: $medium-light,
     codefold-icon-open: url(../images/triangle-arrow-down.svg?byUrl),
     codefold-icon-closed: url(../images/triangle-arrow-right.svg?byUrl),
 
@@ -163,6 +164,7 @@ $themes: (
     nav-border-color: $middle-dark,
     error-color: $p5js-pink,
     table-row-stripe-color: $dark,
+    table-row-stripe-color-alternate: $darker,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),
 
@@ -236,6 +238,7 @@ $themes: (
     nav-border-color: $middle-dark,
     error-color: $p5-contrast-pink,
     table-row-stripe-color: $dark,
+    table-row-stripe-color-alternate: $darker,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),
 

client/styles/components/_quick-add.scss

@@ -1,11 +1,16 @@
 .quick-add-wrapper {
   min-width: #{600 / $base-font-size}rem;
-  overflow-y: scroll;
+  padding: #{24 / $base-font-size}rem;
+  height: 100%;
 }
 
 .quick-add {
   width: auto;
-  padding: #{24 / $base-font-size}rem;
+  overflow-y: scroll;
+  height: 100%;
+  @include themify() {
+    border: 1px solid getThemifyVariable('modal-border-color');
+  }
 }
 
 .quick-add__item {
@@ -23,7 +28,7 @@
 
 .quick-add__item:nth-child(odd) {
   @include themify() {
-    background: getThemifyVariable('table-row-stripe-color');
+    background: getThemifyVariable('table-row-stripe-color-alternate');
   }
 }