Merge pull request #5466 from ericrosenbaum/load-24-projects-per-page

Small fixes for "add to studio" modal

src/views/studio/lib/user-projects-actions.js

@@ -44,7 +44,7 @@ const normalizeError = (err, body, res) => {
 const loadUserProjects = type => ((dispatch, getState) => {
     const state = getState();
     const projectCount = userProjects.selector(state).items.length;
-    const projectsPerPage = 20;
+    const projectsPerPage = 24;
     const opts = {
         ...Endpoints[type](state),
         params: {

src/views/studio/modals/user-projects-modal.jsx

@@ -89,7 +89,8 @@ const UserProjectsModal = ({
                                 onRemove={onRemove}
                             />
                         ))}
-                        {moreToLoad &&
+                    </div>
+                    {moreToLoad &&
                         <div className="studio-projects-load-more">
                             <button
                                 className={classNames('button', {
@@ -100,8 +101,7 @@ const UserProjectsModal = ({
                                 <FormattedMessage id="general.loadMore" />
                             </button>
                         </div>
-                        }
-                    </div>
+                    }
                 </AlertProvider>
             </ModalInnerContent>
         </Modal>

src/views/studio/modals/user-projects-modal.scss

@@ -31,8 +31,20 @@
             & { max-height: calc(100vh - 105px); }
         }
     }
+
+    .studio-projects-load-more {
+        display: contents;
+    }
 }
 
+.studio-tile-added {
+    border: 1px solid $ui-blue !important; // Override the tile border set in studio.scss .studio-project-tile
+    box-shadow: 0 0 0 4px $ui-blue-25percent;
+}
+
+.studio-project-add-remove-image {
+    margin: 7px;
+}
 
 .studio-tile-dynamic-remove,
 .studio-tile-dynamic-add {
@@ -50,7 +62,9 @@
     margin: 0;
     padding: 0;
     line-height: 32px;
-    text-align: center;
+    align-content: center;
+    display: flex;
+    justify-content: center;
 }
 .studio-tile-dynamic-remove {
     background: #0FBD8C;
@@ -60,6 +74,7 @@
 
 .user-projects-modal-grid {
     margin-top: 12px;
+    margin-bottom: 8px;
     display: grid;
 
     grid-template-columns: repeat(3, minmax(0,1fr));
@@ -72,10 +87,6 @@
     column-gap: 14px;
     row-gap: 14px;
 
-    .studio-projects-load-more {
-        grid-column: 1 / -1;
-    }
-
     .studio-project-bottom {
         padding: 8px 10px 8px 10px;
     }

src/views/studio/modals/user-projects-tile.jsx

@@ -28,6 +28,7 @@ const UserProjectsTile = ({id, title, image, inStudio, onAdd, onRemove}) => {
             role="button"
             tabIndex="0"
             className={classNames('studio-project-tile', {
+                'studio-tile-added': added,
                 'mod-clickable': true,
                 'mod-mutating': submitting
             })}
@@ -46,7 +47,13 @@ const UserProjectsTile = ({id, title, image, inStudio, onAdd, onRemove}) => {
             <div className="studio-project-bottom">
                 <div className="studio-project-title">{title}</div>
                 <div className={`studio-tile-dynamic-${added ? 'remove' : 'add'}`}>
-                    {added ? '✔' : '＋'}
+                    <img
+                        className="studio-project-add-remove-image"
+                        src={added ?
+                            '/svgs/studio/check-icon-white.svg' :
+                            '/svgs/studio/plus-icon-white.svg'
+                        }
+                    />
                 </div>
             </div>
         </div>

static/svgs/studio/check-icon-white.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.86144 15.403C7.43527 15.403 7.0091 15.2398 6.68447 14.9152L3.48818 11.7189C2.83727 11.068 2.83727 10.0159 3.48818 9.36498C4.13909 8.71407 5.19121 8.71407 5.84212 9.36498L7.86144 11.3843L14.1591 5.08828C14.8084 4.43737 15.8622 4.43737 16.5131 5.08828C17.1623 5.73753 17.1623 6.7913 16.5131 7.44222L9.03841 14.9152C8.71378 15.2398 8.28761 15.403 7.86144 15.403Z" fill="white"/>
+</svg>

static/svgs/studio/plus-icon-white.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M9.5,12.8c0,0.8-0.6,1.5-1.5,1.5c-0.4,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.5-0.6-0.5-1.1V9.5H3.2
+	C2.8,9.5,2.5,9.3,2.2,9S1.7,8.3,1.7,7.9c0-0.8,0.6-1.5,1.5-1.5l3.3,0.1L6.4,3.2C6.5,2.4,7.2,1.7,8,1.6c0.8,0.1,1.5,0.8,1.6,1.6
+	L9.5,6.5h3.3c0.8,0,1.5,0.6,1.5,1.5s-0.6,1.5-1.5,1.5l-3.3,0L9.5,12.8z"/>
+</svg>