From ebd2afe8308eebcd9f9d085a5387d0cc938f42c3 Mon Sep 17 00:00:00 2001 From: Jaco Date: Mon, 21 Aug 2023 10:54:39 +0300 Subject: [PATCH] Bump UI, fix popup theming (#1280) --- packages/extension-base/package.json | 4 +- packages/extension-ui/package.json | 9 +- packages/extension/public/index.html | 91 +--------- packages/extension/public/notification.html | 5 +- packages/extension/public/theme.css | 92 ++++++++++ yarn.lock | 190 ++++++-------------- 6 files changed, 157 insertions(+), 234 deletions(-) create mode 100644 packages/extension/public/theme.css diff --git a/packages/extension-base/package.json b/packages/extension-base/package.json index 6a798e24..26299aff 100644 --- a/packages/extension-base/package.json +++ b/packages/extension-base/package.json @@ -30,8 +30,8 @@ "@polkadot/phishing": "^0.21.5", "@polkadot/rpc-provider": "^10.9.1", "@polkadot/types": "^10.9.1", - "@polkadot/ui-keyring": "^3.5.1", - "@polkadot/ui-settings": "^3.5.1", + "@polkadot/ui-keyring": "^3.6.1", + "@polkadot/ui-settings": "^3.6.1", "@polkadot/util": "^12.4.1", "@polkadot/util-crypto": "^12.4.1", "eventemitter3": "^5.0.1", diff --git a/packages/extension-ui/package.json b/packages/extension-ui/package.json index d921fa60..1c28491c 100644 --- a/packages/extension-ui/package.json +++ b/packages/extension-ui/package.json @@ -30,12 +30,12 @@ "@polkadot/hw-ledger": "^12.4.1", "@polkadot/keyring": "^12.4.1", "@polkadot/networks": "^12.4.1", - "@polkadot/react-identicon": "^3.5.1", - "@polkadot/react-qr": "^3.5.1", + "@polkadot/react-identicon": "^3.6.1", + "@polkadot/react-qr": "^3.6.1", "@polkadot/types": "^10.9.1", "@polkadot/types-augment": "^10.9.1", - "@polkadot/ui-keyring": "^3.5.1", - "@polkadot/ui-settings": "^3.5.1", + "@polkadot/ui-keyring": "^3.6.1", + "@polkadot/ui-settings": "^3.6.1", "@polkadot/util": "^12.4.1", "@polkadot/util-crypto": "^12.4.1", "file-saver": "^2.0.5", @@ -60,7 +60,6 @@ "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3", "@types/sinon-chrome": "^2.2.11", - "@types/styled-components": "^5.1.26", "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.7", diff --git a/packages/extension/public/index.html b/packages/extension/public/index.html index 8664b666..9862076b 100644 --- a/packages/extension/public/index.html +++ b/packages/extension/public/index.html @@ -4,99 +4,10 @@ polkadot{.js} + diff --git a/packages/extension/public/notification.html b/packages/extension/public/notification.html index cf5aa6ca..25a77ae1 100644 --- a/packages/extension/public/notification.html +++ b/packages/extension/public/notification.html @@ -4,9 +4,10 @@ polkadot{.js} + - -
+ +
diff --git a/packages/extension/public/theme.css b/packages/extension/public/theme.css new file mode 100644 index 00000000..e0ec803f --- /dev/null +++ b/packages/extension/public/theme.css @@ -0,0 +1,92 @@ +body { + margin: 0; + overflow-x: hidden; + text-align: center; +} + +div#root { + box-sizing: border-box; + height: calc(100vh - 2px); + margin: 0 auto; + max-width: 100%; + padding: 0; + text-align: left; + width: 560px; +} + +:root { + /* general items */ + --borderRadius: 4px; + --boxLineHeight: 1rem; + --boxMargin: 0.75rem 0; + --boxPadding: 0 0.25rem; + --fontFamily: Nunito, sans-serif; + --fontSize: 16px; + --inputLabelFontSize: 10px; + --labelFontSize: 13px; + --labelLineHeight: 18px; + --lineHeight: 26px; + /* shared colors */ + --accountDotsIconColor: #8E8E8E; + --buttonBackground: #E86F00; + --buttonBackgroundDangerHover: #D93B3B; + --buttonBackgroundHover: #ED9329; + --buttonTextColor: #FFFFFF; + --connectedDotColor: seagreen; + --errorColor: #E42F2F; + --iconWarningColor: #FF7D01; + --identiconBackground: #F4F5F8; + --primaryColor: #FF7D01; +} + +[data-theme="dark"] { + --addAccountImageBackground: #1A1B20; + --backButtonBackground: #3A3B41; + --backButtonBackgroundHover: #3a3b41ad; + --backButtonTextColor: #FFFFFF; + --background: #26272C; + --bodyColor: #20222A; + --boxBackground: #1A1B20; + --boxBorderColor: #303030; + --boxShadow: rgba(0, 0, 0, 0.86); + --buttonBackgroundDanger: #AF1111; + --errorBorderColor: #7E3530; + --highlightedAreaBackground: #212226; + --iconDangerColor: #AF1111; + --iconNeutralColor: #8E8E8E; + --inputBackground: #111218; + --inputBorderColor: #43444B; + --labelColor: #9F9E99; + --parentLabelColor: #4A7463; + --popupBackground: #38393F; + --readonlyInputBackground: #1A1B20; + --subTextColor: #DDD; + --textColor: #FFFFFF; + --textColorDanger: #FF8686; +} + +[data-theme="light"] { + --addAccountImageBackground: #FFF; + --backButtonBackground: #D7D7D7; + --backButtonBackgroundHover: #d7d7d7ad; + --backButtonTextColor: #454545; + --background: #FAFAFA; + --bodyColor: #FFFFFF; + --boxBackground: #FFFFFF; + --boxBorderColor: #DADFEA; + --boxShadow: rgba(0, 0, 0, 0.3); + --buttonBackgroundDanger: #DC2222; + --errorBorderColor: #E42F2F; + --highlightedAreaBackground: #EFEFEF; + --iconDangerColor: #DC2222; + --iconNeutralColor: #939CB1; + --inputBackground: #FFFFFF; + --inputBorderColor: #DDE1EB; + --labelColor: #333333; + --parentLabelColor: #215B4F; + --popupBackground: #FFFFFF; + --readonlyInputBackground: #FFF; + --subTextColor: #454545; + --textColor: #242529; + --textColorDanger: #F24A4A; +} diff --git a/yarn.lock b/yarn.lock index d1cf210f..08f9f8ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -101,7 +101,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-annotate-as-pure@npm:^7.16.0, @babel/helper-annotate-as-pure@npm:^7.22.5": +"@babel/helper-annotate-as-pure@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" dependencies: @@ -214,7 +214,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.16.0, @babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.22.5": +"@babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-module-imports@npm:7.22.5" dependencies: @@ -1466,7 +1466,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.21.2, @babel/traverse@npm:^7.22.10, @babel/traverse@npm:^7.4.5": +"@babel/traverse@npm:^7.21.2, @babel/traverse@npm:^7.22.10": version: 7.22.10 resolution: "@babel/traverse@npm:7.22.10" dependencies: @@ -1502,7 +1502,7 @@ __metadata: languageName: node linkType: hard -"@emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.2.1": +"@emotion/is-prop-valid@npm:^1.2.1": version: 1.2.1 resolution: "@emotion/is-prop-valid@npm:1.2.1" dependencies: @@ -1518,20 +1518,6 @@ __metadata: languageName: node linkType: hard -"@emotion/stylis@npm:^0.8.4": - version: 0.8.5 - resolution: "@emotion/stylis@npm:0.8.5" - checksum: 67ff5958449b2374b329fb96e83cb9025775ffe1e79153b499537c6c8b2eb64b77f32d7b5d004d646973662356ceb646afd9269001b97c54439fceea3203ce65 - languageName: node - linkType: hard - -"@emotion/unitless@npm:^0.7.4": - version: 0.7.5 - resolution: "@emotion/unitless@npm:0.7.5" - checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b - languageName: node - linkType: hard - "@emotion/unitless@npm:^0.8.0": version: 0.8.1 resolution: "@emotion/unitless@npm:0.8.1" @@ -2477,8 +2463,8 @@ __metadata: "@polkadot/phishing": ^0.21.5 "@polkadot/rpc-provider": ^10.9.1 "@polkadot/types": ^10.9.1 - "@polkadot/ui-keyring": ^3.5.1 - "@polkadot/ui-settings": ^3.5.1 + "@polkadot/ui-keyring": ^3.6.1 + "@polkadot/ui-settings": ^3.6.1 "@polkadot/util": ^12.4.1 "@polkadot/util-crypto": ^12.4.1 eventemitter3: ^5.0.1 @@ -2579,12 +2565,12 @@ __metadata: "@polkadot/hw-ledger": ^12.4.1 "@polkadot/keyring": ^12.4.1 "@polkadot/networks": ^12.4.1 - "@polkadot/react-identicon": ^3.5.1 - "@polkadot/react-qr": ^3.5.1 + "@polkadot/react-identicon": ^3.6.1 + "@polkadot/react-qr": ^3.6.1 "@polkadot/types": ^10.9.1 "@polkadot/types-augment": ^10.9.1 - "@polkadot/ui-keyring": ^3.5.1 - "@polkadot/ui-settings": ^3.5.1 + "@polkadot/ui-keyring": ^3.6.1 + "@polkadot/ui-settings": ^3.6.1 "@polkadot/util": ^12.4.1 "@polkadot/util-crypto": ^12.4.1 "@types/enzyme": ^3.10.13 @@ -2595,7 +2581,6 @@ __metadata: "@types/react-router": ^5.1.20 "@types/react-router-dom": ^5.3.3 "@types/sinon-chrome": ^2.2.11 - "@types/styled-components": ^5.1.26 "@wojtekmaj/enzyme-adapter-react-17": ^0.8.0 enzyme: ^3.11.0 enzyme-adapter-react-16: ^1.15.7 @@ -2709,20 +2694,20 @@ __metadata: languageName: node linkType: hard -"@polkadot/react-identicon@npm:^3.5.1": - version: 3.5.1 - resolution: "@polkadot/react-identicon@npm:3.5.1" +"@polkadot/react-identicon@npm:^3.6.1": + version: 3.6.1 + resolution: "@polkadot/react-identicon@npm:3.6.1" dependencies: - "@polkadot/keyring": ^12.3.1 - "@polkadot/ui-settings": 3.5.1 - "@polkadot/ui-shared": 3.5.1 - "@polkadot/util": ^12.3.1 - "@polkadot/util-crypto": ^12.3.1 + "@polkadot/keyring": ^12.4.1 + "@polkadot/ui-settings": 3.6.1 + "@polkadot/ui-shared": 3.6.1 + "@polkadot/util": ^12.4.1 + "@polkadot/util-crypto": ^12.4.1 ethereum-blockies-base64: ^1.0.2 jdenticon: 3.2.0 react-copy-to-clipboard: ^5.1.0 - styled-components: ^5.3.11 - tslib: ^2.5.3 + styled-components: ^6.0.7 + tslib: ^2.6.2 peerDependencies: "@polkadot/keyring": "*" "@polkadot/util": "*" @@ -2730,28 +2715,28 @@ __metadata: react: "*" react-dom: "*" react-is: "*" - checksum: cc2239028c9d3c5ccef3e51ad0c6c81e4737fa61fcde1a58af1b2349e2349b062dbc15c576390e909f411504853ffeefa06fe7bf281c4c1b6f8d8871527a4244 + checksum: 43040c4474fad135c5d0fbe7389fb8b9cca37efbc0d3d3625a64d0321ad47864d2ea60dbf372d59a68afe5bac90e6541e0c066344756fd1381510a8c5090b10f languageName: node linkType: hard -"@polkadot/react-qr@npm:^3.5.1": - version: 3.5.1 - resolution: "@polkadot/react-qr@npm:3.5.1" +"@polkadot/react-qr@npm:^3.6.1": + version: 3.6.1 + resolution: "@polkadot/react-qr@npm:3.6.1" dependencies: - "@polkadot/ui-settings": 3.5.1 - "@polkadot/util": ^12.3.1 - "@polkadot/util-crypto": ^12.3.1 + "@polkadot/ui-settings": 3.6.1 + "@polkadot/util": ^12.4.1 + "@polkadot/util-crypto": ^12.4.1 qrcode-generator: ^1.4.4 react-qr-reader: ^2.2.1 - styled-components: ^5.3.11 - tslib: ^2.5.3 + styled-components: ^6.0.7 + tslib: ^2.6.2 peerDependencies: "@polkadot/util": "*" "@polkadot/util-crypto": "*" react: "*" react-dom: "*" react-is: "*" - checksum: f291dbec27e964affe78a5ce1d25332fc7e04a65cf1ef5365c8496ec7f4d0f75c415101d77fde8575072b78c91911eb2de611a14f8cc759609573e2b3cb365b1 + checksum: 6df0ec369a1114d4e4efae65f438dee7ca8b99f967dab218f4f2f95a2bfe551ef1c7bc33d238be8c525fadbf037030b5aef1cbc03f797995cd5c3e52468a8f52 languageName: node linkType: hard @@ -2880,52 +2865,52 @@ __metadata: languageName: node linkType: hard -"@polkadot/ui-keyring@npm:^3.5.1": - version: 3.5.1 - resolution: "@polkadot/ui-keyring@npm:3.5.1" +"@polkadot/ui-keyring@npm:^3.6.1": + version: 3.6.1 + resolution: "@polkadot/ui-keyring@npm:3.6.1" dependencies: - "@polkadot/keyring": ^12.3.1 - "@polkadot/ui-settings": 3.5.1 - "@polkadot/util": ^12.3.1 - "@polkadot/util-crypto": ^12.3.1 + "@polkadot/keyring": ^12.4.1 + "@polkadot/ui-settings": 3.6.1 + "@polkadot/util": ^12.4.1 + "@polkadot/util-crypto": ^12.4.1 mkdirp: ^3.0.1 rxjs: ^7.8.1 store: ^2.0.12 - tslib: ^2.5.3 + tslib: ^2.6.2 peerDependencies: "@polkadot/keyring": "*" "@polkadot/ui-settings": "*" "@polkadot/util": "*" - checksum: f29a5552cb2a6d63edddf63d027602dc9eeee97926bef9b0df085030629bcfef671ecd211e8abbc32a4af51f3486e8332a7b537d2505632ff8800e147798db3a + checksum: b9a0831664dc1beac351aaf718a13e37e9ea7ee323d207505cde6d213e3aa73637eef818a767e70e7df1ce5b93d1af137a41b9fafe6f9f0a8ccf23fa0e4cf8e0 languageName: node linkType: hard -"@polkadot/ui-settings@npm:3.5.1, @polkadot/ui-settings@npm:^3.5.1": - version: 3.5.1 - resolution: "@polkadot/ui-settings@npm:3.5.1" +"@polkadot/ui-settings@npm:3.6.1, @polkadot/ui-settings@npm:^3.6.1": + version: 3.6.1 + resolution: "@polkadot/ui-settings@npm:3.6.1" dependencies: - "@polkadot/networks": ^12.3.1 - "@polkadot/util": ^12.3.1 + "@polkadot/networks": ^12.4.1 + "@polkadot/util": ^12.4.1 eventemitter3: ^5.0.1 store: ^2.0.12 - tslib: ^2.5.3 + tslib: ^2.6.2 peerDependencies: "@polkadot/networks": "*" "@polkadot/util": "*" - checksum: d3489b0cd3d659ea19cd4da0b4e53ce7020b1ec90591d94b340efbc4d6760ef5e7e71b5af7b83014054fb349b968f30c2a1d484953dd991dc616ddc16b74fabc + checksum: 7e53b96b431a95435ff0575a424f21c1770b2efd043b922f997691a742dfbd6a3f379642ac94da801b3d15d2f5cca5ed2437d8dd69b261ec0e3038cca5d3b3f1 languageName: node linkType: hard -"@polkadot/ui-shared@npm:3.5.1": - version: 3.5.1 - resolution: "@polkadot/ui-shared@npm:3.5.1" +"@polkadot/ui-shared@npm:3.6.1": + version: 3.6.1 + resolution: "@polkadot/ui-shared@npm:3.6.1" dependencies: colord: ^2.9.3 - tslib: ^2.5.3 + tslib: ^2.6.2 peerDependencies: "@polkadot/util": "*" "@polkadot/util-crypto": "*" - checksum: 5a3cd1a41df51a4bb340602454c4ebbe64b335ada148bd2cab04637afdee3b6c775eb32ff574d6d625dafe3cffc1a02db2f96693ee901e1e5f03edef50f53828 + checksum: 1e12177bd98111c9707ba530019acbcc71432123cc9c904b02b236ba6e4da8cd68cf81e5cd2c90fd9c1032d4b7cc3f9ad00ea32330338530d7f1d43fdba70af4 languageName: node linkType: hard @@ -3586,16 +3571,6 @@ __metadata: languageName: node linkType: hard -"@types/hoist-non-react-statics@npm:*": - version: 3.3.1 - resolution: "@types/hoist-non-react-statics@npm:3.3.1" - dependencies: - "@types/react": "*" - hoist-non-react-statics: ^3.3.0 - checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719 - languageName: node - linkType: hard - "@types/http-cache-semantics@npm:*": version: 4.0.1 resolution: "@types/http-cache-semantics@npm:4.0.1" @@ -3847,17 +3822,6 @@ __metadata: languageName: node linkType: hard -"@types/styled-components@npm:^5.1.26": - version: 5.1.26 - resolution: "@types/styled-components@npm:5.1.26" - dependencies: - "@types/hoist-non-react-statics": "*" - "@types/react": "*" - csstype: ^3.0.2 - checksum: 84f53b3101739b20d1731554fb7735bc2f3f5d050a8b392e9845403c8c8bbd729737d033978649f9195a97b557875b010d46e35a4538564a2d0dbcce661dbf76 - languageName: node - linkType: hard - "@types/stylis@npm:^4.0.2": version: 4.2.0 resolution: "@types/stylis@npm:4.2.0" @@ -5245,21 +5209,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-styled-components@npm:>= 1.12.0": - version: 2.0.7 - resolution: "babel-plugin-styled-components@npm:2.0.7" - dependencies: - "@babel/helper-annotate-as-pure": ^7.16.0 - "@babel/helper-module-imports": ^7.16.0 - babel-plugin-syntax-jsx: ^6.18.0 - lodash: ^4.17.11 - picomatch: ^2.3.0 - peerDependencies: - styled-components: ">= 2" - checksum: 80b06b10db02d749432a0ac43a5feedd686f6b648628d7433a39b1844260b2b7c72431f6e705c82636ee025fcfd4f6c32fc05677e44033b8a39ddcd4488b3147 - languageName: node - linkType: hard - "babel-plugin-syntax-async-functions@npm:^6.8.0": version: 6.13.0 resolution: "babel-plugin-syntax-async-functions@npm:6.13.0" @@ -5274,13 +5223,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-syntax-jsx@npm:^6.18.0": - version: 6.18.0 - resolution: "babel-plugin-syntax-jsx@npm:6.18.0" - checksum: 0c7ce5b81d6cfc01a7dd7a76a9a8f090ee02ba5c890310f51217ef1a7e6163fb7848994bbc14fd560117892e82240df9c7157ad0764da67ca5f2afafb73a7d27 - languageName: node - linkType: hard - "babel-plugin-syntax-trailing-function-commas@npm:^6.22.0": version: 6.22.0 resolution: "babel-plugin-syntax-trailing-function-commas@npm:6.22.0" @@ -6981,7 +6923,7 @@ __metadata: languageName: node linkType: hard -"css-to-react-native@npm:^3.0.0, css-to-react-native@npm:^3.2.0": +"css-to-react-native@npm:^3.2.0": version: 3.2.0 resolution: "css-to-react-native@npm:3.2.0" dependencies: @@ -9851,7 +9793,7 @@ fsevents@~2.3.2: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0": +"hoist-non-react-statics@npm:^3.1.0": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -11431,7 +11373,7 @@ fsevents@~2.3.2: languageName: node linkType: hard -"lodash@npm:^4.0.0, lodash@npm:^4.16.3, lodash@npm:^4.17.11, lodash@npm:^4.17.15, lodash@npm:^4.17.21, lodash@npm:^4.17.4": +"lodash@npm:^4.0.0, lodash@npm:^4.16.3, lodash@npm:^4.17.15, lodash@npm:^4.17.21, lodash@npm:^4.17.4": version: 4.17.21 resolution: "lodash@npm:4.17.21" checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7 @@ -13001,7 +12943,7 @@ fsevents@~2.3.2: languageName: node linkType: hard -"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": +"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf @@ -15210,28 +15152,6 @@ fsevents@~2.3.2: languageName: node linkType: hard -"styled-components@npm:^5.3.11": - version: 5.3.11 - resolution: "styled-components@npm:5.3.11" - dependencies: - "@babel/helper-module-imports": ^7.0.0 - "@babel/traverse": ^7.4.5 - "@emotion/is-prop-valid": ^1.1.0 - "@emotion/stylis": ^0.8.4 - "@emotion/unitless": ^0.7.4 - babel-plugin-styled-components: ">= 1.12.0" - css-to-react-native: ^3.0.0 - hoist-non-react-statics: ^3.0.0 - shallowequal: ^1.1.0 - supports-color: ^5.5.0 - peerDependencies: - react: ">= 16.8.0" - react-dom: ">= 16.8.0" - react-is: ">= 16.8.0" - checksum: 10edd4dae3b0231ec02d86bdd09c88e894eedfa7e9d4f8e562b09fb69c67a27d586cbcf35c785002d59b3bf11e6c0940b0efce40d13ae9ed148b26b1dc8f3284 - languageName: node - linkType: hard - "styled-components@npm:^6.0.7": version: 6.0.7 resolution: "styled-components@npm:6.0.7"