scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #7588 from aoneill01/feature/color-contrast

Browse source 
feat: use purple accent color for accessibility
This commit is contained in:
Andy O'Neill 2023-05-22 15:39:08 -04:00 committed by GitHub
commit e705dca7c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
66 changed files with 258 additions and 200 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.circleci/config.yml
View file

@ -128,6 +128,7 @@ workflows:
branches:
only:
- develop
- beta
- /^hotfix\/.*/
- /^release\/.*/
- integration-tests:
@ -141,6 +142,7 @@ workflows:
branches:
only:
- develop
- beta
- /^hotfix\/.*/
- /^release\/.*/
- build-and-deploy-production:
@ -190,5 +192,6 @@ workflows:
ignore:
- develop
- master
- beta
- /^hotfix\/.*/
- /^release\/.*/

115
package-lock.json generated
View file

@ -101,7 +101,7 @@
"regenerator-runtime": "0.13.9",
"sass": "1.49.7",
"sass-loader": "10.2.1",
"scratch-gui": "1.8.53",
"scratch-gui": "2.0.0-beta.2",
"scratch-l10n": "3.15.20230507032520",
"selenium-webdriver": "4.1.0",
"slick-carousel": "1.6.0",
@ -9682,6 +9682,8 @@
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-2.0.0.tgz",
"integrity": "sha512-YCsBfd1ZGCyonOKLxPiKPdu+8ld9HAaMEvJewzz+b2eTF7uL5Zm/HdBF6FjCrpCMRq25Mi0U1gl4pwn2TlH7hQ==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"loader-utils": "^1.0.2",
"schema-utils": "^1.0.0"
@ -23463,9 +23465,9 @@
}
},
"node_modules/scratch-blocks": {
"version": "0.1.0-prerelease.20230507065123",
"resolved": "https://registry.npmjs.org/scratch-blocks/-/scratch-blocks-0.1.0-prerelease.20230507065123.tgz",
"integrity": "sha512-ESFkBv3EyyjXQbfgnbOXMCkLtlTzR1K+mPUANobSWim/evedSowx3l6uuqGVumEbo/9K2ullKyXQo7LDZDrvOw==",
"version": "0.2.0-prerelease.20230509131059",
"resolved": "https://registry.npmjs.org/scratch-blocks/-/scratch-blocks-0.2.0-prerelease.20230509131059.tgz",
"integrity": "sha512-TPrMjmXhOh3AwlLJu3ggkMUwfHsUN8Y0tk7NnrLM02R0qtr32pgOHttBobXDya7R4Pu+HyfGSuxwtuJftb0MsQ==",
"dev": true,
"dependencies": {
"exports-loader": "0.7.0",
@ -23474,10 +23476,28 @@
"scratch-l10n": "3.15.20230507032520"
}
},
"node_modules/scratch-blocks/node_modules/scratch-l10n": {
"version": "3.15.20230507032520",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.15.20230507032520.tgz",
"integrity": "sha512-WpAXxJ6hZIXIvHiLCbReXq9FCGXojX+2uMBs+yWvUNDfTmg2jpuWkbRw0+Ovnzll6lZYc5D2ErUtyD90BI38JA==",
"dev": true,
"dependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@transifex/api": "4.2.5",
"babel-plugin-react-intl": "^3.0.1",
"download": "^8.0.0",
"transifex": "1.6.6"
},
"bin": {
"build-i18n-src": "scripts/build-i18n-src.js",
"tx-push-src": "scripts/tx-push-src.js"
}
},
"node_modules/scratch-gui": {
"version": "1.8.53",
"resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-1.8.53.tgz",
"integrity": "sha512-zqrSRAUhuODR0Qe2cFnQiXpDkIfFF9iEofRIswHSaP/MHj/oiEMINrpEDP+66ep+HivWRpwUumdUt8dOyUIw0A==",
"version": "2.0.0-beta.2",
"resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-2.0.0-beta.2.tgz",
"integrity": "sha512-yAhQdj8nORDTdBvxWsYfsxRSL7zZdZlW3X5HKYN6GJCRZugk1GqS/hJ/7D+jwrmgjx6rtJGR3ljJY+1lZtmq8Q==",
"dev": true,
"dependencies": {
"arraybuffer-loader": "^1.0.6",
@ -23487,11 +23507,11 @@
"cat-blocks": "npm:scratch-blocks@0.1.0-prerelease.20220318143026",
"classnames": "2.2.6",
"computed-style-to-inline-style": "3.0.0",
"cookie": "0.5.0",
"copy-webpack-plugin": "6.4.1",
"core-js": "2.5.7",
"css-loader": "^1.0.0",
"es6-object-assign": "1.1.0",
"file-loader": "2.0.0",
"get-float-time-domain-data": "0.1.0",
"get-user-media-promise": "1.1.4",
"immutable": "3.8.2",
@ -23529,9 +23549,9 @@
"redux": "3.7.2",
"redux-throttle": "0.1.1",
"scratch-audio": "0.1.0-prerelease.20221123180128",
"scratch-blocks": "0.1.0-prerelease.20230507065123",
"scratch-blocks": "0.2.0-prerelease.20230509131059",
"scratch-l10n": "3.15.20230507032520",
"scratch-paint": "1.1.54",
"scratch-paint": "1.2.0-beta.1",
"scratch-render": "0.1.0-prerelease.20230318150639",
"scratch-render-fonts": "1.0.0-prerelease.20221102164332",
"scratch-storage": "2.2.1",
@ -23603,6 +23623,15 @@
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==",
"dev": true
},
"node_modules/scratch-gui/node_modules/cookie": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
"dev": true,
"engines": {
"node": ">= 0.6"
}
},
"node_modules/scratch-gui/node_modules/core-js": {
"version": "2.5.7",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
@ -23863,9 +23892,9 @@
}
},
"node_modules/scratch-gui/node_modules/scratch-paint": {
"version": "1.1.54",
"resolved": "https://registry.npmjs.org/scratch-paint/-/scratch-paint-1.1.54.tgz",
"integrity": "sha512-23fylk1yn74TEpthDX1wGpnVGLRDNuQALhTD+Hrq5b0yfWDW1U+Ane6MuA6zOR2noFRcby357rvCdKNXU9p6zQ==",
"version": "1.2.0-beta.1",
"resolved": "https://registry.npmjs.org/scratch-paint/-/scratch-paint-1.2.0-beta.1.tgz",
"integrity": "sha512-YyVBRv5+ahJA02N0KKjalHUyJXKZOvQmpq658gswePsyU/GkcHByJCRQjd0iYWN8nJZlDEZrOExLuh+noTHjuA==",
"dev": true,
"dependencies": {
"@scratch/paper": "0.11.20200728195508",
@ -24212,9 +24241,9 @@
}
},
"node_modules/scratch-vm/node_modules/readable-stream": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
"dev": true,
"dependencies": {
"inherits": "^2.0.3",
@ -40377,6 +40406,8 @@
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-2.0.0.tgz",
"integrity": "sha512-YCsBfd1ZGCyonOKLxPiKPdu+8ld9HAaMEvJewzz+b2eTF7uL5Zm/HdBF6FjCrpCMRq25Mi0U1gl4pwn2TlH7hQ==",
"dev": true,
"optional": true,
"peer": true,
"requires": {
"loader-utils": "^1.0.2",
"schema-utils": "^1.0.0"
@ -51927,21 +51958,37 @@
}
},
"scratch-blocks": {
"version": "0.1.0-prerelease.20230507065123",
"resolved": "https://registry.npmjs.org/scratch-blocks/-/scratch-blocks-0.1.0-prerelease.20230507065123.tgz",
"integrity": "sha512-ESFkBv3EyyjXQbfgnbOXMCkLtlTzR1K+mPUANobSWim/evedSowx3l6uuqGVumEbo/9K2ullKyXQo7LDZDrvOw==",
"version": "0.2.0-prerelease.20230509131059",
"resolved": "https://registry.npmjs.org/scratch-blocks/-/scratch-blocks-0.2.0-prerelease.20230509131059.tgz",
"integrity": "sha512-TPrMjmXhOh3AwlLJu3ggkMUwfHsUN8Y0tk7NnrLM02R0qtr32pgOHttBobXDya7R4Pu+HyfGSuxwtuJftb0MsQ==",
"dev": true,
"requires": {
"exports-loader": "0.7.0",
"google-closure-library": "20190301.0.0",
"imports-loader": "0.8.0",
"scratch-l10n": "3.15.20230507032520"
},
"dependencies": {
"scratch-l10n": {
"version": "3.15.20230507032520",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.15.20230507032520.tgz",
"integrity": "sha512-WpAXxJ6hZIXIvHiLCbReXq9FCGXojX+2uMBs+yWvUNDfTmg2jpuWkbRw0+Ovnzll6lZYc5D2ErUtyD90BI38JA==",
"dev": true,
"requires": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@transifex/api": "4.2.5",
"babel-plugin-react-intl": "^3.0.1",
"download": "^8.0.0",
"transifex": "1.6.6"
}
}
}
},
"scratch-gui": {
"version": "1.8.53",
"resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-1.8.53.tgz",
"integrity": "sha512-zqrSRAUhuODR0Qe2cFnQiXpDkIfFF9iEofRIswHSaP/MHj/oiEMINrpEDP+66ep+HivWRpwUumdUt8dOyUIw0A==",
"version": "2.0.0-beta.2",
"resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-2.0.0-beta.2.tgz",
"integrity": "sha512-yAhQdj8nORDTdBvxWsYfsxRSL7zZdZlW3X5HKYN6GJCRZugk1GqS/hJ/7D+jwrmgjx6rtJGR3ljJY+1lZtmq8Q==",
"dev": true,
"requires": {
"arraybuffer-loader": "^1.0.6",
@ -51951,11 +51998,11 @@
"cat-blocks": "npm:scratch-blocks@0.1.0-prerelease.20220318143026",
"classnames": "2.2.6",
"computed-style-to-inline-style": "3.0.0",
"cookie": "0.5.0",
"copy-webpack-plugin": "6.4.1",
"core-js": "2.5.7",
"css-loader": "^1.0.0",
"es6-object-assign": "1.1.0",
"file-loader": "2.0.0",
"get-float-time-domain-data": "0.1.0",
"get-user-media-promise": "1.1.4",
"immutable": "3.8.2",
@ -51993,9 +52040,9 @@
"redux": "3.7.2",
"redux-throttle": "0.1.1",
"scratch-audio": "0.1.0-prerelease.20221123180128",
"scratch-blocks": "0.1.0-prerelease.20230507065123",
"scratch-blocks": "0.2.0-prerelease.20230509131059",
"scratch-l10n": "3.15.20230507032520",
"scratch-paint": "1.1.54",
"scratch-paint": "1.2.0-beta.1",
"scratch-render": "0.1.0-prerelease.20230318150639",
"scratch-render-fonts": "1.0.0-prerelease.20221102164332",
"scratch-storage": "2.2.1",
@ -52050,6 +52097,12 @@
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==",
"dev": true
},
"cookie": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
"dev": true
},
"core-js": {
"version": "2.5.7",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
@ -52265,9 +52318,9 @@
}
},
"scratch-paint": {
"version": "1.1.54",
"resolved": "https://registry.npmjs.org/scratch-paint/-/scratch-paint-1.1.54.tgz",
"integrity": "sha512-23fylk1yn74TEpthDX1wGpnVGLRDNuQALhTD+Hrq5b0yfWDW1U+Ane6MuA6zOR2noFRcby357rvCdKNXU9p6zQ==",
"version": "1.2.0-beta.1",
"resolved": "https://registry.npmjs.org/scratch-paint/-/scratch-paint-1.2.0-beta.1.tgz",
"integrity": "sha512-YyVBRv5+ahJA02N0KKjalHUyJXKZOvQmpq658gswePsyU/GkcHByJCRQjd0iYWN8nJZlDEZrOExLuh+noTHjuA==",
"dev": true,
"requires": {
"@scratch/paper": "0.11.20200728195508",
@ -52587,9 +52640,9 @@
}
},
"readable-stream": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
"dev": true,
"requires": {
"inherits": "^2.0.3",

2
package.json
View file

@ -136,7 +136,7 @@
"regenerator-runtime": "0.13.9",
"sass": "1.49.7",
"sass-loader": "10.2.1",
"scratch-gui": "1.8.53",
"scratch-gui": "2.0.0-beta.2",
"scratch-l10n": "3.15.20230507032520",
"selenium-webdriver": "4.1.0",
"slick-carousel": "1.6.0",

9
src/_colors.scss
View file

@ -13,6 +13,7 @@ $ui-orange-90percent: hsla(38, 100%, 55%, .9);
$ui-dark-orange: hsla(30, 100%, 55%, 1); // ##FF8C1A Variables Primary
$ui-red: hsla(20, 100%, 55%, 1); /* #FF661A */
$ui-red-dark: hsla(20, 100%, 40%, 1); /* #CC4400 */
$ui-red-25percent: hsla(20, 100%, 55%, .25);
$ui-green-35percent: rgba(126, 225, 195, .35);
@ -30,8 +31,12 @@ $motion-blue-3: hsla(215, 60%, 50%, 1);//#3373CC
$ui-aqua: hsla(144, 45%, 36%, 1);
$ui-aqua-dark: darken($ui-aqua, 10%);
$ui-purple: hsla(260, 100%, 70%, 1); // #9966FF Looks Primary
$ui-purple-dark: hsla(260, 60%, 60%, 1); // #774DCB Looks Secondary
$ui-purple-dark: hsla(260, 60%, 60%, 1); // #855CD6 Looks Secondary
$ui-purple-darker: hsla(260, 46%, 54%, 1);
$ui-purple-10percent: hsla(260, 60%, 60%, .1);
$ui-purple-25percent: hsla(260, 60%, 60%, .25);
$ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */
$ui-magenta-dark: hsla(300, 48%, 50%, 1); /* #BD42BD Sounds Tertiary */
$ui-yellow: hsla(45, 100%, 50%, 1); // #FFBF00 Events Primary
$ui-coral: hsla(350, 100%, 70%, 1); // #FF6680 More Blocks Primary
@ -64,7 +69,7 @@ $type-gray-75percent: hsla(225, 15%, 40%, .75);
$type-gray-60percent: hsla(225, 15%, 40%, .6);
$type-white: hsla(0, 100%, 100%, 1); //#FFF
$link-blue: $ui-blue;
$link-purple: $ui-purple-dark;
/* Down Deep */
$dd-darkblue: hsla(195, 72.4%, 17.1%, 1);

2
src/components/card/card.scss
View file

@ -35,7 +35,7 @@
&.has-error {
.input {
border: 1px solid $ui-orange;
border: 1px solid $ui-red-dark;
}
}

2
src/components/dropdown-banner/banner.scss
View file

@ -37,6 +37,6 @@ $navigation-height: 50px;
}
&.warning {
background-color: $ui-orange;
background-color: $ui-red-dark;
}
}

11
src/components/dropdown/dropdown.scss
View file

@ -7,7 +7,7 @@
right: 0;
border: 1px solid $active-gray;
border-radius: 0 0 5px 5px;
background-color: $ui-blue;
background-color: $ui-purple-dark;
padding: 10px;
min-width: 9rem;
max-width: 16.25rem;
@ -16,9 +16,10 @@
font-size: .8125rem;
font-weight: normal;
&.staging {
background-color: $ui-orange;
}
// Temporary removal of staging styling for testing purposes
// &.staging {
// background-color: $ui-orange;
// }
&.open {
display: block;
@ -82,7 +83,7 @@
border-left: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-blue;
background-color: $ui-purple-dark;
width: $arrow-border-width;
height: $arrow-border-width;

8
src/components/formik-forms/formik-input.scss
View file

@ -12,17 +12,17 @@
font-size: .875rem;
&:focus {
box-shadow: 0 0 0 .25rem $ui-blue-25percent;
box-shadow: 0 0 0 .25rem $ui-purple-25percent;
outline: none;
border: 1px solid $ui-blue;
border: 1px solid $ui-purple-dark;
transition: all .5s ease, font-size 0s;
}
&.fail {
border: 1px solid $ui-orange;
border: 1px solid $ui-red-dark;
&:focus {
box-shadow: 0 0 0 .25rem $ui-orange-25percent;
box-shadow: 0 0 0 .25rem $ui-red-25percent;
outline: none;
}
}

2
src/components/formik-forms/formik-select.scss
View file

@ -2,7 +2,7 @@
.select {
.fail {
border: 1px solid $ui-orange;
border: 1px solid $ui-purple-dark;
&:focus {
box-shadow: 0 0 0 .25rem $ui-orange-25percent;

4
src/components/forms/button.scss
View file

@ -9,7 +9,7 @@ $pass-bg: $ui-aqua;
margin: .5em 0;
border: 0;
border-radius: .5rem;
background-color: $ui-blue;
background-color: $ui-purple-dark;
cursor: pointer;
padding: 1em 1.25em;
color: $type-white;
@ -24,7 +24,7 @@ $pass-bg: $ui-aqua;
/* DATA BUTTON STATES */
&.white {
background-color: $base-bg;
color: $ui-blue;
color: $ui-purple-dark;
}
&.pass {

12
src/components/forms/inplace-input.scss
View file

@ -13,12 +13,12 @@
&:focus {
transition: all .5s ease;
outline: none;
border: 2px solid $ui-blue;
box-shadow: 0 0 0 4px $ui-blue-25percent;
border: 2px solid $ui-purple-dark;
box-shadow: 0 0 0 4px $ui-purple-25percent;
}
&.fail {
border: 1px solid $ui-orange;
border: 1px solid $ui-red-dark;
}
&.pass {
@ -51,12 +51,12 @@
&:focus {
transition: all .2s ease;
outline: none;
border: 2px solid $ui-blue;
box-shadow: 0 0 0 4px $ui-blue-25percent;
border: 2px solid $ui-purple-dark;
box-shadow: 0 0 0 4px $ui-purple-25percent;
}
&.fail {
border: 1px solid $ui-orange;
border: 1px solid $ui-red-dark;
}
&::placeholder {

4
src/components/forms/input.scss
View file

@ -23,11 +23,11 @@ $base-bg: $ui-light-gray;
&:focus {
transition: all .5s ease;
outline: none;
border: 1px solid $ui-blue;
border: 1px solid $ui-purple-dark;
}
&.fail {
border: 1px solid $ui-orange;
border: 1px solid $ui-red-dark;
}
&.pass {

1
src/components/forms/phone-input.scss
View file

@ -15,6 +15,7 @@
&:focus {
outline: none;
border-color: $ui-purple-dark;
}
}
}

2
src/components/forms/select.scss
View file

@ -33,7 +33,7 @@
&:focus {
outline: none;
border: 1px solid $ui-blue;
border: 1px solid $ui-purple-dark;
}
&:-moz-focusring {

4
src/components/forms/textarea.scss
View file

@ -16,11 +16,11 @@
&:focus {
transition: all 1s ease;
outline: none;
border: 1px solid $ui-blue;
border: 1px solid $ui-purple-dark;
}
&.fail {
border: 1px solid $ui-orange;
border: 1px solid $ui-red-dark;
}
&::placeholder {

12
src/components/forms/validation-message.scss
View file

@ -11,7 +11,7 @@
margin-left: $arrow-border-width;
border: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-orange;
background-color: $ui-red-dark;
padding: 1rem;
max-width: 18.75rem;
min-height: 1rem;
@ -32,7 +32,7 @@
border-left: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-orange;
background-color: $ui-red-dark;
width: $arrow-border-width;
height: $arrow-border-width;
@ -73,18 +73,18 @@
}
.validation-error {
background-color: $ui-orange;
background-color: $ui-red-dark;
&:before {
background-color: $ui-orange;
background-color: $ui-red-dark;
}
}
.validation-info {
background-color: $ui-blue;
background-color: $ui-blue-dark;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, .15);
&:before {
background-color: $ui-blue;
background-color: $ui-blue-dark;
}
}

4
src/components/info-button/info-button.scss
View file

@ -28,7 +28,7 @@
box-shadow: 0 0 4px 2px rgba(0, 0, 0, .15);
padding: .75rem;
overflow: visible;
background-color: $ui-blue;
background-color: $ui-blue-dark;
color: $type-white;
line-height: 1.25rem;
text-align: left;
@ -48,7 +48,7 @@
border-left: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-blue;
background-color: $ui-blue-dark;
width: $arrow-border-width;
height: $arrow-border-width;

2
src/components/informationpage/informationpage.scss
View file

@ -8,7 +8,7 @@
.title-banner {
&.masthead {
background-color: $ui-blue-dark;
background-color: $ui-purple-dark;
padding-bottom: .5rem;
h1 {

4
src/components/intro/intro.scss
View file

@ -12,7 +12,7 @@
.intro-container {
min-height: 24rem;
justify-content: space-between;
background-color: $ui-blue;
background-color: $ui-purple-dark;
background-size: 624px 325px;
background-repeat: no-repeat;
background-position: right;
@ -80,7 +80,7 @@
.intro-button {
border-radius: 4px;
background-color: $ui-white;
color: $ui-blue;
color: $ui-purple-dark;
padding: .625rem .75rem;
font-size: 1rem;
margin-right: .75rem;

2
src/components/join-flow/join-flow-steps.scss
View file

@ -9,7 +9,7 @@
margin-bottom: .5rem;
&:focus {
box-shadow: 0 0 0 .25rem $ui-blue-25percent;
box-shadow: 0 0 0 .25rem $ui-purple-25percent;
}
}

4
src/components/join-flow/next-step-button.scss
View file

@ -8,11 +8,11 @@
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
height: 5.1875rem;
background-color: $ui-orange;
background-color: $ui-purple-dark;
&:hover {
transition: background-color .25s ease;
background-color: $ui-orange-90percent;
background-color: $ui-purple-darker;
}
/* match the small window setting for modal as a whole */

6
src/components/modal/addtostudio/modal.scss
View file

@ -160,15 +160,15 @@ are not obscured by gradient overlay */
}
.studio-status-icon-unselected {
background-color: $ui-blue;
background-color: $ui-purple-dark;
}
.submit-button {
background-color: $ui-blue;
background-color: $ui-purple-dark;
}
.submit-button-waiting {
background-color: $ui-blue;
background-color: $ui-purple-dark;
}
.studio-status-icon-plus-img,

4
src/components/modal/comments/modal.scss
View file

@ -17,8 +17,8 @@ $medium-and-small: "screen and (max-width : #{$mobileIntermediate}-1)";
.report-modal-header {
border-radius: 1rem 1rem 0 0;
box-shadow: inset 0 -1px 0 0 $ui-coral-dark;
background-color: $ui-coral;
box-shadow: inset 0 -1px 0 0 $ui-red-dark;
background-color: $ui-red-dark;
padding-top: .75rem;
width: 100%;
height: 3rem;

4
src/components/modal/social/modal.scss
View file

@ -110,8 +110,8 @@
&:focus {
transition: all .2s ease;
outline: none;
border: 2px solid $ui-blue;
box-shadow: 0 0 0 4px $ui-blue-25percent;
border: 2px solid $ui-purple-dark;
box-shadow: 0 0 0 4px $ui-purple-25percent;
}
&.social-textarea {

9
src/components/navigation/base/navigation.scss
View file

@ -9,11 +9,12 @@
border-bottom: 1px solid $active-gray;
box-shadow: 0 0 3px $box-shadow-gray;
background-color: $ui-blue;
background-color: $ui-purple-dark;
&.staging {
background-color: $ui-orange;
}
// Temporary removal of staging styling for testing purposes
// &.staging {
// background-color: $ui-orange;
// }
width: 100%;

21
src/components/navigation/www/navigation.scss
View file

@ -2,17 +2,18 @@
@import "../../../frameless";
#navigation {
&.staging {
.messages {
.message-count {
display: none;
// Temporary removal of staging styling for testing purposes
// &.staging {
// .messages {
// .message-count {
// display: none;
&.show {
background-color: $ui-blue;
}
}
}
}
// &.show {
// background-color: $ui-blue;
// }
// }
// }
// }
.logo {
margin-right: 10px;

2
src/components/news/news.scss
View file

@ -35,7 +35,7 @@
h4 {
display: block;
color: $link-blue;
color: $link-purple;
font-size: .85rem;
}

2
src/components/os-chooser/os-chooser.scss
View file

@ -34,7 +34,7 @@
}
&.active {
background-color: $ui-blue;
background-color: $ui-purple-dark;
}
}
}

2
src/components/social-message/social-message.scss
View file

@ -41,7 +41,7 @@ a.social-messages-profile-link {
color: $type-gray;
&:hover {
color: $link-blue;
color: $link-purple;
}
}

2
src/components/steps/steps.scss
View file

@ -29,7 +29,7 @@
.step-number {
display: inline-flex;
border-radius: 2rem;
background-color: $ui-blue;
background-color: $ui-purple-dark;
width: 2rem;
height: 2rem;
color: $ui-white;

2
src/components/teacher-banner/teacher-banner.scss
View file

@ -33,6 +33,6 @@
margin-left: 10px;
background-color: $ui-white;
padding: 13px 20px;
color: $ui-blue;
color: $ui-purple-dark;
}
}

4
src/components/tooltip/tooltip.scss
View file

@ -25,7 +25,7 @@
margin-top: $arrow-border-width * 0.5;
border: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-blue;
background-color: $ui-blue-dark;
padding: 1rem;
width: 13.75rem;
text-align: left;
@ -43,7 +43,7 @@
border-left: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-blue;
background-color: $ui-blue-dark;
width: $arrow-border-width;
height: $arrow-border-width;

16
src/components/ttt-tile/ttt-tile.scss
View file

@ -82,22 +82,6 @@
font-size: .875rem;
}
.ttt-tile-guides {
margin: auto;
border-top: 1px dashed $ui-border;
border-radius: 0 0 1rem 1rem;
cursor: pointer;
padding: 1.25rem 0;
color: $link-blue;
font-size: .75rem;
font-weight: 500;
&:hover {
background-color: $ui-blue-10percent;
}
}
.ttt-tile-open-modal {
display: inline-block;
padding: 0 .25rem;

12
src/main.scss
View file

@ -6,7 +6,7 @@ html,
body {
display: block;
margin: 0;
background-color: $ui-blue-dark;
background-color: $ui-purple-dark;
padding: 0;
color: $type-gray;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
@ -91,19 +91,19 @@ strong {
/* Links */
a {
cursor: pointer;
color: $ui-blue;
color: $ui-purple-dark;
font-weight: bold;
&:link,
&:visited,
&:active {
text-decoration: none;
color: $link-blue;
color: $link-purple;
}
&:hover {
text-decoration: none;
color: $ui-blue-dark;
color: $ui-purple-darker;
}
}
@ -137,6 +137,10 @@ p {
font-weight: normal;
}
input {
outline-color: $ui-purple-dark;
}
::selection {
background-color: $ui-blue-25percent;
}

2
src/views/about/about.scss
View file

@ -79,7 +79,7 @@
.about-button {
margin-right: .75rem;
background-color: $ui-blue;
background-color: $ui-purple-dark;
color: $ui-white;
font-size: 1rem;

2
src/views/annual-report/2021/annual-report.scss
View file

@ -75,7 +75,7 @@ p a {
a, a:link, a:visited, a:active{
cursor: pointer;
color: $motion-blue-3;
color: $ui-purple-dark;
}
.bold {

2
src/views/boost/boost.scss
View file

@ -3,7 +3,7 @@
.boost {
.extension-header {
background-color: $ui-orange;
background-color: $ui-magenta-dark;
background-image: url("/images/boost/boost-pattern.svg");
}
}

3
src/views/components/components.jsx
View file

@ -150,6 +150,7 @@ const Components = () => (
/>
<h1>Colors</h1>
<div className="colors">
<span className="ui-purple-dark">$ui-purple-dark</span>
<span className="ui-blue">$ui-blue</span>
<span className="ui-orange">$ui-orange</span>
<span className="ui-light-gray">$ui-light-gray</span>
@ -167,7 +168,7 @@ const Components = () => (
<span className="header-gray">$header-gray</span>
<span className="type-gray">$type-gray</span>
<span className="type-white">$type-white</span>
<span className="link-blue">$link-blue</span>
<span className="link-purple">$link-purple</span>
<span className="splash-green">$ui-aqua</span>
<span className="splash-pink">$ui-purple</span>
<span className="splash-blue">$ui-blue</span>

13
src/views/components/components.scss
View file

@ -9,7 +9,7 @@
li {
background-color: $active-gray;
&.active {
background-color: $ui-blue;
background-color: $ui-purple-dark;
}
}
}
@ -38,6 +38,7 @@
font-weight: bold;
}
.ui-purple-dark,
.ui-blue,
.ui-orange,
.ui-dark-gray,
@ -45,13 +46,17 @@
.overlay-gray,
.header-gray,
.type-gray,
.link-blue,
.link-purple,
.splash-green,
.splash-pink,
.splash-blue {
color: $ui-white;
}
.ui-purple-dark {
background-color: $ui-purple-dark;
}
.ui-blue {
background-color: $ui-blue;
}
@ -120,8 +125,8 @@
background-color: $type-white;
}
.link-blue {
background-color: $link-blue;
.link-purple {
background-color: $link-purple;
}
.splash-green {

2
src/views/developers/developers.scss
View file

@ -32,7 +32,7 @@ $developer-spot: $ui-aqua;
}
.band {
$band-color: hsla(360, 100%, 100%, .15);
$band-color: $box-shadow-light-gray;
margin-top: 2rem;
background-color: $band-color;

4
src/views/download/download.scss
View file

@ -42,7 +42,7 @@
}
.download-header {
background-color: $ui-blue;
background-color: $ui-purple-dark;
padding: 4rem 0;
color: $ui-white;
@ -168,7 +168,7 @@
p {
line-height: normal;
color: $link-blue;
color: $link-purple;
font-weight: 600;
}

2
src/views/download/scratch-link/download.scss
View file

@ -2,7 +2,7 @@
.link {
.extension-header {
background-color: $ui-aqua;
background-color: $ui-purple-dark;
.inner {
flex-direction: row;

2
src/views/ev3/ev3.scss
View file

@ -2,7 +2,7 @@
.ev3 {
.extension-header {
background-color: $ui-orange;
background-color: $ui-magenta-dark;
background-image: url("/images/ev3/ev3-pattern.svg");
}
.headline-icon {

17
src/views/explore/explore.scss
View file

@ -12,7 +12,7 @@ $base-bg: $ui-white;
.title-banner {
&.masthead {
margin-bottom: 0;
background-color: $ui-yellow;
background-color: $ui-aqua;
padding: 0;
h1 {
@ -84,13 +84,13 @@ $base-bg: $ui-white;
justify-content: flex-start;
li {
border: 1px solid $type-dark-gray;
background-color: $active-gray;
color: $header-gray;
border: 1px solid $ui-purple-dark;
background-color: $ui-white;
color: $link-purple;
&.active {
opacity: 1;
background-color: $ui-aqua;
background-color: $ui-purple-dark;
color: $ui-white;
}
@ -99,8 +99,11 @@ $base-bg: $ui-white;
}
&:hover {
background-color: $active-dark-gray;
color: $type-dark-gray;
background-color: $ui-purple-25percent;
}
&.active:hover {
background-color: $ui-purple-darker;
}
}
}

2
src/views/gdxfor/gdxfor.scss
View file

@ -3,7 +3,7 @@
.gdxfor {
.extension-header {
background-color: $ui-blue;
background-color: $ui-blue-dark;
background-image: url("/images/gdxfor/gdxfor-pattern.svg");
}
}

5
src/views/ideas/ideas.scss
View file

@ -9,7 +9,7 @@ $base-bg: $ui-white;
}
.banner-wrapper {
background: $ui-yellow bottom right url("/images/ideas/right-juice.png") no-repeat;
background: $ui-aqua bottom right url("/images/ideas/right-juice.png") no-repeat;
}
.ideas-banner {
@ -37,7 +37,8 @@ $base-bg: $ui-white;
.ideas-button {
margin-right: .75rem;
background-color: $ui-blue;
background-color: $ui-purple-dark;
border: 1px solid $ui-white;
color: $ui-white;
font-size: 1rem;

6
src/views/messages/messages.scss
View file

@ -7,7 +7,7 @@
}
.title-banner.mod-messages {
background-color: $ui-blue;
background-color: $ui-purple-dark;
color: $type-white;
}
@ -51,7 +51,7 @@
.messages-header-unread {
margin-left: 1rem;
border-radius: 1rem;
background-color: $ui-orange;
background-color: $ui-red-dark;
padding: .25rem .5rem;
line-height: 1rem;
color: $type-white;
@ -60,7 +60,7 @@
.admin-message {
border: 1px solid $active-dark-gray;
border-radius: 5px;
background-color: $ui-blue-25percent;
background-color: $ui-purple-25percent;
padding: 1rem;
}

2
src/views/microbit/microbit.scss
View file

@ -3,7 +3,7 @@
.microbit {
.extension-header {
background-color: $ui-mint-green;
background-color: #318131;
background-image: url("/images/microbit/mbit-pattern.svg");
}

2
src/views/parents/parents.scss
View file

@ -67,7 +67,7 @@ $story-width: $cols3;
}
.band {
$band-color: hsla(360, 100%, 100%, .15);
$band-color: $box-shadow-light-gray;
margin-top: 2rem;
background-color: $band-color;

2
src/views/preview/comment/comment.scss
View file

@ -249,7 +249,7 @@
.comment-reply {
display: inline-flex;
cursor: pointer;
color: $ui-blue;
color: $link-purple;
font-weight: bold;
&:after {

2
src/views/preview/subactions.scss
View file

@ -48,7 +48,7 @@
.action-button {
margin: 0 0 0 .5rem;
border-radius: 19px;
background-color: $ui-blue;
background-color: $ui-purple-dark;
padding: 0 .75rem;
height: 2rem;
text-decoration: none;

6
src/views/preview/unsupported-browser.scss
View file

@ -56,9 +56,9 @@
}
.back-button {
border: 1px solid $ui-blue;
border: 1px solid $ui-purple-dark;
border-radius: .25rem;
background: $ui-blue;
background: $ui-purple-dark;
cursor: pointer;
padding: .5rem 2rem;
color: $ui-white;
@ -74,7 +74,7 @@
.faq-link {
text-decoration: none;
color: $ui-blue;
color: $link-purple;
}
}

4
src/views/splash/hoc/hoc-banner.scss
View file

@ -59,7 +59,7 @@ $tile-height: 244px;
.hoc-image-text {
margin: auto auto;
color: $ui-blue;
color: $ui-purple-dark;
font-size: 1rem;
font-weight: bold;
}
@ -77,7 +77,7 @@ $tile-height: 244px;
border-radius: 10px;
background-color: $ui-white;
padding: .5rem 1rem .75rem 1rem;
color: $ui-blue;
color: $ui-purple-dark;
font-size: .75rem;
font-weight: bold;

2
src/views/studio/icons/edit-icon.svg
View file

@ -1,3 +1,3 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0592 15.9579C9.96446 16.0526 9.85758 16.1134 9.72976 16.1711L7.56659 17.0795C7.48799 16.8115 7.29336 16.4709 6.93361 16.1111C6.58592 15.7635 6.25738 15.5809 5.99914 15.4903L6.89672 13.338C6.94337 13.1992 7.0271 13.0936 7.1208 12.9999C7.14262 13 7.16333 12.9793 7.17418 12.9684L7.20476 12.9378C7.35075 12.7919 7.55585 12.703 7.79617 12.6711C8.40705 12.5955 9.11521 12.8854 9.64935 13.4195C10.1835 13.9537 10.4734 14.6618 10.3857 15.2606C10.3505 15.4582 10.2854 15.6615 10.1833 15.8118C10.1529 15.8642 10.1114 15.9057 10.069 15.9481L10.0592 15.9579ZM13.6054 6.53721C13.9427 6.19986 14.4603 6.12759 14.9902 6.28654C15.2973 6.37865 15.4255 6.75936 15.2154 6.96946L10.177 12.0079C10.0566 12.1282 9.86135 12.148 9.70333 12.0472C9.54003 11.9451 9.37127 11.8572 9.20119 11.7838C8.92376 11.6642 8.82736 11.3152 9.02168 11.1209L13.6054 6.53721ZM16.5317 9.46348L11.9489 14.0462C11.7586 14.2366 11.4084 14.1547 11.2923 13.8847C11.2173 13.7052 11.1239 13.5309 11.0163 13.3622C10.9099 13.1966 10.9364 12.9902 11.0616 12.865L16.0882 7.83835C16.2964 7.63022 16.677 7.75634 16.7711 8.06359C16.9356 8.59891 16.871 9.12417 16.5317 9.46348ZM18.5347 4.5342C17.2459 3.24545 15.3869 3.01396 14.3838 4.01711L6.29247 12.1084C6.09421 12.3067 5.91898 12.528 5.81284 12.7986L4.10642 16.8961C3.89183 17.4134 4.05796 18.0589 4.53397 18.5349C5.00998 19.0109 5.65549 19.177 6.1728 18.9625L10.2703 17.256C10.5398 17.1488 10.7611 16.9736 10.9594 16.7753L19.0507 8.68402C20.0538 7.68087 19.8234 5.82294 18.5347 4.5342Z" fill="#4C97FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0592 15.9579C9.96446 16.0526 9.85758 16.1134 9.72976 16.1711L7.56659 17.0795C7.48799 16.8115 7.29336 16.4709 6.93361 16.1111C6.58592 15.7635 6.25738 15.5809 5.99914 15.4903L6.89672 13.338C6.94337 13.1992 7.0271 13.0936 7.1208 12.9999C7.14262 13 7.16333 12.9793 7.17418 12.9684L7.20476 12.9378C7.35075 12.7919 7.55585 12.703 7.79617 12.6711C8.40705 12.5955 9.11521 12.8854 9.64935 13.4195C10.1835 13.9537 10.4734 14.6618 10.3857 15.2606C10.3505 15.4582 10.2854 15.6615 10.1833 15.8118C10.1529 15.8642 10.1114 15.9057 10.069 15.9481L10.0592 15.9579ZM13.6054 6.53721C13.9427 6.19986 14.4603 6.12759 14.9902 6.28654C15.2973 6.37865 15.4255 6.75936 15.2154 6.96946L10.177 12.0079C10.0566 12.1282 9.86135 12.148 9.70333 12.0472C9.54003 11.9451 9.37127 11.8572 9.20119 11.7838C8.92376 11.6642 8.82736 11.3152 9.02168 11.1209L13.6054 6.53721ZM16.5317 9.46348L11.9489 14.0462C11.7586 14.2366 11.4084 14.1547 11.2923 13.8847C11.2173 13.7052 11.1239 13.5309 11.0163 13.3622C10.9099 13.1966 10.9364 12.9902 11.0616 12.865L16.0882 7.83835C16.2964 7.63022 16.677 7.75634 16.7711 8.06359C16.9356 8.59891 16.871 9.12417 16.5317 9.46348ZM18.5347 4.5342C17.2459 3.24545 15.3869 3.01396 14.3838 4.01711L6.29247 12.1084C6.09421 12.3067 5.91898 12.528 5.81284 12.7986L4.10642 16.8961C3.89183 17.4134 4.05796 18.0589 4.53397 18.5349C5.00998 19.0109 5.65549 19.177 6.1728 18.9625L10.2703 17.256C10.5398 17.1488 10.7611 16.9736 10.9594 16.7753L19.0507 8.68402C20.0538 7.68087 19.8234 5.82294 18.5347 4.5342Z" fill="#855CD6"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

6
src/views/studio/modals/promote-modal.scss
View file

@ -4,7 +4,7 @@
width: 680px;
.promote-title {
background: $ui-blue;
background: $ui-purple-dark;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding-top: .75rem;
@ -61,7 +61,7 @@
.cancel-button {
background-color: $ui-white;
color: $ui-blue;
box-shadow: 0px 0px 0 1px $ui-blue;
color: $ui-purple-dark;
box-shadow: 0px 0px 0 1px $ui-purple-dark;
}
}

4
src/views/studio/modals/studio-report-modal.scss
View file

@ -3,8 +3,8 @@
.studio-report-modal {
.studio-report-title {
box-shadow: inset 0 -1px 0 0 $ui-aqua-dark;
background: $ui-aqua;
box-shadow: inset 0 -1px 0 0 $ui-red-dark;
background: $ui-red-dark;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding-top: .75rem;

6
src/views/studio/modals/transfer-host-modal.scss
View file

@ -3,7 +3,7 @@
.transfer-host-modal {
.transfer-host-title {
background: $ui-blue;
background: $ui-purple-dark;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding-top: .75rem;
@ -81,8 +81,8 @@
.cancel-button {
background-color: $ui-white;
color: $ui-blue;
box-shadow: 0px 0px 0 1px $ui-blue;
color: $ui-purple-dark;
box-shadow: 0px 0px 0 1px $ui-purple-dark;
margin-right: 1rem;
}

14
src/views/studio/modals/user-projects-modal.scss
View file

@ -3,8 +3,8 @@
.user-projects-modal {
.user-projects-modal-title {
box-shadow: inset 0 -1px 0 0 $ui-blue-dark;
background-color: $ui-blue;
box-shadow: inset 0 -1px 0 0 $box-shadow-light-gray;
background-color: $ui-purple-dark;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding-top: .75rem;
@ -21,7 +21,7 @@
border: 1px solid rgba(0, 0, 0, 0.15);
color: #575e75;
&.active {
background: $ui-blue;
background: $ui-purple-dark;
color: white;
}
&:active {
@ -29,8 +29,8 @@
}
}
button:hover {
background: $ui-blue-25percent;
border: 1px solid $ui-blue-10percent;
background: $ui-purple-25percent;
border: 1px solid $ui-purple-10percent;
}
}
.user-projects-modal-content {
@ -73,8 +73,8 @@
}
.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;
border: 1px solid $ui-purple-dark !important; // Override the tile border set in studio.scss .studio-project-tile
box-shadow: 0 0 0 4px $ui-purple-25percent;
}
.studio-project-add-remove-image {

25
src/views/studio/studio.scss
View file

@ -97,7 +97,7 @@ $radius: 8px;
button {
font-size: smaller;
background-color: $ui-blue;
background-color: $ui-purple-dark;
border: 1px solid transparent;
border-radius: 999em;
color: $ui-white;
@ -107,7 +107,7 @@ $radius: 8px;
padding-right: 0.75em;
&:hover {
background-color: $ui-blue-dark;
background-color: $ui-purple-darker;
}
img {
@ -212,7 +212,7 @@ $radius: 8px;
}
}
.active > li {
background: $ui-blue;
background: $ui-purple-dark;
color: white;
img {
filter: invert(0);
@ -223,7 +223,7 @@ $radius: 8px;
border: 1px solid $active-gray;
}
a.active.nav_link:hover > li {
background: $ui-blue-dark;
background: $ui-purple-darker;
color: white;
img {
filter: invert(0);
@ -240,11 +240,11 @@ $radius: 8px;
width: 4.875rem;
height: 2rem;
border: 1px solid $ui-blue;
border: 1px solid $ui-purple-dark;
border-radius: 1rem;
font-weight: bold;
color: $ui-blue;
color: $ui-purple-dark;
font-size: 12px;
display: flex;
justify-content: center;
@ -318,7 +318,7 @@ $radius: 8px;
min-width: 0; /* Prevents within from expanding beyond bounds */
}
.studio-project-title {
color: #4C97FF;
color: $link-purple;
font-weight: 700;
font-size: 14px;
white-space: nowrap;
@ -380,7 +380,7 @@ $radius: 8px;
min-width: 0; /* Prevents within from expanding beyond bounds */
}
.studio-member-name {
color: #4C97FF;
color: $link-purple;
font-weight: 700;
font-size: 14px;
white-space: nowrap;
@ -395,11 +395,6 @@ $radius: 8px;
overflow: hidden;
text-overflow: ellipsis;
}
.studio-member-remove, .studio-member-promote {
color: $ui-blue;
background: transparent;
border: none;
}
.studio-member-tile-menu-wide {
white-space: nowrap;
@ -415,7 +410,7 @@ $radius: 8px;
margin-top: 20px;
h3 {
color: #4C97FF;
color: $ui-purple-dark;
}
.studio-adder-row {
@ -585,7 +580,7 @@ $radius: 8px;
}
.studio-thumb-edit-button {
color: #4C97FF;
color: $link-purple;
font-size: 1rem;
font-weight: bold;
height: 40px;

2
src/views/teachers/landing/landing.scss
View file

@ -68,7 +68,7 @@ $story-width: $cols3;
}
.band {
$band-color: hsla(360, 100%, 100%, .15);
$band-color: $box-shadow-light-gray;
margin-top: 2rem;
background-color: $band-color;

2
src/views/wedo2/wedo2.scss
View file

@ -2,7 +2,7 @@
.wedo2 {
.extension-header {
background-color: $ui-coral;
background-color: $ui-magenta-dark;
background-image: url("/images/wedo2/wedo2-pattern.svg");
}
}

2
static/svgs/project/comment-reply.svg
View file

@ -5,6 +5,6 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="comment-reply" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M9.4379644,9.95564876 C9.4397719,9.83000629 9.4365177,9.69150012 9.42535762,9.54182983 C9.39320024,9.16970313 9.30581606,8.72820912 9.12405695,8.26937328 C9.07512181,8.1566514 9.02758481,8.03887149 8.96746449,7.92470447 C8.89406178,7.78886016 8.89825622,7.75634423 8.7905989,7.59665491 C8.62352034,7.33435977 8.47531676,7.14143195 8.29006229,6.92104623 C7.92234964,6.50701011 7.47144725,6.15222524 6.99467914,5.89065268 C6.51441566,5.63486073 6.01387905,5.47228111 5.5671711,5.38846228 C5.12465758,5.30464345 4.71639867,5.29597253 4.48150998,5.29741768 C4.35847305,5.29452738 4.20677411,5.32270785 4.12917695,5.32632073 C4.04388999,5.33571422 3.99845021,5.34004968 3.99845021,5.34004968 C3.50070989,5.39279773 3.05540009,5.0185033 3.0050668,4.5040291 C2.96242332,4.07337373 3.20989533,3.68173747 3.58180242,3.53433194 C3.58180242,3.53433194 3.62514497,3.51771269 3.70553842,3.48591934 C3.79501983,3.454126 3.88310309,3.40571339 4.07395015,3.34862988 C4.46403315,3.22506936 4.96317161,3.09789597 5.6119118,3.03286412 C6.25575847,2.96999999 7.02893374,2.9880644 7.85034507,3.16076009 C8.66826104,3.33851382 9.53091772,3.67740202 10.3222689,4.17525697 C10.7053612,4.422378 11.1087266,4.72441482 11.4247078,5.00910981 C11.5596289,5.12183169 11.8001102,5.36533984 11.9385268,5.51708083 C12.1000127,5.68616364 12.2468182,5.86536252 12.3922255,6.04311624 C12.9591741,6.76424721 13.37722,7.545352 13.6547522,8.2534766 C13.9134224,8.91884719 14.055538,9.51573832 14.1351159,9.95564876 L15.4897593,9.95564876 C16.1024852,9.95564876 16.6500676,10.3333021 16.8842064,10.9178352 C17.1192892,11.5033442 16.9908905,12.1708245 16.5575451,12.6187388 L12.7603439,16.5426249 C12.4752234,16.8373311 12.0956921,17.0002978 11.6935022,17.0002978 C11.2903682,17.0002978 10.9108369,16.8373311 10.6266605,16.5426249 L6.82851524,12.6187388 C6.39611391,12.1708245 6.26677115,11.5033442 6.50185397,10.9178352 C6.73693679,10.3333021 7.28451925,9.95564876 7.89630104,9.95564876 L9.4379644,9.95564876 Z" fill="#4C97FF" transform="translate(10.000298, 10.000000) scale(-1, 1) rotate(-90.000000) translate(-10.000298, -10.000000) "></path>
<path d="M9.4379644,9.95564876 C9.4397719,9.83000629 9.4365177,9.69150012 9.42535762,9.54182983 C9.39320024,9.16970313 9.30581606,8.72820912 9.12405695,8.26937328 C9.07512181,8.1566514 9.02758481,8.03887149 8.96746449,7.92470447 C8.89406178,7.78886016 8.89825622,7.75634423 8.7905989,7.59665491 C8.62352034,7.33435977 8.47531676,7.14143195 8.29006229,6.92104623 C7.92234964,6.50701011 7.47144725,6.15222524 6.99467914,5.89065268 C6.51441566,5.63486073 6.01387905,5.47228111 5.5671711,5.38846228 C5.12465758,5.30464345 4.71639867,5.29597253 4.48150998,5.29741768 C4.35847305,5.29452738 4.20677411,5.32270785 4.12917695,5.32632073 C4.04388999,5.33571422 3.99845021,5.34004968 3.99845021,5.34004968 C3.50070989,5.39279773 3.05540009,5.0185033 3.0050668,4.5040291 C2.96242332,4.07337373 3.20989533,3.68173747 3.58180242,3.53433194 C3.58180242,3.53433194 3.62514497,3.51771269 3.70553842,3.48591934 C3.79501983,3.454126 3.88310309,3.40571339 4.07395015,3.34862988 C4.46403315,3.22506936 4.96317161,3.09789597 5.6119118,3.03286412 C6.25575847,2.96999999 7.02893374,2.9880644 7.85034507,3.16076009 C8.66826104,3.33851382 9.53091772,3.67740202 10.3222689,4.17525697 C10.7053612,4.422378 11.1087266,4.72441482 11.4247078,5.00910981 C11.5596289,5.12183169 11.8001102,5.36533984 11.9385268,5.51708083 C12.1000127,5.68616364 12.2468182,5.86536252 12.3922255,6.04311624 C12.9591741,6.76424721 13.37722,7.545352 13.6547522,8.2534766 C13.9134224,8.91884719 14.055538,9.51573832 14.1351159,9.95564876 L15.4897593,9.95564876 C16.1024852,9.95564876 16.6500676,10.3333021 16.8842064,10.9178352 C17.1192892,11.5033442 16.9908905,12.1708245 16.5575451,12.6187388 L12.7603439,16.5426249 C12.4752234,16.8373311 12.0956921,17.0002978 11.6935022,17.0002978 C11.2903682,17.0002978 10.9108369,16.8373311 10.6266605,16.5426249 L6.82851524,12.6187388 C6.39611391,12.1708245 6.26677115,11.5033442 6.50185397,10.9178352 C6.73693679,10.3333021 7.28451925,9.95564876 7.89630104,9.95564876 L9.4379644,9.95564876 Z" fill="#855CD6" transform="translate(10.000298, 10.000000) scale(-1, 1) rotate(-90.000000) translate(-10.000298, -10.000000) "></path>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

4
static/svgs/studio/activity-curator.svg
View file

@ -1,4 +1,4 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.2531 7.47107C5.2531 8.16594 5.51512 8.80522 5.9491 9.28437C4.50749 10.1253 3.54431 11.8131 3.54431 13.7407C3.54431 14.5562 4.19249 15.1128 5.00253 15.4536C5.82565 15.7998 6.90529 15.9673 7.97081 15.9673C9.03633 15.9673 10.116 15.7998 10.9391 15.4536C11.7491 15.1128 12.3973 14.5562 12.3973 13.7407V13.7342C12.3973 13.6496 12.3973 13.5472 12.3834 13.4418C12.3334 12.4083 12.0039 11.4543 11.4801 10.6824C11.0859 10.1059 10.5795 9.62615 9.99447 9.28522C10.4318 8.80663 10.6887 8.1706 10.6887 7.47107C10.6887 5.96646 9.47307 4.75 7.97416 4.75C6.46912 4.75 5.2531 5.96602 5.2531 7.47107Z" fill="#4C97FF"/>
<path d="M15.0868 5.71516C14.0615 5.71516 13.2332 6.54343 13.2332 7.56872C13.2332 8.00598 13.385 8.40622 13.6373 8.72277C13.1654 9.02039 12.7758 9.45561 12.5108 9.97982C12.4698 10.0609 12.476 10.1578 12.527 10.233C13.0003 10.9304 13.3012 11.7992 13.3451 12.7461C13.3501 12.8539 13.4236 12.9463 13.5274 12.9753C14.3677 13.2105 15.4588 13.2317 16.3459 13.0414C16.7892 12.9463 17.2012 12.7943 17.5086 12.5735C17.8194 12.3501 18.0443 12.0384 18.0443 11.637C18.0443 10.393 17.4408 9.29929 16.5294 8.72307C16.7819 8.40648 16.9338 8.00612 16.9338 7.56872C16.9338 6.5441 16.1062 5.71516 15.0868 5.71516Z" fill="#4C97FF"/>
<path d="M5.2531 7.47107C5.2531 8.16594 5.51512 8.80522 5.9491 9.28437C4.50749 10.1253 3.54431 11.8131 3.54431 13.7407C3.54431 14.5562 4.19249 15.1128 5.00253 15.4536C5.82565 15.7998 6.90529 15.9673 7.97081 15.9673C9.03633 15.9673 10.116 15.7998 10.9391 15.4536C11.7491 15.1128 12.3973 14.5562 12.3973 13.7407V13.7342C12.3973 13.6496 12.3973 13.5472 12.3834 13.4418C12.3334 12.4083 12.0039 11.4543 11.4801 10.6824C11.0859 10.1059 10.5795 9.62615 9.99447 9.28522C10.4318 8.80663 10.6887 8.1706 10.6887 7.47107C10.6887 5.96646 9.47307 4.75 7.97416 4.75C6.46912 4.75 5.2531 5.96602 5.2531 7.47107Z" fill="#855CD6"/>
<path d="M15.0868 5.71516C14.0615 5.71516 13.2332 6.54343 13.2332 7.56872C13.2332 8.00598 13.385 8.40622 13.6373 8.72277C13.1654 9.02039 12.7758 9.45561 12.5108 9.97982C12.4698 10.0609 12.476 10.1578 12.527 10.233C13.0003 10.9304 13.3012 11.7992 13.3451 12.7461C13.3501 12.8539 13.4236 12.9463 13.5274 12.9753C14.3677 13.2105 15.4588 13.2317 16.3459 13.0414C16.7892 12.9463 17.2012 12.7943 17.5086 12.5735C17.8194 12.3501 18.0443 12.0384 18.0443 11.637C18.0443 10.393 17.4408 9.29929 16.5294 8.72307C16.7819 8.40648 16.9338 8.00612 16.9338 7.56872C16.9338 6.5441 16.1062 5.71516 15.0868 5.71516Z" fill="#855CD6"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

2
static/svgs/studio/activity-edit.svg
View file

@ -1,3 +1,3 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0592 15.9577C9.96446 16.0524 9.85758 16.1132 9.72976 16.1709L7.56659 17.0793C7.48799 16.8113 7.29336 16.4707 6.93361 16.1109C6.58592 15.7633 6.25738 15.5807 5.99914 15.4901L6.89672 13.3378C6.94337 13.199 7.0271 13.0934 7.1208 12.9997C7.14262 12.9998 7.16333 12.9791 7.17418 12.9682L7.20476 12.9376C7.35075 12.7917 7.55585 12.7028 7.79617 12.6709C8.40705 12.5953 9.11521 12.8852 9.64935 13.4193C10.1835 13.9535 10.4734 14.6616 10.3857 15.2605C10.3505 15.458 10.2854 15.6613 10.1833 15.8116C10.1529 15.864 10.1114 15.9055 10.069 15.9479L10.0592 15.9577ZM13.6054 6.53701C13.9427 6.19967 14.4603 6.12739 14.9902 6.28635C15.2973 6.37845 15.4255 6.75916 15.2154 6.96926L10.177 12.0077C10.0566 12.128 9.86135 12.1478 9.70333 12.047C9.54003 11.9449 9.37127 11.857 9.20119 11.7836C8.92376 11.664 8.82736 11.315 9.02168 11.1207L13.6054 6.53701ZM16.5317 9.46328L11.9489 14.046C11.7586 14.2364 11.4084 14.1545 11.2923 13.8845C11.2173 13.705 11.1239 13.5307 11.0163 13.362C10.9099 13.1964 10.9364 12.99 11.0616 12.8648L16.0882 7.83815C16.2964 7.63003 16.677 7.75614 16.7711 8.06339C16.9356 8.59871 16.871 9.12397 16.5317 9.46328ZM18.5347 4.534C17.2459 3.24525 15.3869 3.01376 14.3838 4.01691L6.29247 12.1082C6.09421 12.3065 5.91898 12.5278 5.81284 12.7984L4.10642 16.8959C3.89183 17.4132 4.05796 18.0587 4.53397 18.5347C5.00998 19.0107 5.65549 19.1769 6.1728 18.9623L10.2703 17.2558C10.5398 17.1486 10.7611 16.9734 10.9594 16.7751L19.0507 8.68382C20.0538 7.68067 19.8234 5.82274 18.5347 4.534Z" fill="#4C97FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0592 15.9577C9.96446 16.0524 9.85758 16.1132 9.72976 16.1709L7.56659 17.0793C7.48799 16.8113 7.29336 16.4707 6.93361 16.1109C6.58592 15.7633 6.25738 15.5807 5.99914 15.4901L6.89672 13.3378C6.94337 13.199 7.0271 13.0934 7.1208 12.9997C7.14262 12.9998 7.16333 12.9791 7.17418 12.9682L7.20476 12.9376C7.35075 12.7917 7.55585 12.7028 7.79617 12.6709C8.40705 12.5953 9.11521 12.8852 9.64935 13.4193C10.1835 13.9535 10.4734 14.6616 10.3857 15.2605C10.3505 15.458 10.2854 15.6613 10.1833 15.8116C10.1529 15.864 10.1114 15.9055 10.069 15.9479L10.0592 15.9577ZM13.6054 6.53701C13.9427 6.19967 14.4603 6.12739 14.9902 6.28635C15.2973 6.37845 15.4255 6.75916 15.2154 6.96926L10.177 12.0077C10.0566 12.128 9.86135 12.1478 9.70333 12.047C9.54003 11.9449 9.37127 11.857 9.20119 11.7836C8.92376 11.664 8.82736 11.315 9.02168 11.1207L13.6054 6.53701ZM16.5317 9.46328L11.9489 14.046C11.7586 14.2364 11.4084 14.1545 11.2923 13.8845C11.2173 13.705 11.1239 13.5307 11.0163 13.362C10.9099 13.1964 10.9364 12.99 11.0616 12.8648L16.0882 7.83815C16.2964 7.63003 16.677 7.75614 16.7711 8.06339C16.9356 8.59871 16.871 9.12397 16.5317 9.46328ZM18.5347 4.534C17.2459 3.24525 15.3869 3.01376 14.3838 4.01691L6.29247 12.1082C6.09421 12.3065 5.91898 12.5278 5.81284 12.7984L4.10642 16.8959C3.89183 17.4132 4.05796 18.0587 4.53397 18.5347C5.00998 19.0107 5.65549 19.1769 6.1728 18.9623L10.2703 17.2558C10.5398 17.1486 10.7611 16.9734 10.9594 16.7751L19.0507 8.68382C20.0538 7.68067 19.8234 5.82274 18.5347 4.534Z" fill="#855CD6"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

4
static/svgs/studio/activity-project.svg
View file

@ -1,4 +1,4 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.79431 5C6.79431 4.44772 7.24203 4 7.79431 4H17.7943C18.3466 4 18.7943 4.44772 18.7943 5V12C18.7943 12.5523 18.3466 13 17.7943 13H7.79431C7.24203 13 6.79431 12.5523 6.79431 12V5Z" fill="#4C97FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.79431 7H4.79431C4.24203 7 3.79431 7.44772 3.79431 8V14C3.79431 15.1046 4.68974 16 5.79431 16H14.7943C15.3466 16 15.7943 15.5523 15.7943 15V14H7.79431C6.68974 14 5.79431 13.1046 5.79431 12V7ZM6.79431 7H14.7943C15.3466 7 15.7943 7.44772 15.7943 8V13H7.79431C7.24203 13 6.79431 12.5523 6.79431 12V7Z" fill="#4C97FF"/>
<path d="M6.79431 5C6.79431 4.44772 7.24203 4 7.79431 4H17.7943C18.3466 4 18.7943 4.44772 18.7943 5V12C18.7943 12.5523 18.3466 13 17.7943 13H7.79431C7.24203 13 6.79431 12.5523 6.79431 12V5Z" fill="#855CD6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.79431 7H4.79431C4.24203 7 3.79431 7.44772 3.79431 8V14C3.79431 15.1046 4.68974 16 5.79431 16H14.7943C15.3466 16 15.7943 15.5523 15.7943 15V14H7.79431C6.68974 14 5.79431 13.1046 5.79431 12V7ZM6.79431 7H14.7943C15.3466 7 15.7943 7.44772 15.7943 8V13H7.79431C7.24203 13 6.79431 12.5523 6.79431 12V7Z" fill="#855CD6"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 678 B

After

Width:  |  Height:  |  Size: 678 B

4
static/svgs/tutorials.svg
View file

@ -10,8 +10,8 @@
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Combined-Shape" fill="#4D97FF" xlink:href="#path-1"></use>
<g id="Color/White" mask="url(#mask-2)" fill="#4D97FF">
<use id="Combined-Shape" fill="#855CD6" xlink:href="#path-1"></use>
<g id="Color/White" mask="url(#mask-2)" fill="#855CD6">
<g id="Color/1_Blue">
<g id="Color/Blue/1_Blue">
<rect id="Primary-Blue" x="0" y="0" width="20" height="20"></rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB