ScCN/scratch-gui
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #8930 from scratchfoundation/feature/color-contrast

Browse Source 
Feature/color contrast
This commit is contained in:
Andy O'Neill authored and GitHub committed 2023-05-09 14:40:29 -04:00
2 parents 2fe3ff0381 cfab4a2c9e
commit 59aa9350e2
134 files changed
+2277 -820
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.circleci/config.yml
+6
View File
@@ -225,6 +225,7 @@ workflows:
ignore:
- master
- develop
- beta
- /^hotfix\/.*/
push-translations:
triggers:
@@ -254,6 +255,7 @@ workflows:
ignore:
- master
- develop
- beta
- /^hotfix\/.*/
build-test-deploy:
jobs:
@@ -265,6 +267,7 @@ workflows:
only:
- master
- develop
- beta
- /^hotfix\/.*/
- lint:
context:
@@ -296,6 +299,7 @@ workflows:
only:
- master
- develop
- beta
- /^hotfix\/.*/
- store_dist:
context:
@@ -307,6 +311,7 @@ workflows:
only:
- master
- develop
- beta
- /^hotfix\/.*/
- deploy-npm:
context:
@@ -322,6 +327,7 @@ workflows:
only:
- master
- develop
- beta
- /^hotfix\/.*/
- deploy-gh-pages:
context:
README.md
+6
View File
@@ -129,6 +129,12 @@ If you want to watch the browser as it runs the test, rather than running headle
USE_HEADLESS=no $(npm bin)/jest --runInBand test/integration/backpack.test.js
```
_Note: If you are seeing failed tests related to `chromedriver` being incompatible with your version of Chrome, you may need to update `chromedriver` with:_
```bash
npm install chromedriver@{version}
```
## Troubleshooting
### Ignoring optional dependencies
package-lock.json
Generated
+280 -234
View File
@@ -16,11 +16,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",
@@ -58,9 +58,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",
@@ -95,6 +95,7 @@
"eslint-plugin-import": "2.23.4",
"eslint-plugin-jest": "22.17.0",
"eslint-plugin-react": "7.24.0",
"file-loader": "6.2.0",
"gh-pages": "3.2.3",
"html-webpack-plugin": "3.2.0",
"husky": "8.0.1",
@@ -109,6 +110,7 @@
"selenium-webdriver": "3.6.0",
"semantic-release": "19.0.5",
"uglifyjs-webpack-plugin": "1.3.0",
"url-loader": "4.1.1",
"web-audio-test-api": "0.5.2",
"webpack": "4.46.0",
"webpack-cli": "3.3.12",
@@ -4872,12 +4874,6 @@
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/@commitlint/config-validator/node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true
},
"node_modules/@commitlint/config-validator/node_modules/json-schema-traverse": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -7389,10 +7385,9 @@
}
},
"node_modules/@types/json-schema": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz",
"integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==",
"dev": true
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
},
"node_modules/@types/json5": {
"version": "0.0.29",
@@ -7813,14 +7808,18 @@
}
},
"node_modules/ajv": {
"version": "6.10.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
"integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"dependencies": {
"fast-deep-equal": "^2.0.1",
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/ajv-errors": {
@@ -7832,9 +7831,9 @@
}
},
"node_modules/ajv-keywords": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
"integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==",
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"peerDependencies": {
"ajv": "^6.9.1"
}
@@ -8548,37 +8547,6 @@
"webpack": ">=2"
}
},
"node_modules/babel-loader/node_modules/@types/json-schema": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
"integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
"dev": true
},
"node_modules/babel-loader/node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"dev": true,
"dependencies": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/babel-loader/node_modules/ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"dev": true,
"peerDependencies": {
"ajv": "^6.9.1"
}
},
"node_modules/babel-loader/node_modules/emojis-list": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
@@ -8588,12 +8556,6 @@
"node": ">= 4"
}
},
"node_modules/babel-loader/node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true
},
"node_modules/babel-loader/node_modules/find-cache-dir": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -10257,15 +10219,6 @@
"node": ">= 0.6"
}
},
"node_modules/compressible/node_modules/mime-db": {
"version": "1.45.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz",
"integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==",
"dev": true,
"engines": {
"node": ">= 0.6"
}
},
"node_modules/compression": {
"version": "1.7.4",
"resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
@@ -10503,10 +10456,9 @@
}
},
"node_modules/cookie": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
"dev": true,
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
"engines": {
"node": ">= 0.6"
}
@@ -10578,34 +10530,6 @@
"webpack": "^4.37.0 || ^5.0.0"
}
},
"node_modules/copy-webpack-plugin/node_modules/@types/json-schema": {
"version": "7.0.9",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
},
"node_modules/copy-webpack-plugin/node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"dependencies": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/copy-webpack-plugin/node_modules/ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"peerDependencies": {
"ajv": "^6.9.1"
}
},
"node_modules/copy-webpack-plugin/node_modules/array-union": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -10669,11 +10593,6 @@
"node": ">= 4"
}
},
"node_modules/copy-webpack-plugin/node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"node_modules/copy-webpack-plugin/node_modules/fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -13641,6 +13560,15 @@
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
"dev": true
},
"node_modules/express/node_modules/cookie": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
"dev": true,
"engines": {
"node": ">= 0.6"
}
},
"node_modules/express/node_modules/qs": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
@@ -13895,9 +13823,9 @@
"integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
},
"node_modules/fast-deep-equal": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"node_modules/fast-glob": {
"version": "3.2.6",
@@ -14096,18 +14024,64 @@
}
},
"node_modules/file-loader": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-2.0.0.tgz",
"integrity": "sha512-YCsBfd1ZGCyonOKLxPiKPdu+8ld9HAaMEvJewzz+b2eTF7uL5Zm/HdBF6FjCrpCMRq25Mi0U1gl4pwn2TlH7hQ==",
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
"integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
"dev": true,
"dependencies": {
"loader-utils": "^1.0.2",
"schema-utils": "^1.0.0"
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"engines": {
"node": ">= 6.9.0 < 7.0.0 || >= 8.9.0"
"node": ">= 10.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
"webpack": "^4.0.0 || ^5.0.0"
}
},
"node_modules/file-loader/node_modules/emojis-list": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
"dev": true,
"engines": {
"node": ">= 4"
}
},
"node_modules/file-loader/node_modules/loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"dependencies": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
},
"engines": {
"node": ">=8.9.0"
}
},
"node_modules/file-loader/node_modules/schema-utils": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
"dev": true,
"dependencies": {
"@types/json-schema": "^7.0.8",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
},
"engines": {
"node": ">= 10.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
}
},
"node_modules/file-type": {
@@ -19955,19 +19929,19 @@
}
},
"node_modules/mime-db": {
"version": "1.40.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
"integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==",
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.24",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
"integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.40.0"
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
@@ -25902,9 +25876,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==",
"dependencies": {
"exports-loader": "0.7.0",
"google-closure-library": "20190301.0.0",
@@ -25930,9 +25904,9 @@
}
},
"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==",
"dependencies": {
"@scratch/paper": "0.11.20200728195508",
"classnames": "2.2.5",
@@ -29898,6 +29872,74 @@
"integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
"dev": true
},
"node_modules/url-loader": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
"integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
"dev": true,
"dependencies": {
"loader-utils": "^2.0.0",
"mime-types": "^2.1.27",
"schema-utils": "^3.0.0"
},
"engines": {
"node": ">= 10.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"file-loader": "*",
"webpack": "^4.0.0 || ^5.0.0"
},
"peerDependenciesMeta": {
"file-loader": {
"optional": true
}
}
},
"node_modules/url-loader/node_modules/emojis-list": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
"dev": true,
"engines": {
"node": ">= 4"
}
},
"node_modules/url-loader/node_modules/loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"dependencies": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
},
"engines": {
"node": ">=8.9.0"
}
},
"node_modules/url-loader/node_modules/schema-utils": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
"dev": true,
"dependencies": {
"@types/json-schema": "^7.0.8",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
},
"engines": {
"node": ">= 10.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
}
},
"node_modules/url-parse": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
@@ -34909,12 +34951,6 @@
"uri-js": "^4.2.2"
}
},
"fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true
},
"json-schema-traverse": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -36784,10 +36820,9 @@
}
},
"@types/json-schema": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz",
"integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==",
"dev": true
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
},
"@types/json5": {
"version": "0.0.29",
@@ -37162,11 +37197,11 @@
}
},
"ajv": {
"version": "6.10.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
"integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"requires": {
"fast-deep-equal": "^2.0.1",
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
@@ -37179,9 +37214,9 @@
"requires": {}
},
"ajv-keywords": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
"integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==",
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"requires": {}
},
"amdefine": {
@@ -37736,43 +37771,12 @@
"schema-utils": "^2.6.5"
},
"dependencies": {
"@types/json-schema": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
"integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
"dev": true
},
"ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"dev": true,
"requires": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"dev": true,
"requires": {}
},
"emojis-list": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
"dev": true
},
"fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true
},
"find-cache-dir": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -39183,14 +39187,6 @@
"dev": true,
"requires": {
"mime-db": ">= 1.43.0 < 2"
},
"dependencies": {
"mime-db": {
"version": "1.45.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz",
"integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==",
"dev": true
}
}
},
"compression": {
@@ -39389,10 +39385,9 @@
}
},
"cookie": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
"dev": true
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
},
"cookie-signature": {
"version": "1.0.6",
@@ -39446,28 +39441,6 @@
"webpack-sources": "^1.4.3"
},
"dependencies": {
"@types/json-schema": {
"version": "7.0.9",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
},
"ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"requires": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"requires": {}
},
"array-union": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -39516,11 +39489,6 @@
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
},
"fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -41888,6 +41856,12 @@
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
"dev": true
},
"cookie": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
"dev": true
},
"qs": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
@@ -42082,9 +42056,9 @@
}
},
"fast-deep-equal": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"fast-glob": {
"version": "3.2.6",
@@ -42250,12 +42224,43 @@
}
},
"file-loader": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-2.0.0.tgz",
"integrity": "sha512-YCsBfd1ZGCyonOKLxPiKPdu+8ld9HAaMEvJewzz+b2eTF7uL5Zm/HdBF6FjCrpCMRq25Mi0U1gl4pwn2TlH7hQ==",
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
"integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
"dev": true,
"requires": {
"loader-utils": "^1.0.2",
"schema-utils": "^1.0.0"
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"dependencies": {
"emojis-list": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
"dev": true
},
"loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"schema-utils": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
"dev": true,
"requires": {
"@types/json-schema": "^7.0.8",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
}
}
}
},
"file-type": {
@@ -46936,16 +46941,16 @@
"dev": true
},
"mime-db": {
"version": "1.40.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
"integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA=="
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.24",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
"integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"requires": {
"mime-db": "1.40.0"
"mime-db": "1.52.0"
}
},
"mimic-fn": {
@@ -51459,9 +51464,9 @@
}
},
"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==",
"requires": {
"exports-loader": "0.7.0",
"google-closure-library": "20190301.0.0",
@@ -51483,9 +51488,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==",
"requires": {
"@scratch/paper": "0.11.20200728195508",
"classnames": "2.2.5",
@@ -54639,6 +54644,47 @@
"integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
"dev": true
},
"url-loader": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
"integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
"dev": true,
"requires": {
"loader-utils": "^2.0.0",
"mime-types": "^2.1.27",
"schema-utils": "^3.0.0"
},
"dependencies": {
"emojis-list": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
"dev": true
},
"loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"schema-utils": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
"dev": true,
"requires": {
"@types/json-schema": "^7.0.8",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
}
}
}
},
"url-parse": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
package.json
+5 -3
View File
@@ -39,11 +39,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",
@@ -81,9 +81,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",
@@ -122,6 +122,7 @@
"eslint-plugin-import": "2.23.4",
"eslint-plugin-jest": "22.17.0",
"eslint-plugin-react": "7.24.0",
"file-loader": "6.2.0",
"gh-pages": "3.2.3",
"html-webpack-plugin": "3.2.0",
"husky": "8.0.1",
@@ -136,6 +137,7 @@
"selenium-webdriver": "3.6.0",
"semantic-release": "19.0.5",
"uglifyjs-webpack-plugin": "1.3.0",
"url-loader": "4.1.1",
"web-audio-test-api": "0.5.2",
"webpack": "4.46.0",
"webpack-cli": "3.3.12",
release.config.js
+5
View File
@@ -8,6 +8,11 @@ module.exports = {
{
name: 'hotfix/REPLACE', // replace with actual hotfix branch name
channel: 'hotfix'
},
{
name: 'beta',
channel: 'beta',
prerelease: true
}
]
};
src/components/action-menu/action-menu.css
+5 -5
View File
@@ -19,7 +19,7 @@ $more-button-size: 2.25rem;
justify-content: center;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: $motion-primary;
background: $looks-secondary;
outline: none;
border: none;
transition: background-color 0.2s;
@@ -45,14 +45,14 @@ button::-moz-focus-inner {
border-radius: 100%;
width: $main-button-size;
height: $main-button-size;
box-shadow: 0 0 0 4px $motion-transparent;
box-shadow: 0 0 0 4px $looks-transparent;
z-index: $z-index-add-button;
transition: transform, box-shadow 0.5s;
}
.main-button:hover {
transform: scale(1.1);
box-shadow: 0 0 0 6px $motion-transparent;
box-shadow: 0 0 0 6px $looks-transparent;
}
.main-icon {
@@ -72,7 +72,7 @@ button::-moz-focus-inner {
*/
overflow-y: hidden;
background: $motion-tertiary;
background: $looks-secondary-dark;
border-top-left-radius: $more-button-size;
border-top-right-radius: $more-button-size;
width: $more-button-size;
@@ -115,7 +115,7 @@ button::-moz-focus-inner {
.more-button {
width: $more-button-size;
height: $more-button-size;
background: $motion-tertiary;
background: $looks-secondary-dark;
}
.more-icon {
src/components/asset-panel/selector.css
+1 -1
View File
@@ -20,7 +20,7 @@
align-items: center;
justify-content: space-around;
padding: 0.75rem 0;
color: $motion-primary;
color: $looks-secondary;
text-align: center;
background: none;
}
src/components/audio-trimmer/audio-trimmer.css
+4 -4
View File
@@ -41,7 +41,7 @@ $hover-scale: 1.25;
}
.selection-background {
background: $motion-primary;
background: $looks-secondary;
opacity: 0.5;
}
@@ -64,7 +64,7 @@ $hover-scale: 1.25;
}
.selector .trim-line {
border: 1px solid $motion-tertiary;
border: 1px solid $looks-secondary;
}
.playhead-container {
@@ -83,7 +83,7 @@ $hover-scale: 1.25;
*/
width: 100%;
height: 100%;
border-left: 1px solid $motion-primary;
border-left: 1px solid $looks-secondary;
border-top: none;
border-bottom: none;
border-right: none;
@@ -118,7 +118,7 @@ $hover-scale: 1.25;
}
.trimmer .trim-handle {
filter: hue-rotate(150deg);
filter: hue-rotate(-240deg) brightness(1.35);
}
.trim-handle img {
src/components/audio-trimmer/icon--handle.svg
+2 -2
View File
@@ -8,9 +8,9 @@
</defs>
<g id="Bottom-Left-Handle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Bottom-Left" transform="translate(17.000000, 17.000000) scale(1, -1) translate(-17.000000, -17.000000) ">
<use stroke="#4D97FF33" stroke-width="8" xlink:href="#path-1"></use>
<use stroke="#855CD633" stroke-width="8" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use stroke="#3D73CC" stroke-width="1" fill="#4D97FF" fill-rule="evenodd" xlink:href="#path-1"></use>
<use stroke="#6035b4" stroke-width="1" fill="#855CD6" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

src/components/backpack/backpack.css
+1 -1
View File
@@ -88,7 +88,7 @@
}
.more {
background: $motion-primary;
background: $looks-secondary;
color: $ui-white;
border: none;
outline: none;
src/components/browser-modal/browser-modal.css
+3 -3
View File
@@ -60,10 +60,10 @@
}
.button-row button {
border: 1px solid $motion-primary;
border: 1px solid $looks-secondary;
border-radius: 0.25rem;
padding: 0.5rem 2rem;
background: $motion-primary;
background: $looks-secondary;
color: white;
font-weight: bold;
font-size: 0.875rem;
@@ -77,6 +77,6 @@
}
.faq-link {
color: $motion-primary;
color: $looks-secondary;
text-decoration: none;
}
src/components/cards/card.css
+2 -2
View File
@@ -214,7 +214,7 @@
}
.deck-name {
color: $motion-primary;
color: $looks-secondary;
font-weight: bold;
font-size: 0.85rem;
margin: .625rem 0px;
@@ -260,7 +260,7 @@
.see-all-button {
cursor: pointer;
padding: 0.5rem 1rem;
background-color: $motion-primary;
background-color: $looks-secondary;
color: white;
font-weight: bold;
border-radius: 0.25rem;
src/components/close-button/close-button.css
+1 -1
View File
@@ -28,7 +28,7 @@
.small {
width: 0.825rem;
height: 0.825rem;
background-color: $motion-primary;
background-color: $looks-secondary;
color: $ui-white;
}
src/components/connection-modal/connection-modal.css
+13 -13
View File
@@ -80,8 +80,8 @@
border-radius: 0.25rem;
font-weight: 600;
font-size: 0.85rem;
background: $motion-primary;
border: $motion-primary;
background: $looks-secondary;
border: $looks-secondary;
color: white;
cursor: pointer;
}
@@ -172,9 +172,9 @@
right: -15px;
left: -15px;
padding: 5px 5px;
background-color: $motion-primary;
background-color: $looks-secondary;
border-radius: 100%;
box-shadow: 0px 0px 0px 4px $motion-transparent;
box-shadow: 0px 0px 0px 4px $looks-transparent;
/* animation: pulse-blue-ring 1s infinite ease-in-out alternate; */
animation: wiggle 0.5s infinite ease-in-out alternate;
@@ -182,7 +182,7 @@
@keyframes pulse-blue-ring {
100% {
box-shadow: 0px 0px 0px 8px $motion-light-transparent;
box-shadow: 0px 0px 0px 8px $looks-light-transparent;
}
}
@@ -208,9 +208,9 @@
.bluetooth-centered-icon {
position: absolute;
padding: 5px 5px;
background-color: $motion-primary;
background-color: $looks-secondary;
border-radius: 100%;
box-shadow: 0px 0px 0px 2px $motion-transparent;
box-shadow: 0px 0px 0px 2px $looks-transparent;
}
.peripheral-tile-widgets {
@@ -220,7 +220,7 @@
.activityArea {
height: 165px;
background-color: $motion-light-transparent;
background-color: $looks-light-transparent;
display: flex;
justify-content: center;
align-items: center;
@@ -297,7 +297,7 @@
.connection-button {
padding: 0.6rem 0.75rem;
border-radius: 0.5rem;
background: $motion-primary;
background: $looks-secondary;
color: white;
font-weight: 600;
font-size: 0.85rem;
@@ -309,7 +309,7 @@
}
.connection-button:disabled {
background: $motion-transparent;
background: $looks-transparent;
}
.segmented-button {
@@ -390,7 +390,7 @@
display: flex;
padding: 0.25rem 0.1rem;
border-radius: 1rem;
background: $motion-light-transparent;
background: $looks-light-transparent;
}
.dots-holder-success {
@@ -409,11 +409,11 @@
}
.inactive-step-dot {
background: $motion-transparent;
background: $looks-transparent;
}
.active-step-dot {
background: $motion-primary;
background: $looks-secondary;
}
.success-dot {
src/components/context-menu/context-menu.css
+1 -1
View File
@@ -25,7 +25,7 @@
}
.menu-item:hover {
background: $motion-primary;
background: $looks-secondary;
color: white;
}
src/components/crash-message/crash-message.css
+6
View File
@@ -10,12 +10,18 @@
justify-content: center;
align-items: center;
}
.body {
width: 35%;
color: white;
text-align: center;
}
/* scratch-www was overriding the colors */
.body p, .body h2 {
color: inherit;
}
.reloadButton {
border: 1px solid $motion-primary;
border-radius: 0.25rem;
src/components/custom-procedures/custom-procedures.css
+4 -4
View File
@@ -53,8 +53,8 @@
}
.option-card:hover {
border: 2px solid $motion-primary;
box-shadow: 0px 0px 0px 4px $motion-transparent;
border: 2px solid $looks-secondary;
box-shadow: 0px 0px 0px 4px $looks-transparent;
}
.option-card + .option-card {
@@ -92,8 +92,8 @@
}
.button-row button.ok-button {
background: $motion-primary;
border: $motion-primary;
background: $looks-secondary;
border: $looks-secondary;
color: white;
}
src/components/delete-button/delete-button.css
+2 -2
View File
@@ -18,8 +18,8 @@
overflow: hidden; /* Mask the icon animation */
width: 1.75rem;
height: 1.75rem;
box-shadow: 0px 0px 0px 2px $motion-transparent;
background-color: $motion-primary;
box-shadow: 0px 0px 0px 2px $looks-transparent;
background-color: $looks-secondary;
color: $ui-white;
border-radius: 50%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
src/components/direction-picker/dial.css
+2 -2
View File
@@ -35,7 +35,7 @@ $dial-size: 40px;
}
.gauge-path {
fill: $motion-transparent;
stroke: $motion-primary;
fill: $looks-transparent;
stroke: $looks-secondary;
stroke-width: 1px;
}
src/components/direction-picker/direction-picker.css
+1 -29
View File
@@ -1,32 +1,4 @@
@import "../../css/colors.css";
.button-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.icon-button {
margin: 0.25rem;
border: none;
background: none;
outline: none;
cursor: pointer;
user-select: none;
}
.icon-button:active > img {
width: 20px;
height: 20px;
transform: scale(1.15);
}
.icon-button > img {
transition: transform 0.1s;
filter: grayscale(100%);
}
.icon-button.active > img {
filter: none;
margin-bottom: 1rem;
}
src/components/direction-picker/direction-picker.jsx
+24 -39
View File
@@ -1,12 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Popover from 'react-popover';
import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'react-intl';
import Label from '../forms/label.jsx';
import Input from '../forms/input.jsx';
import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
import ToggleButtons from '../toggle-buttons/toggle-buttons.jsx';
import Dial from './dial.jsx';
import styles from './direction-picker.css';
@@ -62,44 +62,29 @@ const DirectionPicker = props => (
direction={props.direction}
onChange={props.onChangeDirection}
/>
<div className={styles.buttonRow}>
<button
className={classNames(styles.iconButton, {
[styles.active]: props.rotationStyle === RotationStyles.ALL_AROUND
})}
title={props.intl.formatMessage(messages.allAround)}
onClick={props.onClickAllAround}
>
<img
draggable={false}
src={allAroundIcon}
/>
</button>
<button
className={classNames(styles.iconButton, {
[styles.active]: props.rotationStyle === RotationStyles.LEFT_RIGHT
})}
title={props.intl.formatMessage(messages.leftRight)}
onClick={props.onClickLeftRight}
>
<img
draggable={false}
src={leftRightIcon}
/>
</button>
<button
className={classNames(styles.iconButton, {
[styles.active]: props.rotationStyle === RotationStyles.DONT_ROTATE
})}
title={props.intl.formatMessage(messages.dontRotate)}
onClick={props.onClickDontRotate}
>
<img
draggable={false}
src={dontRotateIcon}
/>
</button>
</div>
<ToggleButtons
className={styles.buttonRow}
buttons={[
{
handleClick: props.onClickAllAround,
icon: allAroundIcon,
isSelected: props.rotationStyle === RotationStyles.ALL_AROUND,
title: props.intl.formatMessage(messages.allAround)
},
{
handleClick: props.onClickLeftRight,
icon: leftRightIcon,
isSelected: props.rotationStyle === RotationStyles.LEFT_RIGHT,
title: props.intl.formatMessage(messages.leftRight)
},
{
handleClick: props.onClickDontRotate,
icon: dontRotateIcon,
isSelected: props.rotationStyle === RotationStyles.DONT_ROTATE,
title: props.intl.formatMessage(messages.dontRotate)
}
]}
/>
</div>
}
isOpen={props.popoverOpen}
src/components/direction-picker/icon--all-around.svg
+2 -2
View File
@@ -5,6 +5,6 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="all-around-active" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M16.8786199,10.6231329 L14.6209769,14.1433441 C14.3320842,14.6034325 13.6687009,14.6034325 13.3691085,14.1433441 L11.1221651,10.6231329 C10.8011732,10.1309454 11.1542643,9.47826182 11.7427495,9.47826182 L13.0267171,9.47826182 C12.7806233,7.4453131 11.0579667,5.87245277 8.9704494,5.87245277 C6.71387632,5.87245277 4.87245277,7.71280635 4.87245277,9.9704494 C4.87245277,12.2280925 6.71387632,14.068446 8.9704494,14.068446 C9.48510642,14.068446 9.90132592,14.4846655 9.90132592,14.9993226 C9.90132592,15.5236093 9.48510642,15.9408988 8.9704494,15.9408988 C5.67493253,15.9408988 3,13.2659663 3,9.9704494 C3,6.68563226 5.67493253,4 8.9704494,4 C12.0947706,4 14.6637758,6.41813901 14.9098696,9.47826182 L16.2580356,9.47826182 C16.8465207,9.47826182 17.1996118,10.1309454 16.8786199,10.6231329" id="Rotate" fill="#4C97FF"></path>
<path d="M16.8786199,10.6231329 L14.6209769,14.1433441 C14.3320842,14.6034325 13.6687009,14.6034325 13.3691085,14.1433441 L11.1221651,10.6231329 C10.8011732,10.1309454 11.1542643,9.47826182 11.7427495,9.47826182 L13.0267171,9.47826182 C12.7806233,7.4453131 11.0579667,5.87245277 8.9704494,5.87245277 C6.71387632,5.87245277 4.87245277,7.71280635 4.87245277,9.9704494 C4.87245277,12.2280925 6.71387632,14.068446 8.9704494,14.068446 C9.48510642,14.068446 9.90132592,14.4846655 9.90132592,14.9993226 C9.90132592,15.5236093 9.48510642,15.9408988 8.9704494,15.9408988 C5.67493253,15.9408988 3,13.2659663 3,9.9704494 C3,6.68563226 5.67493253,4 8.9704494,4 C12.0947706,4 14.6637758,6.41813901 14.9098696,9.47826182 L16.2580356,9.47826182 C16.8465207,9.47826182 17.1996118,10.1309454 16.8786199,10.6231329" id="Rotate" fill="#855CD6"></path>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

src/components/direction-picker/icon--dial.svg
+1 -1
View File
@@ -1 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="112" height="112" viewBox="0 0 112 112"><defs><style>.cls-1{opacity:0.25;}.cls-2{fill:#4c97ff;}.cls-3{fill:#3d79cc;}.cls-4{opacity:0.15;}.cls-5{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;}</style></defs><title>dial-face</title><g class="cls-1"><circle class="cls-2" cx="56" cy="56" r="55.5"/><path class="cls-3" d="M56,1A55,55,0,1,1,1,56,55.06,55.06,0,0,1,56,1m0-1a56,56,0,1,0,56,56A56,56,0,0,0,56,0Z"/></g><g class="cls-4"><line class="cls-5" x1="56" y1="14.86" x2="56" y2="20.73"/><line class="cls-5" x1="56" y1="91.27" x2="56" y2="97.14"/><line class="cls-5" x1="45.35" y1="16.26" x2="46.87" y2="21.94"/><line class="cls-5" x1="65.13" y1="90.06" x2="66.65" y2="95.74"/><line class="cls-5" x1="35.43" y1="20.37" x2="38.37" y2="25.46"/><line class="cls-5" x1="73.63" y1="86.54" x2="76.57" y2="91.63"/><line class="cls-5" x1="26.91" y1="26.91" x2="31.06" y2="31.06"/><line class="cls-5" x1="80.94" y1="80.94" x2="85.09" y2="85.09"/><line class="cls-5" x1="20.37" y1="35.43" x2="25.46" y2="38.37"/><line class="cls-5" x1="86.54" y1="73.63" x2="91.63" y2="76.57"/><line class="cls-5" x1="16.26" y1="45.35" x2="21.94" y2="46.87"/><line class="cls-5" x1="90.06" y1="65.13" x2="95.74" y2="66.65"/><line class="cls-5" x1="14.86" y1="56" x2="20.73" y2="56"/><line class="cls-5" x1="91.27" y1="56" x2="97.14" y2="56"/><line class="cls-5" x1="16.26" y1="66.65" x2="21.94" y2="65.13"/><line class="cls-5" x1="90.06" y1="46.87" x2="95.74" y2="45.35"/><line class="cls-5" x1="20.37" y1="76.57" x2="25.46" y2="73.63"/><line class="cls-5" x1="86.54" y1="38.37" x2="91.63" y2="35.43"/><line class="cls-5" x1="26.91" y1="85.09" x2="31.06" y2="80.94"/><line class="cls-5" x1="80.94" y1="31.06" x2="85.09" y2="26.91"/><line class="cls-5" x1="35.43" y1="91.63" x2="38.37" y2="86.54"/><line class="cls-5" x1="73.63" y1="25.46" x2="76.57" y2="20.37"/><line class="cls-5" x1="45.35" y1="95.74" x2="46.87" y2="90.06"/><line class="cls-5" x1="65.13" y1="21.94" x2="66.65" y2="16.26"/></g><circle class="cls-2" cx="56" cy="56" r="2"/></svg>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="112" height="112" viewBox="0 0 112 112"><defs><style>.cls-1{opacity:0.25;}.cls-2{fill:#CCB3FF;}.cls-3{fill:#a071fe;}.cls-4{opacity:0.15;}.cls-5{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;}</style></defs><title>dial-face</title><g class="cls-1"><circle class="cls-2" cx="56" cy="56" r="55.5"/><path class="cls-3" d="M56,1A55,55,0,1,1,1,56,55.06,55.06,0,0,1,56,1m0-1a56,56,0,1,0,56,56A56,56,0,0,0,56,0Z"/></g><g class="cls-4"><line class="cls-5" x1="56" y1="14.86" x2="56" y2="20.73"/><line class="cls-5" x1="56" y1="91.27" x2="56" y2="97.14"/><line class="cls-5" x1="45.35" y1="16.26" x2="46.87" y2="21.94"/><line class="cls-5" x1="65.13" y1="90.06" x2="66.65" y2="95.74"/><line class="cls-5" x1="35.43" y1="20.37" x2="38.37" y2="25.46"/><line class="cls-5" x1="73.63" y1="86.54" x2="76.57" y2="91.63"/><line class="cls-5" x1="26.91" y1="26.91" x2="31.06" y2="31.06"/><line class="cls-5" x1="80.94" y1="80.94" x2="85.09" y2="85.09"/><line class="cls-5" x1="20.37" y1="35.43" x2="25.46" y2="38.37"/><line class="cls-5" x1="86.54" y1="73.63" x2="91.63" y2="76.57"/><line class="cls-5" x1="16.26" y1="45.35" x2="21.94" y2="46.87"/><line class="cls-5" x1="90.06" y1="65.13" x2="95.74" y2="66.65"/><line class="cls-5" x1="14.86" y1="56" x2="20.73" y2="56"/><line class="cls-5" x1="91.27" y1="56" x2="97.14" y2="56"/><line class="cls-5" x1="16.26" y1="66.65" x2="21.94" y2="65.13"/><line class="cls-5" x1="90.06" y1="46.87" x2="95.74" y2="45.35"/><line class="cls-5" x1="20.37" y1="76.57" x2="25.46" y2="73.63"/><line class="cls-5" x1="86.54" y1="38.37" x2="91.63" y2="35.43"/><line class="cls-5" x1="26.91" y1="85.09" x2="31.06" y2="80.94"/><line class="cls-5" x1="80.94" y1="31.06" x2="85.09" y2="26.91"/><line class="cls-5" x1="35.43" y1="91.63" x2="38.37" y2="86.54"/><line class="cls-5" x1="73.63" y1="25.46" x2="76.57" y2="20.37"/><line class="cls-5" x1="45.35" y1="95.74" x2="46.87" y2="90.06"/><line class="cls-5" x1="65.13" y1="21.94" x2="66.65" y2="16.26"/></g><circle class="cls-2" cx="56" cy="56" r="2"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

src/components/direction-picker/icon--dont-rotate.svg
+2 -2
View File
@@ -5,6 +5,6 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="dont-rotate-active" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M12.5888771,8.06902644 L13.86349,6.56266574 C14.4487406,7.40331746 14.8232375,8.40101099 14.9098696,9.47826182 L16.2580356,9.47826182 C16.8465207,9.47826182 17.1996118,10.1309454 16.8786199,10.6231329 L14.6209769,14.1433441 C14.3320842,14.6034325 13.6687009,14.6034325 13.3691085,14.1433441 L11.1221651,10.6231329 C10.8011732,10.1309454 11.1542643,9.47826182 11.7427495,9.47826182 L13.0267171,9.47826182 C12.9657526,8.97464215 12.8141722,8.49925787 12.5888771,8.06902644 Z M14.9322936,3.75140819 L4.41830686,16.1770289 C4.39906741,16.1997664 4.38220902,16.2237219 4.3677064,16.2485918 L3.88169314,16.8229711 C3.70332112,17.0337744 3.38783218,17.0600652 3.17702888,16.8816931 C2.96622558,16.7033211 2.93993483,16.3878322 3.11830686,16.1770289 L4.77600701,14.2179287 C3.67971789,13.1352279 3,11.6316859 3,9.9704494 C3,6.68563226 5.67493253,4 8.9704494,4 C10.2739544,4 11.4807977,4.42091588 12.4626123,5.13375885 L14.1183069,3.17702888 C14.2966789,2.96622558 14.6121678,2.93993483 14.8229711,3.11830686 C15.0110369,3.27743943 15.052247,3.54570491 14.9322936,3.75140819 Z M6.41391759,15.3667059 L7.68705488,13.8620891 C8.09106584,13.9959518 8.52258095,14.068446 8.9704494,14.068446 C9.48510642,14.068446 9.90132592,14.4846655 9.90132592,14.9993226 C9.90132592,15.5236093 9.48510642,15.9408988 8.9704494,15.9408988 C8.05583315,15.9408988 7.1890173,15.7348626 6.41391759,15.3667059 Z M11.2481962,6.56897787 C10.5973184,6.12907251 9.81364832,5.87245277 8.9704494,5.87245277 C6.71387632,5.87245277 4.87245277,7.71280635 4.87245277,9.9704494 C4.87245277,11.0565658 5.29863553,12.0461039 5.99219528,12.7806153 L11.2481962,6.56897787 Z" id="Combined-Shape" fill="#4D97FF"></path>
<path d="M12.5888771,8.06902644 L13.86349,6.56266574 C14.4487406,7.40331746 14.8232375,8.40101099 14.9098696,9.47826182 L16.2580356,9.47826182 C16.8465207,9.47826182 17.1996118,10.1309454 16.8786199,10.6231329 L14.6209769,14.1433441 C14.3320842,14.6034325 13.6687009,14.6034325 13.3691085,14.1433441 L11.1221651,10.6231329 C10.8011732,10.1309454 11.1542643,9.47826182 11.7427495,9.47826182 L13.0267171,9.47826182 C12.9657526,8.97464215 12.8141722,8.49925787 12.5888771,8.06902644 Z M14.9322936,3.75140819 L4.41830686,16.1770289 C4.39906741,16.1997664 4.38220902,16.2237219 4.3677064,16.2485918 L3.88169314,16.8229711 C3.70332112,17.0337744 3.38783218,17.0600652 3.17702888,16.8816931 C2.96622558,16.7033211 2.93993483,16.3878322 3.11830686,16.1770289 L4.77600701,14.2179287 C3.67971789,13.1352279 3,11.6316859 3,9.9704494 C3,6.68563226 5.67493253,4 8.9704494,4 C10.2739544,4 11.4807977,4.42091588 12.4626123,5.13375885 L14.1183069,3.17702888 C14.2966789,2.96622558 14.6121678,2.93993483 14.8229711,3.11830686 C15.0110369,3.27743943 15.052247,3.54570491 14.9322936,3.75140819 Z M6.41391759,15.3667059 L7.68705488,13.8620891 C8.09106584,13.9959518 8.52258095,14.068446 8.9704494,14.068446 C9.48510642,14.068446 9.90132592,14.4846655 9.90132592,14.9993226 C9.90132592,15.5236093 9.48510642,15.9408988 8.9704494,15.9408988 C8.05583315,15.9408988 7.1890173,15.7348626 6.41391759,15.3667059 Z M11.2481962,6.56897787 C10.5973184,6.12907251 9.81364832,5.87245277 8.9704494,5.87245277 C6.71387632,5.87245277 4.87245277,7.71280635 4.87245277,9.9704494 C4.87245277,11.0565658 5.29863553,12.0461039 5.99219528,12.7806153 L11.2481962,6.56897787 Z" id="Combined-Shape" fill="#855CD6"></path>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

src/components/direction-picker/icon--handle.svg
+1 -1
View File
@@ -1 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><defs><style>.cls-1,.cls-2{fill:#4c97ff;}.cls-1{opacity:0.15;}.cls-3{fill:#fff;}</style></defs><title>01_Dial Elements</title><circle class="cls-1" cx="20" cy="20" r="20"/><circle class="cls-2" cx="20" cy="20" r="16"/><path class="cls-3" d="M20.53,12.44l5,5A.74.74,0,0,1,25,18.68H22.37L21,26.86a1.08,1.08,0,0,1-2.13,0l-1.34-8.18H15a.74.74,0,0,1-.52-1.26l5-5A.77.77,0,0,1,20.53,12.44Z"/></svg>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><defs><style>.cls-1,.cls-2{fill:#855CD6;}.cls-1{opacity:0.15;}.cls-3{fill:#fff;}</style></defs><title>01_Dial Elements</title><circle class="cls-1" cx="20" cy="20" r="20"/><circle class="cls-2" cx="20" cy="20" r="16"/><path class="cls-3" d="M20.53,12.44l5,5A.74.74,0,0,1,25,18.68H22.37L21,26.86a1.08,1.08,0,0,1-2.13,0l-1.34-8.18H15a.74.74,0,0,1-.52-1.26l5-5A.77.77,0,0,1,20.53,12.44Z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 508 B

After

Width:  |  Height:  |  Size: 509 B

src/components/direction-picker/icon--left-right.svg
+5 -7
View File
@@ -4,11 +4,9 @@
<title>left-right-active</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="left-right-active" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Flip-Left-Right" transform="translate(2.000000, 4.000000)">
<path d="M4.66453333,2.41690667 L4.66453333,9.60624 C4.66453333,10.08224 4.08853333,10.3209067 3.7512,9.98357333 L0.156533333,6.38890667 C-0.0514666667,6.17957333 -0.0514666667,5.84090667 0.156533333,5.63290667 L3.7512,2.03824 C4.08853333,1.70090667 4.66453333,1.93957333 4.66453333,2.41690667" id="Fill-1" fill="#4D97FF" transform="translate(2.332533, 6.010929) scale(-1, 1) translate(-2.332533, -6.010929) "></path>
<path d="M7.87546667,11.7567733 C7.70213333,11.7567733 7.54213333,11.6901067 7.4088,11.5581067 C7.35546667,11.5047733 7.30213333,11.42344 7.26213333,11.34344 C7.2368,11.2647733 7.2088,11.18344 7.2088,11.0901067 C7.2088,11.0101067 7.2368,10.9167733 7.26213333,10.8381067 C7.30213333,10.7567733 7.35546667,10.6767733 7.4088,10.62344 C7.59546667,10.4381067 7.89013333,10.3701067 8.14213333,10.4767733 C8.22346667,10.5167733 8.29013333,10.5581067 8.35546667,10.62344 C8.4088,10.6767733 8.46213333,10.7567733 8.50346667,10.8381067 C8.5288,10.9167733 8.5568,11.0101067 8.5568,11.0901067 C8.5568,11.18344 8.5288,11.2647733 8.50346667,11.34344 C8.46213333,11.42344 8.42213333,11.5047733 8.35546667,11.5581067 C8.2368,11.6901067 8.06346667,11.7567733 7.87546667,11.7567733 Z M7.22306667,3.27757333 C7.22306667,2.90424 7.5164,2.61090667 7.88973333,2.61090667 C8.24973333,2.61090667 8.5564,2.90424 8.5564,3.27757333 C8.5564,3.63757333 8.24973333,3.94424 7.88973333,3.94424 C7.5164,3.94424 7.22306667,3.63757333 7.22306667,3.27757333 Z M7.22306667,5.87757333 C7.22306667,5.50424 7.5164,5.21090667 7.88973333,5.21090667 C8.24973333,5.21090667 8.5564,5.50424 8.5564,5.87757333 C8.5564,6.24957333 8.24973333,6.54424 7.88973333,6.54424 C7.5164,6.54424 7.22306667,6.24957333 7.22306667,5.87757333 Z M7.22306667,8.49090667 C7.22306667,8.11757333 7.5164,7.82424 7.88973333,7.82424 C8.24973333,7.82424 8.5564,8.11757333 8.5564,8.49090667 C8.5564,8.85090667 8.24973333,9.15757333 7.88973333,9.15757333 C7.5164,9.15757333 7.22306667,8.85090667 7.22306667,8.49090667 Z M7.87546667,1.33104 C7.79546667,1.33104 7.70213333,1.31770667 7.62346667,1.29104 C7.54213333,1.24970667 7.47546667,1.19637333 7.4088,1.14304 C7.35546667,1.07770667 7.30213333,0.997706667 7.26213333,0.916373333 C7.2368,0.837706667 7.2088,0.756373333 7.2088,0.664373333 C7.2088,0.58304 7.2368,0.49104 7.26213333,0.41104 C7.30213333,0.33104 7.35546667,0.249706667 7.4088,0.196373333 C7.59546667,0.01104 7.89013333,-0.0556266667 8.14213333,0.05104 C8.22346667,0.0897066667 8.29013333,0.13104 8.35546667,0.196373333 C8.47546667,0.317706667 8.5568,0.49104 8.5568,0.664373333 C8.5568,0.756373333 8.5288,0.837706667 8.50346667,0.916373333 C8.46213333,0.997706667 8.42213333,1.07770667 8.35546667,1.14304 C8.22346667,1.26437333 8.06346667,1.33104 7.87546667,1.33104 Z" id="Combined-Shape" fill-opacity="0.25" fill="#575E75"></path>
<path d="M11.102,9.60570667 L11.102,2.41637333 C11.102,1.93904 11.6793333,1.70037333 12.0166667,2.03770667 L15.61,5.63370667 C15.8193333,5.84170667 15.8193333,6.18037333 15.61,6.38970667 L12.0166667,9.98304 C11.6793333,10.3203733 11.102,10.0817067 11.102,9.60570667" id="Fill-3" fill="#4D97FF" transform="translate(13.434500, 6.010396) scale(-1, 1) translate(-13.434500, -6.010396) "></path>
</g>
<g transform="translate(2.000000, 3.000000)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 10.3925V3.20313C11 2.7258 11.5773 2.48713 11.9147 2.82447L15.508 6.42047C15.7173 6.62847 15.7173 6.96713 15.508 7.17647L11.9147 10.7698C11.5773 11.1071 11 10.8685 11 10.3925" fill="#855CD6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.66467 1.95746C7.74333 1.98412 7.83667 1.99746 7.91667 1.99746C8.10467 1.99746 8.26467 1.93079 8.39667 1.80946C8.46208 1.74535 8.50181 1.66714 8.54233 1.58739L8.54467 1.58279C8.54604 1.57852 8.54742 1.57424 8.54881 1.56996C8.57296 1.49526 8.598 1.4178 8.598 1.33079C8.598 1.15746 8.51667 0.984122 8.39667 0.862789C8.33133 0.797456 8.26467 0.756122 8.18333 0.717456C7.93133 0.610789 7.63667 0.677456 7.45 0.862789C7.39667 0.916122 7.34333 0.997456 7.30333 1.07746C7.278 1.15746 7.25 1.24946 7.25 1.33079C7.25 1.4178 7.27504 1.49526 7.29919 1.56996C7.30058 1.57424 7.30196 1.57852 7.30333 1.58279C7.34333 1.66412 7.39667 1.74412 7.45 1.80946L7.45 1.80946C7.51667 1.86279 7.58333 1.91612 7.66467 1.95746ZM7.26427 3.94399C7.26427 3.57066 7.5576 3.27732 7.93093 3.27732C8.29093 3.27732 8.5976 3.57066 8.5976 3.94399C8.5976 4.30399 8.29093 4.61066 7.93093 4.61066C7.5576 4.61066 7.26427 4.30399 7.26427 3.94399ZM7.91667 12.4232C7.74333 12.4232 7.58333 12.3565 7.45 12.2245C7.39667 12.1712 7.34333 12.0899 7.30333 12.0099L7.29924 11.9972C7.27508 11.9224 7.25 11.8449 7.25 11.7565C7.25 11.6765 7.278 11.5832 7.30333 11.5045C7.34333 11.4232 7.39667 11.3432 7.45 11.2899C7.63667 11.1045 7.93133 11.0365 8.18333 11.1432C8.26467 11.1832 8.33133 11.2245 8.39667 11.2899C8.45 11.3432 8.50333 11.4232 8.54467 11.5045C8.57 11.5832 8.598 11.6765 8.598 11.7565C8.598 11.8449 8.57292 11.9224 8.54876 11.9972L8.54467 12.0099L8.53886 12.0211C8.49953 12.0974 8.46021 12.1737 8.39667 12.2245C8.278 12.3565 8.10467 12.4232 7.91667 12.4232ZM7.93093 5.87732C7.5576 5.87732 7.26427 6.17066 7.26427 6.54399C7.26427 6.91599 7.5576 7.21066 7.93093 7.21066C8.29093 7.21066 8.5976 6.91599 8.5976 6.54399C8.5976 6.17066 8.29093 5.87732 7.93093 5.87732ZM7.26427 9.15732C7.26427 8.78399 7.5576 8.49066 7.93093 8.49066C8.29093 8.49066 8.5976 8.78399 8.5976 9.15732C8.5976 9.51732 8.29093 9.82399 7.93093 9.82399C7.5576 9.82399 7.26427 9.51732 7.26427 9.15732Z" fill="#855CD6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.164 3.20313V10.3925C5.164 10.8685 4.588 11.1071 4.25067 10.7698L0.656 7.17513C0.448 6.9658 0.448 6.62713 0.656 6.41913L4.25067 2.82447C4.588 2.48713 5.164 2.7258 5.164 3.20313" fill="#855CD6"/>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

src/components/drag-layer/drag-layer.css
+1 -1
View File
@@ -29,7 +29,7 @@
margin-top: -50%;
padding: 0.25rem;
border: 2px solid $motion-primary;
border: 2px solid $looks-secondary;
background: $ui-white;
border-radius: 0.5rem;
src/components/filter/filter.css
+1 -1
View File
@@ -35,7 +35,7 @@
}
.filter:focus-within {
box-shadow: 0 0 0 .25rem $motion-transparent;
box-shadow: 0 0 0 .25rem $looks-transparent;
}
/*
src/components/filter/icon--filter.svg
+1 -1
View File
@@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14.5" height="14.6" viewBox="0 0 14.5 14.6">
<path fill="#4C97FF" d="M10.4 9.2l-.8-.1-.2-.2c.5-.5.8-1 1-1.6.2-.6.3-1.2.3-1.9 0-1-.2-1.9-.7-2.7-.4-.9-1.1-1.5-1.9-2C7.3.2 6.3 0 5.4 0c-.9 0-1.9.2-2.7.7-.9.5-1.5 1.2-2 2S0 4.4 0 5.4s.2 1.9.7 2.8c.5.8 1.2 1.4 2 1.9s1.7.7 2.7.7c.7 0 1.3-.1 1.9-.3.6-.3 1.1-.6 1.6-1l.2.3v.6l4.1 4.2 1.3-1.3-4.1-4.1zM8.7 7.3c-.4.6-.8 1.1-1.4 1.4-.6.3-1.2.5-1.9.5-.6 0-1.3-.2-1.8-.5-.6-.4-1.1-.8-1.4-1.4-.3-.6-.5-1.2-.5-1.9s.2-1.4.5-1.9.8-1 1.4-1.3c.5-.4 1.1-.5 1.8-.5s1.3.1 1.9.5c.6.3 1 .8 1.4 1.3.3.6.5 1.2.5 1.9S9 6.7 8.7 7.3z"/>
<path fill="#855CD6" d="M10.4 9.2l-.8-.1-.2-.2c.5-.5.8-1 1-1.6.2-.6.3-1.2.3-1.9 0-1-.2-1.9-.7-2.7-.4-.9-1.1-1.5-1.9-2C7.3.2 6.3 0 5.4 0c-.9 0-1.9.2-2.7.7-.9.5-1.5 1.2-2 2S0 4.4 0 5.4s.2 1.9.7 2.8c.5.8 1.2 1.4 2 1.9s1.7.7 2.7.7c.7 0 1.3-.1 1.9-.3.6-.3 1.1-.6 1.6-1l.2.3v.6l4.1 4.2 1.3-1.3-4.1-4.1zM8.7 7.3c-.4.6-.8 1.1-1.4 1.4-.6.3-1.2.5-1.9.5-.6 0-1.3-.2-1.8-.5-.6-.4-1.1-.8-1.4-1.4-.3-.6-.5-1.2-.5-1.9s.2-1.4.5-1.9.8-1 1.4-1.3c.5-.4 1.1-.5 1.8-.5s1.3.1 1.9.5c.6.3 1 .8 1.4 1.3.3.6.5 1.2.5 1.9S9 6.7 8.7 7.3z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 613 B

After

Width:  |  Height:  |  Size: 613 B

src/components/forms/input.css
+3 -3
View File
@@ -32,12 +32,12 @@
}
.input-form:hover {
border-color: $motion-primary;
border-color: $looks-secondary;
}
.input-form:focus {
border-color: $motion-primary;
box-shadow: 0 0 0 0.25rem $motion-transparent;
border-color: $looks-secondary;
box-shadow: 0 0 0 0.25rem $looks-transparent;
}
.input-small {
src/components/green-flag/green-flag.css
+2 -2
View File
@@ -11,9 +11,9 @@
}
.green-flag:hover {
background-color: $motion-light-transparent;
background-color: $looks-light-transparent;
}
.green-flag.is-active {
background-color: $motion-transparent;
background-color: $looks-transparent;
}
src/components/gui/gui.css
+3 -3
View File
@@ -124,7 +124,7 @@
.tab.is-selected {
height: 90%;
color: $motion-primary;
color: $looks-secondary;
background-color: $ui-white;
z-index: 4; /* Make sure selected is always above */
}
@@ -236,9 +236,9 @@
left: 0;
right: 0;
z-index: $z-index-extension-button;
background: $motion-primary;
background: $looks-secondary;
border: 1px solid $motion-primary;
border: 1px solid $looks-secondary;
box-sizing: content-box; /* To match scratch-block vertical toolbox borders */
}
src/components/gui/gui.jsx
+12 -3
View File
@@ -33,6 +33,7 @@ import TelemetryModal from '../telemetry-modal/telemetry-modal.jsx';
import layout, {STAGE_SIZE_MODES} from '../../lib/layout-constants';
import {resolveStageSize} from '../../lib/screen-utils';
import {themeMap} from '../../lib/themes';
import styles from './gui.css';
import addExtensionIcon from './icon--extensions.svg';
@@ -68,6 +69,7 @@ const GUIComponent = props => {
blocksTabVisible,
cardsVisible,
canChangeLanguage,
canChangeTheme,
canCreateNew,
canEditTitle,
canManageFiles,
@@ -119,6 +121,7 @@ const GUIComponent = props => {
stageSizeMode,
targetIsStage,
telemetryModalVisible,
theme,
tipsLibraryVisible,
vm,
...componentProps
@@ -214,6 +217,7 @@ const GUIComponent = props => {
authorThumbnailUrl={authorThumbnailUrl}
authorUsername={authorUsername}
canChangeLanguage={canChangeLanguage}
canChangeTheme={canChangeTheme}
canCreateCopy={canCreateCopy}
canCreateNew={canCreateNew}
canEditTitle={canEditTitle}
@@ -303,14 +307,15 @@ const GUIComponent = props => {
<TabPanel className={tabClassNames.tabPanel}>
<Box className={styles.blocksWrapper}>
<Blocks
key={blocksId}
key={`${blocksId}/${theme}`}
canUseCloud={canUseCloud}
grow={1}
isVisible={blocksTabVisible}
options={{
media: `${basePath}static/blocks-media/`
media: `${basePath}static/${themeMap[theme].blocksMediaFolder}/`
}}
stageSize={stageSize}
theme={theme}
vm={vm}
/>
</Box>
@@ -379,6 +384,7 @@ GUIComponent.propTypes = {
blocksTabVisible: PropTypes.bool,
blocksId: PropTypes.string,
canChangeLanguage: PropTypes.bool,
canChangeTheme: PropTypes.bool,
canCreateCopy: PropTypes.bool,
canCreateNew: PropTypes.bool,
canEditTitle: PropTypes.bool,
@@ -428,6 +434,7 @@ GUIComponent.propTypes = {
stageSizeMode: PropTypes.oneOf(Object.keys(STAGE_SIZE_MODES)),
targetIsStage: PropTypes.bool,
telemetryModalVisible: PropTypes.bool,
theme: PropTypes.string,
tipsLibraryVisible: PropTypes.bool,
vm: PropTypes.instanceOf(VM).isRequired
};
@@ -437,6 +444,7 @@ GUIComponent.defaultProps = {
basePath: './',
blocksId: 'original',
canChangeLanguage: true,
canChangeTheme: true,
canCreateNew: false,
canEditTitle: false,
canManageFiles: true,
@@ -456,8 +464,9 @@ GUIComponent.defaultProps = {
const mapStateToProps = state => ({
// This is the button's mode, as opposed to the actual current state
blocksId: state.scratchGui.timeTravel.year.toString(),
stageSizeMode: state.scratchGui.stageSize.stageSize,
blocksId: state.scratchGui.timeTravel.year.toString()
theme: state.scratchGui.theme.theme
});
export default injectIntl(connect(
src/components/gui/icon--code.svg
+2 -2
View File
@@ -5,6 +5,6 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Code-V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M15,14.51 C15,14.786 14.776,15.01 14.5,15.01 L9.197,15.01 C9.064,15.01 8.937,15.062 8.844,15.156 L8.146,15.854 C8.053,15.947 7.926,16 7.793,16 L6.207,16 C6.074,16 5.947,15.947 5.854,15.854 L5.156,15.156 C5.062,15.062 4.936,15.01 4.803,15.01 L3.5,15.01 C3.224,15.01 3,14.786 3,14.51 L3,11.5 C3,11.224 3.224,11 3.5,11 L4.793,11 C4.926,11 5.053,11.053 5.146,11.146 L5.854,11.854 C5.947,11.947 6.074,12 6.207,12 L7.793,12 C7.926,12 8.053,11.947 8.146,11.854 L8.854,11.146 C8.947,11.053 9.074,11 9.207,11 L14.5,11 C14.776,11 15,11.224 15,11.5 L15,14.51 Z M17,9.51 C17,9.786 16.776,10.01 16.5,10.01 L9.197,10.01 C9.064,10.01 8.937,10.062 8.844,10.156 L8.146,10.854 C8.053,10.947 7.926,11 7.793,11 L6.207,11 C6.074,11 5.947,10.947 5.854,10.854 L5.156,10.156 C5.062,10.062 4.936,10.01 4.803,10.01 L3.5,10.01 C3.224,10.01 3,9.786 3,9.51 L3,6.5 C3,6.224 3.224,6 3.5,6 L4.793,6 C4.926,6 5.053,6.053 5.146,6.146 L5.854,6.854 C5.947,6.947 6.074,7 6.207,7 L7.793,7 C7.926,7 8.053,6.947 8.146,6.854 L8.854,6.146 C8.947,6.053 9.074,6 9.207,6 L16.5,6 C16.776,6 17,6.224 17,6.5 L17,9.51 Z" id="Code" fill="#4C97FF"></path>
<path d="M15,14.51 C15,14.786 14.776,15.01 14.5,15.01 L9.197,15.01 C9.064,15.01 8.937,15.062 8.844,15.156 L8.146,15.854 C8.053,15.947 7.926,16 7.793,16 L6.207,16 C6.074,16 5.947,15.947 5.854,15.854 L5.156,15.156 C5.062,15.062 4.936,15.01 4.803,15.01 L3.5,15.01 C3.224,15.01 3,14.786 3,14.51 L3,11.5 C3,11.224 3.224,11 3.5,11 L4.793,11 C4.926,11 5.053,11.053 5.146,11.146 L5.854,11.854 C5.947,11.947 6.074,12 6.207,12 L7.793,12 C7.926,12 8.053,11.947 8.146,11.854 L8.854,11.146 C8.947,11.053 9.074,11 9.207,11 L14.5,11 C14.776,11 15,11.224 15,11.5 L15,14.51 Z M17,9.51 C17,9.786 16.776,10.01 16.5,10.01 L9.197,10.01 C9.064,10.01 8.937,10.062 8.844,10.156 L8.146,10.854 C8.053,10.947 7.926,11 7.793,11 L6.207,11 C6.074,11 5.947,10.947 5.854,10.854 L5.156,10.156 C5.062,10.062 4.936,10.01 4.803,10.01 L3.5,10.01 C3.224,10.01 3,9.786 3,9.51 L3,6.5 C3,6.224 3.224,6 3.5,6 L4.793,6 C4.926,6 5.053,6.053 5.146,6.146 L5.854,6.854 C5.947,6.947 6.074,7 6.207,7 L7.793,7 C7.926,7 8.053,6.947 8.146,6.854 L8.854,6.146 C8.947,6.053 9.074,6 9.207,6 L16.5,6 C16.776,6 17,6.224 17,6.5 L17,9.51 Z" id="Code" fill="#855CD6"></path>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

src/components/gui/icon--costumes.svg
+2 -2
View File
@@ -5,6 +5,6 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Paint-Editor-V1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M16.1998226,6.58685277 C15.5417294,7.94213763 14.5662678,9.50539101 13.6457617,10.6638734 C12.8750097,11.639511 12.2567593,12.2117734 11.6659868,12.4909258 C11.5972923,12.5341944 11.5299717,12.5481521 11.4461644,12.5481521 C11.3912089,12.5481521 11.3362533,12.5341944 11.2675588,12.5048834 C11.1439087,12.4644063 11.0339976,12.366703 10.979042,12.2410844 C10.8141752,11.8628329 10.580614,11.5432035 10.2659932,11.2905705 C9.94862474,11.053291 9.59141344,10.871842 9.18062043,10.7741386 C9.05559648,10.7462234 8.93194641,10.6638734 8.86325193,10.5368591 C8.79455745,10.4251981 8.76845354,10.2856219 8.79455745,10.1474415 C8.9594242,9.50539101 9.38532999,8.75167956 10.1272304,7.81651905 C11.5849273,5.94480227 14.4975733,3.16863175 15.9113058,3.01370218 C16.2959949,2.9578717 16.5158172,3.08349028 16.6532062,3.19515123 C17.0117914,3.50221886 17.3690027,4.17358036 16.1998226,6.58685277 Z M10.2654437,13.9990466 C10.3478771,14.6969276 10.1692714,15.3808509 9.74199174,15.9251981 C9.37241543,16.412319 8.85033737,16.7486977 8.25956482,16.8882738 C8.23208703,16.9022315 8.19087034,16.9161891 8.16339255,16.9161891 L8.0246297,16.9301467 C7.76496455,16.9720196 7.51766442,16.9999348 7.2689904,16.9999348 C5.29196321,16.9999348 3.90296079,15.6586076 3.35477883,14.7806733 C3.14732149,14.4317328 2.83270076,13.7896823 3.10747869,13.3849114 C3.17617317,13.287208 3.36714383,13.0778437 3.77931072,13.1615894 C5.08450588,13.4407418 5.55162835,12.8545218 5.63543562,12.7428609 C6.51472499,11.5843784 8.14965365,11.3750141 9.27486926,12.2403866 C9.82579901,12.6730728 10.1816364,13.3011656 10.2654437,13.9990466 Z" id="Fill-4" fill="#4C97FF"></path>
<path d="M16.1998226,6.58685277 C15.5417294,7.94213763 14.5662678,9.50539101 13.6457617,10.6638734 C12.8750097,11.639511 12.2567593,12.2117734 11.6659868,12.4909258 C11.5972923,12.5341944 11.5299717,12.5481521 11.4461644,12.5481521 C11.3912089,12.5481521 11.3362533,12.5341944 11.2675588,12.5048834 C11.1439087,12.4644063 11.0339976,12.366703 10.979042,12.2410844 C10.8141752,11.8628329 10.580614,11.5432035 10.2659932,11.2905705 C9.94862474,11.053291 9.59141344,10.871842 9.18062043,10.7741386 C9.05559648,10.7462234 8.93194641,10.6638734 8.86325193,10.5368591 C8.79455745,10.4251981 8.76845354,10.2856219 8.79455745,10.1474415 C8.9594242,9.50539101 9.38532999,8.75167956 10.1272304,7.81651905 C11.5849273,5.94480227 14.4975733,3.16863175 15.9113058,3.01370218 C16.2959949,2.9578717 16.5158172,3.08349028 16.6532062,3.19515123 C17.0117914,3.50221886 17.3690027,4.17358036 16.1998226,6.58685277 Z M10.2654437,13.9990466 C10.3478771,14.6969276 10.1692714,15.3808509 9.74199174,15.9251981 C9.37241543,16.412319 8.85033737,16.7486977 8.25956482,16.8882738 C8.23208703,16.9022315 8.19087034,16.9161891 8.16339255,16.9161891 L8.0246297,16.9301467 C7.76496455,16.9720196 7.51766442,16.9999348 7.2689904,16.9999348 C5.29196321,16.9999348 3.90296079,15.6586076 3.35477883,14.7806733 C3.14732149,14.4317328 2.83270076,13.7896823 3.10747869,13.3849114 C3.17617317,13.287208 3.36714383,13.0778437 3.77931072,13.1615894 C5.08450588,13.4407418 5.55162835,12.8545218 5.63543562,12.7428609 C6.51472499,11.5843784 8.14965365,11.3750141 9.27486926,12.2403866 C9.82579901,12.6730728 10.1816364,13.3011656 10.2654437,13.9990466 Z" id="Fill-4" fill="#855CD6"></path>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

src/components/gui/icon--sounds.svg
+2 -2
View File
@@ -5,6 +5,6 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Sounds-V1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M12.6307801,13.637142 C12.480284,13.637142 12.3255684,13.5975477 12.1849178,13.5141169 C11.7671856,13.2652385 11.6279416,12.7236452 11.8754866,12.303663 C12.346666,11.5004646 12.346666,10.5049512 11.8754866,9.70316691 C11.6279416,9.28177059 11.7671856,8.74017733 12.1849178,8.49129896 C12.6068695,8.24524876 13.1441547,8.38382876 13.3888867,8.80239692 C14.1863754,10.1599153 14.1863754,11.8455006 13.3888867,13.2030189 C13.225732,13.4830071 12.9317723,13.637142 12.6307801,13.637142 Z M15.2566363,15.0553244 C15.1061402,15.0553244 14.950018,15.0157301 14.810774,14.9322993 C14.3930418,14.683421 14.2537977,14.1418277 14.5013427,13.7218455 C15.4873032,12.0447447 15.4873032,9.96038836 14.5013427,8.28470164 C14.2537977,7.8647194 14.3930418,7.32171206 14.810774,7.07283369 C15.2299126,6.82819757 15.7671978,6.96536349 16.0147428,7.38393165 C17.3284191,9.61535244 17.3284191,12.3897806 16.0147428,14.6212014 C15.8501816,14.9011895 15.5576285,15.0553244 15.2566363,15.0553244 Z M10.3785286,6.67858774 L10.3785286,15.3200405 C10.3785286,16.3438356 9.17174676,16.8797725 8.41926624,16.1897007 L6.79475223,14.6978446 C6.21949142,14.1703921 5.46982391,13.8776773 4.69061978,13.8776773 L4.40650564,13.8776773 C3.63011453,13.8776773 3,13.2455828 3,12.4635956 L3,9.5505875 C3,8.77001445 3.63011453,8.13650589 4.40650564,8.13650589 L4.67514822,8.13650589 C5.45435235,8.13650589 6.20401986,7.84379099 6.77928066,7.31633855 L8.41926624,5.81034163 C9.17174676,5.1202698 10.3785286,5.65620673 10.3785286,6.67858774 Z" id="Combined-Shape" fill="#4C97FF"></path>
<path d="M12.6307801,13.637142 C12.480284,13.637142 12.3255684,13.5975477 12.1849178,13.5141169 C11.7671856,13.2652385 11.6279416,12.7236452 11.8754866,12.303663 C12.346666,11.5004646 12.346666,10.5049512 11.8754866,9.70316691 C11.6279416,9.28177059 11.7671856,8.74017733 12.1849178,8.49129896 C12.6068695,8.24524876 13.1441547,8.38382876 13.3888867,8.80239692 C14.1863754,10.1599153 14.1863754,11.8455006 13.3888867,13.2030189 C13.225732,13.4830071 12.9317723,13.637142 12.6307801,13.637142 Z M15.2566363,15.0553244 C15.1061402,15.0553244 14.950018,15.0157301 14.810774,14.9322993 C14.3930418,14.683421 14.2537977,14.1418277 14.5013427,13.7218455 C15.4873032,12.0447447 15.4873032,9.96038836 14.5013427,8.28470164 C14.2537977,7.8647194 14.3930418,7.32171206 14.810774,7.07283369 C15.2299126,6.82819757 15.7671978,6.96536349 16.0147428,7.38393165 C17.3284191,9.61535244 17.3284191,12.3897806 16.0147428,14.6212014 C15.8501816,14.9011895 15.5576285,15.0553244 15.2566363,15.0553244 Z M10.3785286,6.67858774 L10.3785286,15.3200405 C10.3785286,16.3438356 9.17174676,16.8797725 8.41926624,16.1897007 L6.79475223,14.6978446 C6.21949142,14.1703921 5.46982391,13.8776773 4.69061978,13.8776773 L4.40650564,13.8776773 C3.63011453,13.8776773 3,13.2455828 3,12.4635956 L3,9.5505875 C3,8.77001445 3.63011453,8.13650589 4.40650564,8.13650589 L4.67514822,8.13650589 C5.45435235,8.13650589 6.20401986,7.84379099 6.77928066,7.31633855 L8.41926624,5.81034163 C9.17174676,5.1202698 10.3785286,5.65620673 10.3785286,6.67858774 Z" id="Combined-Shape" fill="#855CD6"></path>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

src/components/icon-button/icon-button.css
+2 -2
View File
@@ -7,7 +7,7 @@
cursor: pointer;
font-size: 0.75rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: $motion-primary;
color: $looks-secondary;
border-radius: 0.5rem;
}
@@ -26,5 +26,5 @@
}
.container:active {
background-color: $motion-light-transparent;
background-color: $looks-light-transparent;
}
src/components/language-selector/language-selector.css
+1 -1
View File
@@ -4,7 +4,7 @@
/* Position the language select over the language icon, and make it transparent */
.language-select {
position: absolute;
width: $language-selector-width;
width: 100%;
height: $menu-bar-height;
opacity: 0;
user-select: none;
src/components/library-item/library-item.css
+1 -1
View File
@@ -29,7 +29,7 @@
.library-item:hover {
border-width: 2px;
border-color: $motion-primary;
border-color: $looks-secondary;
}
.hidden {
src/components/library/library.css
+1 -1
View File
@@ -25,7 +25,7 @@
justify-content: flex-start;
align-items: center;
height: calc($library-filter-bar-height + 2rem); /* padding */
background-color: $motion-transparent;
background-color: $looks-transparent;
padding: 0 1rem;
font-size: .875rem;
}
src/components/menu-bar/check.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.1715 11.403C4.74533 11.403 4.31916 11.2398 3.99453 10.9152L0.798242 7.71892C0.147331 7.06801 0.147331 6.01589 0.798242 5.36498C1.44915 4.71407 2.50127 4.71407 3.15218 5.36498L5.1715 7.38431L11.4692 1.08828C12.1184 0.43737 13.1722 0.43737 13.8231 1.08828C14.4724 1.73753 14.4724 2.7913 13.8231 3.44222L6.34847 10.9152C6.02384 11.2398 5.59767 11.403 5.1715 11.403Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 534 B

src/components/menu-bar/menu-bar.css
+34 -10
View File
@@ -27,7 +27,7 @@
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: $menu-bar-standard-font-size;
font-weight: bold;
background-color: $motion-primary;
background-color: $looks-secondary;
color: $ui-white;
}
@@ -54,16 +54,28 @@
.language-icon {
height: 1.5rem;
vertical-align: middle;
margin: 0 .125rem 0 0;
}
.language-caret {
margin: 0 .125rem;
[dir="rtl"] .language-icon {
margin: 0 0 0 .125rem;
}
.language-menu {
box-sizing: border-box;
display: inline-flex;
width: $language-selector-width;
}
.language-label {
max-width: 7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 .5rem 0 .25rem;
}
[dir="rtl"] .language-label {
margin: 0 .25rem 0 .5rem;
}
.menu-bar-item {
@@ -105,20 +117,17 @@
}
.file-group .menu-bar-item {
margin: 0 .25rem;
padding: 0 0.75rem;
}
.menu-bar-item.language-menu {
padding: 0 0.5rem;
}
.menu-bar-menu {
margin-top: $menu-bar-height;
z-index: $z-index-menu-bar;
}
.feedback-link {
color: $motion-primary;
color: $looks-secondary;
text-decoration: none;
}
@@ -160,6 +169,7 @@
}
.account-info-group .menu-bar-item {
margin: 0 .25rem;
padding: 0 0.75rem;
}
@@ -169,7 +179,11 @@
}
.help-icon {
margin-right: 0.35rem;
margin: 0 .25rem 0 0;
}
[dir="rtl"] .help-icon {
margin: 0 0 0 .25rem;
}
.account-nav-menu, .mystuff-button {
@@ -226,3 +240,13 @@
margin: 0.5rem;
vertical-align: middle;
}
@media only screen and (max-width: 1024px) {
.language-label, .tutorials-label {
display: none;
}
.help-icon {
margin-right: 0;
}
}
src/components/menu-bar/menu-bar.jsx
+60 -24
View File
@@ -8,6 +8,7 @@ import bowser from 'bowser';
import React from 'react';
import VM from 'scratch-vm';
import locales from 'scratch-l10n';
import Box from '../box/box.jsx';
import Button from '../button/button.jsx';
@@ -28,6 +29,7 @@ import SB3Downloader from '../../containers/sb3-downloader.jsx';
import DeletionRestorer from '../../containers/deletion-restorer.jsx';
import TurboMode from '../../containers/turbo-mode.jsx';
import MenuBarHOC from '../../containers/menu-bar-hoc.jsx';
import ThemeMenu from './theme-menu.jsx';
import {openTipsLibrary} from '../../reducers/modals';
import {setPlayer} from '../../reducers/mode';
@@ -67,10 +69,14 @@ import {
openLoginMenu,
closeLoginMenu,
loginMenuOpen,
openThemeMenu,
closeThemeMenu,
themeMenuOpen,
openModeMenu,
closeModeMenu,
modeMenuOpen
} from '../../reducers/menus';
import {setTheme} from '../../reducers/theme.js';
import collectMetadata from '../../lib/collect-metadata';
@@ -91,6 +97,7 @@ import prehistoricLogo from './prehistoric-logo.svg';
import oldtimeyLogo from './oldtimey-logo.svg';
import sharedMessages from '../../lib/shared-messages';
import {persistTheme} from '../../lib/themes/themePersistance';
const ariaMessages = defineMessages({
language: {
@@ -176,6 +183,7 @@ class MenuBar extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'handleChangeTheme',
'handleClickNew',
'handleClickRemix',
'handleClickSave',
@@ -302,6 +310,11 @@ class MenuBar extends React.Component {
this.props.onClickLanguage(e);
}
}
handleChangeTheme (theme) {
this.props.onChangeTheme(theme);
this.props.onRequestCloseTheme();
persistTheme(theme);
}
restoreOptionMessage (deletedItem) {
switch (deletedItem) {
case 'Sprite':
@@ -449,18 +462,26 @@ class MenuBar extends React.Component {
{(this.props.canChangeLanguage) && (<div
className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)}
>
<div>
<img
className={styles.languageIcon}
src={languageIcon}
/>
<img
className={styles.languageCaret}
src={dropdownCaret}
/>
</div>
<img
className={styles.languageIcon}
src={languageIcon}
/>
<span className={styles.languageLabel}>{locales[this.props.currentLocale].name}</span>
<img
className={styles.languageCaret}
src={dropdownCaret}
/>
<LanguageSelector label={this.props.intl.formatMessage(ariaMessages.language)} />
</div>)}
{(this.props.canChangeTheme) && (<ThemeMenu
isRtl={this.props.isRtl}
onRequestClose={this.props.onRequestCloseTheme}
onRequestOpen={this.props.onRequestOpenTheme}
onChange={this.handleChangeTheme}
theme={this.props.theme}
themeMenuOpen={this.props.themeMenuOpen}
/>)}
<Divider className={classNames(styles.divider)} />
{(this.props.canManageFiles) && (
<div
className={classNames(styles.menuBarItem, styles.hoverable, {
@@ -625,19 +646,6 @@ class MenuBar extends React.Component {
</div>
)}
</div>
<Divider className={classNames(styles.divider)} />
<div
aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
className={classNames(styles.menuBarItem, styles.hoverable)}
onClick={this.props.onOpenTipLibrary}
>
<img
className={styles.helpIcon}
src={helpIcon}
/>
<FormattedMessage {...ariaMessages.tutorials} />
</div>
<Divider className={classNames(styles.divider)} />
{this.props.canEditTitle ? (
<div className={classNames(styles.menuBarItem, styles.growable)}>
<MenuBarItemTooltip
@@ -710,6 +718,22 @@ class MenuBar extends React.Component {
</MenuBarItemTooltip>
) : [])}
</div>
<Divider className={classNames(styles.divider)} />
<div className={styles.fileGroup}>
<div
aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
className={classNames(styles.menuBarItem, styles.hoverable)}
onClick={this.props.onOpenTipLibrary}
>
<img
className={styles.helpIcon}
src={helpIcon}
/>
<span className={styles.tutorialsLabel}>
<FormattedMessage {...ariaMessages.tutorials} />
</span>
</div>
</div>
</div>
{/* show the proper UI in the account menu, given whether the user is
@@ -856,6 +880,7 @@ MenuBar.propTypes = {
authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
autoUpdateProject: PropTypes.func,
canChangeLanguage: PropTypes.bool,
canChangeTheme: PropTypes.bool,
canCreateCopy: PropTypes.bool,
canCreateNew: PropTypes.bool,
canEditTitle: PropTypes.bool,
@@ -865,6 +890,7 @@ MenuBar.propTypes = {
canShare: PropTypes.bool,
className: PropTypes.string,
confirmReadyToReplaceProject: PropTypes.func,
currentLocale: PropTypes.string.isRequired,
editMenuOpen: PropTypes.bool,
enableCommunity: PropTypes.bool,
fileMenuOpen: PropTypes.bool,
@@ -878,13 +904,13 @@ MenuBar.propTypes = {
locale: PropTypes.string.isRequired,
loginMenuOpen: PropTypes.bool,
logo: PropTypes.string,
onChangeTheme: PropTypes.func,
modeMenuOpen: PropTypes.bool,
modeNow: PropTypes.bool,
mode220022BC: PropTypes.bool,
mode1920: PropTypes.bool,
mode1990: PropTypes.bool,
mode2020: PropTypes.bool,
onClickAbout: PropTypes.oneOfType([
PropTypes.func, // button mode: call this callback when the About button is clicked
PropTypes.arrayOf( // menu mode: list of items in the About menu
@@ -917,6 +943,8 @@ MenuBar.propTypes = {
onRequestCloseFile: PropTypes.func,
onRequestCloseLanguage: PropTypes.func,
onRequestCloseLogin: PropTypes.func,
onRequestCloseTheme: PropTypes.func,
onRequestOpenTheme: PropTypes.func,
onRequestCloseMode: PropTypes.func,
onSeeCommunity: PropTypes.func,
onShare: PropTypes.func,
@@ -927,6 +955,8 @@ MenuBar.propTypes = {
sessionExists: PropTypes.bool,
shouldSaveBeforeTransition: PropTypes.func,
showComingSoon: PropTypes.bool,
theme: PropTypes.string,
themeMenuOpen: PropTypes.bool,
userOwnsProject: PropTypes.bool,
username: PropTypes.string,
vm: PropTypes.instanceOf(VM).isRequired
@@ -943,6 +973,7 @@ const mapStateToProps = (state, ownProps) => {
return {
aboutMenuOpen: aboutMenuOpen(state),
accountMenuOpen: accountMenuOpen(state),
currentLocale: state.locales.locale,
fileMenuOpen: fileMenuOpen(state),
editMenuOpen: editMenuOpen(state),
isRtl: state.locales.isRtl,
@@ -954,6 +985,8 @@ const mapStateToProps = (state, ownProps) => {
modeMenuOpen: modeMenuOpen(state),
projectTitle: state.scratchGui.projectTitle,
sessionExists: state.session && typeof state.session.session !== 'undefined',
theme: state.scratchGui.theme.theme,
themeMenuOpen: themeMenuOpen(state),
username: user ? user.username : null,
userOwnsProject: ownProps.authorUsername && user &&
(ownProps.authorUsername === user.username),
@@ -983,11 +1016,14 @@ const mapDispatchToProps = dispatch => ({
onRequestCloseMode: () => dispatch(closeModeMenu()),
onRequestOpenAbout: () => dispatch(openAboutMenu()),
onRequestCloseAbout: () => dispatch(closeAboutMenu()),
onRequestOpenTheme: () => dispatch(openThemeMenu()),
onRequestCloseTheme: () => dispatch(closeThemeMenu()),
onClickNew: needSave => dispatch(requestNewProject(needSave)),
onClickRemix: () => dispatch(remixProject()),
onClickSave: () => dispatch(manualUpdateProject()),
onClickSaveAsCopy: () => dispatch(saveProjectAsCopy()),
onSeeCommunity: () => dispatch(setPlayer(true)),
onChangeTheme: theme => dispatch(setTheme(theme)),
onSetTimeTravelMode: mode => dispatch(setTimeTravel(mode))
});
src/components/menu-bar/theme-menu.css
+52
View File
@@ -0,0 +1,52 @@
@import "../../css/colors.css";
.theme-label {
max-width: 7rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 .5rem 0 .25rem;
}
[dir="rtl"] .theme-label {
margin: 0 .25rem 0 .5rem;
}
.theme-icon {
height: 1.5rem;
vertical-align: middle;
margin: 0 .25rem 0 0;
}
[dir="rtl"] .theme-icon {
margin: 0 0 0 .25rem;
}
.theme-option {
display: flex;
align-items: center;
gap: .5rem;
}
.theme-active {
background-color: $ui-black-transparent;
}
.check {
margin: 0 .25rem 0 0;
visibility: hidden;
}
[dir="rtl"] .check {
margin: 0 0 0 .25rem;
}
.selected {
visibility: visible;
}
@media only screen and (max-width: 1024px) {
.theme-label {
display: none;
}
}
src/components/menu-bar/theme-menu.jsx
+105
View File
@@ -0,0 +1,105 @@
import PropTypes from 'prop-types';
import React from 'react';
import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
import classNames from 'classnames';
import MenuBarMenu from './menu-bar-menu.jsx';
import {DEFAULT_THEME, HIGH_CONTRAST_THEME, themeMap} from '../../lib/themes';
import {MenuItem, MenuSection} from '../menu/menu.jsx';
import dropdownCaret from './dropdown-caret.svg';
import check from './check.svg';
import styles from './theme-menu.css';
import menuBarStyles from './menu-bar.css';
const messages = defineMessages({
colorTheme: {
id: 'gui.theme.colorTheme',
defaultMessage: 'Color theme',
description: 'label for selecting the site\'s color theme'
}
});
const ThemeMenuItem = props => {
const themeInfo = themeMap[props.theme];
return (
<MenuItem
isRtl={props.isRtl}
onClick={props.onClick}
>
<div className={styles.themeOption}>
<img
src={check}
className={classNames(styles.check, {[styles.selected]: props.isSelected})}
/>
<img src={themeInfo.icon} />
<FormattedMessage {...themeInfo.label} />
</div>
</MenuItem>);
};
ThemeMenuItem.propTypes = {
isRtl: PropTypes.bool,
isSelected: PropTypes.bool,
onClick: PropTypes.func,
theme: PropTypes.string
};
const ThemeMenu = props => {
const enabledThemes = [DEFAULT_THEME, HIGH_CONTRAST_THEME];
const themeInfo = themeMap[props.theme];
return (<div
className={classNames(menuBarStyles.menuBarItem, menuBarStyles.hoverable, menuBarStyles.themeMenu, {
[menuBarStyles.active]: props.themeMenuOpen
})}
onMouseUp={props.onRequestOpen}
>
<img
alt={props.intl.formatMessage(messages.colorTheme)}
className={styles.themeIcon}
src={themeInfo.icon}
/>
<span className={styles.themeLabel}>
<FormattedMessage {...themeInfo.label} />
</span>
<img
className={styles.themeCaret}
src={dropdownCaret}
/>
<MenuBarMenu
className={menuBarStyles.menuBarMenu}
open={props.themeMenuOpen}
place={props.isRtl ? 'left' : 'right'}
onRequestClose={props.onRequestClose}
>
<MenuSection>
{enabledThemes.map(enabledTheme => (
<ThemeMenuItem
key={enabledTheme}
isRtl={props.isRtl}
isSelected={props.theme === enabledTheme}
// eslint-disable-next-line react/jsx-no-bind
onClick={() => props.onChange(enabledTheme)}
theme={enabledTheme}
/>)
)}
</MenuSection>
</MenuBarMenu>
</div>);
};
ThemeMenu.propTypes = {
className: PropTypes.string,
intl: intlShape.isRequired,
isRtl: PropTypes.bool,
onChange: PropTypes.func,
onRequestClose: PropTypes.func,
onRequestOpen: PropTypes.func,
theme: PropTypes.string,
themeMenuOpen: PropTypes.bool
};
export default injectIntl(ThemeMenu);
src/components/menu/menu.css
+1 -1
View File
@@ -4,7 +4,7 @@
position: absolute;
border: 1px solid $ui-black-transparent;
border-radius: 0 0 8px 8px;
background-color: $motion-primary;
background-color: $looks-secondary;
padding: 0;
margin: 0;
min-width: 186px;
src/components/modal/modal.css
+1 -1
View File
@@ -67,7 +67,7 @@ $sides: 20rem;
box-sizing: border-box;
width: 100%;
background-color: $motion-primary;
background-color: $looks-secondary;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem;
src/components/monitor/default-monitor.jsx
+8 -2
View File
@@ -10,7 +10,10 @@ const DefaultMonitor = ({categoryColor, label, value}) => (
</div>
<div
className={styles.value}
style={{background: categoryColor}}
style={{
background: categoryColor.background,
color: categoryColor.text
}}
>
{value}
</div>
@@ -19,7 +22,10 @@ const DefaultMonitor = ({categoryColor, label, value}) => (
);
DefaultMonitor.propTypes = {
categoryColor: PropTypes.string.isRequired,
categoryColor: PropTypes.shape({
background: PropTypes.string.isRequired,
text: PropTypes.string.isRequired
}).isRequired,
label: PropTypes.string.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
src/components/monitor/large-monitor.jsx
+8 -2
View File
@@ -6,7 +6,10 @@ const LargeMonitor = ({categoryColor, value}) => (
<div className={styles.largeMonitor}>
<div
className={styles.largeValue}
style={{background: categoryColor}}
style={{
background: categoryColor.background,
color: categoryColor.text
}}
>
{value}
</div>
@@ -14,7 +17,10 @@ const LargeMonitor = ({categoryColor, value}) => (
);
LargeMonitor.propTypes = {
categoryColor: PropTypes.string,
categoryColor: PropTypes.shape({
background: PropTypes.string.isRequired,
text: PropTypes.string.isRequired
}).isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
src/components/monitor/list-monitor-scroller.jsx
+9 -2
View File
@@ -41,7 +41,10 @@ class ListMonitorScroller extends React.Component {
<div
className={styles.listValue}
dataIndex={index}
style={{background: this.props.categoryColor}}
style={{
background: this.props.categoryColor.background,
color: this.props.categoryColor.text
}}
onClick={this.props.draggable ? this.handleEventFactory(index) : null}
>
{this.props.draggable && this.props.activeIndex === index ? (
@@ -51,6 +54,7 @@ class ListMonitorScroller extends React.Component {
autoComplete={false}
className={classNames(styles.listInput, 'no-drag')}
spellCheck={false}
style={{color: this.props.categoryColor.text}}
type="text"
value={this.props.activeValue}
onBlur={this.props.onDeactivate}
@@ -97,7 +101,10 @@ class ListMonitorScroller extends React.Component {
ListMonitorScroller.propTypes = {
activeIndex: PropTypes.number,
activeValue: PropTypes.string,
categoryColor: PropTypes.string,
categoryColor: PropTypes.shape({
background: PropTypes.string.isRequired,
text: PropTypes.string.isRequired
}).isRequired,
draggable: PropTypes.bool,
height: PropTypes.number,
onActivate: PropTypes.func,
src/components/monitor/list-monitor.jsx
+4 -1
View File
@@ -54,7 +54,10 @@ const ListMonitor = ({draggable, label, width, height, value, onResizeMouseDown,
ListMonitor.propTypes = {
activeIndex: PropTypes.number,
categoryColor: PropTypes.string.isRequired,
categoryColor: PropTypes.shape({
background: PropTypes.string.isRequired,
text: PropTypes.string.isRequired
}).isRequired,
draggable: PropTypes.bool.isRequired,
height: PropTypes.number,
label: PropTypes.string.isRequired,
src/components/monitor/monitor.css
-5
View File
@@ -42,7 +42,6 @@
align-items: center;
min-width: 40px;
text-align: center;
color: white;
margin: 0 5px;
border-radius: calc($space / 2);
padding: 0 2px;
@@ -55,7 +54,6 @@
min-width: 3rem;
padding: 0.1rem 0.25rem;
text-align: center;
color: white;
font-size: 1rem;
white-space: pre-wrap;
transform: translateZ(0); /* Fixes flickering in Safari */
@@ -115,7 +113,6 @@
.list-value {
min-width: 40px;
text-align: left;
color: white;
margin: 0 3px;
border-radius: calc($space / 2);
border: 1px solid $ui-black-transparent;
@@ -161,7 +158,6 @@
padding: 3px 5px;
border: 0;
background: none;
color: $ui-white;
outline: none;
font-size: 0.75rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -174,7 +170,6 @@
padding: 0;
padding-right: 5px;
cursor: pointer;
color: $ui-white;
}
.add-button {
src/components/monitor/monitor.jsx
+22 -13
View File
@@ -10,17 +10,19 @@ import DefaultMonitor from './default-monitor.jsx';
import LargeMonitor from './large-monitor.jsx';
import SliderMonitor from '../../containers/slider-monitor.jsx';
import ListMonitor from '../../containers/list-monitor.jsx';
import {getColorsForTheme} from '../../lib/themes/index.js';
import styles from './monitor.css';
const categories = {
data: '#FF8C1A',
sensing: '#5CB1D6',
sound: '#CF63CF',
looks: '#9966FF',
motion: '#4C97FF',
list: '#FC662C',
extension: '#0FBD8C'
// Map category name to color name used in scratch-blocks Blockly.Colours
const categoryColorMap = {
data: 'data',
sensing: 'sensing',
sound: 'sounds',
looks: 'looks',
motion: 'motion',
list: 'data_lists',
extension: 'pen'
};
const modes = {
@@ -30,6 +32,14 @@ const modes = {
list: ListMonitor
};
const getCategoryColor = (theme, category) => {
const colors = getColorsForTheme(theme);
return {
background: colors[categoryColorMap[category]].primary,
text: colors.text
};
};
const MonitorComponent = props => (
<ContextMenuTrigger
disable={!props.draggable}
@@ -49,7 +59,7 @@ const MonitorComponent = props => (
onDoubleClick={props.mode === 'list' || !props.draggable ? null : props.onNextMode}
>
{React.createElement(modes[props.mode], {
categoryColor: categories[props.category],
categoryColor: getCategoryColor(props.theme, props.category),
...props
})}
</Box>
@@ -122,12 +132,10 @@ const MonitorComponent = props => (
);
MonitorComponent.categories = categories;
const monitorModes = Object.keys(modes);
MonitorComponent.propTypes = {
category: PropTypes.oneOf(Object.keys(categories)),
category: PropTypes.oneOf(Object.keys(categoryColorMap)),
componentRef: PropTypes.func.isRequired,
draggable: PropTypes.bool.isRequired,
label: PropTypes.string.isRequired,
@@ -140,7 +148,8 @@ MonitorComponent.propTypes = {
onSetModeToDefault: PropTypes.func,
onSetModeToLarge: PropTypes.func,
onSetModeToSlider: PropTypes.func,
onSliderPromptOpen: PropTypes.func
onSliderPromptOpen: PropTypes.func,
theme: PropTypes.string.isRequired
};
MonitorComponent.defaultProps = {
src/components/monitor/slider-monitor.jsx
+8 -2
View File
@@ -12,7 +12,10 @@ const SliderMonitor = ({categoryColor, isDiscrete, label, min, max, value, onSli
</div>
<div
className={styles.value}
style={{background: categoryColor}}
style={{
background: categoryColor.background,
color: categoryColor.text
}}
>
{value}
</div>
@@ -33,7 +36,10 @@ const SliderMonitor = ({categoryColor, isDiscrete, label, min, max, value, onSli
);
SliderMonitor.propTypes = {
categoryColor: PropTypes.string.isRequired,
categoryColor: PropTypes.shape({
background: PropTypes.string.isRequired,
text: PropTypes.string.isRequired
}).isRequired,
isDiscrete: PropTypes.bool,
label: PropTypes.string.isRequired,
max: PropTypes.number,
src/components/prompt/prompt.css
+2 -2
View File
@@ -64,8 +64,8 @@
}
.button-row button.ok-button {
background: $motion-primary;
border: $motion-primary;
background: $looks-secondary;
border: $looks-secondary;
color: white;
}
src/components/question/question.css
+2 -2
View File
@@ -34,7 +34,7 @@
border-radius: 100%;
color: white;
background: $motion-primary;
background: $looks-secondary;
}
[dir="ltr"] .question-submit-button {
@@ -60,7 +60,7 @@
}
.question-input > input:focus {
box-shadow: 0px 0px 0px 3px $motion-transparent;
box-shadow: 0px 0px 0px 3px $looks-transparent;
}
.question-submit-button-icon {
src/components/record-modal/icon--back.svg
+1 -1
View File
@@ -5,7 +5,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop---1280x720" transform="translate(-446.000000, -454.000000)" fill="#4C97FF">
<g id="Desktop---1280x720" transform="translate(-446.000000, -454.000000)" fill="#855CD6">
<g id="Step-4---Playing-Trim" transform="translate(0.000000, 42.000000)">
<g id="Re-record" transform="translate(434.000000, 400.000000)">
<path d="M23.6951773,18.0886272 L20.5085204,21.2806841 C20.2691162,21.5146883 19.9451104,21.6466907 19.6085044,21.6466907 C19.2730984,21.6466907 18.9490926,21.5146883 18.7084883,21.2806841 L15.5230315,18.0886272 C15.157025,17.7226207 15.049023,17.1766109 15.2470266,16.7026025 C15.4450301,16.228594 15.9010382,15.9225886 16.4170474,15.9225886 L17.5630679,15.9225886 C17.5330673,15.6465836 17.455066,15.3345781 17.3230636,15.0045722 C17.2816629,14.9085705 17.2390621,14.8125688 17.1910612,14.716567 C17.1250601,14.6085651 17.1316602,14.5785646 17.0410586,14.4465622 C16.897056,14.2305584 16.7650536,14.0685555 16.6084509,13.8825522 C16.2910452,13.5405461 15.9070383,13.2465408 15.4990311,13.030537 C15.0850237,12.8145331 14.653016,12.6825308 14.2690091,12.6105295 C13.8910024,12.5445283 13.5429962,12.5385282 13.3389925,12.5385282 C13.2369907,12.5325281 13.1049884,12.5565285 13.0389872,12.5625286 C12.9669859,12.5685287 12.9249852,12.5745288 12.9249852,12.5745288 C12.4989776,12.6165296 12.1149707,12.304524 12.07297,11.8785164 C12.0369693,11.51851 12.2469731,11.1945042 12.5649787,11.0745021 C12.5649787,11.0745021 12.6069795,11.0565018 12.6729807,11.0325013 C12.750982,11.0085009 12.8229833,10.9665001 12.9909863,10.9184993 C13.3269923,10.8164975 13.7529999,10.7084955 14.3110099,10.6544946 C14.8630197,10.6064937 15.5290316,10.6184939 16.2316441,10.7624965 C16.9330566,10.9124992 17.6710698,11.1945042 18.355082,11.6025115 C18.6790878,11.8125152 19.027094,12.0585196 19.2970988,12.2985239 C19.417101,12.3885255 19.6211046,12.5925292 19.7411067,12.7185314 C19.8791092,12.862534 20.0051114,13.0065365 20.1317137,13.1565392 C20.6171224,13.7565499 20.9771288,14.4045615 21.211133,14.992572 C21.3491354,15.328578 21.4451371,15.6465836 21.5171384,15.9225886 L22.8011613,15.9225886 C23.3171705,15.9225886 23.7731787,16.228594 23.9711822,16.7026025 C24.1691857,17.1766109 24.0611838,17.7226207 23.6951773,18.0886272" id="re-record" transform="translate(18.068963, 16.137926) scale(-1, 1) rotate(-45.000000) translate(-18.068963, -16.137926) "></path>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

src/components/record-modal/icon--play.svg
+1 -1
View File
@@ -18,7 +18,7 @@
<g id="Play-/-Record-/-Stop" transform="translate(623.000000, 307.000000)">
<g id="play" transform="translate(21.849131, 22.002656) rotate(90.000000) translate(-21.849131, -22.002656) ">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use stroke="#4280D7" stroke-width="1" fill="#4C97FF" fill-rule="evenodd" xlink:href="#path-1"></use>
<use stroke="#6736B5" stroke-width="1" fill="#855CD6" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

src/components/record-modal/icon--stop-playback.svg
+3 -3
View File
@@ -18,11 +18,11 @@
<g id="Play-/-Record-/-Stop" transform="translate(623.000000, 307.000000)">
<g id="stop-playback">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#4C97FF" fill-rule="evenodd" xlink:href="#path-1"></use>
<rect stroke="#4280D7" stroke-width="1" x="0.5" y="0.5" width="43" height="43" rx="4"></rect>
<use fill="#855CD6" fill-rule="evenodd" xlink:href="#path-1"></use>
<rect stroke="#6736B5" stroke-width="1" x="0.5" y="0.5" width="43" height="43" rx="4"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

src/components/record-modal/record-modal.css
+6 -5
View File
@@ -47,7 +47,7 @@
}
.playing-text {
color: $motion-primary;
color: $looks-secondary;
}
.recording-text {
@@ -89,12 +89,12 @@
border: 1px solid $ui-black-transparent;
font-weight: 600;
font-size: 0.85rem;
color: $motion-primary;
color: $looks-secondary;
}
.button-row button.ok-button {
background: $motion-primary;
border: $motion-primary;
background: $looks-secondary;
border: $looks-secondary;
color: white;
}
@@ -106,7 +106,8 @@
text-align: center;
}
.record-button {
/* Increase specificity to make sure this wins out over normalize.css */
svg.record-button {
overflow: visible;
}
src/components/slider-prompt/slider-prompt.css
+2 -2
View File
@@ -41,8 +41,8 @@
}
.button-row button.ok-button {
background: $motion-primary;
border: $motion-primary;
background: $looks-secondary;
border: $looks-secondary;
color: white;
}
src/components/sound-editor/icon--copy-to-new.svg
+2 -2
View File
@@ -4,6 +4,6 @@
<title>Sound/General/Copy to New</title>
<desc>Created with Sketch.</desc>
<g id="Sound/General/Copy-to-New" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M15,11.0967026 L15,4 C15,3.44771525 14.5522847,3 14,3 L4,3 C3.44771525,3 3,3.44771525 3,4 L3,12 L12.6616037,12 L11.5236347,13.0430331 C11.1882084,13.3580017 11,13.7827132 11,14.2302292 C11,14.6767472 11.187801,15.1005394 11.5128606,15.4074032 L12.1595777,16 L4,16 C2.8954305,16 2,15.1045695 2,14 L2,4 C2,2.8954305 2.8954305,2 4,2 L14,2 C15.1045695,2 16,2.8954305 16,4 L16,12.0333493 C15.8307357,11.617882 15.4895036,11.283542 15.0505738,11.115203 C15.0337809,11.1087625 15.0169209,11.1025961 15,11.0967026 Z M10.3153901,9.43844107 C10.240142,9.43844107 10.1627842,9.41684419 10.0924589,9.37133647 C9.88359282,9.23558464 9.81397079,8.94017013 9.93774329,8.71108891 C10.173333,8.27298072 10.173333,7.72997337 9.93774329,7.2926365 C9.81397079,7.06278396 9.88359282,6.76736945 10.0924589,6.63161762 C10.3034348,6.49740842 10.5720773,6.57299751 10.6944433,6.80130741 C11.0931877,7.54177197 11.0931877,8.46118212 10.6944433,9.20164668 C10.612866,9.35436749 10.4658862,9.43844107 10.3153901,9.43844107 Z M11.6283181,10.2119951 C11.5530701,10.2119951 11.475009,10.1903983 11.405387,10.1448905 C11.1965209,10.0091387 11.1268989,9.7137242 11.2506714,9.48464298 C11.7436516,8.56986072 11.7436516,7.4329391 11.2506714,6.51892817 C11.1268989,6.28984695 11.1965209,5.99366112 11.405387,5.85790929 C11.6149563,5.7244714 11.8835989,5.79928918 12.0073714,6.02759908 C12.6642095,7.2447377 12.6642095,8.75806213 12.0073714,9.97520074 C11.9250908,10.1279216 11.7788142,10.2119951 11.6283181,10.2119951 Z M9.1892643,5.64286604 L9.1892643,10.3563857 C9.1892643,10.9148194 8.58587338,11.2071486 8.20963312,10.8307458 L7.39737611,10.0170061 C7.10974571,9.72930481 6.73491195,9.56964214 6.34530989,9.56964214 L6.20325282,9.56964214 C5.81505726,9.56964214 5.5,9.22486333 5.5,8.79832489 L5.5,7.20941137 C5.5,6.78364425 5.81505726,6.43809412 6.20325282,6.43809412 L6.33757411,6.43809412 C6.72717617,6.43809412 7.10200993,6.27843145 7.38964033,5.99073012 L8.20963312,5.16927725 C8.58587338,4.79287444 9.1892643,5.08520367 9.1892643,5.64286604 Z M13.937674,12.1868928 C14.1369962,12.0038895 14.4343459,11.9498886 14.6924846,12.0488903 C14.9506233,12.1478921 15.1172698,12.3758962 15.1172698,12.6339008 L15.1172698,13.2759122 C15.2675784,13.3119129 15.44076,13.3599137 15.6237444,13.428915 C15.9439671,13.545917 16.2968655,13.7259203 16.6236234,13.9686246 C16.7053128,14.0319257 16.7837347,14.0949268 16.8621566,14.1639281 C16.9307757,14.2239291 17.0418734,14.325931 17.0908871,14.385932 C17.2215902,14.5209344 17.3555609,14.6949375 17.4699262,14.8569404 C17.6921215,15.1989465 17.8456977,15.5679531 17.9273871,15.9186594 C18.005809,16.2699656 18.0123442,16.6029716 17.9862036,16.8789765 C17.9567954,17.1579815 17.8979789,17.3709853 17.8424301,17.5389883 C17.8162895,17.6229898 17.7934164,17.6589904 17.7803461,17.6979911 L17.7574731,17.7519921 C17.6921215,17.9109949 17.5156723,18.0159968 17.3196176,17.9979965 C17.0876195,17.9769961 16.9177054,17.7849927 16.9405785,17.5719889 L16.9471136,17.5149878 C16.9503812,17.4819873 16.9634515,17.4159861 16.960184,17.3649852 C16.960184,17.2629833 16.9569164,17.0889802 16.920973,16.8999769 C16.8817621,16.7079734 16.8098753,16.4919696 16.6922425,16.2849659 C16.5746097,16.0809623 16.4144984,15.8889588 16.2282464,15.730256 C16.1269515,15.6519546 16.0387269,15.5859534 15.921094,15.5139521 C15.8492073,15.4686513 15.8328694,15.4719514 15.774053,15.4389508 C15.7217718,15.4149504 15.6694905,15.39365 15.6172092,15.3729496 C15.4374924,15.3069485 15.2675784,15.2679478 15.1172698,15.2529475 L15.1172698,15.8259577 C15.1172698,16.0839623 14.9506233,16.3119664 14.6924846,16.4109681 C14.4343459,16.5099699 14.1369962,16.4559689 13.937674,16.2729657 L12.1993223,14.6802373 C12.0718867,14.5599351 12,14.3979322 12,14.2302292 C12,14.0619262 12.0718867,13.8999234 12.1993223,13.7802212 L13.937674,12.1868928 Z" id="Copy-to-New" fill="#4D97FF" fill-rule="nonzero"></path>
<path d="M15,11.0967026 L15,4 C15,3.44771525 14.5522847,3 14,3 L4,3 C3.44771525,3 3,3.44771525 3,4 L3,12 L12.6616037,12 L11.5236347,13.0430331 C11.1882084,13.3580017 11,13.7827132 11,14.2302292 C11,14.6767472 11.187801,15.1005394 11.5128606,15.4074032 L12.1595777,16 L4,16 C2.8954305,16 2,15.1045695 2,14 L2,4 C2,2.8954305 2.8954305,2 4,2 L14,2 C15.1045695,2 16,2.8954305 16,4 L16,12.0333493 C15.8307357,11.617882 15.4895036,11.283542 15.0505738,11.115203 C15.0337809,11.1087625 15.0169209,11.1025961 15,11.0967026 Z M10.3153901,9.43844107 C10.240142,9.43844107 10.1627842,9.41684419 10.0924589,9.37133647 C9.88359282,9.23558464 9.81397079,8.94017013 9.93774329,8.71108891 C10.173333,8.27298072 10.173333,7.72997337 9.93774329,7.2926365 C9.81397079,7.06278396 9.88359282,6.76736945 10.0924589,6.63161762 C10.3034348,6.49740842 10.5720773,6.57299751 10.6944433,6.80130741 C11.0931877,7.54177197 11.0931877,8.46118212 10.6944433,9.20164668 C10.612866,9.35436749 10.4658862,9.43844107 10.3153901,9.43844107 Z M11.6283181,10.2119951 C11.5530701,10.2119951 11.475009,10.1903983 11.405387,10.1448905 C11.1965209,10.0091387 11.1268989,9.7137242 11.2506714,9.48464298 C11.7436516,8.56986072 11.7436516,7.4329391 11.2506714,6.51892817 C11.1268989,6.28984695 11.1965209,5.99366112 11.405387,5.85790929 C11.6149563,5.7244714 11.8835989,5.79928918 12.0073714,6.02759908 C12.6642095,7.2447377 12.6642095,8.75806213 12.0073714,9.97520074 C11.9250908,10.1279216 11.7788142,10.2119951 11.6283181,10.2119951 Z M9.1892643,5.64286604 L9.1892643,10.3563857 C9.1892643,10.9148194 8.58587338,11.2071486 8.20963312,10.8307458 L7.39737611,10.0170061 C7.10974571,9.72930481 6.73491195,9.56964214 6.34530989,9.56964214 L6.20325282,9.56964214 C5.81505726,9.56964214 5.5,9.22486333 5.5,8.79832489 L5.5,7.20941137 C5.5,6.78364425 5.81505726,6.43809412 6.20325282,6.43809412 L6.33757411,6.43809412 C6.72717617,6.43809412 7.10200993,6.27843145 7.38964033,5.99073012 L8.20963312,5.16927725 C8.58587338,4.79287444 9.1892643,5.08520367 9.1892643,5.64286604 Z M13.937674,12.1868928 C14.1369962,12.0038895 14.4343459,11.9498886 14.6924846,12.0488903 C14.9506233,12.1478921 15.1172698,12.3758962 15.1172698,12.6339008 L15.1172698,13.2759122 C15.2675784,13.3119129 15.44076,13.3599137 15.6237444,13.428915 C15.9439671,13.545917 16.2968655,13.7259203 16.6236234,13.9686246 C16.7053128,14.0319257 16.7837347,14.0949268 16.8621566,14.1639281 C16.9307757,14.2239291 17.0418734,14.325931 17.0908871,14.385932 C17.2215902,14.5209344 17.3555609,14.6949375 17.4699262,14.8569404 C17.6921215,15.1989465 17.8456977,15.5679531 17.9273871,15.9186594 C18.005809,16.2699656 18.0123442,16.6029716 17.9862036,16.8789765 C17.9567954,17.1579815 17.8979789,17.3709853 17.8424301,17.5389883 C17.8162895,17.6229898 17.7934164,17.6589904 17.7803461,17.6979911 L17.7574731,17.7519921 C17.6921215,17.9109949 17.5156723,18.0159968 17.3196176,17.9979965 C17.0876195,17.9769961 16.9177054,17.7849927 16.9405785,17.5719889 L16.9471136,17.5149878 C16.9503812,17.4819873 16.9634515,17.4159861 16.960184,17.3649852 C16.960184,17.2629833 16.9569164,17.0889802 16.920973,16.8999769 C16.8817621,16.7079734 16.8098753,16.4919696 16.6922425,16.2849659 C16.5746097,16.0809623 16.4144984,15.8889588 16.2282464,15.730256 C16.1269515,15.6519546 16.0387269,15.5859534 15.921094,15.5139521 C15.8492073,15.4686513 15.8328694,15.4719514 15.774053,15.4389508 C15.7217718,15.4149504 15.6694905,15.39365 15.6172092,15.3729496 C15.4374924,15.3069485 15.2675784,15.2679478 15.1172698,15.2529475 L15.1172698,15.8259577 C15.1172698,16.0839623 14.9506233,16.3119664 14.6924846,16.4109681 C14.4343459,16.5099699 14.1369962,16.4559689 13.937674,16.2729657 L12.1993223,14.6802373 C12.0718867,14.5599351 12,14.3979322 12,14.2302292 C12,14.0619262 12.0718867,13.8999234 12.1993223,13.7802212 L13.937674,12.1868928 Z" id="Copy-to-New" fill="#855CD6" fill-rule="nonzero"></path>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

src/components/sound-editor/icon--copy.svg
+3 -3
View File
@@ -4,11 +4,11 @@
<title>Sound/General/Copy</title>
<desc>Created with Sketch.</desc>
<g id="Sound/General/Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Secondary-Color" opacity="0.25" transform="translate(2.000000, 4.000000)" fill="#4D97FF">
<g id="Secondary-Color" opacity="0.25" transform="translate(2.000000, 4.000000)" fill="#855CD6">
<rect id="selection" x="0" y="0" width="16" height="12"></rect>
</g>
<g id="Primary-Color" transform="translate(0.000000, 2.000000)" fill="#4D97FF" fill-rule="nonzero">
<g id="Primary-Color" transform="translate(0.000000, 2.000000)" fill="#855CD6" fill-rule="nonzero">
<path d="M1.5,3.93699126 C0.637386394,3.71496986 0,2.93191971 0,2 C0,0.8954305 0.8954305,0 2,0 C3.1045695,0 4,0.8954305 4,2 C4,2.93191971 3.36261361,3.71496986 2.5,3.93699126 L2.5,12.0630087 C3.36261361,12.2850301 4,13.0680803 4,14 C4,15.1045695 3.1045695,16 2,16 C0.8954305,16 0,15.1045695 0,14 C0,13.0680803 0.637386394,12.2850301 1.5,12.0630087 L1.5,3.93699126 Z M17.5,12.0630087 L17.5,3.93699126 C16.6373864,3.71496986 16,2.93191971 16,2 C16,0.8954305 16.8954305,0 18,0 C19.1045695,0 20,0.8954305 20,2 C20,2.93191971 19.3626136,3.71496986 18.5,3.93699126 L18.5,12.0630087 C19.3626136,12.2850301 20,13.0680803 20,14 C20,15.1045695 19.1045695,16 18,16 C16.8954305,16 16,15.1045695 16,14 C16,13.0680803 16.6373864,12.2850301 17.5,12.0630087 Z M11,7 L12,7 C12.5522847,7 13,7.44771525 13,8 C13,8.55228475 12.5522847,9 12,9 L11,9 L11,10 C11,10.5522847 10.5522847,11 10,11 C9.44771525,11 9,10.5522847 9,10 L9,9 L8,9 C7.44771525,9 7,8.55228475 7,8 C7,7.44771525 7.44771525,7 8,7 L9,7 L9,6 C9,5.44771525 9.44771525,5 10,5 C10.5522847,5 11,5.44771525 11,6 L11,7 Z" id="handles-and-plus"></path>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

src/components/sound-editor/icon--delete.svg
+2 -2
View File
@@ -11,8 +11,8 @@
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#575E75" xlink:href="#path-1"></use>
<g id="Blue/1_Blue" mask="url(#mask-2)" fill="#4D97FF">
<g id="Blue/1_Blue" mask="url(#mask-2)" fill="#855CD6">
<rect id="Primary-Blue" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

src/components/sound-editor/icon--paste.svg
+2 -2
View File
@@ -4,6 +4,6 @@
<title>Sound/General/Paste</title>
<desc>Created with Sketch.</desc>
<g id="Sound/General/Paste" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M2.39776184,8.69699508 C2.82037272,8.57348907 3.12697047,8.23068036 3.44607843,7.63235294 C3.50283588,7.52593273 3.70653958,7.12084014 3.75472041,7.03050109 C4.03665487,6.50187397 4.27845388,6.25 4.66666667,6.25 C5.08719776,6.25 5.31070056,6.3254322 5.67812087,6.53210612 C5.97736723,6.7004322 6.1242348,6.75 6.44444444,6.75 C6.611898,6.75 6.70455317,6.61444047 6.85968251,6.13575567 C6.89349476,6.03068757 6.91177802,5.97409653 6.92949584,5.92094306 C7.19192893,5.1336438 7.51873661,4.75 8.22222222,4.75 C8.89163675,4.75 9.21925695,5.04485818 9.76356813,5.86132495 C10.2192569,6.54485818 10.4471923,6.75 10.8888889,6.75 C11.3661624,6.75 11.5487705,6.64281697 11.7364319,6.36132495 C11.7692531,6.31129826 11.7692531,6.31129826 11.8038172,6.25761214 C12.0332099,5.90369189 12.2433073,5.75 12.6666667,5.75 C13.1851992,5.75 13.4061497,6.04828312 13.7840084,6.89846538 C14.0728163,7.54828312 14.2222362,7.75 14.4444444,7.75 C14.7687569,7.75 14.9402848,7.69488783 15.2489243,7.52961059 L15.2905031,7.50732887 C15.6361057,7.32238348 15.857036,7.25 16.2222222,7.25 C16.6365912,7.25 16.8489777,7.46586974 17.1158999,7.96477614 C17.1606386,8.04903257 17.1606386,8.04903257 17.2045543,8.13123692 C17.3511621,8.40280419 17.4762139,8.57093888 17.631381,8.6621791 C17.7227849,8.5624959 17.8540941,8.5 18,8.5 C18.2761424,8.5 18.5,8.72385763 18.5,9 C18.5,9.27614237 18.2761424,9.5 18,9.5 C17.8540941,9.5 17.7227849,9.4375041 17.631381,9.3378209 C17.4762139,9.42906112 17.3511621,9.59719581 17.2045543,9.86876308 C17.1606386,9.95096743 17.1606386,9.95096743 17.1158999,10.0352239 C16.8489777,10.5341303 16.6365912,10.75 16.2222222,10.75 C15.857036,10.75 15.6361057,10.6776165 15.2905031,10.4926711 L15.2489243,10.4703894 C14.9402848,10.3051122 14.7687569,10.25 14.4444444,10.25 C14.2222362,10.25 14.0728163,10.4517169 13.7840084,11.1015346 C13.4061497,11.9517169 13.1851992,12.25 12.6666667,12.25 C12.2433073,12.25 12.0332099,12.0963081 11.8038172,11.7423879 C11.7692531,11.6887017 11.7692531,11.6887017 11.7364319,11.638675 C11.5487705,11.357183 11.3661624,11.25 10.8888889,11.25 C10.4471923,11.25 10.2192569,11.4551418 9.76356813,12.138675 C9.21925695,12.9551418 8.89163675,13.25 8.22222222,13.25 C7.51873661,13.25 7.19192893,12.8663562 6.92949584,12.0790569 C6.91177802,12.0259035 6.89349476,11.9693124 6.85968251,11.8642443 C6.70455317,11.3855595 6.611898,11.25 6.44444444,11.25 C6.1242348,11.25 5.97736723,11.2995678 5.67812087,11.4678939 C5.31070056,11.6745678 5.08719776,11.75 4.66666667,11.75 C4.2576716,11.75 4.07414298,11.4976192 3.8822771,10.9321841 L3.78515608,10.639352 C3.74630783,10.5239258 3.71290663,10.4315854 3.67737933,10.3436452 C3.42795496,9.72624902 3.07265238,9.37546644 2.4155666,9.27813036 C2.32583908,9.41193093 2.17320436,9.5 2,9.5 C1.72385763,9.5 1.5,9.27614237 1.5,9 C1.5,8.72385763 1.72385763,8.5 2,8.5 C2.16222865,8.5 2.306412,8.5772611 2.39776184,8.69699508 Z M9,15 L9.7763932,13.4472136 C9.80058413,13.3988317 9.83981475,13.3596011 9.8881966,13.3354102 C10.0116912,13.2736629 10.1618595,13.323719 10.2236068,13.4472136 L11,15 L12,15 C12.2761424,15 12.5,15.2238576 12.5,15.5 C12.5,15.6081851 12.4649111,15.7134519 12.4,15.8 L10.4,18.4666667 C10.2343146,18.6875806 9.9209139,18.7323521 9.7,18.5666667 C9.66209717,18.5382395 9.62842712,18.5045695 9.6,18.4666667 L7.6,15.8 C7.43431458,15.5790861 7.4790861,15.2656854 7.7,15.1 C7.78654809,15.0350889 7.89181489,15 8,15 L9,15 L9,15 Z M2,3.5 C1.72385763,3.5 1.5,3.27614237 1.5,3 C1.5,2.72385763 1.72385763,2.5 2,2.5 C2.27614237,2.5 2.5,2.72385763 2.5,3 C2.5,3.27614237 2.27614237,3.5 2,3.5 Z M4,3.5 C3.72385763,3.5 3.5,3.27614237 3.5,3 C3.5,2.72385763 3.72385763,2.5 4,2.5 C4.27614237,2.5 4.5,2.72385763 4.5,3 C4.5,3.27614237 4.27614237,3.5 4,3.5 Z M6,3.5 C5.72385763,3.5 5.5,3.27614237 5.5,3 C5.5,2.72385763 5.72385763,2.5 6,2.5 C6.27614237,2.5 6.5,2.72385763 6.5,3 C6.5,3.27614237 6.27614237,3.5 6,3.5 Z M8,3.5 C7.72385763,3.5 7.5,3.27614237 7.5,3 C7.5,2.72385763 7.72385763,2.5 8,2.5 C8.27614237,2.5 8.5,2.72385763 8.5,3 C8.5,3.27614237 8.27614237,3.5 8,3.5 Z M10,3.5 C9.72385763,3.5 9.5,3.27614237 9.5,3 C9.5,2.72385763 9.72385763,2.5 10,2.5 C10.2761424,2.5 10.5,2.72385763 10.5,3 C10.5,3.27614237 10.2761424,3.5 10,3.5 Z M12,3.5 C11.7238576,3.5 11.5,3.27614237 11.5,3 C11.5,2.72385763 11.7238576,2.5 12,2.5 C12.2761424,2.5 12.5,2.72385763 12.5,3 C12.5,3.27614237 12.2761424,3.5 12,3.5 Z M14,3.5 C13.7238576,3.5 13.5,3.27614237 13.5,3 C13.5,2.72385763 13.7238576,2.5 14,2.5 C14.2761424,2.5 14.5,2.72385763 14.5,3 C14.5,3.27614237 14.2761424,3.5 14,3.5 Z M16,3.5 C15.7238576,3.5 15.5,3.27614237 15.5,3 C15.5,2.72385763 15.7238576,2.5 16,2.5 C16.2761424,2.5 16.5,2.72385763 16.5,3 C16.5,3.27614237 16.2761424,3.5 16,3.5 Z M18,3.5 C17.7238576,3.5 17.5,3.27614237 17.5,3 C17.5,2.72385763 17.7238576,2.5 18,2.5 C18.2761424,2.5 18.5,2.72385763 18.5,3 C18.5,3.27614237 18.2761424,3.5 18,3.5 Z M18,5.5 C17.7238576,5.5 17.5,5.27614237 17.5,5 C17.5,4.72385763 17.7238576,4.5 18,4.5 C18.2761424,4.5 18.5,4.72385763 18.5,5 C18.5,Line truncated
<path d="M2.39776184,8.69699508 C2.82037272,8.57348907 3.12697047,8.23068036 3.44607843,7.63235294 C3.50283588,7.52593273 3.70653958,7.12084014 3.75472041,7.03050109 C4.03665487,6.50187397 4.27845388,6.25 4.66666667,6.25 C5.08719776,6.25 5.31070056,6.3254322 5.67812087,6.53210612 C5.97736723,6.7004322 6.1242348,6.75 6.44444444,6.75 C6.611898,6.75 6.70455317,6.61444047 6.85968251,6.13575567 C6.89349476,6.03068757 6.91177802,5.97409653 6.92949584,5.92094306 C7.19192893,5.1336438 7.51873661,4.75 8.22222222,4.75 C8.89163675,4.75 9.21925695,5.04485818 9.76356813,5.86132495 C10.2192569,6.54485818 10.4471923,6.75 10.8888889,6.75 C11.3661624,6.75 11.5487705,6.64281697 11.7364319,6.36132495 C11.7692531,6.31129826 11.7692531,6.31129826 11.8038172,6.25761214 C12.0332099,5.90369189 12.2433073,5.75 12.6666667,5.75 C13.1851992,5.75 13.4061497,6.04828312 13.7840084,6.89846538 C14.0728163,7.54828312 14.2222362,7.75 14.4444444,7.75 C14.7687569,7.75 14.9402848,7.69488783 15.2489243,7.52961059 L15.2905031,7.50732887 C15.6361057,7.32238348 15.857036,7.25 16.2222222,7.25 C16.6365912,7.25 16.8489777,7.46586974 17.1158999,7.96477614 C17.1606386,8.04903257 17.1606386,8.04903257 17.2045543,8.13123692 C17.3511621,8.40280419 17.4762139,8.57093888 17.631381,8.6621791 C17.7227849,8.5624959 17.8540941,8.5 18,8.5 C18.2761424,8.5 18.5,8.72385763 18.5,9 C18.5,9.27614237 18.2761424,9.5 18,9.5 C17.8540941,9.5 17.7227849,9.4375041 17.631381,9.3378209 C17.4762139,9.42906112 17.3511621,9.59719581 17.2045543,9.86876308 C17.1606386,9.95096743 17.1606386,9.95096743 17.1158999,10.0352239 C16.8489777,10.5341303 16.6365912,10.75 16.2222222,10.75 C15.857036,10.75 15.6361057,10.6776165 15.2905031,10.4926711 L15.2489243,10.4703894 C14.9402848,10.3051122 14.7687569,10.25 14.4444444,10.25 C14.2222362,10.25 14.0728163,10.4517169 13.7840084,11.1015346 C13.4061497,11.9517169 13.1851992,12.25 12.6666667,12.25 C12.2433073,12.25 12.0332099,12.0963081 11.8038172,11.7423879 C11.7692531,11.6887017 11.7692531,11.6887017 11.7364319,11.638675 C11.5487705,11.357183 11.3661624,11.25 10.8888889,11.25 C10.4471923,11.25 10.2192569,11.4551418 9.76356813,12.138675 C9.21925695,12.9551418 8.89163675,13.25 8.22222222,13.25 C7.51873661,13.25 7.19192893,12.8663562 6.92949584,12.0790569 C6.91177802,12.0259035 6.89349476,11.9693124 6.85968251,11.8642443 C6.70455317,11.3855595 6.611898,11.25 6.44444444,11.25 C6.1242348,11.25 5.97736723,11.2995678 5.67812087,11.4678939 C5.31070056,11.6745678 5.08719776,11.75 4.66666667,11.75 C4.2576716,11.75 4.07414298,11.4976192 3.8822771,10.9321841 L3.78515608,10.639352 C3.74630783,10.5239258 3.71290663,10.4315854 3.67737933,10.3436452 C3.42795496,9.72624902 3.07265238,9.37546644 2.4155666,9.27813036 C2.32583908,9.41193093 2.17320436,9.5 2,9.5 C1.72385763,9.5 1.5,9.27614237 1.5,9 C1.5,8.72385763 1.72385763,8.5 2,8.5 C2.16222865,8.5 2.306412,8.5772611 2.39776184,8.69699508 Z M9,15 L9.7763932,13.4472136 C9.80058413,13.3988317 9.83981475,13.3596011 9.8881966,13.3354102 C10.0116912,13.2736629 10.1618595,13.323719 10.2236068,13.4472136 L11,15 L12,15 C12.2761424,15 12.5,15.2238576 12.5,15.5 C12.5,15.6081851 12.4649111,15.7134519 12.4,15.8 L10.4,18.4666667 C10.2343146,18.6875806 9.9209139,18.7323521 9.7,18.5666667 C9.66209717,18.5382395 9.62842712,18.5045695 9.6,18.4666667 L7.6,15.8 C7.43431458,15.5790861 7.4790861,15.2656854 7.7,15.1 C7.78654809,15.0350889 7.89181489,15 8,15 L9,15 L9,15 Z M2,3.5 C1.72385763,3.5 1.5,3.27614237 1.5,3 C1.5,2.72385763 1.72385763,2.5 2,2.5 C2.27614237,2.5 2.5,2.72385763 2.5,3 C2.5,3.27614237 2.27614237,3.5 2,3.5 Z M4,3.5 C3.72385763,3.5 3.5,3.27614237 3.5,3 C3.5,2.72385763 3.72385763,2.5 4,2.5 C4.27614237,2.5 4.5,2.72385763 4.5,3 C4.5,3.27614237 4.27614237,3.5 4,3.5 Z M6,3.5 C5.72385763,3.5 5.5,3.27614237 5.5,3 C5.5,2.72385763 5.72385763,2.5 6,2.5 C6.27614237,2.5 6.5,2.72385763 6.5,3 C6.5,3.27614237 6.27614237,3.5 6,3.5 Z M8,3.5 C7.72385763,3.5 7.5,3.27614237 7.5,3 C7.5,2.72385763 7.72385763,2.5 8,2.5 C8.27614237,2.5 8.5,2.72385763 8.5,3 C8.5,3.27614237 8.27614237,3.5 8,3.5 Z M10,3.5 C9.72385763,3.5 9.5,3.27614237 9.5,3 C9.5,2.72385763 9.72385763,2.5 10,2.5 C10.2761424,2.5 10.5,2.72385763 10.5,3 C10.5,3.27614237 10.2761424,3.5 10,3.5 Z M12,3.5 C11.7238576,3.5 11.5,3.27614237 11.5,3 C11.5,2.72385763 11.7238576,2.5 12,2.5 C12.2761424,2.5 12.5,2.72385763 12.5,3 C12.5,3.27614237 12.2761424,3.5 12,3.5 Z M14,3.5 C13.7238576,3.5 13.5,3.27614237 13.5,3 C13.5,2.72385763 13.7238576,2.5 14,2.5 C14.2761424,2.5 14.5,2.72385763 14.5,3 C14.5,3.27614237 14.2761424,3.5 14,3.5 Z M16,3.5 C15.7238576,3.5 15.5,3.27614237 15.5,3 C15.5,2.72385763 15.7238576,2.5 16,2.5 C16.2761424,2.5 16.5,2.72385763 16.5,3 C16.5,3.27614237 16.2761424,3.5 16,3.5 Z M18,3.5 C17.7238576,3.5 17.5,3.27614237 17.5,3 C17.5,2.72385763 17.7238576,2.5 18,2.5 C18.2761424,2.5 18.5,2.72385763 18.5,3 C18.5,3.27614237 18.2761424,3.5 18,3.5 Z M18,5.5 C17.7238576,5.5 17.5,5.27614237 17.5,5 C17.5,4.72385763 17.7238576,4.5 18,4.5 C18.2761424,4.5 18.5,4.72385763 18.5,5 C18.5,Line truncated
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

src/components/sound-editor/icon--redo.svg
+1 -1
View File
@@ -5,7 +5,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="redo" fill="#4C97FF">
<g id="redo" fill="#855CD6">
<path d="M17.5581635,12.7700651 L13.8403972,16.4941315 C13.5610922,16.7671364 13.1830854,16.9211391 12.7903784,16.9211391 C12.3990715,16.9211391 12.0210647,16.7671364 11.7403597,16.4941315 L8.02399342,12.7700651 C7.5969858,12.3430574 7.47098355,11.7060461 7.70198767,11.1530362 C7.93299179,10.6000263 8.46500128,10.24302 9.06701202,10.24302 L10.4040359,10.24302 C10.3690352,9.92101423 10.2780336,9.55700774 10.1240309,9.17200087 C10.07573,9.05999887 10.0260291,8.94799688 9.97002813,8.83599488 C9.89302676,8.70999263 9.90072689,8.67499201 9.79502501,8.52098926 C9.62702201,8.26898476 9.47301926,8.07998139 9.29031601,7.86297752 C8.9200094,7.4639704 8.47200141,7.12096429 7.99599292,6.86895979 C7.5129843,6.6169553 7.00897531,6.46295255 6.56096732,6.37895105 C6.11995945,6.30194968 5.71395221,6.29494955 5.47594796,6.29494955 C5.35694584,6.28794943 5.2029431,6.31594993 5.12594172,6.32295005 C5.04194022,6.32995018 4.99293935,6.3369503 4.99293935,6.3369503 C4.49593048,6.38595117 4.04792249,6.02194468 3.99892162,5.52493582 C3.95692087,5.10492832 4.20192524,4.72692158 4.57293186,4.58691908 C4.57293186,4.58691908 4.62193273,4.56591871 4.6989341,4.53791821 C4.78993573,4.50991771 4.87393723,4.46091684 5.06994072,4.40491584 C5.46194772,4.28591371 5.95895658,4.15991147 6.60996819,4.09691034 C7.25397968,4.04090934 8.03099354,4.05490959 8.85070816,4.22291259 C9.66902276,4.39791571 10.5300381,4.72692158 11.3280524,5.20293007 C11.7060591,5.44793444 12.1120663,5.73493956 12.427072,6.01494456 C12.5670745,6.11994643 12.8050787,6.35795068 12.9450812,6.5049533 C13.1060841,6.67295629 13.2530867,6.84095929 13.4007893,7.01596241 C13.9670994,7.7159749 14.3871069,8.47198839 14.6601118,9.15800062 C14.8211147,9.55000762 14.9331167,9.92101423 15.0171182,10.24302 L16.5151449,10.24302 C17.1171556,10.24302 17.6491651,10.6000263 17.8801692,11.1530362 C18.1111734,11.7060461 17.9851711,12.3430574 17.5581635,12.7700651" id="Fill-1" transform="translate(10.994247, 10.494247) rotate(-45.000000) translate(-10.994247, -10.494247) "></path>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

src/components/sound-editor/icon--undo.svg
+1 -1
View File
@@ -5,7 +5,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="undo" fill="#4C97FF">
<g id="undo" fill="#855CD6">
<path d="M15.5581635,12.7700651 L11.8403972,16.4941315 C11.5610922,16.7671364 11.1830854,16.9211391 10.7903784,16.9211391 C10.3990715,16.9211391 10.0210647,16.7671364 9.74035971,16.4941315 L6.02399342,12.7700651 C5.5969858,12.3430574 5.47098355,11.7060461 5.70198767,11.1530362 C5.93299179,10.6000263 6.46500128,10.24302 7.06701202,10.24302 L8.40403587,10.24302 C8.36903525,9.92101423 8.27803362,9.55700774 8.12403088,9.17200087 C8.07573002,9.05999887 8.02602913,8.94799688 7.97002813,8.83599488 C7.89302676,8.70999263 7.90072689,8.67499201 7.79502501,8.52098926 C7.62702201,8.26898476 7.47301926,8.07998139 7.29031601,7.86297752 C6.9200094,7.4639704 6.47200141,7.12096429 5.99599292,6.86895979 C5.5129843,6.6169553 5.00897531,6.46295255 4.56096732,6.37895105 C4.11995945,6.30194968 3.71395221,6.29494955 3.47594796,6.29494955 C3.35694584,6.28794943 3.2029431,6.31594993 3.12594172,6.32295005 C3.04194022,6.32995018 2.99293935,6.3369503 2.99293935,6.3369503 C2.49593048,6.38595117 2.04792249,6.02194468 1.99892162,5.52493582 C1.95692087,5.10492832 2.20192524,4.72692158 2.57293186,4.58691908 C2.57293186,4.58691908 2.62193273,4.56591871 2.6989341,4.53791821 C2.78993573,4.50991771 2.87393723,4.46091684 3.06994072,4.40491584 C3.46194772,4.28591371 3.95895658,4.15991147 4.60996819,4.09691034 C5.25397968,4.04090934 6.03099354,4.05490959 6.85070816,4.22291259 C7.66902276,4.39791571 8.53003812,4.72692158 9.32805235,5.20293007 C9.7060591,5.44793444 10.1120663,5.73493956 10.427072,6.01494456 C10.5670745,6.11994643 10.8050787,6.35795068 10.9450812,6.5049533 C11.1060841,6.67295629 11.2530867,6.84095929 11.4007893,7.01596241 C11.9670994,7.7159749 12.3871069,8.47198839 12.6601118,9.15800062 C12.8211147,9.55000762 12.9331167,9.92101423 13.0171182,10.24302 L14.5151449,10.24302 C15.1171556,10.24302 15.6491651,10.6000263 15.8801692,11.1530362 C16.1111734,11.7060461 15.9851711,12.3430574 15.5581635,12.7700651" id="Fill-1" transform="translate(8.994247, 10.494247) scale(-1, 1) rotate(-45.000000) translate(-8.994247, -10.494247) "></path>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

src/components/sound-editor/sound-editor.css
+34 -25
View File
@@ -79,9 +79,24 @@ $border-radius: 0.25rem;
border: 1px solid $ui-black-transparent;
cursor: pointer;
font-size: 0.85rem;
transition: 0.2s;
user-select: none;
margin: 0px;
position: relative;
}
.button:active {
background: $looks-transparent;
}
.button:focus::before {
content: "";
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 1px solid $looks-secondary;
z-index: 1;
}
.button > img {
@@ -95,7 +110,7 @@ $border-radius: 0.25rem;
height: 3rem;
width: 3rem;
outline: none;
background: $motion-primary;
background: $looks-secondary;
border-radius: 100%;
border: 4px solid $ui-white-dim;
cursor: pointer;
@@ -191,33 +206,27 @@ $border-radius: 0.25rem;
border-radius: 0;
}
[dir="ltr"] .button-group .button {
border-left: none;
}
[dir="rtl"] .button-group .button {
.button:not(:last-child) {
border-right: none;
}
[dir="ltr"] .button-group .button:last-of-type {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
[dir="ltr"] .button-group .button:first-of-type {
border-left: 1px solid $ui-black-transparent;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
[dir="rtl"] .button-group .button:last-of-type {
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
[dir="rtl"] .button-group .button:first-of-type {
[dir="rtl"] .button:not(:last-child) {
border-left: none;
border-right: 1px solid $ui-black-transparent;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
.button-group .button:first-child,
[dir="rtl"] .button-group .button:last-child,
.button-group .button:first-child:focus::before,
[dir="rtl"] .button-group .button:last-child:focus::before {
border-radius: $form-radius 0 0 $form-radius;
}
.button-group .button:last-child,
[dir="rtl"] .button-group .button:first-child,
.button-group .button:last-child:focus::before,
[dir="rtl"] .button-group .button:first-child:focus::before {
border-radius: 0 $form-radius $form-radius 0;
}
.button:disabled > img {
src/components/spinner/spinner.css
+2 -2
View File
@@ -83,8 +83,8 @@
}
.spinner.primary {
border-color: $motion-transparent;
border-color: $looks-transparent;
}
.spinner.primary::after {
border-top-color: $motion-primary;
border-top-color: $looks-secondary;
}
src/components/sprite-info/icon--hide.svg
+2 -2
View File
@@ -5,10 +5,10 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hide-icon-active" fill="#4C97FF">
<g id="hide-icon-active" fill="#855CD6">
<g transform="translate(1.000000, 1.000000)" id="Combined-Shape">
<path d="M2.06675537,10.5669531 C0.999299947,9.6010063 0.49087044,8.63529009 0.49087044,8.63529009 C-0.150519518,7.7321443 -0.176597571,6.24678071 0.49087044,5.36470987 C0.49087044,5.36470987 2.52555986,1.5 6.99999999,1.5 C8.31672118,1.5 9.42216368,1.83467798 10.32665,2.30705842 L11.9737085,0.659999967 L12.6808152,1.36710675 L1.36710675,12.6808152 L0.659999967,11.9737085 L2.06675537,10.5669531 Z M9.06150447,3.57220396 C8.4592531,3.20897321 7.75347776,3 6.99889412,3 C4.7900605,3 2.99944706,4.79061344 2.99944706,6.99944706 C2.99944706,7.75403071 3.20842027,8.45980605 3.57165102,9.06205741 L5.07816645,7.55554198 C5.02727139,7.37916271 5,7.19276614 5,7 C5,5.8954305 5.8954305,5 7,5 C7.19276614,5 7.37916271,5.02727139 7.55554198,5.07816645 L9.06150447,3.57220396 Z M3.68757244,11.7003495 L4.95187601,10.4360459 C5.55070241,10.7935069 6.25081289,10.9988941 6.99889412,10.9988941 C9.2077277,10.9988941 10.9983412,9.20828068 10.9983412,6.99944706 C10.9983412,6.25136583 10.792954,5.55125535 10.435493,4.95242895 L11.9445897,3.44333221 C13.0043028,4.40583676 13.5091295,5.36470987 13.5091295,5.36470987 C14.1505195,6.26785566 14.1765976,7.75321925 13.5091295,8.63529009 C13.5091295,8.63529009 11.4744401,12.5 6.99999999,12.5 C5.69017232,12.5 4.58941688,12.1688172 3.68757244,11.7003495 Z M6.46130696,8.92661494 L8.92661494,6.46130696 C8.9744347,6.63269299 9,6.81336095 9,7 C9,8.1045695 8.1045695,9 7,9 C6.81336095,9 6.63269299,8.9744347 6.46130696,8.92661494 Z"></path>
</g>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

src/components/sprite-info/icon--show.svg
+2 -2
View File
@@ -5,11 +5,11 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="show-icon-active" fill-rule="nonzero" fill="#4C97FF">
<g id="show-icon-active" fill-rule="nonzero" fill="#855CD6">
<g transform="translate(1.000000, 2.000000)">
<path d="M13.5091295,4.36470987 C14.1505195,5.26785566 14.1765976,6.75321925 13.5091295,7.63529009 C13.5091295,7.63529009 11.4744401,11.5 6.99999999,11.5 C2.52555986,11.5 0.49087044,7.63529009 0.49087044,7.63529009 C-0.150519518,6.7321443 -0.176597571,5.24678071 0.49087044,4.36470987 C0.49087044,4.36470987 2.52555986,0.5 6.99999999,0.5 C11.4744401,0.5 13.5091295,4.36470987 13.5091295,4.36470987 Z M6.99889412,9.99889412 C9.2077277,9.99889412 10.9983412,8.20828068 10.9983412,5.99944706 C10.9983412,3.79061344 9.2077277,2 6.99889412,2 C4.7900605,2 2.99944706,3.79061344 2.99944706,5.99944706 C2.99944706,8.20828068 4.7900605,9.99889412 6.99889412,9.99889412 Z" id="Combined-Shape"></path>
<circle id="Oval" cx="7" cy="6" r="2"></circle>
</g>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

src/components/sprite-info/sprite-info.css
+1 -65
View File
@@ -47,70 +47,6 @@
user-select: none;
}
.icon {
width: 100%;
height: 100%;
}
/* @todo: refactor radio divs to input */
.radio-wrapper {
white-space: nowrap; /* make sure visibilty buttons don't wrap */
}
.radio {
filter: saturate(0);
cursor: pointer;
}
.radio.is-active {
filter: none;
}
.radio.is-disabled {
cursor: default;
}
.radio-first {
border: 1px solid $ui-black-transparent;
}
[dir="ltr"] .radio-first {
border-top-left-radius: $form-radius;
border-bottom-left-radius: $form-radius;
}
[dir="rtl"] .radio-first {
border-top-right-radius: $form-radius;
border-bottom-right-radius: $form-radius;
}
.radio-first:focus {
border-color: $motion-primary;
box-shadow: inset 0 0 0 -2px $ui-black-transparent;
}
.radio-last {
border-bottom: 1px solid $ui-black-transparent;
border-top: 1px solid $ui-black-transparent;
}
[dir="ltr"] .radio-last {
border-right: 1px solid $ui-black-transparent;
border-left: 1px solid $ui-black-transparent;
border-top-right-radius: $form-radius;
border-bottom-right-radius: $form-radius;
}
[dir="rtl"] .radio-last {
border-left: 1px solid $ui-black-transparent;
border-right: 1px solid $ui-black-transparent;
border-top-left-radius: $form-radius;
border-bottom-left-radius: $form-radius;
}
.radio-last:focus {
border-color: $motion-primary;
box-shadow: inset 0 0 0 -2px $ui-black-transparent;
}
.icon {
width: 100%;
height: 100%;
@@ -126,7 +62,7 @@
}
.rotation-select:focus {
border-color: $motion-primary;
border-color: $looks-secondary;
box-shadow: inset 0 0 0 1px $ui-black-transparent);
}
src/components/sprite-info/sprite-info.jsx
+28 -42
View File
@@ -19,6 +19,7 @@ import xIcon from './icon--x.svg';
import yIcon from './icon--y.svg';
import showIcon from './icon--show.svg';
import hideIcon from './icon--hide.svg';
import ToggleButtons from '../toggle-buttons/toggle-buttons.jsx';
const BufferedInput = BufferedInputHOC(Input);
@@ -27,6 +28,16 @@ const messages = defineMessages({
id: 'gui.SpriteInfo.spritePlaceholder',
defaultMessage: 'Name',
description: 'Placeholder text for sprite name'
},
showSpriteAction: {
id: 'gui.SpriteInfo.showSpriteAction',
defaultMessage: 'Show sprite',
description: 'Tooltip for show sprite button'
},
hideSpriteAction: {
id: 'gui.SpriteInfo.hideSpriteAction',
defaultMessage: 'Hide sprite',
description: 'Tooltip for hide sprite button'
}
});
@@ -185,46 +196,23 @@ class SpriteInfo extends React.Component {
/> :
null
}
<div className={styles.radioWrapper}>
<div
className={classNames(
styles.radio,
styles.radioFirst,
styles.iconWrapper,
{
[styles.isActive]: this.props.visible && !this.props.disabled,
[styles.isDisabled]: this.props.disabled
}
)}
tabIndex="0"
onClick={this.props.onClickVisible}
onKeyPress={this.props.onPressVisible}
>
<img
className={styles.icon}
src={showIcon}
/>
</div>
<div
className={classNames(
styles.radio,
styles.radioLast,
styles.iconWrapper,
{
[styles.isActive]: !this.props.visible && !this.props.disabled,
[styles.isDisabled]: this.props.disabled
}
)}
tabIndex="0"
onClick={this.props.onClickNotVisible}
onKeyPress={this.props.onPressNotVisible}
>
<img
className={styles.icon}
src={hideIcon}
/>
</div>
</div>
<ToggleButtons
buttons={[
{
handleClick: this.props.onClickVisible,
icon: showIcon,
isSelected: this.props.visible && !this.props.disabled,
title: this.props.intl.formatMessage(messages.showSpriteAction)
},
{
handleClick: this.props.onClickNotVisible,
icon: hideIcon,
isSelected: !this.props.visible && !this.props.disabled,
title: this.props.intl.formatMessage(messages.hideSpriteAction)
}
]}
disabled={this.props.disabled}
/>
</div>
<div className={classNames(styles.group, styles.largerInput)}>
<Label
@@ -275,8 +263,6 @@ SpriteInfo.propTypes = {
onChangeY: PropTypes.func,
onClickNotVisible: PropTypes.func,
onClickVisible: PropTypes.func,
onPressNotVisible: PropTypes.func,
onPressVisible: PropTypes.func,
rotationStyle: PropTypes.string,
size: PropTypes.oneOfType([
PropTypes.string,
src/components/sprite-selector-item/sprite-selector-item.css
+4 -4
View File
@@ -23,13 +23,13 @@
}
.sprite-selector-item.is-selected {
box-shadow: 0px 0px 0px 4px $motion-transparent;
border: 2px solid $motion-primary;
box-shadow: 0px 0px 0px 4px $looks-transparent;
border: 2px solid $looks-secondary;
background: $ui-white;
}
.sprite-selector-item:hover {
border: 2px solid $motion-primary;
border: 2px solid $looks-secondary;
background: $ui-white;
}
@@ -88,7 +88,7 @@
}
.is-selected .sprite-info {
background: $motion-primary;
background: $looks-secondary;
color: $ui-white;
}
src/components/stage-header/icon--large-stage.svg
+3 -3
View File
@@ -5,12 +5,12 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Large-Stage-(active)" stroke="#4C97FF">
<g id="Large-Stage-(active)" stroke="#855CD6">
<g id="large-stage-(inactive)" transform="translate(3.000000, 4.000000)">
<path d="M1,0 L7,0 L7,12 L1,12 L1,12 C0.44771525,12 6.76353751e-17,11.5522847 0,11 L0,1 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z" id="Rectangle"></path>
<path d="M7,0 L13,0 L13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 L14,5.25 L7,5.25 L7,0 Z" id="Rectangle" fill="#4C97FF"></path>
<path d="M7,0 L13,0 L13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 L14,5.25 L7,5.25 L7,0 Z" id="Rectangle" fill="#855CD6"></path>
<path d="M7,5 L14,5 L14,11 L14,11 C14,11.5522847 13.5522847,12 13,12 L7,12 L7,5 Z" id="Rectangle-Copy"></path>
</g>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

src/components/stage-header/icon--small-stage.svg
+3 -3
View File
@@ -5,12 +5,12 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Small-Stage-(inactive)" stroke="#4C97FF">
<g id="Small-Stage-(inactive)" stroke="#855CD6">
<g id="small-stage-(inactive)" transform="translate(3.000000, 4.000000)">
<path d="M1,0 L10,0 L10,12 L1,12 L1,12 C0.44771525,12 6.76353751e-17,11.5522847 0,11 L0,1 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z" id="Rectangle"></path>
<path d="M10,0 L13,0 L13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 L14,3 L10,3 L10,0 Z" id="Rectangle" fill="#4C97FF"></path>
<path d="M10,0 L13,0 L13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 L14,3 L10,3 L10,0 Z" id="Rectangle" fill="#855CD6"></path>
<path d="M10,3 L14,3 L14,11 L14,11 C14,11.5522847 13.5522847,12 13,12 L10,12 L10,3 Z" id="Rectangle-Copy"></path>
</g>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

src/components/stage-header/stage-header.css
+10 -26
View File
@@ -40,6 +40,12 @@
display: flex;
}
.stage-size-row > *, .unselect-wrapper {
/* Use a white background so semi-transparent selection states look correct */
background-color: $ui-white;
border-radius: $form-radius;
}
[dir="ltr"] .stage-size-toggle-group {
margin-right: .2rem;
}
@@ -60,6 +66,10 @@
cursor: pointer;
}
.stage-button:active {
background-color: $looks-transparent;
}
.stage-button-icon {
width: 100%;
height: 100%;
@@ -68,29 +78,3 @@
[dir="rtl"] .stage-button-icon {
transform: scaleX(-1);
}
[dir="ltr"] .stage-button-first {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
[dir="ltr"] .stage-button-last {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
[dir="rtl"] .stage-button-first {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
[dir="rtl"] .stage-button-last {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.stage-button-toggled-off {
filter: saturate(0);
}
src/components/stage-header/stage-header.jsx
+34 -48
View File
@@ -1,4 +1,3 @@
import classNames from 'classnames';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';
@@ -7,6 +6,7 @@ import VM from 'scratch-vm';
import Box from '../box/box.jsx';
import Button from '../button/button.jsx';
import ToggleButtons from '../toggle-buttons/toggle-buttons.jsx';
import Controls from '../../containers/controls.jsx';
import {getStageDimensions} from '../../lib/screen-utils';
import {STAGE_SIZE_MODES} from '../../lib/layout-constants';
@@ -79,19 +79,21 @@ const StageHeaderComponent = function (props) {
</a>
</div>
) : (
<Button
className={styles.stageButton}
onClick={onSetStageUnFull}
onKeyPress={onKeyPress}
>
<img
alt={props.intl.formatMessage(messages.unFullStageSizeMessage)}
className={styles.stageButtonIcon}
draggable={false}
src={unFullScreenIcon}
title={props.intl.formatMessage(messages.fullscreenControl)}
/>
</Button>
<div className={styles.unselectWrapper}>
<Button
className={styles.stageButton}
onClick={onSetStageUnFull}
onKeyPress={onKeyPress}
>
<img
alt={props.intl.formatMessage(messages.unFullStageSizeMessage)}
className={styles.stageButtonIcon}
draggable={false}
src={unFullScreenIcon}
title={props.intl.formatMessage(messages.fullscreenControl)}
/>
</Button>
</div>
);
header = (
<Box className={styles.stageHeaderWrapperOverlay}>
@@ -110,40 +112,24 @@ const StageHeaderComponent = function (props) {
[]
) : (
<div className={styles.stageSizeToggleGroup}>
<div>
<Button
className={classNames(
styles.stageButton,
styles.stageButtonFirst,
(stageSizeMode === STAGE_SIZE_MODES.small) ? null : styles.stageButtonToggledOff
)}
onClick={onSetStageSmall}
>
<img
alt={props.intl.formatMessage(messages.smallStageSizeMessage)}
className={styles.stageButtonIcon}
draggable={false}
src={smallStageIcon}
/>
</Button>
</div>
<div>
<Button
className={classNames(
styles.stageButton,
styles.stageButtonLast,
(stageSizeMode === STAGE_SIZE_MODES.large) ? null : styles.stageButtonToggledOff
)}
onClick={onSetStageLarge}
>
<img
alt={props.intl.formatMessage(messages.largeStageSizeMessage)}
className={styles.stageButtonIcon}
draggable={false}
src={largeStageIcon}
/>
</Button>
</div>
<ToggleButtons
buttons={[
{
handleClick: onSetStageSmall,
icon: smallStageIcon,
iconClassName: styles.stageButtonIcon,
isSelected: stageSizeMode === STAGE_SIZE_MODES.small,
title: props.intl.formatMessage(messages.smallStageSizeMessage)
},
{
handleClick: onSetStageLarge,
icon: largeStageIcon,
iconClassName: styles.stageButtonIcon,
isSelected: stageSizeMode === STAGE_SIZE_MODES.large,
title: props.intl.formatMessage(messages.largeStageSizeMessage)
}
]}
/>
</div>
);
header = (
src/components/stage-selector/stage-selector.css
+4 -4
View File
@@ -26,12 +26,12 @@ $header-height: calc($stage-menu-height - 2px);
.stage-selector.is-selected {
border-top-left-radius: .625rem;
border-top-right-radius: .625rem;
border-color: $motion-primary;
box-shadow: 0px 0px 0px 4px $motion-transparent;
border-color: $looks-secondary;
box-shadow: 0px 0px 0px 4px $looks-transparent;
}
.stage-selector:hover {
border-color: $motion-primary;
border-color: $looks-secondary;
}
.header {
@@ -60,7 +60,7 @@ $header-height: calc($stage-menu-height - 2px);
}
.stage-selector.is-selected .header {
background-color: $motion-primary;
background-color: $looks-secondary;
}
.stage-selector.is-selected .header-title {
src/components/stage/stage.css
+2 -2
View File
@@ -108,8 +108,8 @@ stage doesn't "spill" out from under its rounded corners. instead, shift these o
}
.frame {
background: $motion-transparent;
border: 2px solid $motion-primary;
background: $looks-transparent;
border: 2px solid $looks-secondary;
border-radius: 0.5rem;
animation-name: flash;
animation-duration: 0.75s;
src/components/stop-all/stop-all.css
+1 -1
View File
@@ -10,7 +10,7 @@
}
.stop-all:hover {
background-color: $motion-light-transparent;
background-color: $looks-light-transparent;
}
.stop-all {
src/components/tag-button/tag-button.css
+1 -1
View File
@@ -3,7 +3,7 @@
.tag-button {
padding: .625rem 1rem;
background: $motion-primary;
background: $looks-secondary;
border-radius: 1.375rem;
color: $ui-white;
height: $library-filter-bar-height;
src/components/telemetry-modal/telemetry-modal.css
+7 -7
View File
@@ -35,7 +35,7 @@ $ui-gray: hsla(0, 0%, 95%, 1);
.illustration {
width: 100%;
height: 123px;
background-color: $motion-primary;
background-color: $looks-secondary;
background-image: url('./telemetry-modal-header.png');
background-size: cover;
}
@@ -46,7 +46,7 @@ $ui-gray: hsla(0, 0%, 95%, 1);
}
.privacy-policy-link {
color: $motion-primary;
color: $looks-secondary;
text-decoration: none;
}
@@ -92,14 +92,14 @@ $ui-gray: hsla(0, 0%, 95%, 1);
.radio-buttons input[type="radio"]:checked {
transition: all .25s ease;
background-color: $ui-white;
border: 1px solid $motion-primary;
border: 1px solid $looks-secondary;
}
.radio-buttons input[type="radio"]:checked::after {
display: block;
margin: 0.125rem;
border-radius: 50%;
background-color: $motion-primary;
background-color: $looks-secondary;
width: .625rem;
height: .625rem;
content: "";
@@ -127,11 +127,11 @@ $ui-gray: hsla(0, 0%, 95%, 1);
}
.button-row button {
border: 1px solid $motion-primary;
border: 1px solid $looks-secondary;
border-radius: 0.25rem;
padding: 0.5rem 1.5rem;
color: white;
background: $motion-primary;
background: $looks-secondary;
font-weight: bold;
font-size: .875rem;
cursor: pointer;
@@ -139,7 +139,7 @@ $ui-gray: hsla(0, 0%, 95%, 1);
.button-row button:hover {
background: $extensions-primary;
box-shadow: 0 0 0 6px $motion-transparent;
box-shadow: 0 0 0 6px $looks-transparent;
}
.button-row button:disabled {
src/components/toggle-buttons/toggle-buttons.css
+85
View File
@@ -0,0 +1,85 @@
@import "../../css/units.css";
@import "../../css/colors.css";
.row {
display: flex;
flex-direction: row;
}
.button {
margin: 0;
border: 1px solid $ui-black-transparent;
background: none;
outline: none;
cursor: pointer;
user-select: none;
position: relative;
width: 34px;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
}
.button > img {
display: block;
transition: transform 0.1s;
filter: grayscale(100%) opacity(.5);
}
.button:not(:last-child) {
border-right: none;
}
[dir="rtl"] .button:not(:last-child) {
border-left: none;
border-right: 1px solid $ui-black-transparent;
}
.button:focus::before {
content: "";
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 1px solid $looks-secondary;
}
/* round corners for first and last buttons */
.button:first-child,
[dir="rtl"] .button:last-child,
.button:first-child:focus::before,
[dir="rtl"] .button:last-child:focus::before {
border-radius: $form-radius 0 0 $form-radius;
}
.button:last-child,
[dir="rtl"] .button:first-child,
.button:last-child:focus::before,
[dir="rtl"] .button:first-child:focus::before {
border-radius: 0 $form-radius $form-radius 0;
}
/* selected button styling */
.button[aria-pressed='true'] {
background-color: $looks-light-transparent;
}
.button[aria-pressed='true'] > img {
filter: none;
}
/* pressed button styling */
.button:active {
background-color: $looks-transparent;
}
/* disabled styling */
.disabled .button {
cursor: default;
}
src/components/toggle-buttons/toggle-buttons.jsx
+53
View File
@@ -0,0 +1,53 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './toggle-buttons.css';
const ToggleButtons = ({buttons, className, disabled}) => (
<div
className={classNames(
className,
styles.row,
{
[styles.disabled]: disabled
}
)}
>
{buttons.map((button, index) => (
<button
key={`toggle-${index}`}
className={styles.button}
title={button.title}
aria-label={button.title}
aria-pressed={button.isSelected}
onClick={button.handleClick}
disabled={disabled}
>
<img
src={button.icon}
aria-hidden="true"
className={button.iconClassName}
/>
</button>
))}
</div>
);
ToggleButtons.propTypes = {
buttons: PropTypes.arrayOf(PropTypes.shape({
title: PropTypes.string.isRequired,
handleClick: PropTypes.func.isRequired,
icon: PropTypes.string.isRequired,
iconClassName: PropTypes.string,
isSelected: PropTypes.bool
})),
className: PropTypes.string,
disabled: PropTypes.bool
};
ToggleButtons.defaultProps = {
disabled: false
};
export default ToggleButtons;
src/components/webgl-modal/webgl-modal.css
+4 -4
View File
@@ -29,7 +29,7 @@
.illustration {
width: 100%;
height: 208px;
background-color: $motion-primary;
background-color: $looks-secondary;
background-image: url('./unsupported.png');
background-size: cover;
}
@@ -54,10 +54,10 @@
}
.button-row button {
border: 1px solid $motion-primary;
border: 1px solid $looks-secondary;
border-radius: 0.25rem;
padding: 0.5rem 2rem;
background: $motion-primary;
background: $looks-secondary;
color: white;
font-weight: bold;
font-size: 0.875rem;
@@ -70,6 +70,6 @@
}
.faq-link {
color: $motion-primary;
color: $looks-secondary;
text-decoration: none;
}
src/containers/blocks.jsx
+13 -29
View File
@@ -18,6 +18,8 @@ import {BLOCKS_DEFAULT_SCALE, STAGE_DISPLAY_SIZES} from '../lib/layout-constants
import DropAreaHOC from '../lib/drop-area-hoc.jsx';
import DragConstants from '../lib/drag-constants';
import defineDynamicBlock from '../lib/define-dynamic-block';
import {DEFAULT_THEME, getColorsForTheme, themeMap} from '../lib/themes';
import {injectExtensionBlockTheme, injectExtensionCategoryTheme} from '../lib/themes/blockHelpers';
import {connect} from 'react-redux';
import {updateToolbox} from '../reducers/toolbox';
@@ -100,7 +102,7 @@ class Blocks extends React.Component {
const workspaceConfig = defaultsDeep({},
Blocks.defaultOptions,
this.props.options,
{rtl: this.props.isRtl, toolbox: this.props.toolboxXML}
{rtl: this.props.isRtl, toolbox: this.props.toolboxXML, colours: getColorsForTheme(this.props.theme)}
);
this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig);
@@ -353,11 +355,15 @@ class Blocks extends React.Component {
const stageCostumes = stage.getCostumes();
const targetCostumes = target.getCostumes();
const targetSounds = target.getSounds();
const dynamicBlocksXML = this.props.vm.runtime.getBlocksXML(target);
const dynamicBlocksXML = injectExtensionCategoryTheme(
this.props.vm.runtime.getBlocksXML(target),
this.props.theme
);
return makeToolboxXML(false, target.isStage, target.id, dynamicBlocksXML,
targetCostumes[targetCostumes.length - 1].name,
stageCostumes[stageCostumes.length - 1].name,
targetSounds.length > 0 ? targetSounds[targetSounds.length - 1].name : ''
targetSounds.length > 0 ? targetSounds[targetSounds.length - 1].name : '',
getColorsForTheme(this.props.theme)
);
} catch {
return null;
@@ -436,7 +442,7 @@ class Blocks extends React.Component {
if (blockInfo.info && blockInfo.info.isDynamic) {
dynamicBlocksInfo.push(blockInfo);
} else if (blockInfo.json) {
staticBlocksJson.push(blockInfo.json);
staticBlocksJson.push(injectExtensionBlockTheme(blockInfo.json, this.props.theme));
}
// otherwise it's a non-block entry such as '---'
});
@@ -627,22 +633,11 @@ Blocks.propTypes = {
wheel: PropTypes.bool,
startScale: PropTypes.number
}),
colours: PropTypes.shape({
workspace: PropTypes.string,
flyout: PropTypes.string,
toolbox: PropTypes.string,
toolboxSelected: PropTypes.string,
scrollbar: PropTypes.string,
scrollbarHover: PropTypes.string,
insertionMarker: PropTypes.string,
insertionMarkerOpacity: PropTypes.number,
fieldShadow: PropTypes.string,
dragShadowOpacity: PropTypes.number
}),
comments: PropTypes.bool,
collapse: PropTypes.bool
}),
stageSize: PropTypes.oneOf(Object.keys(STAGE_DISPLAY_SIZES)).isRequired,
theme: PropTypes.oneOf(Object.keys(themeMap)),
toolboxXML: PropTypes.string,
updateMetrics: PropTypes.func,
updateToolboxState: PropTypes.func,
@@ -664,18 +659,6 @@ Blocks.defaultOptions = {
length: 2,
colour: '#ddd'
},
colours: {
workspace: '#F9F9F9',
flyout: '#F9F9F9',
toolbox: '#FFFFFF',
toolboxSelected: '#E9EEF2',
scrollbar: '#CECDCE',
scrollbarHover: '#CECDCE',
insertionMarker: '#000000',
insertionMarkerOpacity: 0.2,
fieldShadow: 'rgba(255, 255, 255, 0.3)',
dragShadowOpacity: 0.6
},
comments: true,
collapse: false,
sounds: false
@@ -683,7 +666,8 @@ Blocks.defaultOptions = {
Blocks.defaultProps = {
isVisible: true,
options: Blocks.defaultOptions
options: Blocks.defaultOptions,
theme: DEFAULT_THEME
};
const mapStateToProps = state => ({
src/containers/gui.jsx
+3 -1
View File
@@ -36,6 +36,7 @@ import storage from '../lib/storage';
import vmListenerHOC from '../lib/vm-listener-hoc.jsx';
import vmManagerHOC from '../lib/vm-manager-hoc.jsx';
import cloudManagerHOC from '../lib/cloud-manager-hoc.jsx';
import systemPreferencesHOC from '../lib/system-preferences-hoc.jsx';
import GUIComponent from '../components/gui/gui.jsx';
import {setIsScratchDesktop} from '../lib/isScratchDesktop.js';
@@ -185,7 +186,8 @@ const WrappedGui = compose(
vmListenerHOC,
vmManagerHOC,
SBFileUploaderHOC,
cloudManagerHOC
cloudManagerHOC,
systemPreferencesHOC
)(ConnectedGUI);
WrappedGui.setAppElement = ReactModal.setAppElement;
src/containers/monitor.jsx
+7
View File
@@ -9,6 +9,7 @@ import {addMonitorRect, getInitialPosition, resizeMonitorRect, removeMonitorRect
import {getVariable, setVariableValue} from '../lib/variable-utils';
import importCSV from '../lib/import-csv';
import downloadBlob from '../lib/download-blob';
import {DEFAULT_THEME} from '../lib/themes';
import SliderPrompt from './slider-prompt.jsx';
import {connect} from 'react-redux';
@@ -213,6 +214,7 @@ class Monitor extends React.Component {
min={this.props.min}
mode={this.props.mode}
targetId={this.props.targetId}
theme={this.props.theme}
width={this.props.width}
onDragEnd={this.handleDragEnd}
onExport={isList ? this.handleExport : null}
@@ -250,6 +252,7 @@ Monitor.propTypes = {
resizeMonitorRect: PropTypes.func.isRequired,
spriteName: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
targetId: PropTypes.string,
theme: PropTypes.string,
toolboxXML: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
value: PropTypes.oneOfType([
PropTypes.string,
@@ -264,8 +267,12 @@ Monitor.propTypes = {
x: PropTypes.number,
y: PropTypes.number
};
Monitor.defaultProps = {
theme: DEFAULT_THEME
};
const mapStateToProps = state => ({
monitorLayout: state.scratchGui.monitorLayout,
theme: state.scratchGui.theme.theme,
// render on toolbox updates since changes to the blocks could affect monitor labels, i.e. updated locale
toolboxXML: state.scratchGui.toolbox.toolboxXML,
vm: state.scratchGui.vm
src/containers/sprite-info.jsx
+1 -17
View File
@@ -9,9 +9,7 @@ class SpriteInfo extends React.Component {
super(props);
bindAll(this, [
'handleClickVisible',
'handleClickNotVisible',
'handlePressVisible',
'handlePressNotVisible'
'handleClickNotVisible'
]);
}
handleClickVisible (e) {
@@ -22,26 +20,12 @@ class SpriteInfo extends React.Component {
e.preventDefault();
this.props.onChangeVisibility(false);
}
handlePressVisible (e) {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
this.props.onChangeVisibility(true);
}
}
handlePressNotVisible (e) {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
this.props.onChangeVisibility(false);
}
}
render () {
return (
<SpriteInfoComponent
{...this.props}
onClickNotVisible={this.handleClickNotVisible}
onClickVisible={this.handleClickVisible}
onPressNotVisible={this.handlePressNotVisible}
onPressVisible={this.handlePressVisible}
/>
);
}
src/css/colors.css
+5 -2
View File
@@ -16,8 +16,11 @@ $text-primary-transparent: hsla(225, 15%, 40%, 0.75);
$motion-primary: hsla(215, 100%, 65%, 1); /* #4C97FF */
$motion-tertiary: hsla(215, 60%, 50%, 1); /* #3373CC */
$motion-transparent: hsla(215, 100%, 65%, 0.35); /* 35% transparent version of motion-primary */
$motion-light-transparent: hsla(215, 100%, 65%, 0.15); /* 15% transparent version of motion-primary */
$looks-secondary: hsla(260, 60%, 60%, 1); /* #855CD6 */
$looks-transparent: hsla(260, 60%, 60%, 0.35); /* 35% transparent version of looks-tertiary */
$looks-light-transparent: hsla(260, 60%, 60%, 0.15); /* 15% transparent version of looks-tertiary */
$looks-secondary-dark: hsla(260, 42%, 51%, 1); /* #714EB6 */
$red-primary: hsla(20, 100%, 55%, 1); /* #FF661A */
$red-tertiary: hsla(20, 100%, 45%, 1); /* #E64D00 */
src/css/units.css
-1
View File
@@ -6,7 +6,6 @@ $space: 0.5rem;
$sprites-per-row: 5;
$menu-bar-height: 3rem;
$language-selector-width: 3rem;
$sprite-info-height: 6rem;
$stage-menu-height: 2.75rem;
src/lib/blocks.js
+3
View File
@@ -23,6 +23,7 @@ export default function (vm, useCatBlocks) {
colour: colors.secondary,
colourSecondary: colors.secondary,
colourTertiary: colors.tertiary,
colourQuaternary: colors.quaternary,
outputShape: ScratchBlocks.OUTPUT_SHAPE_ROUND
};
};
@@ -42,6 +43,7 @@ export default function (vm, useCatBlocks) {
colour: colors.primary,
colourSecondary: colors.secondary,
colourTertiary: colors.tertiary,
colourQuaternary: colors.quaternary,
extensions: ['shape_hat']
};
};
@@ -68,6 +70,7 @@ export default function (vm, useCatBlocks) {
colour: ScratchBlocks.Colours.sensing.primary,
colourSecondary: ScratchBlocks.Colours.sensing.secondary,
colourTertiary: ScratchBlocks.Colours.sensing.tertiary,
colourQuaternary: ScratchBlocks.Colours.sensing.quaternary,
outputShape: ScratchBlocks.OUTPUT_SHAPE_ROUND
};
};
src/lib/make-toolbox-xml.js
+54 -30
View File
@@ -1,17 +1,19 @@
import ScratchBlocks from 'scratch-blocks';
import {defaultColors} from './themes';
const categorySeparator = '<sep gap="36"/>';
const blockSeparator = '<sep gap="36"/>'; // At default scale, about 28px
/* eslint-disable no-unused-vars */
const motion = function (isInitialSetup, isStage, targetId) {
const motion = function (isInitialSetup, isStage, targetId, colors) {
const stageSelected = ScratchBlocks.ScratchMsgs.translate(
'MOTION_STAGE_SELECTED',
'Stage selected: no motion blocks'
);
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category name="%{BKY_CATEGORY_MOTION}" id="motion" colour="#4C97FF" secondaryColour="#3373CC">
<category name="%{BKY_CATEGORY_MOTION}" id="motion" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
${isStage ? `
<label text="${stageSelected}"></label>
` : `
@@ -151,11 +153,12 @@ const xmlEscape = function (unsafe) {
});
};
const looks = function (isInitialSetup, isStage, targetId, costumeName, backdropName) {
const looks = function (isInitialSetup, isStage, targetId, costumeName, backdropName, colors) {
const hello = ScratchBlocks.ScratchMsgs.translate('LOOKS_HELLO', 'Hello!');
const hmm = ScratchBlocks.ScratchMsgs.translate('LOOKS_HMM', 'Hmm...');
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category name="%{BKY_CATEGORY_LOOKS}" id="looks" colour="#9966FF" secondaryColour="#774DCB">
<category name="%{BKY_CATEGORY_LOOKS}" id="looks" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
${isStage ? '' : `
<block type="looks_sayforsecs">
<value name="MESSAGE">
@@ -288,9 +291,10 @@ const looks = function (isInitialSetup, isStage, targetId, costumeName, backdrop
`;
};
const sound = function (isInitialSetup, isStage, targetId, soundName) {
const sound = function (isInitialSetup, isStage, targetId, soundName, colors) {
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category name="%{BKY_CATEGORY_SOUND}" id="sound" colour="#D65CD6" secondaryColour="#BD42BD">
<category name="%{BKY_CATEGORY_SOUND}" id="sound" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
<block id="${targetId}_sound_playuntildone" type="sound_playuntildone">
<value name="SOUND_MENU">
<shadow type="sound_sounds_menu">
@@ -343,9 +347,10 @@ const sound = function (isInitialSetup, isStage, targetId, soundName) {
`;
};
const events = function (isInitialSetup, isStage) {
const events = function (isInitialSetup, isStage, targetId, colors) {
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category name="%{BKY_CATEGORY_EVENTS}" id="events" colour="#FFD500" secondaryColour="#CC9900">
<category name="%{BKY_CATEGORY_EVENTS}" id="events" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
<block type="event_whenflagclicked"/>
<block type="event_whenkeypressed">
</block>
@@ -382,9 +387,14 @@ const events = function (isInitialSetup, isStage) {
`;
};
const control = function (isInitialSetup, isStage) {
const control = function (isInitialSetup, isStage, targetId, colors) {
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category name="%{BKY_CATEGORY_CONTROL}" id="control" colour="#FFAB19" secondaryColour="#CF8B17">
<category
name="%{BKY_CATEGORY_CONTROL}"
id="control"
colour="${colors.primary}"
secondaryColour="${colors.tertiary}">
<block type="control_wait">
<value name="DURATION">
<shadow type="math_positive_number">
@@ -429,10 +439,15 @@ const control = function (isInitialSetup, isStage) {
`;
};
const sensing = function (isInitialSetup, isStage) {
const sensing = function (isInitialSetup, isStage, targetId, colors) {
const name = ScratchBlocks.ScratchMsgs.translate('SENSING_ASK_TEXT', 'What\'s your name?');
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category name="%{BKY_CATEGORY_SENSING}" id="sensing" colour="#4CBFE6" secondaryColour="#2E8EB8">
<category
name="%{BKY_CATEGORY_SENSING}"
id="sensing"
colour="${colors.primary}"
secondaryColour="${colors.tertiary}">
${isStage ? '' : `
<block type="sensing_touchingobject">
<value name="TOUCHINGOBJECTMENU">
@@ -504,12 +519,17 @@ const sensing = function (isInitialSetup, isStage) {
`;
};
const operators = function (isInitialSetup) {
const operators = function (isInitialSetup, isStage, targetId, colors) {
const apple = ScratchBlocks.ScratchMsgs.translate('OPERATORS_JOIN_APPLE', 'apple');
const banana = ScratchBlocks.ScratchMsgs.translate('OPERATORS_JOIN_BANANA', 'banana');
const letter = ScratchBlocks.ScratchMsgs.translate('OPERATORS_LETTEROF_APPLE', 'a');
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category name="%{BKY_CATEGORY_OPERATORS}" id="operators" colour="#40BF4A" secondaryColour="#389438">
<category
name="%{BKY_CATEGORY_OPERATORS}"
id="operators"
colour="${colors.primary}"
secondaryColour="${colors.tertiary}">
<block type="operator_add">
<value name="NUM1">
<shadow type="math_number">
@@ -691,25 +711,27 @@ const operators = function (isInitialSetup) {
`;
};
const variables = function () {
const variables = function (isInitialSetup, isStage, targetId, colors) {
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category
name="%{BKY_CATEGORY_VARIABLES}"
id="variables"
colour="#FF8C1A"
secondaryColour="#DB6E00"
colour="${colors.primary}"
secondaryColour="${colors.tertiary}"
custom="VARIABLE">
</category>
`;
};
const myBlocks = function () {
const myBlocks = function (isInitialSetup, isStage, targetId, colors) {
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category
name="%{BKY_CATEGORY_MYBLOCKS}"
id="myBlocks"
colour="#FF6680"
secondaryColour="#FF4D6A"
colour="${colors.primary}"
secondaryColour="${colors.tertiary}"
custom="PROCEDURE">
</category>
`;
@@ -732,10 +754,11 @@ const xmlClose = '</xml>';
* @param {?string} costumeName - The name of the default selected costume dropdown.
* @param {?string} backdropName - The name of the default selected backdrop dropdown.
* @param {?string} soundName - The name of the default selected sound dropdown.
* @param {?object} colors - The colors for the theme.
* @returns {string} - a ScratchBlocks-style XML document for the contents of the toolbox.
*/
const makeToolboxXML = function (isInitialSetup, isStage = true, targetId, categoriesXML = [],
costumeName = '', backdropName = '', soundName = '') {
costumeName = '', backdropName = '', soundName = '', colors = defaultColors) {
isStage = isInitialSetup || isStage;
const gap = [categorySeparator];
@@ -753,15 +776,16 @@ const makeToolboxXML = function (isInitialSetup, isStage = true, targetId, categ
}
// return `undefined`
};
const motionXML = moveCategory('motion') || motion(isInitialSetup, isStage, targetId);
const looksXML = moveCategory('looks') || looks(isInitialSetup, isStage, targetId, costumeName, backdropName);
const soundXML = moveCategory('sound') || sound(isInitialSetup, isStage, targetId, soundName);
const eventsXML = moveCategory('event') || events(isInitialSetup, isStage, targetId);
const controlXML = moveCategory('control') || control(isInitialSetup, isStage, targetId);
const sensingXML = moveCategory('sensing') || sensing(isInitialSetup, isStage, targetId);
const operatorsXML = moveCategory('operators') || operators(isInitialSetup, isStage, targetId);
const variablesXML = moveCategory('data') || variables(isInitialSetup, isStage, targetId);
const myBlocksXML = moveCategory('procedures') || myBlocks(isInitialSetup, isStage, targetId);
const motionXML = moveCategory('motion') || motion(isInitialSetup, isStage, targetId, colors.motion);
const looksXML = moveCategory('looks') ||
looks(isInitialSetup, isStage, targetId, costumeName, backdropName, colors.looks);
const soundXML = moveCategory('sound') || sound(isInitialSetup, isStage, targetId, soundName, colors.sounds);
const eventsXML = moveCategory('event') || events(isInitialSetup, isStage, targetId, colors.event);
const controlXML = moveCategory('control') || control(isInitialSetup, isStage, targetId, colors.control);
const sensingXML = moveCategory('sensing') || sensing(isInitialSetup, isStage, targetId, colors.sensing);
const operatorsXML = moveCategory('operators') || operators(isInitialSetup, isStage, targetId, colors.operators);
const variablesXML = moveCategory('data') || variables(isInitialSetup, isStage, targetId, colors.data);
const myBlocksXML = moveCategory('procedures') || myBlocks(isInitialSetup, isStage, targetId, colors.more);
const everything = [
xmlOpen,
src/lib/system-preferences-hoc.jsx
+50
View File
@@ -0,0 +1,50 @@
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {setTheme} from '../reducers/theme';
import {detectTheme} from './themes/themePersistance';
// Dark mode is not yet supported
// const prefersDarkQuery = '(prefers-color-scheme: dark)';
const prefersHighContrastQuery = '(prefers-contrast: more)';
const systemPreferencesHOC = function (WrappedComponent) {
class SystemPreferences extends React.Component {
componentDidMount () {
this.preferencesListener = () => this.props.onSetTheme(detectTheme());
this.highContrastMatchMedia = window.matchMedia(prefersHighContrastQuery);
this.highContrastMatchMedia.addEventListener('change', this.preferencesListener);
}
componentWillUnmount () {
this.highContrastMatchMedia.removeEventListener('change', this.preferencesListener);
}
render () {
const {
/* eslint-disable no-unused-vars */
onSetTheme,
/* eslint-enable no-unused-vars */
...props
} = this.props;
return <WrappedComponent {...props} />;
}
}
SystemPreferences.propTypes = {
onSetTheme: PropTypes.func
};
const mapDispatchToProps = dispatch => ({
onSetTheme: theme => dispatch(setTheme(theme))
});
return connect(
null,
mapDispatchToProps
)(SystemPreferences);
};
export default systemPreferencesHOC;
src/lib/themes/blockHelpers.js
+104
View File
@@ -0,0 +1,104 @@
import {DEFAULT_THEME, getColorsForTheme, themeMap} from '.';
const getBlockIconURI = extensionIcons => {
if (!extensionIcons) return null;
return extensionIcons.blockIconURI || extensionIcons.menuIconURI;
};
const getCategoryIconURI = extensionIcons => {
if (!extensionIcons) return null;
return extensionIcons.menuIconURI || extensionIcons.blockIconURI;
};
// scratch-blocks colours has a pen property that scratch-gui uses for all extensions
const getExtensionColors = theme => getColorsForTheme(theme).pen;
/**
* Applies extension color theme to categories.
* No changes are applied if called with the default theme, allowing extensions to provide their own colors.
* These colors are not seen if the category provides a blockIconURI.
* @param {Array.<object>} dynamicBlockXML - XML for each category of extension blocks, returned from getBlocksXML
* in the vm runtime.
* @param {string} theme - Theme name
* @returns {Array.<object>} Dynamic block XML updated with colors.
*/
const injectExtensionCategoryTheme = (dynamicBlockXML, theme) => {
// Don't do any manipulation for the default theme
if (theme === DEFAULT_THEME) return dynamicBlockXML;
const extensionColors = getExtensionColors(theme);
const extensionIcons = themeMap[theme].extensions;
const parser = new DOMParser();
const serializer = new XMLSerializer();
return dynamicBlockXML.map(extension => {
const dom = parser.parseFromString(extension.xml, 'text/xml');
dom.documentElement.setAttribute('colour', extensionColors.primary);
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
dom.documentElement.setAttribute('secondaryColour', extensionColors.tertiary);
const categoryIconURI = getCategoryIconURI(extensionIcons[extension.id]);
if (categoryIconURI) {
dom.documentElement.setAttribute('iconURI', categoryIconURI);
}
return {
...extension,
xml: serializer.serializeToString(dom)
};
});
};
const injectBlockIcons = (blockInfoJson, theme) => {
// Block icons are the first element of `args0`
if (!blockInfoJson.args0 || blockInfoJson.args0.length < 1 ||
blockInfoJson.args0[0].type !== 'field_image') return blockInfoJson;
const extensionIcons = themeMap[theme].extensions;
const extensionId = blockInfoJson.type.substring(0, blockInfoJson.type.indexOf('_'));
const blockIconURI = getBlockIconURI(extensionIcons[extensionId]);
if (!blockIconURI) return blockInfoJson;
return {
...blockInfoJson,
args0: blockInfoJson.args0.map((value, index) => {
if (index !== 0) return value;
return {
...value,
src: blockIconURI
};
})
};
};
/**
* Applies extension color theme to static block json.
* No changes are applied if called with the default theme, allowing extensions to provide their own colors.
* @param {object} blockInfoJson - Static block json
* @param {string} theme - Theme name
* @returns {object} Block info json with updated colors. The original blockInfoJson is not modified.
*/
const injectExtensionBlockTheme = (blockInfoJson, theme) => {
// Don't do any manipulation for the default theme
if (theme === DEFAULT_THEME) return blockInfoJson;
const extensionColors = getExtensionColors(theme);
return {
...injectBlockIcons(blockInfoJson, theme),
colour: extensionColors.primary,
colourSecondary: extensionColors.secondary,
colourTertiary: extensionColors.tertiary,
colourQuaternary: extensionColors.quaternary
};
};
export {
injectExtensionBlockTheme,
injectExtensionCategoryTheme
};
src/lib/themes/dark/__mocks__/index.js
+22
View File
@@ -0,0 +1,22 @@
const blockColors = {
motion: {
primary: '#AAAAAA'
},
pen: {
primary: '#FFFFFF',
secondary: '#EEEEEE',
tertiary: '#DDDDDD'
},
text: '#BBBBBB'
};
const extensions = {
pen: {
blockIconURI: 'darkPenIcon'
}
};
export {
blockColors,
extensions
};
src/lib/themes/dark/index.js
+84
View File
@@ -0,0 +1,84 @@
const blockColors = {
motion: {
primary: '#0F1E33',
secondary: '#4C4C4C',
tertiary: '#4C97FF',
quaternary: '#4C97FF'
},
looks: {
primary: '#1E1433',
secondary: '#4C4C4C',
tertiary: '#9966FF',
quaternary: '#9966FF'
},
sounds: {
primary: '#291329',
secondary: '#4C4C4C',
tertiary: '#CF63CF',
quaternary: '#CF63CF'
},
control: {
primary: '#332205',
secondary: '#4C4C4C',
tertiary: '#FFAB19',
quaternary: '#FFAB19'
},
event: {
primary: '#332600',
secondary: '#4C4C4C',
tertiary: '#FFBF00',
quaternary: '#FFBF00'
},
sensing: {
primary: '#12232A',
secondary: '#4C4C4C',
tertiary: '#5CB1D6',
quaternary: '#5CB1D6'
},
pen: {
primary: '#03251C',
secondary: '#4C4C4C',
tertiary: '#0fBD8C',
quaternary: '#0fBD8C'
},
operators: {
primary: '#112611',
secondary: '#4C4C4C',
tertiary: '#59C059',
quaternary: '#59C059'
},
data: {
primary: '#331C05',
secondary: '#4C4C4C',
tertiary: '#FF8C1A',
quaternary: '#FF8C1A'
},
data_lists: {
primary: '#331405',
secondary: '#4C4C4C',
tertiary: '#FF661A',
quaternary: '#FF661A'
},
more: {
primary: '#331419',
secondary: '#4C4C4C',
tertiary: '#FF6680',
quaternary: '#FF6680'
},
text: 'rgba(255, 255, 255, .7)',
textFieldText: '#E5E5E5',
workspace: '#121212',
toolboxSelected: '#4C4C4C',
toolboxText: '#E5E5E5',
toolbox: '#121212',
flyout: '#121212',
textField: '#4C4C4C',
menuHover: 'rgba(255, 255, 255, 0.3)'
};
const extensions = {};
export {
blockColors,
extensions
};
src/lib/themes/default/__mocks__/index.js
+18
View File
@@ -0,0 +1,18 @@
const blockColors = {
motion: {
primary: '#111111',
secondary: '#222222',
tertiary: '#333333'
},
pen: {
primary: '#121212',
secondary: '#232323',
tertiary: '#343434'
},
text: '#444444',
workspace: '#555555'
};
export {
blockColors
};
src/lib/themes/default/icon.svg
+17
View File
@@ -0,0 +1,17 @@
<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.602081" width="26" height="26" rx="13" fill="#E5F0FF"/>
<circle cx="19.7126" cy="13.0004" r="3.44665" transform="rotate(90 19.7126 13.0004)" fill="#FFBF00" stroke="#CC9900" stroke-width="0.861663"/>
<circle cx="18.8939" cy="9.94462" r="3.44665" transform="rotate(-120 18.8939 9.94462)" fill="#CF63CF" stroke="#BD42BD" stroke-width="0.861663"/>
<circle cx="16.6571" cy="7.70829" r="3.44665" transform="rotate(-150 16.6571 7.70829)" fill="#9966FF" stroke="#774DCB" stroke-width="0.861663"/>
<circle cx="13.602" cy="6.88952" r="3.44665" fill="#4C97FF" stroke="#3373CC" stroke-width="0.861663"/>
<circle cx="10.547" cy="7.70834" r="3.44665" transform="rotate(-30 10.547 7.70834)" fill="#575E75" stroke="#575E75" stroke-width="0.861663"/>
<circle cx="8.31022" cy="9.94516" r="3.44665" transform="rotate(120 8.31022 9.94516)" fill="#0FBD8C" stroke="#0B8462" stroke-width="0.861663"/>
<circle cx="7.49152" cy="13.0004" r="3.44665" transform="rotate(90 7.49152 13.0004)" fill="#FF6680" stroke="#FF3355" stroke-width="0.861663"/>
<circle cx="8.31021" cy="16.055" r="3.44665" transform="rotate(-120 8.31021 16.055)" fill="#FF661A" stroke="#E64D00" stroke-width="0.861663"/>
<circle cx="10.5466" cy="18.2918" r="3.44665" transform="rotate(-150 10.5466 18.2918)" fill="#FF8C1A" stroke="#DB6E00" stroke-width="0.861663"/>
<circle cx="13.602" cy="19.1107" r="3.44665" fill="#59C059" stroke="#389438" stroke-width="0.861663"/>
<path d="M20.1038 18.2914C20.1038 20.1949 18.5607 21.738 16.6572 21.738C14.7536 21.738 13.2105 20.1949 13.2105 18.2914C13.2105 16.3878 14.7536 14.8447 16.6572 14.8447L20.1038 18.2914Z" fill="#5CB1D6" stroke="#2E8EB8" stroke-width="0.861663"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3445 13.7095C16.6815 15.2597 18.0614 16.4207 19.7126 16.4207C20.7228 16.4207 21.6315 15.9861 22.2619 15.2936C22.3134 15.5306 22.3406 15.7766 22.3406 16.029C22.3406 17.9325 20.7974 19.4757 18.8939 19.4757C16.9904 19.4757 15.4473 17.9325 15.4473 16.029C15.4473 15.1357 15.7871 14.3218 16.3445 13.7095Z" fill="#FFAB19"/>
<path d="M16.3445 13.7095L16.7655 13.618C16.7313 13.4604 16.612 13.3352 16.4562 13.2934C16.3005 13.2516 16.1345 13.3002 16.026 13.4194L16.3445 13.7095ZM22.2619 15.2936L22.6829 15.2021C22.6487 15.0445 22.5294 14.9193 22.3736 14.8775C22.2179 14.8357 22.0519 14.8843 21.9434 15.0036L22.2619 15.2936ZM19.7126 15.9899C18.2683 15.9899 17.0603 14.9743 16.7655 13.618L15.9235 13.801C16.3026 15.5451 17.8545 16.8515 19.7126 16.8515V15.9899ZM21.9434 15.0036C21.3911 15.6101 20.5965 15.9899 19.7126 15.9899V16.8515C20.8491 16.8515 21.8719 16.362 22.5805 15.5836L21.9434 15.0036ZM21.8409 15.3851C21.8859 15.5922 21.9097 15.8076 21.9097 16.029H22.7714C22.7714 15.7457 22.7409 15.4689 22.6829 15.2021L21.8409 15.3851ZM21.9097 16.029C21.9097 17.6946 20.5595 19.0448 18.8939 19.0448V19.9065C21.0354 19.9065 22.7714 18.1705 22.7714 16.029H21.9097ZM18.8939 19.0448C17.2283 19.0448 15.8781 17.6946 15.8781 16.029H15.0164C15.0164 18.1705 16.7524 19.9065 18.8939 19.9065V19.0448ZM15.8781 16.029C15.8781 15.2471 16.1751 14.5356 16.6631 13.9995L16.026 13.4194C15.3991 14.108 15.0164 15.0243 15.0164 16.029H15.8781Z" fill="#CF8B17"/>
<path d="M16.3445 13.7095C16.6815 15.2597 18.0614 16.4207 19.7126 16.4207C20.7228 16.4207 21.6315 15.9861 22.2619 15.2936" stroke="#CC9900" stroke-width="0.861663" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

Loaded 100 of 134 files, more files were not shown because too many files have changed in this diff. Show more