Merge pull request #1557 from SundeepChand/bugfix/popupstyle

catarak · web-flow · commit 45a4e54e80b7 · 2020-08-19T16:55:00.000-04:00
Fixed "Add Sketch to Collection" Popup styling bug on Dark and High Contrast themes
diff --git a/client/modules/IDE/components/AddToCollectionList.jsx b/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>
-
-        {content}
+      <div className="collection-add-sketch">
+        <div className="quick-add-wrapper">
+          <Helmet>
+            <title>{this.getTitle()}</title>
+          </Helmet>
+
+          {content}
+        </div>
       </div>
     );
   }
diff --git a/client/modules/IDE/components/AddToCollectionSketchList.jsx b/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>
     );
   }
diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/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>
           )
         }
diff --git a/client/modules/User/components/Collection.jsx b/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>
                 )
               }
diff --git a/client/styles/abstracts/_variables.scss b/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),
 
diff --git a/client/styles/components/_quick-add.scss b/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');
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -170,12 +170,10 @@ class CollectionList extends React.Component {`
`170`	`170`	`closeOverlay={this.hideAddSketches}`
`171`	`171`	`isFixedHeight`
`172`	`172`	`>`
`173`		`- <div className="collection-add-sketch">`
`174`		`- <AddToCollectionSketchList`
`175`		`- username={this.props.username}`
`176`		`- collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}`
`177`		`- />`
`178`		`- </div>`
	`173`	`+ <AddToCollectionSketchList`
	`174`	`+ username={this.props.username}`
	`175`	`+ collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}`
	`176`	`+ />`
`179`	`177`	`</Overlay>`
`180`	`178`	`)`
`181`	`179`	`}`
Original file line number	Diff line number	Diff line change
`@@ -398,9 +398,10 @@ class Collection extends React.Component {`
`398`	`398`	`closeOverlay={this.hideAddSketches}`
`399`	`399`	`isFixedHeight`
`400`	`400`	`>`
`401`		`- <div className="collection-add-sketch">`
`402`		`- <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />`
`403`		`- </div>`
	`401`	`+ <AddToCollectionSketchList`
	`402`	`+ username={this.props.username}`
	`403`	`+ collection={this.props.collection}`
	`404`	`+ />`
`404`	`405`	`</Overlay>`
`405`	`406`	`)`
`406`	`407`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,16 @@`
`1`	`1`	`.quick-add-wrapper {`
`2`	`2`	`min-width: #{600 / $base-font-size}rem;`
`3`		`- overflow-y: scroll;`
	`3`	`+ padding: #{24 / $base-font-size}rem;`
	`4`	`+ height: 100%;`
`4`	`5`	`}`
`5`	`6`
`6`	`7`	`.quick-add {`
`7`	`8`	`width: auto;`
`8`		`- padding: #{24 / $base-font-size}rem;`
	`9`	`+ overflow-y: scroll;`
	`10`	`+ height: 100%;`
	`11`	`+ @include themify() {`
	`12`	`+ border: 1px solid getThemifyVariable('modal-border-color');`
	`13`	`+ }`
`9`	`14`	`}`
`10`	`15`
`11`	`16`	`.quick-add__item {`
`@@ -23,7 +28,7 @@`
`23`	`28`
`24`	`29`	`.quick-add__item:nth-child(odd) {`
`25`	`30`	`@include themify() {`
`26`		`- background: getThemifyVariable('table-row-stripe-color');`
	`31`	`+ background: getThemifyVariable('table-row-stripe-color-alternate');`
`27`	`32`	`}`
`28`	`33`	`}`
`29`	`34`