diff --git a/package-lock.json b/package-lock.json index 4434955a9..029a35877 100644 --- a/package-lock.json +++ b/package-lock.json @@ -219,9 +219,9 @@ } }, "@babel/compat-data": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.5.tgz", - "integrity": "sha512-kixrYn4JwfAVPa0f2yfzc2AWti6WRRyO3XjWW5PJAvtE11qhSayrrcrEnee05KAtNaPC+EwehE8Qt1UedEVB8w==", + "version": "7.14.7", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.7.tgz", + "integrity": "sha512-nS6dZaISCXJ3+518CWiBfEr//gHyMO02uDxBkXTKZDN5POruCnOZ1N4YBRZDCabwF8nZMWBpRxIicmXtBs+fvw==", "dev": true }, "@babel/core": { @@ -308,9 +308,9 @@ } }, "@babel/parser": { - "version": "7.14.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.6.tgz", - "integrity": "sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ==", + "version": "7.14.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz", + "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==", "dev": true }, "@babel/template": { @@ -325,9 +325,9 @@ } }, "@babel/traverse": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.5.tgz", - "integrity": "sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==", + "version": "7.14.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz", + "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==", "dev": true, "requires": { "@babel/code-frame": "^7.14.5", @@ -335,7 +335,7 @@ "@babel/helper-function-name": "^7.14.5", "@babel/helper-hoist-variables": "^7.14.5", "@babel/helper-split-export-declaration": "^7.14.5", - "@babel/parser": "^7.14.5", + "@babel/parser": "^7.14.7", "@babel/types": "^7.14.5", "debug": "^4.1.0", "globals": "^11.1.0" @@ -504,9 +504,9 @@ } }, "electron-to-chromium": { - "version": "1.3.752", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz", - "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==", + "version": "1.3.755", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.755.tgz", + "integrity": "sha512-BJ1s/kuUuOeo1bF/EM2E4yqW9te0Hpof3wgwBx40AWJE18zsD1Tqo0kr7ijnOc+lRsrlrqKPauJAHqaxOItoUA==", "dev": true }, "semver": { @@ -565,9 +565,9 @@ } }, "@babel/helper-member-expression-to-functions": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.5.tgz", - "integrity": "sha512-UxUeEYPrqH1Q/k0yRku1JE7dyfyehNwT6SVkMHvYvPDv4+uu627VXBckVj891BO8ruKBkiDoGnZf4qPDD8abDQ==", + "version": "7.14.7", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz", + "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==", "dev": true, "requires": { "@babel/types": "^7.14.5" @@ -695,9 +695,9 @@ } }, "@babel/parser": { - "version": "7.14.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.6.tgz", - "integrity": "sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ==", + "version": "7.14.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz", + "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==", "dev": true }, "@babel/template": { @@ -712,9 +712,9 @@ } }, "@babel/traverse": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.5.tgz", - "integrity": "sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==", + "version": "7.14.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz", + "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==", "dev": true, "requires": { "@babel/code-frame": "^7.14.5", @@ -722,7 +722,7 @@ "@babel/helper-function-name": "^7.14.5", "@babel/helper-hoist-variables": "^7.14.5", "@babel/helper-split-export-declaration": "^7.14.5", - "@babel/parser": "^7.14.5", + "@babel/parser": "^7.14.7", "@babel/types": "^7.14.5", "debug": "^4.1.0", "globals": "^11.1.0" @@ -914,9 +914,9 @@ } }, "@babel/parser": { - "version": "7.14.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.6.tgz", - "integrity": "sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ==", + "version": "7.14.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz", + "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==", "dev": true }, "@babel/template": { @@ -931,9 +931,9 @@ } }, "@babel/traverse": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.5.tgz", - "integrity": "sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==", + "version": "7.14.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz", + "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==", "dev": true, "requires": { "@babel/code-frame": "^7.14.5", @@ -941,7 +941,7 @@ "@babel/helper-function-name": "^7.14.5", "@babel/helper-hoist-variables": "^7.14.5", "@babel/helper-split-export-declaration": "^7.14.5", - "@babel/parser": "^7.14.5", + "@babel/parser": "^7.14.7", "@babel/types": "^7.14.5", "debug": "^4.1.0", "globals": "^11.1.0" @@ -1147,9 +1147,9 @@ } }, "@babel/parser": { - "version": "7.14.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.6.tgz", - "integrity": "sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ==", + "version": "7.14.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz", + "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==", "dev": true }, "@babel/template": { @@ -1164,9 +1164,9 @@ } }, "@babel/traverse": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.5.tgz", - "integrity": "sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==", + "version": "7.14.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz", + "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==", "dev": true, "requires": { "@babel/code-frame": "^7.14.5", @@ -1174,7 +1174,7 @@ "@babel/helper-function-name": "^7.14.5", "@babel/helper-hoist-variables": "^7.14.5", "@babel/helper-split-export-declaration": "^7.14.5", - "@babel/parser": "^7.14.5", + "@babel/parser": "^7.14.7", "@babel/types": "^7.14.5", "debug": "^4.1.0", "globals": "^11.1.0" @@ -21334,6 +21334,18 @@ "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=", "dev": true }, + "scratch-l10n": { + "version": "3.13.20210621031558", + "resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.13.20210621031558.tgz", + "integrity": "sha512-tZfvJkxiIfwMd996qfmZ8/m05gIEuVUx5UAs0QXAPfqNwyBYIHUaJBihTxN1K4SWffL4Z80iUnLJZiQGwMqtyw==", + "dev": true, + "requires": { + "@babel/cli": "^7.1.2", + "@babel/core": "^7.1.2", + "babel-plugin-react-intl": "^3.0.1", + "transifex": "1.6.6" + } + }, "scratch-storage": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/scratch-storage/-/scratch-storage-1.3.5.tgz", @@ -21400,9 +21412,9 @@ } }, "scratch-l10n": { - "version": "3.13.20210621031558", - "resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.13.20210621031558.tgz", - "integrity": "sha512-tZfvJkxiIfwMd996qfmZ8/m05gIEuVUx5UAs0QXAPfqNwyBYIHUaJBihTxN1K4SWffL4Z80iUnLJZiQGwMqtyw==", + "version": "3.13.20210623031509", + "resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.13.20210623031509.tgz", + "integrity": "sha512-TT5+0Gz20tZ3PLEspb5OmZwY23+OxbrSlJuMMQGM24HUxK7nyjMbncwuAzVnd7v9ef8BqH+nQ9nEItKQNcPTBQ==", "dev": true, "requires": { "@babel/cli": "^7.1.2", diff --git a/package.json b/package.json index c0f518aff..988afa5d9 100644 --- a/package.json +++ b/package.json @@ -128,7 +128,7 @@ "redux-thunk": "2.0.1", "sass-loader": "6.0.6", "scratch-gui": "0.1.0-prerelease.20210621040041", - "scratch-l10n": "3.13.20210621031558", + "scratch-l10n": "3.13.20210623031509", "selenium-webdriver": "3.6.0", "slick-carousel": "1.6.0", "style-loader": "0.12.3", diff --git a/src/routes.json b/src/routes.json index 6f7b86e4e..24f70a273 100644 --- a/src/routes.json +++ b/src/routes.json @@ -304,10 +304,10 @@ }, { "name": "studio", - "pattern": "^/studios/\\d+(/projects|/curators|/activity|/comments)?/?(\\?.*)?$", - "routeAlias": "/studios/?$", + "pattern": "^/studios-playground/\\d+(/projects|/curators|/activity|/comments)?/?(\\?.*)?$", + "routeAlias": "/studios-playground/?$", "view": "studio/studio", - "title": "Scratch Studio", + "title": "Studio Playground", "dynamicMetaTags": true }, { diff --git a/src/views/studio/studio-admin-panel.jsx b/src/views/studio/studio-admin-panel.jsx index 817d9befd..f97ef18a3 100644 --- a/src/views/studio/studio-admin-panel.jsx +++ b/src/views/studio/studio-admin-panel.jsx @@ -48,8 +48,11 @@ const StudioAdminPanel = ({studioId, showAdminPanel}) => { const [adminPanelOpen, setAdminPanelOpen] = useState(getAdminPanelOpen()); useEffect(() => { - storeAdminPanelOpen(adminPanelOpen); - }, [adminPanelOpen]); + // This effect will both keep localStorage up-to-date AND cause + // the spacing to change to allow for the open admin panel, so make + // sure the admin panel should be visible at all before making any changes. + if (showAdminPanel) storeAdminPanelOpen(adminPanelOpen); + }, [showAdminPanel, adminPanelOpen]); useEffect(() => { if (!showAdminPanel) return; diff --git a/src/views/studio/studio-curators.jsx b/src/views/studio/studio-curators.jsx index 7c684cdd9..22df830fd 100644 --- a/src/views/studio/studio-curators.jsx +++ b/src/views/studio/studio-curators.jsx @@ -43,7 +43,7 @@ const StudioCurators = ({ width="179" height="111" className="studio-empty-img" - src="/images/studios/curators-empty.png" + src="/images/studios/curators-empty-image.svg" /> {canInviteCurators ? (
diff --git a/src/views/studio/studio-projects.jsx b/src/views/studio/studio-projects.jsx index 3fbf80cb5..cb750cfb1 100644 --- a/src/views/studio/studio-projects.jsx +++ b/src/views/studio/studio-projects.jsx @@ -68,7 +68,7 @@ const StudioProjects = ({ width="388" height="265" className="studio-empty-img" - src="/images/studios/projects-empty-can-add.png" + src="/images/studios/empty-state-image.svg" />
@@ -81,7 +81,7 @@ const StudioProjects = ({ width="186" height="138" className="studio-empty-img" - src="/images/studios/projects-empty.png" + src="/images/studios/empty-state-image-mini.svg" />
diff --git a/src/views/studio/studio.scss b/src/views/studio/studio.scss index 8d3ea65f0..10ad9f780 100644 --- a/src/views/studio/studio.scss +++ b/src/views/studio/studio.scss @@ -166,7 +166,7 @@ $radius: 8px; border-radius: 8px; background: white; box-sizing: border-box; - border: 2px solid rgba(0, 0, 0, 0.15); + border: 2px solid $box-shadow-light-gray; } .studio-follow-button { @@ -190,15 +190,16 @@ $radius: 8px; border-bottom: 1px solid $active-dark-gray; padding-bottom: 8px; font-size: 14px; + margin: 8px; li { display: flex; align-items: center; background: white; - border: 1px solid rgba(0, 0, 0, 0.15); + border: 1px solid $box-shadow-light-gray; color: #575e75; - padding: 0.5em 0.75em 0.5em 0.5em; + padding: 0.75em 1.25em 0.75em 1em; &:active { - padding: calc(0.5em) calc(0.75em) calc(0.5em) calc(0.5em); + padding: calc(0.75em) calc(1.25em) calc(0.75em) calc(1em); } img { margin-right: 0.5em; @@ -217,8 +218,15 @@ $radius: 8px; } } a.nav_link:hover > li { - background: $ui-blue-25percent; - border: 1px solid $ui-blue-10percent; + background: $active-gray; + border: 1px solid $active-gray; + } + a.active.nav_link:hover > li { + background: $ui-blue-dark; + color: white; + img { + filter: invert(0); + } } } @@ -260,7 +268,7 @@ $radius: 8px; @media #{$intermediate-and-smaller} { & { grid-template-columns: repeat(2, minmax(0,1fr)); } } - column-gap: 30px; + column-gap: 20px; row-gap: 20px; .studio-projects-load-more { @@ -335,7 +343,7 @@ $radius: 8px; @media #{$intermediate-and-smaller} { & { grid-template-columns: repeat(2, minmax(0,1fr)); } } - column-gap: 30px; + column-gap: 20px; row-gap: 20px; .studio-members-load-more { grid-column: 1 / -1; diff --git a/static/images/studios/curators-empty-image.svg b/static/images/studios/curators-empty-image.svg new file mode 100644 index 000000000..9d07a1d8e --- /dev/null +++ b/static/images/studios/curators-empty-image.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/studios/curators-empty.png b/static/images/studios/curators-empty.png deleted file mode 100644 index 76589073a..000000000 Binary files a/static/images/studios/curators-empty.png and /dev/null differ diff --git a/static/images/studios/empty-state-image-mini.svg b/static/images/studios/empty-state-image-mini.svg new file mode 100644 index 000000000..b35c92851 --- /dev/null +++ b/static/images/studios/empty-state-image-mini.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/studios/empty-state-image.svg b/static/images/studios/empty-state-image.svg new file mode 100644 index 000000000..240f531c8 --- /dev/null +++ b/static/images/studios/empty-state-image.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/studios/projects-empty-can-add.png b/static/images/studios/projects-empty-can-add.png deleted file mode 100644 index 937e2e5e5..000000000 Binary files a/static/images/studios/projects-empty-can-add.png and /dev/null differ diff --git a/static/images/studios/projects-empty.png b/static/images/studios/projects-empty.png deleted file mode 100644 index d23d9df7b..000000000 Binary files a/static/images/studios/projects-empty.png and /dev/null differ diff --git a/test/unit/components/studio-admin-panel.test.jsx b/test/unit/components/studio-admin-panel.test.jsx index 0825ca34a..0dd181f3f 100644 --- a/test/unit/components/studio-admin-panel.test.jsx +++ b/test/unit/components/studio-admin-panel.test.jsx @@ -39,6 +39,19 @@ describe('Studio comments', () => { expect(child.prop('isOpen')).toBe(false); }); }); + describe('non admins', () => { + test('should not have localStorage set with a false value', () => { + mountWithIntl(); + expect(global.localStorage.getItem(adminPanelOpenKey)).toBe(null); + }); + test('should not have css class set even if localStorage contains open key', () => { + // Regression test for situation where admin logs out but localStorage still + // contains "open", causing extra space to appear + global.localStorage.setItem(adminPanelOpenKey, 'open'); + mountWithIntl(); + expect(viewEl.classList.contains(adminPanelOpenClass)).toBe(false); + }); + }); test('calling onOpen sets a class on the #viewEl and records in local storage', () => { const component = mountWithIntl(); let child = component.find(AdminPanel);