diff --git a/.circleci/config.yml b/.circleci/config.yml index b32b076bc..c51aa41b6 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -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\/.*/ diff --git a/package-lock.json b/package-lock.json index de555f5a8..a5d6601e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 2c0695a85..1a4adfefd 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/_colors.scss b/src/_colors.scss index ca3295c34..ad8b3a916 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -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); diff --git a/src/components/card/card.scss b/src/components/card/card.scss index 96dfb824d..9f8c48ff2 100644 --- a/src/components/card/card.scss +++ b/src/components/card/card.scss @@ -35,7 +35,7 @@ &.has-error { .input { - border: 1px solid $ui-orange; + border: 1px solid $ui-red-dark; } } diff --git a/src/components/dropdown-banner/banner.scss b/src/components/dropdown-banner/banner.scss index c5094eae0..c2d13f25a 100644 --- a/src/components/dropdown-banner/banner.scss +++ b/src/components/dropdown-banner/banner.scss @@ -37,6 +37,6 @@ $navigation-height: 50px; } &.warning { - background-color: $ui-orange; + background-color: $ui-red-dark; } } diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss index 5ac55e87d..441750759 100644 --- a/src/components/dropdown/dropdown.scss +++ b/src/components/dropdown/dropdown.scss @@ -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; diff --git a/src/components/formik-forms/formik-input.scss b/src/components/formik-forms/formik-input.scss index bf62e57a1..49f5fa6b3 100644 --- a/src/components/formik-forms/formik-input.scss +++ b/src/components/formik-forms/formik-input.scss @@ -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; } } diff --git a/src/components/formik-forms/formik-select.scss b/src/components/formik-forms/formik-select.scss index 40ec008f9..e5a675e82 100644 --- a/src/components/formik-forms/formik-select.scss +++ b/src/components/formik-forms/formik-select.scss @@ -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; diff --git a/src/components/forms/button.scss b/src/components/forms/button.scss index bc5ae82c6..db7be8f33 100644 --- a/src/components/forms/button.scss +++ b/src/components/forms/button.scss @@ -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 { diff --git a/src/components/forms/inplace-input.scss b/src/components/forms/inplace-input.scss index 65b3094e1..0dd9ffe40 100644 --- a/src/components/forms/inplace-input.scss +++ b/src/components/forms/inplace-input.scss @@ -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 { diff --git a/src/components/forms/input.scss b/src/components/forms/input.scss index 3fd202c3e..3a2edd578 100644 --- a/src/components/forms/input.scss +++ b/src/components/forms/input.scss @@ -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 { diff --git a/src/components/forms/phone-input.scss b/src/components/forms/phone-input.scss index 99baf386b..2b2f52acc 100644 --- a/src/components/forms/phone-input.scss +++ b/src/components/forms/phone-input.scss @@ -15,6 +15,7 @@ &:focus { outline: none; + border-color: $ui-purple-dark; } } } diff --git a/src/components/forms/select.scss b/src/components/forms/select.scss index 409e19f72..795c0a58d 100644 --- a/src/components/forms/select.scss +++ b/src/components/forms/select.scss @@ -33,7 +33,7 @@ &:focus { outline: none; - border: 1px solid $ui-blue; + border: 1px solid $ui-purple-dark; } &:-moz-focusring { diff --git a/src/components/forms/textarea.scss b/src/components/forms/textarea.scss index 69556f361..1dba2f381 100644 --- a/src/components/forms/textarea.scss +++ b/src/components/forms/textarea.scss @@ -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 { diff --git a/src/components/forms/validation-message.scss b/src/components/forms/validation-message.scss index 0a5620f91..d05006622 100644 --- a/src/components/forms/validation-message.scss +++ b/src/components/forms/validation-message.scss @@ -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; } } diff --git a/src/components/info-button/info-button.scss b/src/components/info-button/info-button.scss index 0723f8e55..fa95aab23 100644 --- a/src/components/info-button/info-button.scss +++ b/src/components/info-button/info-button.scss @@ -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; diff --git a/src/components/informationpage/informationpage.scss b/src/components/informationpage/informationpage.scss index 877a3c4be..bedb49d6f 100644 --- a/src/components/informationpage/informationpage.scss +++ b/src/components/informationpage/informationpage.scss @@ -8,7 +8,7 @@ .title-banner { &.masthead { - background-color: $ui-blue-dark; + background-color: $ui-purple-dark; padding-bottom: .5rem; h1 { diff --git a/src/components/intro/intro.scss b/src/components/intro/intro.scss index 52e7454c7..d0b08a4c1 100644 --- a/src/components/intro/intro.scss +++ b/src/components/intro/intro.scss @@ -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; diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss index 6caa86d50..5703f7760 100644 --- a/src/components/join-flow/join-flow-steps.scss +++ b/src/components/join-flow/join-flow-steps.scss @@ -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; } } diff --git a/src/components/join-flow/next-step-button.scss b/src/components/join-flow/next-step-button.scss index 2747dc178..daecb4e39 100644 --- a/src/components/join-flow/next-step-button.scss +++ b/src/components/join-flow/next-step-button.scss @@ -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 */ diff --git a/src/components/modal/addtostudio/modal.scss b/src/components/modal/addtostudio/modal.scss index 25a496b08..18a7368ff 100644 --- a/src/components/modal/addtostudio/modal.scss +++ b/src/components/modal/addtostudio/modal.scss @@ -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, diff --git a/src/components/modal/comments/modal.scss b/src/components/modal/comments/modal.scss index 2659b5d37..00514c7ca 100644 --- a/src/components/modal/comments/modal.scss +++ b/src/components/modal/comments/modal.scss @@ -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; diff --git a/src/components/modal/social/modal.scss b/src/components/modal/social/modal.scss index be290d21e..229b9660f 100644 --- a/src/components/modal/social/modal.scss +++ b/src/components/modal/social/modal.scss @@ -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 { diff --git a/src/components/navigation/base/navigation.scss b/src/components/navigation/base/navigation.scss index abcc7937a..482402f18 100644 --- a/src/components/navigation/base/navigation.scss +++ b/src/components/navigation/base/navigation.scss @@ -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%; diff --git a/src/components/navigation/www/navigation.scss b/src/components/navigation/www/navigation.scss index b07300010..48a05732e 100644 --- a/src/components/navigation/www/navigation.scss +++ b/src/components/navigation/www/navigation.scss @@ -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; diff --git a/src/components/news/news.scss b/src/components/news/news.scss index 4bc9c3ed4..8798d3839 100644 --- a/src/components/news/news.scss +++ b/src/components/news/news.scss @@ -35,7 +35,7 @@ h4 { display: block; - color: $link-blue; + color: $link-purple; font-size: .85rem; } diff --git a/src/components/os-chooser/os-chooser.scss b/src/components/os-chooser/os-chooser.scss index 7c0c8e11c..5f69aebbc 100644 --- a/src/components/os-chooser/os-chooser.scss +++ b/src/components/os-chooser/os-chooser.scss @@ -34,7 +34,7 @@ } &.active { - background-color: $ui-blue; + background-color: $ui-purple-dark; } } } diff --git a/src/components/social-message/social-message.scss b/src/components/social-message/social-message.scss index a7afbb18c..24eff2a57 100644 --- a/src/components/social-message/social-message.scss +++ b/src/components/social-message/social-message.scss @@ -41,7 +41,7 @@ a.social-messages-profile-link { color: $type-gray; &:hover { - color: $link-blue; + color: $link-purple; } } diff --git a/src/components/steps/steps.scss b/src/components/steps/steps.scss index 0f15ee0c3..0fdecd159 100644 --- a/src/components/steps/steps.scss +++ b/src/components/steps/steps.scss @@ -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; diff --git a/src/components/teacher-banner/teacher-banner.scss b/src/components/teacher-banner/teacher-banner.scss index f2564eed8..da2609332 100644 --- a/src/components/teacher-banner/teacher-banner.scss +++ b/src/components/teacher-banner/teacher-banner.scss @@ -33,6 +33,6 @@ margin-left: 10px; background-color: $ui-white; padding: 13px 20px; - color: $ui-blue; + color: $ui-purple-dark; } } diff --git a/src/components/tooltip/tooltip.scss b/src/components/tooltip/tooltip.scss index 55ef06313..f8192df59 100644 --- a/src/components/tooltip/tooltip.scss +++ b/src/components/tooltip/tooltip.scss @@ -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; diff --git a/src/components/ttt-tile/ttt-tile.scss b/src/components/ttt-tile/ttt-tile.scss index 12c8ba58c..a472f689e 100644 --- a/src/components/ttt-tile/ttt-tile.scss +++ b/src/components/ttt-tile/ttt-tile.scss @@ -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; diff --git a/src/main.scss b/src/main.scss index 1936a85d4..470bc61e2 100644 --- a/src/main.scss +++ b/src/main.scss @@ -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; } diff --git a/src/views/about/about.scss b/src/views/about/about.scss index 3251d08f3..3c4a80110 100644 --- a/src/views/about/about.scss +++ b/src/views/about/about.scss @@ -79,7 +79,7 @@ .about-button { margin-right: .75rem; - background-color: $ui-blue; + background-color: $ui-purple-dark; color: $ui-white; font-size: 1rem; diff --git a/src/views/annual-report/2021/annual-report.scss b/src/views/annual-report/2021/annual-report.scss index 67e5fd730..3e485d34a 100644 --- a/src/views/annual-report/2021/annual-report.scss +++ b/src/views/annual-report/2021/annual-report.scss @@ -75,7 +75,7 @@ p a { a, a:link, a:visited, a:active{ cursor: pointer; - color: $motion-blue-3; + color: $ui-purple-dark; } .bold { diff --git a/src/views/boost/boost.scss b/src/views/boost/boost.scss index f919d6531..61889a998 100644 --- a/src/views/boost/boost.scss +++ b/src/views/boost/boost.scss @@ -3,7 +3,7 @@ .boost { .extension-header { - background-color: $ui-orange; + background-color: $ui-magenta-dark; background-image: url("/images/boost/boost-pattern.svg"); } } diff --git a/src/views/components/components.jsx b/src/views/components/components.jsx index 18f8dbb20..5fa21290a 100644 --- a/src/views/components/components.jsx +++ b/src/views/components/components.jsx @@ -150,6 +150,7 @@ const Components = () => ( />

Colors

+ $ui-purple-dark $ui-blue $ui-orange $ui-light-gray @@ -167,7 +168,7 @@ const Components = () => ( $header-gray $type-gray $type-white - $link-blue + $link-purple $ui-aqua $ui-purple $ui-blue diff --git a/src/views/components/components.scss b/src/views/components/components.scss index b4a272f95..096088244 100644 --- a/src/views/components/components.scss +++ b/src/views/components/components.scss @@ -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 { diff --git a/src/views/developers/developers.scss b/src/views/developers/developers.scss index ab814f7cd..c029609df 100644 --- a/src/views/developers/developers.scss +++ b/src/views/developers/developers.scss @@ -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; diff --git a/src/views/download/download.scss b/src/views/download/download.scss index 5c5a64225..6efb2cca0 100644 --- a/src/views/download/download.scss +++ b/src/views/download/download.scss @@ -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; } diff --git a/src/views/download/scratch-link/download.scss b/src/views/download/scratch-link/download.scss index 1f87f12b8..72983a1dd 100644 --- a/src/views/download/scratch-link/download.scss +++ b/src/views/download/scratch-link/download.scss @@ -2,7 +2,7 @@ .link { .extension-header { - background-color: $ui-aqua; + background-color: $ui-purple-dark; .inner { flex-direction: row; diff --git a/src/views/ev3/ev3.scss b/src/views/ev3/ev3.scss index 6a38054f2..62373c011 100644 --- a/src/views/ev3/ev3.scss +++ b/src/views/ev3/ev3.scss @@ -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 { diff --git a/src/views/explore/explore.scss b/src/views/explore/explore.scss index 1a151c4bc..d6689fcaf 100644 --- a/src/views/explore/explore.scss +++ b/src/views/explore/explore.scss @@ -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; } } } diff --git a/src/views/gdxfor/gdxfor.scss b/src/views/gdxfor/gdxfor.scss index bfa48f61f..3b451ff86 100644 --- a/src/views/gdxfor/gdxfor.scss +++ b/src/views/gdxfor/gdxfor.scss @@ -3,7 +3,7 @@ .gdxfor { .extension-header { - background-color: $ui-blue; + background-color: $ui-blue-dark; background-image: url("/images/gdxfor/gdxfor-pattern.svg"); } } diff --git a/src/views/ideas/ideas.scss b/src/views/ideas/ideas.scss index 4eba2f81b..96ed3e509 100644 --- a/src/views/ideas/ideas.scss +++ b/src/views/ideas/ideas.scss @@ -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; diff --git a/src/views/messages/messages.scss b/src/views/messages/messages.scss index 1884d0af1..62422428e 100644 --- a/src/views/messages/messages.scss +++ b/src/views/messages/messages.scss @@ -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; } diff --git a/src/views/microbit/microbit.scss b/src/views/microbit/microbit.scss index 356ffd5f4..0eee4bca5 100644 --- a/src/views/microbit/microbit.scss +++ b/src/views/microbit/microbit.scss @@ -3,7 +3,7 @@ .microbit { .extension-header { - background-color: $ui-mint-green; + background-color: #318131; background-image: url("/images/microbit/mbit-pattern.svg"); } diff --git a/src/views/parents/parents.scss b/src/views/parents/parents.scss index efd06db2d..6f94e2c5f 100644 --- a/src/views/parents/parents.scss +++ b/src/views/parents/parents.scss @@ -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; diff --git a/src/views/preview/comment/comment.scss b/src/views/preview/comment/comment.scss index d90200a76..5485301b6 100644 --- a/src/views/preview/comment/comment.scss +++ b/src/views/preview/comment/comment.scss @@ -249,7 +249,7 @@ .comment-reply { display: inline-flex; cursor: pointer; - color: $ui-blue; + color: $link-purple; font-weight: bold; &:after { diff --git a/src/views/preview/subactions.scss b/src/views/preview/subactions.scss index d70791d94..c5bc54f52 100644 --- a/src/views/preview/subactions.scss +++ b/src/views/preview/subactions.scss @@ -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; diff --git a/src/views/preview/unsupported-browser.scss b/src/views/preview/unsupported-browser.scss index 9f400927c..870b8cc49 100644 --- a/src/views/preview/unsupported-browser.scss +++ b/src/views/preview/unsupported-browser.scss @@ -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; } } diff --git a/src/views/splash/hoc/hoc-banner.scss b/src/views/splash/hoc/hoc-banner.scss index 951ccfbc7..abc9f5906 100644 --- a/src/views/splash/hoc/hoc-banner.scss +++ b/src/views/splash/hoc/hoc-banner.scss @@ -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; diff --git a/src/views/studio/icons/edit-icon.svg b/src/views/studio/icons/edit-icon.svg index 376c4c01d..482d527d5 100644 --- a/src/views/studio/icons/edit-icon.svg +++ b/src/views/studio/icons/edit-icon.svg @@ -1,3 +1,3 @@ - + diff --git a/src/views/studio/modals/promote-modal.scss b/src/views/studio/modals/promote-modal.scss index 8f216e50b..d6d6a5084 100644 --- a/src/views/studio/modals/promote-modal.scss +++ b/src/views/studio/modals/promote-modal.scss @@ -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; } } diff --git a/src/views/studio/modals/studio-report-modal.scss b/src/views/studio/modals/studio-report-modal.scss index bf0b5dd8b..adfa9ac10 100644 --- a/src/views/studio/modals/studio-report-modal.scss +++ b/src/views/studio/modals/studio-report-modal.scss @@ -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; diff --git a/src/views/studio/modals/transfer-host-modal.scss b/src/views/studio/modals/transfer-host-modal.scss index 86651a36c..219852f36 100644 --- a/src/views/studio/modals/transfer-host-modal.scss +++ b/src/views/studio/modals/transfer-host-modal.scss @@ -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; } @@ -210,4 +210,4 @@ margin: auto 1.5rem 1rem 1.5rem; } } -} \ No newline at end of file +} diff --git a/src/views/studio/modals/user-projects-modal.scss b/src/views/studio/modals/user-projects-modal.scss index e077e5c90..c0daba361 100644 --- a/src/views/studio/modals/user-projects-modal.scss +++ b/src/views/studio/modals/user-projects-modal.scss @@ -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 { diff --git a/src/views/studio/studio.scss b/src/views/studio/studio.scss index 2e9c16e4d..301606e24 100644 --- a/src/views/studio/studio.scss +++ b/src/views/studio/studio.scss @@ -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; diff --git a/src/views/teachers/landing/landing.scss b/src/views/teachers/landing/landing.scss index 7e9e30656..81899b318 100644 --- a/src/views/teachers/landing/landing.scss +++ b/src/views/teachers/landing/landing.scss @@ -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; diff --git a/src/views/wedo2/wedo2.scss b/src/views/wedo2/wedo2.scss index bcac4ab5c..f4343dbb0 100644 --- a/src/views/wedo2/wedo2.scss +++ b/src/views/wedo2/wedo2.scss @@ -2,7 +2,7 @@ .wedo2 { .extension-header { - background-color: $ui-coral; + background-color: $ui-magenta-dark; background-image: url("/images/wedo2/wedo2-pattern.svg"); } } diff --git a/static/svgs/project/comment-reply.svg b/static/svgs/project/comment-reply.svg index b0edaf79c..575081d5d 100644 --- a/static/svgs/project/comment-reply.svg +++ b/static/svgs/project/comment-reply.svg @@ -5,6 +5,6 @@ Created with Sketch. - + - \ No newline at end of file + diff --git a/static/svgs/studio/activity-curator.svg b/static/svgs/studio/activity-curator.svg index 291a22e3a..a56a01c13 100644 --- a/static/svgs/studio/activity-curator.svg +++ b/static/svgs/studio/activity-curator.svg @@ -1,4 +1,4 @@ - - + + diff --git a/static/svgs/studio/activity-edit.svg b/static/svgs/studio/activity-edit.svg index 74d899763..06023b709 100644 --- a/static/svgs/studio/activity-edit.svg +++ b/static/svgs/studio/activity-edit.svg @@ -1,3 +1,3 @@ - + diff --git a/static/svgs/studio/activity-project.svg b/static/svgs/studio/activity-project.svg index 464a7f6bc..d99c72772 100644 --- a/static/svgs/studio/activity-project.svg +++ b/static/svgs/studio/activity-project.svg @@ -1,4 +1,4 @@ - - + + diff --git a/static/svgs/tutorials.svg b/static/svgs/tutorials.svg index 6028966a4..c78a34703 100644 --- a/static/svgs/tutorials.svg +++ b/static/svgs/tutorials.svg @@ -10,8 +10,8 @@ - - + + @@ -19,4 +19,4 @@ - \ No newline at end of file +