Merge pull request #1557 from SundeepChand/bugfix/popupstyle

Fixed "Add Sketch to Collection" Popup styling bug on Dark and High Contrast themes

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,12 +81,14 @@ class CollectionList extends React.Component {
     }
 
     return (
-      <div className="quick-add-wrapper">
-        <Helmet>
-          <title>{this.getTitle()}</title>
-        </Helmet>
+      <div className="collection-add-sketch">
+        <div className="quick-add-wrapper">
+          <Helmet>
+            <title>{this.getTitle()}</title>
+          </Helmet>
 
-        {content}
+          {content}
+        </div>
       </div>
     );
   }

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -72,11 +72,13 @@ class SketchList extends React.Component {
     }
 
     return (
-      <div className="quick-add-wrapper">
-        <Helmet>
-          <title>{this.getSketchesTitle()}</title>
-        </Helmet>
-        {content}
+      <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>
+              <AddToCollectionSketchList
+                username={this.props.username}
+                collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}
+              />
             </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 username={this.props.username} collection={this.props.collection} />
-                    </div>
+                    <AddToCollectionSketchList
+                      username={this.props.username}
+                      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');
   }
 }