diff --git a/package.json b/package.json index 6e6392f0..b8d1797c 100644 --- a/package.json +++ b/package.json @@ -40,8 +40,8 @@ "watch": "cd packages/extension && yarn polkadot-exec-webpack --config webpack.watch.cjs --mode development --watch" }, "devDependencies": { - "@polkadot/dev": "^0.76.16", - "@types/node": "^20.5.0", + "@polkadot/dev": "^0.76.17", + "@types/node": "^20.5.1", "i18next-scanner": "^4.3.0", "sinon-chrome": "^3.0.1" }, @@ -54,6 +54,6 @@ "@polkadot/util-crypto": "^12.4.1", "@polkadot/x-fetch": "^12.4.1", "safe-buffer": "^5.2.1", - "typescript": "^5.0.3" + "typescript": "^5.1.6" } } diff --git a/packages/extension-base/package.json b/packages/extension-base/package.json index b45ea6c3..ba709daa 100644 --- a/packages/extension-base/package.json +++ b/packages/extension-base/package.json @@ -36,7 +36,7 @@ "@polkadot/util-crypto": "^12.4.1", "eventemitter3": "^5.0.1", "rxjs": "^7.8.1", - "tslib": "^2.6.1" + "tslib": "^2.6.2" }, "devDependencies": { "@polkadot/extension-mocks": "0.46.6-3-x" diff --git a/packages/extension-chains/package.json b/packages/extension-chains/package.json index 1c88c41e..96418f11 100644 --- a/packages/extension-chains/package.json +++ b/packages/extension-chains/package.json @@ -25,7 +25,7 @@ "@polkadot/networks": "^12.4.1", "@polkadot/util": "^12.4.1", "@polkadot/util-crypto": "^12.4.1", - "tslib": "^2.6.1" + "tslib": "^2.6.2" }, "peerDependencies": { "@polkadot/api": "*", diff --git a/packages/extension-compat-metamask/package.json b/packages/extension-compat-metamask/package.json index 511d0c6a..075c1228 100644 --- a/packages/extension-compat-metamask/package.json +++ b/packages/extension-compat-metamask/package.json @@ -25,7 +25,7 @@ "@polkadot/extension-inject": "0.46.6-3-x", "@polkadot/types": "^10.9.1", "@polkadot/util": "^12.4.1", - "tslib": "^2.6.1", + "tslib": "^2.6.2", "web3": "^1.10.1" }, "peerDependencies": { diff --git a/packages/extension-dapp/package.json b/packages/extension-dapp/package.json index 141ee412..013f0fbb 100644 --- a/packages/extension-dapp/package.json +++ b/packages/extension-dapp/package.json @@ -24,7 +24,7 @@ "@polkadot/extension-inject": "0.46.6-3-x", "@polkadot/util": "^12.4.1", "@polkadot/util-crypto": "^12.4.1", - "tslib": "^2.6.1" + "tslib": "^2.6.2" }, "peerDependencies": { "@polkadot/api": "*", diff --git a/packages/extension-inject/package.json b/packages/extension-inject/package.json index 6e2aaed7..74b98e77 100644 --- a/packages/extension-inject/package.json +++ b/packages/extension-inject/package.json @@ -24,7 +24,7 @@ "@polkadot/util": "^12.4.1", "@polkadot/util-crypto": "^12.4.1", "@polkadot/x-global": "^12.4.1", - "tslib": "^2.6.1" + "tslib": "^2.6.2" }, "devDependencies": { "@types/chrome": "^0.0.243", diff --git a/packages/extension-mocks/package.json b/packages/extension-mocks/package.json index 66c09cc7..86f0c480 100644 --- a/packages/extension-mocks/package.json +++ b/packages/extension-mocks/package.json @@ -19,6 +19,6 @@ "main": "index.js", "dependencies": { "sinon-chrome": "^3.0.1", - "tslib": "^2.6.1" + "tslib": "^2.6.2" } } diff --git a/packages/extension-ui/package.json b/packages/extension-ui/package.json index 9f8fd1d1..d6d49e8a 100644 --- a/packages/extension-ui/package.json +++ b/packages/extension-ui/package.json @@ -47,8 +47,8 @@ "react-is": "^18.2.0", "react-router": "^5.3.4", "react-router-dom": "^5.3.4", - "styled-components": "^5.3.11", - "tslib": "^2.6.1" + "styled-components": "^6.0.7", + "tslib": "^2.6.2" }, "devDependencies": { "@polkadot/extension-mocks": "0.46.6-3-x", diff --git a/packages/extension-ui/src/Popup/Accounts/Account.spec.tsx b/packages/extension-ui/src/Popup/Accounts/Account.spec.tsx index 61b2acb0..8b9674a5 100644 --- a/packages/extension-ui/src/Popup/Accounts/Account.spec.tsx +++ b/packages/extension-ui/src/Popup/Accounts/Account.spec.tsx @@ -6,16 +6,13 @@ import '@polkadot/extension-mocks/chrome'; import type { ReactWrapper } from 'enzyme'; -import type { Theme } from '../../components/index.js'; import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; import enzyme from 'enzyme'; import React from 'react'; import { act } from 'react-dom/test-utils'; import { MemoryRouter } from 'react-router'; -import { ThemeProvider } from 'styled-components'; -import { themes } from '../../components/index.js'; import * as messaging from '../../messaging.js'; import { flushAllPromises } from '../../testHelpers.js'; import Account from './Account.js'; @@ -38,14 +35,11 @@ describe('Account component', () => { let wrapper: ReactWrapper; const VALID_ADDRESS = 'HjoBp62cvsWDA3vtNMWxz6c9q13ReEHi9UGHK7JbZweH5g5'; // eslint-disable-next-line @typescript-eslint/no-unsafe-return - const mountAccountComponent = (additionalAccountProperties: Record, theme: Theme = themes.dark): ReactWrapper => mount( + const mountAccountComponent = (additionalAccountProperties: Record): ReactWrapper => mount( - - - - + ); it('shows Export option if account is not external', async () => { diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx index 9b844d5e..f5273543 100644 --- a/packages/extension-ui/src/Popup/Accounts/Account.tsx +++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx @@ -3,7 +3,6 @@ import type { AccountJson } from '@polkadot/extension-base/background/types'; import type { HexString } from '@polkadot/util/types'; -import type { ThemeProps } from '../../types.js'; import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; @@ -51,7 +50,7 @@ function Account ({ address, className, genesisHash, isExternal, isHardware, isH const _onChangeGenesis = useCallback( (genesisHash?: HexString | null): void => { - tieAccount(address, genesisHash || null) + tieAccount(address, genesisHash ?? null) .catch(console.error); }, [address] @@ -161,7 +160,7 @@ function Account ({ address, className, genesisHash, isExternal, isHardware, isH ); } -export default styled(Account)(({ theme }: ThemeProps) => ` +export default styled(Account)` .address { margin-bottom: 8px; } @@ -174,7 +173,7 @@ export default styled(Account)(({ theme }: ThemeProps) => ` width: 350px; .danger { - background-color: ${theme.bodyColor}; + background-color: var(--bodyColor); margin-top: -13px; width: 330px; } @@ -202,4 +201,4 @@ export default styled(Account)(({ theme }: ThemeProps) => ` margin: 0; } } -`); +`; diff --git a/packages/extension-ui/src/Popup/Accounts/AccountsTree.tsx b/packages/extension-ui/src/Popup/Accounts/AccountsTree.tsx index 32d3e5a5..d3084877 100644 --- a/packages/extension-ui/src/Popup/Accounts/AccountsTree.tsx +++ b/packages/extension-ui/src/Popup/Accounts/AccountsTree.tsx @@ -44,7 +44,7 @@ function AccountsTree ({ className, parentName, showHidden = true, suri, withChe ); } -export default styled(AccountsTree)` +export default styled(AccountsTree)` .accountWichCheckbox { display: flex; align-items: center; diff --git a/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx b/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx index 146df7a5..514bd772 100644 --- a/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx +++ b/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../../types.js'; - import React, { useCallback, useContext } from 'react'; import { ActionContext } from '../../components/index.js'; @@ -11,7 +9,7 @@ import Header from '../../partials/Header.js'; import { styled } from '../../styled.js'; import AddAccountImage from './AddAccountImage.js'; -interface Props extends ThemeProps { +interface Props { className?: string; } @@ -42,12 +40,12 @@ function AddAccount ({ className }: Props): React.ReactElement { ); } -export default React.memo(styled(AddAccount)(({ theme }: Props) => ` - color: ${theme.textColor}; +export default React.memo(styled(AddAccount)` + color: var(--textColor); height: 100%; h3 { - color: ${theme.textColor}; + color: var(--textColor); margin-top: 0; font-weight: normal; font-size: 24px; @@ -65,6 +63,6 @@ export default React.memo(styled(AddAccount)(({ theme }: Props) => ` font-size: 16px; line-height: 26px; margin: 0 30px; - color: ${theme.subTextColor}; + color: var(--subTextColor); } -`)); +`); diff --git a/packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx b/packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx index 93197971..a1396b73 100644 --- a/packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx +++ b/packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx @@ -7,13 +7,11 @@ /* eslint-disable react/jsx-sort-props */ /* eslint-disable react/jsx-max-props-per-line */ -import type { ThemeProps } from '../../types.js'; - import React from 'react'; import { styled } from '../../styled.js'; -interface Props extends ThemeProps { +interface Props { className?: string; onClick: () => void; } @@ -85,17 +83,17 @@ function AddAccountImage ({ className, onClick }: Props): React.ReactElement ` +export default React.memo(styled(AddAccountImage)` circle, path { cursor: pointer; } path { - fill: ${theme.textColor}; + fill: var(--textColor); } & > g > circle { - stroke: ${theme.inputBorderColor}; - fill: ${theme.addAccountImageBackground}; + stroke: var(--inputBorderColor); + fill: var(--addAccountImageBackground); } -`)); +`); diff --git a/packages/extension-ui/src/Popup/Accounts/index.tsx b/packages/extension-ui/src/Popup/Accounts/index.tsx index 1b96a10b..9614d0b0 100644 --- a/packages/extension-ui/src/Popup/Accounts/index.tsx +++ b/packages/extension-ui/src/Popup/Accounts/index.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { AccountWithChildren } from '@polkadot/extension-base/background/types'; -import type { ThemeProps } from '../../types.js'; import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; @@ -15,7 +14,7 @@ import { styled } from '../../styled.js'; import AccountsTree from './AccountsTree.js'; import AddAccount from './AddAccount.js'; -interface Props extends ThemeProps { +interface Props { className?: string; } @@ -71,7 +70,7 @@ function Accounts ({ className }: Props): React.ReactElement { ); } -export default styled(Accounts)` +export default styled(Accounts)` height: calc(100vh - 2px); overflow-y: scroll; margin-top: -25px; diff --git a/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx b/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx index f2b4a6c6..71b2edd0 100644 --- a/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx +++ b/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../../types.js'; - import React, { useCallback, useContext, useEffect } from 'react'; import { useParams } from 'react-router'; @@ -12,7 +10,7 @@ import { getAuthList, updateAuthorization } from '../../messaging.js'; import { AccountSelection, Header } from '../../partials/index.js'; import { styled } from '../../styled.js'; -interface Props extends ThemeProps { +interface Props { className?: string; } @@ -71,7 +69,7 @@ function AccountManagement ({ className }: Props): React.ReactElement { ); } -export default styled(AccountManagement)` +export default styled(AccountManagement)` .accountSelection{ .accountList{ height: 390px; diff --git a/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx b/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx index 06963702..964f102a 100644 --- a/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx +++ b/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { AuthUrlInfo } from '@polkadot/extension-base/background/types'; -import type { ThemeProps } from '../../types.js'; import React, { useCallback } from 'react'; import { Link } from 'react-router-dom'; @@ -11,7 +10,7 @@ import RemoveAuth from '../../components/RemoveAuth.js'; import { useTranslation } from '../../hooks/index.js'; import { styled } from '../../styled.js'; -interface Props extends ThemeProps { +interface Props { className?: string; info: AuthUrlInfo; removeAuth: (url: string) => void; @@ -50,7 +49,7 @@ function WebsiteEntry ({ className = '', info: { authorizedAccounts, isAllowed } ); } -export default styled(WebsiteEntry)(({ theme }: Props) => ` +export default styled(WebsiteEntry)` display: flex; align-items: center; margin-top: .2rem; @@ -61,11 +60,11 @@ export default styled(WebsiteEntry)(({ theme }: Props) => ` .connectedAccounts{ margin-left: .5rem; - background-color: ${theme.primaryColor}; + background-color: var(--primaryColor); color: white; cursor: pointer; padding: 0 0.5rem; border-radius: 4px; text-decoration: none; } -`); +`; diff --git a/packages/extension-ui/src/Popup/AuthManagement/index.tsx b/packages/extension-ui/src/Popup/AuthManagement/index.tsx index 2bf400fe..98451ca0 100644 --- a/packages/extension-ui/src/Popup/AuthManagement/index.tsx +++ b/packages/extension-ui/src/Popup/AuthManagement/index.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { AuthUrlInfo, AuthUrls } from '@polkadot/extension-base/background/types'; -import type { ThemeProps } from '../../types.js'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; @@ -13,7 +12,7 @@ import { Header } from '../../partials/index.js'; import { styled } from '../../styled.js'; import WebsiteEntry from './WebsiteEntry.js'; -interface Props extends ThemeProps { +interface Props { className?: string; } @@ -84,7 +83,7 @@ function AuthManagement ({ className }: Props): React.ReactElement { ); } -export default styled(AuthManagement)` +export default styled(AuthManagement)` height: calc(100vh - 2px); overflow-y: auto; diff --git a/packages/extension-ui/src/Popup/Authorize/Authorize.spec.tsx b/packages/extension-ui/src/Popup/Authorize/Authorize.spec.tsx index 9a1d7847..44f94d8c 100644 --- a/packages/extension-ui/src/Popup/Authorize/Authorize.spec.tsx +++ b/packages/extension-ui/src/Popup/Authorize/Authorize.spec.tsx @@ -11,9 +11,8 @@ import type { AccountJson, AuthorizeRequest } from '@polkadot/extension-base/bac import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; import enzyme from 'enzyme'; import React from 'react'; -import { ThemeProvider } from 'styled-components'; -import { AccountContext, AuthorizeReqContext, themes, Warning } from '../../components/index.js'; +import { AccountContext, AuthorizeReqContext, Warning } from '../../components/index.js'; import { Header } from '../../partials/index.js'; import { buildHierarchy } from '../../util/buildHierarchy.js'; import Account from '../Accounts/Account.js'; @@ -56,9 +55,7 @@ describe('Authorize', () => { hierarchy: accounts ? buildHierarchy(accounts) : [] }} > - - - + ); diff --git a/packages/extension-ui/src/Popup/Authorize/NoAccount.tsx b/packages/extension-ui/src/Popup/Authorize/NoAccount.tsx index f09fab9b..282f6418 100644 --- a/packages/extension-ui/src/Popup/Authorize/NoAccount.tsx +++ b/packages/extension-ui/src/Popup/Authorize/NoAccount.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../../types.js'; - import { t } from 'i18next'; import React, { useCallback } from 'react'; import { Trans } from 'react-i18next'; @@ -11,7 +9,7 @@ import { Button, Warning } from '../../components/index.js'; import { deleteAuthRequest } from '../../messaging.js'; import { styled } from '../../styled.js'; -interface Props extends ThemeProps { +interface Props { authId: string; className?: string; } @@ -37,7 +35,7 @@ function NoAccount ({ authId, className }: Props): React.ReactElement { ); } -export default styled(NoAccount)` +export default styled(NoAccount)` .acceptButton { width: 90%; margin: 25px auto 0; diff --git a/packages/extension-ui/src/Popup/Authorize/Request.tsx b/packages/extension-ui/src/Popup/Authorize/Request.tsx index 2381ec13..05c7e924 100644 --- a/packages/extension-ui/src/Popup/Authorize/Request.tsx +++ b/packages/extension-ui/src/Popup/Authorize/Request.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { RequestAuthorizeTab } from '@polkadot/extension-base/background/types'; -import type { ThemeProps } from '../../types.js'; import React, { useCallback, useContext, useEffect } from 'react'; @@ -13,7 +12,7 @@ import { AccountSelection } from '../../partials/index.js'; import { styled } from '../../styled.js'; import NoAccount from './NoAccount.js'; -interface Props extends ThemeProps { +interface Props { authId: string; className?: string; isFirst: boolean; @@ -85,7 +84,7 @@ function Request ({ authId, className, isFirst, request: { origin }, url }: Prop ); } -export default styled(Request)` +export default styled(Request)` .acceptButton { width: 90%; margin: .5rem auto 0; diff --git a/packages/extension-ui/src/Popup/Authorize/index.tsx b/packages/extension-ui/src/Popup/Authorize/index.tsx index 2813f3aa..5c51bc02 100644 --- a/packages/extension-ui/src/Popup/Authorize/index.tsx +++ b/packages/extension-ui/src/Popup/Authorize/index.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../../types.js'; - import React, { useContext } from 'react'; import { AuthorizeReqContext } from '../../components/index.js'; @@ -11,7 +9,7 @@ import { Header } from '../../partials/index.js'; import { styled } from '../../styled.js'; import Request from './Request.js'; -interface Props extends ThemeProps { +interface Props { className?: string; } @@ -41,7 +39,7 @@ function Authorize ({ className = '' }: Props): React.ReactElement { ); } -export default styled(Authorize)` +export default styled(Authorize)` overflow-y: auto; &.lastRequest { diff --git a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx b/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx index 6105d1b1..b81b1e9d 100644 --- a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx +++ b/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx @@ -11,9 +11,8 @@ import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; import enzyme from 'enzyme'; import React from 'react'; import { act } from 'react-dom/test-utils'; -import { ThemeProvider } from 'styled-components'; -import { ActionContext, ActionText, Button, themes } from '../../components/index.js'; +import { ActionContext, ActionText, Button } from '../../components/index.js'; import * as messaging from '../../messaging.js'; import { Header } from '../../partials/index.js'; import { flushAllPromises } from '../../testHelpers.js'; @@ -44,9 +43,7 @@ describe('Create Account', () => { // eslint-disable-next-line @typescript-eslint/no-unsafe-return const mountComponent = (): ReactWrapper => mount( - - - + ); diff --git a/packages/extension-ui/src/Popup/CreateAccount/index.tsx b/packages/extension-ui/src/Popup/CreateAccount/index.tsx index 04c13dc6..e3741efc 100644 --- a/packages/extension-ui/src/Popup/CreateAccount/index.tsx +++ b/packages/extension-ui/src/Popup/CreateAccount/index.tsx @@ -132,7 +132,7 @@ function CreateAccount ({ className }: Props): React.ReactElement { ); } -export default styled(CreateAccount)` +export default styled(CreateAccount)` margin-bottom: 16px; label::after { diff --git a/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx b/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx index e8155b3d..cf4fbbc3 100644 --- a/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx +++ b/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../../types.js'; - import React, { useCallback, useRef, useState } from 'react'; import arrow from '../../assets/arrow-down.svg'; @@ -59,7 +57,7 @@ function AddressDropdown ({ allAddresses, className, onSelect, selectedAddress, ); } -export default styled(AddressDropdown)(({ theme }: ThemeProps) => ` +export default styled(AddressDropdown)` margin-bottom: 16px; cursor: pointer; @@ -72,10 +70,10 @@ export default styled(AddressDropdown)(({ theme }: ThemeProps) => ` width: 30px; height: 30px; background: url(${arrow}) center no-repeat; - background-color: ${theme.inputBackground}; + background-color: var(--inputBackground); pointer-events: none; border-radius: 4px; - border: 1px solid ${theme.boxBorderColor}; + border: 1px solid var(--boxBorderColor); } .address .copyIcon { @@ -87,11 +85,11 @@ export default styled(AddressDropdown)(({ theme }: ThemeProps) => ` visibility: hidden; width: 510px; z-index: 100; - background: ${theme.bodyColor}; + background: var(--bodyColor); max-height: 0; overflow: auto; padding: 5px; - border: 1px solid ${theme.boxBorderColor}; + border: 1px solid var(--boxBorderColor); box-sizing: border-box; border-radius: 4px; margin-top: -8px; @@ -105,4 +103,4 @@ export default styled(AddressDropdown)(({ theme }: ThemeProps) => ` cursor: pointer; } } -`); +`; diff --git a/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx b/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx index b02db1ac..c59877d7 100644 --- a/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx +++ b/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../../types.js'; - import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { useCallback, useEffect, useState } from 'react'; @@ -11,7 +9,7 @@ import { Button, InputWithLabel } from '../../components/index.js'; import { useTranslation } from '../../hooks/index.js'; import { styled } from '../../styled.js'; -interface Props extends ThemeProps{ +interface Props { className?: string; defaultPath: string; isError: boolean; @@ -72,7 +70,7 @@ function DerivationPath ({ className, defaultPath, isError, onChange, withSoftPa ); } -export default React.memo(styled(DerivationPath)(({ theme }: Props) => ` +export default React.memo(styled(DerivationPath)` > .container { display: flex; flex-direction: row; @@ -99,7 +97,7 @@ export default React.memo(styled(DerivationPath)(({ theme }: Props) => ` } .lockIcon { - color: ${theme.iconNeutralColor} + color: var(--iconNeutralColor) } .pathInput { @@ -109,4 +107,4 @@ export default React.memo(styled(DerivationPath)(({ theme }: Props) => ` opacity: 50%; } } -`)); +`); diff --git a/packages/extension-ui/src/Popup/Derive/Derive.spec.tsx b/packages/extension-ui/src/Popup/Derive/Derive.spec.tsx index f850927d..d45fdbe6 100644 --- a/packages/extension-ui/src/Popup/Derive/Derive.spec.tsx +++ b/packages/extension-ui/src/Popup/Derive/Derive.spec.tsx @@ -13,9 +13,8 @@ import enzyme from 'enzyme'; import React from 'react'; import { act } from 'react-dom/test-utils'; import { MemoryRouter, Route } from 'react-router'; -import { ThemeProvider } from 'styled-components'; -import { AccountContext, ActionContext, themes } from '../../components/index.js'; +import { AccountContext, ActionContext } from '../../components/index.js'; import * as messaging from '../../messaging.js'; import { flushAllPromises } from '../../testHelpers.js'; import { buildHierarchy } from '../../util/buildHierarchy.js'; @@ -68,11 +67,9 @@ describe('Derive', () => { hierarchy: buildHierarchy(accounts) }} > - - - - - + + + diff --git a/packages/extension-ui/src/Popup/Export.spec.tsx b/packages/extension-ui/src/Popup/Export.spec.tsx index 50be9d48..3db12718 100644 --- a/packages/extension-ui/src/Popup/Export.spec.tsx +++ b/packages/extension-ui/src/Popup/Export.spec.tsx @@ -13,9 +13,8 @@ import enzyme from 'enzyme'; import React from 'react'; import { act } from 'react-dom/test-utils'; import { MemoryRouter, Route } from 'react-router'; -import { ThemeProvider } from 'styled-components'; -import { Button, themes } from '../components/index.js'; +import { Button } from '../components/index.js'; import * as messaging from '../messaging.js'; import { flushAllPromises } from '../testHelpers.js'; import Export from './Export.js'; @@ -46,9 +45,7 @@ describe('Export component', () => { // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment wrapper = mount( - - - + ); }); diff --git a/packages/extension-ui/src/Popup/Export.tsx b/packages/extension-ui/src/Popup/Export.tsx index 72d796e9..566d19ff 100644 --- a/packages/extension-ui/src/Popup/Export.tsx +++ b/packages/extension-ui/src/Popup/Export.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { RouteComponentProps } from 'react-router'; -import type { ThemeProps } from '../types.js'; import fileSaver from 'file-saver'; import React, { useCallback, useContext, useState } from 'react'; @@ -16,7 +15,7 @@ import { styled } from '../styled.js'; const MIN_LENGTH = 6; -interface Props extends RouteComponentProps<{address: string}>, ThemeProps { +interface Props extends RouteComponentProps<{address: string}> { className?: string; } diff --git a/packages/extension-ui/src/Popup/ExportAll.tsx b/packages/extension-ui/src/Popup/ExportAll.tsx index 1e4afc3d..befa895e 100644 --- a/packages/extension-ui/src/Popup/ExportAll.tsx +++ b/packages/extension-ui/src/Popup/ExportAll.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { RouteComponentProps } from 'react-router'; -import type { ThemeProps } from '../types.js'; import fileSaver from 'file-saver'; import React, { useCallback, useContext, useState } from 'react'; @@ -16,7 +15,7 @@ import { styled } from '../styled.js'; const MIN_LENGTH = 6; -interface Props extends RouteComponentProps, ThemeProps { +interface Props extends RouteComponentProps { className?: string; } diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx index 2730ebf5..ddd3eda0 100644 --- a/packages/extension-ui/src/Popup/Forget.tsx +++ b/packages/extension-ui/src/Popup/Forget.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { RouteComponentProps } from 'react-router'; -import type { ThemeProps } from '../types.js'; import React, { useCallback, useContext, useState } from 'react'; import { withRouter } from 'react-router'; @@ -13,7 +12,7 @@ import { forgetAccount } from '../messaging.js'; import { Header } from '../partials/index.js'; import { styled } from '../styled.js'; -interface Props extends RouteComponentProps<{ address: string }>, ThemeProps { +interface Props extends RouteComponentProps<{ address: string }> { className?: string; } diff --git a/packages/extension-ui/src/Popup/ImportLedger.tsx b/packages/extension-ui/src/Popup/ImportLedger.tsx index 8ef3ebe4..e1d4f776 100644 --- a/packages/extension-ui/src/Popup/ImportLedger.tsx +++ b/packages/extension-ui/src/Popup/ImportLedger.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { HexString } from '@polkadot/util/types'; -import type { ThemeProps } from '../types.js'; import { faSync } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -29,7 +28,7 @@ interface NetworkOption { const AVAIL: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]; -interface Props extends ThemeProps { +interface Props { className?: string; } @@ -180,7 +179,7 @@ function ImportLedger ({ className }: Props): React.ReactElement { ); } -export default styled(ImportLedger)` +export default styled(ImportLedger)` .refreshIcon { margin-right: 0.3rem; } diff --git a/packages/extension-ui/src/Popup/ImportSeed/SeedAndPath.tsx b/packages/extension-ui/src/Popup/ImportSeed/SeedAndPath.tsx index 85c2cd07..41a8edf7 100644 --- a/packages/extension-ui/src/Popup/ImportSeed/SeedAndPath.tsx +++ b/packages/extension-ui/src/Popup/ImportSeed/SeedAndPath.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { KeypairType } from '@polkadot/util-crypto/types'; -import type { ThemeProps } from '../../types.js'; import type { AccountInfo } from './index.js'; import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons'; @@ -131,28 +130,28 @@ function SeedAndPath ({ className, onAccountChange, onNextStep, type }: Props): ); } -export default styled(SeedAndPath)(({ theme }: ThemeProps) => ` +export default styled(SeedAndPath)` .advancedToggle { - color: ${theme.textColor}; + color: var(--textColor); cursor: pointer; - line-height: ${theme.lineHeight}; + line-height: var(--lineHeight); letter-spacing: 0.04em; opacity: 0.65; text-transform: uppercase; > span { - font-size: ${theme.inputLabelFontSize}; + font-size: var(--inputLabelFontSize); margin-left: .5rem; vertical-align: middle; } } .genesisSelection { - margin-bottom: ${theme.fontSize}; + margin-bottom: var(--fontSize); } .seedInput { - margin-bottom: ${theme.fontSize}; + margin-bottom: var(--fontSize); textarea { height: unset; } @@ -161,4 +160,4 @@ export default styled(SeedAndPath)(({ theme }: ThemeProps) => ` .seedError { margin-bottom: 1rem; } -`); +`; diff --git a/packages/extension-ui/src/Popup/Metadata/Request.tsx b/packages/extension-ui/src/Popup/Metadata/Request.tsx index 2359eb68..bdfaff8d 100644 --- a/packages/extension-ui/src/Popup/Metadata/Request.tsx +++ b/packages/extension-ui/src/Popup/Metadata/Request.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { MetadataDef } from '@polkadot/extension-inject/types'; -import type { ThemeProps } from '../../types.js'; import React, { useCallback, useContext } from 'react'; @@ -92,7 +91,7 @@ function Request ({ className, metaId, request, url }: Props): React.ReactElemen ); } -export default styled(Request)(({ theme }: ThemeProps) => ` +export default styled(Request)` .btnAccept { margin: 25px auto 0; width: 90%; @@ -104,7 +103,7 @@ export default styled(Request)(({ theme }: ThemeProps) => ` } .icon { - background: ${theme.buttonBackgroundDanger}; + background: var(--buttonBackgroundDanger); color: white; min-width: 18px; width: 14px; @@ -118,7 +117,7 @@ export default styled(Request)(({ theme }: ThemeProps) => ` .requestInfo { align-items: center; - background: ${theme.highlightedAreaBackground}; + background: var(--highlightedAreaBackground); display: flex; flex-direction: column; margin-bottom: 8px; @@ -127,4 +126,4 @@ export default styled(Request)(({ theme }: ThemeProps) => ` .requestWarning { margin: 24px 24px 0 1.45rem; } -`); +`; diff --git a/packages/extension-ui/src/Popup/PhishingDetected.tsx b/packages/extension-ui/src/Popup/PhishingDetected.tsx index 3b5a25b4..00022ff5 100644 --- a/packages/extension-ui/src/Popup/PhishingDetected.tsx +++ b/packages/extension-ui/src/Popup/PhishingDetected.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React from 'react'; import { Trans } from 'react-i18next'; import { useParams } from 'react-router'; @@ -11,7 +9,7 @@ import { useTranslation } from '../hooks/index.js'; import { Header } from '../partials/index.js'; import { styled } from '../styled.js'; -interface Props extends ThemeProps { +interface Props { className?: string; } @@ -44,14 +42,14 @@ function PhishingDetected ({ className }: Props): React.ReactElement { ); } -export default styled(PhishingDetected)(({ theme }: Props) => ` +export default styled(PhishingDetected)` p { - color: ${theme.subTextColor}; + color: var(--subTextColor); margin-bottom: 1rem; margin-top: 0; a { - color: ${theme.subTextColor}; + color: var(--subTextColor); } &.websiteAddress { @@ -59,4 +57,4 @@ export default styled(PhishingDetected)(({ theme }: Props) => ` text-align: center; } } -`); +`; diff --git a/packages/extension-ui/src/Popup/RestoreJson.tsx b/packages/extension-ui/src/Popup/RestoreJson.tsx index ad66a5ad..b3c3730d 100644 --- a/packages/extension-ui/src/Popup/RestoreJson.tsx +++ b/packages/extension-ui/src/Popup/RestoreJson.tsx @@ -174,7 +174,7 @@ function Upload ({ className }: Props): React.ReactElement { ); } -export default styled(Upload)` +export default styled(Upload)` .restoreButton { margin-top: 16px; } diff --git a/packages/extension-ui/src/Popup/Signing/Bytes.tsx b/packages/extension-ui/src/Popup/Signing/Bytes.tsx index 1cdecf73..e6a164e6 100644 --- a/packages/extension-ui/src/Popup/Signing/Bytes.tsx +++ b/packages/extension-ui/src/Popup/Signing/Bytes.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../../types.js'; - import React, { useMemo } from 'react'; import { isAscii, u8aToString, u8aUnwrapBytes } from '@polkadot/util'; @@ -42,7 +40,7 @@ function Bytes ({ bytes, className, url }: Props): React.ReactElement { ); } -export default styled(Bytes)(({ theme }: ThemeProps) => ` +export default styled(Bytes)` border: 0; display: block; font-size: 0.75rem; @@ -68,10 +66,10 @@ export default styled(Bytes)(({ theme }: ThemeProps) => ` white-space: pre; overflow: auto; max-height: calc(100vh - 480px); - min-height: ${theme.boxLineHeight}; - border: 1px solid ${theme.boxBorderColor}; - background: ${theme.boxBackground}; - line-height: ${theme.boxLineHeight}; + min-height: var(--boxLineHeight); + border: 1px solid var(--boxBorderColor); + background: var(--boxBackground); + line-height: var(--boxLineHeight); } } } @@ -83,4 +81,4 @@ export default styled(Bytes)(({ theme }: ThemeProps) => ` vertical-align: middle; white-space: nowrap; } -`); +`; diff --git a/packages/extension-ui/src/Popup/Signing/LedgerSign.tsx b/packages/extension-ui/src/Popup/Signing/LedgerSign.tsx index c280240d..0f511ebd 100644 --- a/packages/extension-ui/src/Popup/Signing/LedgerSign.tsx +++ b/packages/extension-ui/src/Popup/Signing/LedgerSign.tsx @@ -93,7 +93,7 @@ function LedgerSign ({ accountIndex, addressOffset, className, error, genesisHas ); } -export default styled(LedgerSign)` +export default styled(LedgerSign)` flex-direction: column; padding: 6px 24px; diff --git a/packages/extension-ui/src/Popup/Signing/Qr.tsx b/packages/extension-ui/src/Popup/Signing/Qr.tsx index 591ba03b..7336bf1d 100644 --- a/packages/extension-ui/src/Popup/Signing/Qr.tsx +++ b/packages/extension-ui/src/Popup/Signing/Qr.tsx @@ -85,7 +85,7 @@ function Qr ({ address, className, cmd, genesisHash, onSignature, payload }: Pro ); } -export default styled(Qr)` +export default styled(Qr)` height: 100%; .qrContainer { diff --git a/packages/extension-ui/src/Popup/Signing/Request/SignArea.tsx b/packages/extension-ui/src/Popup/Signing/Request/SignArea.tsx index ac27b72c..7df1804c 100644 --- a/packages/extension-ui/src/Popup/Signing/Request/SignArea.tsx +++ b/packages/extension-ui/src/Popup/Signing/Request/SignArea.tsx @@ -130,7 +130,7 @@ function SignArea ({ buttonText, className, error, isExternal, isFirst, setError ); } -export default styled(SignArea)` +export default styled(SignArea)` flex-direction: column; padding: 6px 24px; diff --git a/packages/extension-ui/src/Popup/Signing/Signing.spec.tsx b/packages/extension-ui/src/Popup/Signing/Signing.spec.tsx index b2942a96..dba04c33 100644 --- a/packages/extension-ui/src/Popup/Signing/Signing.spec.tsx +++ b/packages/extension-ui/src/Popup/Signing/Signing.spec.tsx @@ -13,9 +13,8 @@ import enzyme from 'enzyme'; import { EventEmitter } from 'events'; import React, { useState } from 'react'; import { act } from 'react-dom/test-utils'; -import { ThemeProvider } from 'styled-components'; -import { ActionContext, Address, Button, Input, SigningReqContext, themes } from '../../components/index.js'; +import { ActionContext, Address, Button, Input, SigningReqContext } from '../../components/index.js'; import * as messaging from '../../messaging.js'; import * as MetadataCache from '../../MetadataCache.js'; import { flushAllPromises } from '../../testHelpers.js'; @@ -69,9 +68,7 @@ describe('Signing requests', () => { // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment wrapper = mount( - - - + ); await act(flushAllPromises); diff --git a/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx b/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx index 5b1de6bb..234aaa30 100644 --- a/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx +++ b/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../../types.js'; - import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { useCallback } from 'react'; @@ -59,7 +57,7 @@ function TransactionIndex ({ className, index, onNextClick, onPreviousClick, tot ); } -export default styled(TransactionIndex)(({ theme }: ThemeProps) => ` +export default styled(TransactionIndex)` align-items: center; display: flex; justify-content: space-between; @@ -68,10 +66,10 @@ export default styled(TransactionIndex)(({ theme }: ThemeProps) => ` .arrowLeft, .arrowRight { display: inline-block; - color: ${theme.iconNeutralColor}; + color: var(--iconNeutralColor); &.active { - color: ${theme.primaryColor}; + color: var(--primaryColor); cursor: pointer; } } @@ -81,15 +79,15 @@ export default styled(TransactionIndex)(({ theme }: ThemeProps) => ` } .currentStep { - color: ${theme.primaryColor}; - font-size: ${theme.labelFontSize}; - line-height: ${theme.labelLineHeight}; + color: var(--primaryColor); + font-size: var(--labelFontSize); + line-height: var(--labelLineHeight); margin-left: 10px; } .totalSteps { - font-size: ${theme.labelFontSize}; - line-height: ${theme.labelLineHeight}; - color: ${theme.textColor}; + font-size: var(--labelFontSize); + line-height: var(--labelLineHeight); + color: var(--textColor); } -`); +`; diff --git a/packages/extension-ui/src/Popup/Welcome.tsx b/packages/extension-ui/src/Popup/Welcome.tsx index 5d3d6d32..a0441f72 100644 --- a/packages/extension-ui/src/Popup/Welcome.tsx +++ b/packages/extension-ui/src/Popup/Welcome.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React, { useCallback, useContext } from 'react'; import { ActionContext, Box, Button, ButtonArea, List, VerticalSpace } from '../components/index.js'; @@ -10,7 +8,7 @@ import { useTranslation } from '../hooks/index.js'; import { Header } from '../partials/index.js'; import { styled } from '../styled.js'; -interface Props extends ThemeProps { +interface Props { className?: string; } @@ -48,10 +46,10 @@ function Welcome ({ className }: Props): React.ReactElement { ); } -export default styled(Welcome)(({ theme }: Props) => ` +export default styled(Welcome)` p { - color: ${theme.subTextColor}; + color: var(--subTextColor); margin-bottom: 6px; margin-top: 0; } -`); +`; diff --git a/packages/extension-ui/src/components/AccountNamePasswordCreation.tsx b/packages/extension-ui/src/components/AccountNamePasswordCreation.tsx index bd51ba8b..133d8a05 100644 --- a/packages/extension-ui/src/components/AccountNamePasswordCreation.tsx +++ b/packages/extension-ui/src/components/AccountNamePasswordCreation.tsx @@ -20,7 +20,13 @@ function AccountNamePasswordCreation ({ buttonLabel, isBusy, onBackClick, onCrea const [password, setPassword] = useState(null); const _onCreate = useCallback( - () => name && password && onCreate(name, password), + (): void => { + if (name && password) { + Promise + .resolve(onCreate(name, password)) + .catch(console.error); + } + }, [name, password, onCreate] ); diff --git a/packages/extension-ui/src/components/ActionBar.tsx b/packages/extension-ui/src/components/ActionBar.tsx index eb45574d..817c37c9 100644 --- a/packages/extension-ui/src/components/ActionBar.tsx +++ b/packages/extension-ui/src/components/ActionBar.tsx @@ -18,7 +18,7 @@ function ActionBar ({ children, className }: Props): React.ReactElement { ); } -export default styled(ActionBar)` +export default styled(ActionBar)` align-content: flex-end; display: flex; justify-content: space-between; diff --git a/packages/extension-ui/src/components/ActionText.tsx b/packages/extension-ui/src/components/ActionText.tsx index 34cee052..56646063 100644 --- a/packages/extension-ui/src/components/ActionText.tsx +++ b/packages/extension-ui/src/components/ActionText.tsx @@ -3,7 +3,6 @@ import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'; import type { MouseEventHandler } from 'react'; -import type { ThemeProps } from '../types.js'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; @@ -29,21 +28,21 @@ function ActionText ({ className, icon, onClick, text }: Props): React.ReactElem ); } -export default styled(ActionText)(({ theme }: ThemeProps) => ` +export default styled(ActionText)` cursor: pointer; span { - color: ${theme.labelColor} - font-size: ${theme.labelFontSize}; - line-height: ${theme.labelLineHeight}; + color: var(--labelColor); + font-size: var(--labelFontSize); + line-height: var(--labelLineHeight); text-decoration-line: underline; } .svg-inline--fa { - color: ${theme.iconNeutralColor}; + color: var(--iconNeutralColor); display: inline-block; margin-right: 0.3rem; position: relative; top: 2px; } -`); +`; diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx index ca454da7..986e0bbc 100644 --- a/packages/extension-ui/src/components/Address.tsx +++ b/packages/extension-ui/src/components/Address.tsx @@ -6,7 +6,6 @@ import type { Chain } from '@polkadot/extension-chains/types'; import type { IconTheme } from '@polkadot/react-identicon/types'; import type { SettingsStruct } from '@polkadot/ui-settings/types'; import type { KeypairType } from '@polkadot/util-crypto/types'; -import type { ThemeProps } from '../types.js'; import { faUsb } from '@fortawesome/free-brands-svg-icons'; import { faCopy, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons'; @@ -305,9 +304,9 @@ function Address ({ actions, address, children, className, genesisHash, isExtern ); } -export default styled(Address)(({ theme }: ThemeProps) => ` - background: ${theme.boxBackground}; - border: 1px solid ${theme.boxBorderColor}; +export default styled(Address)` + background: var(--boxBackground); + border: 1px solid var(--boxBorderColor); box-sizing: border-box; border-radius: 4px; margin-bottom: 8px; @@ -320,7 +319,7 @@ export default styled(Address)(({ theme }: ThemeProps) => ` top: 0; &.chain { - background: ${theme.primaryColor}; + background: var(--primaryColor); border-radius: 0 0 0 10px; color: white; padding: 0.1rem 0.5rem 0.1rem 0.75rem; @@ -338,9 +337,9 @@ export default styled(Address)(({ theme }: ThemeProps) => ` width: 14px; height: 14px; margin-right: 10px; - color: ${theme.accountDotsIconColor}; + color: var(--accountDotsIconColor); &:hover { - color: ${theme.labelColor}; + color: var(--labelColor); cursor: pointer; } } @@ -352,16 +351,16 @@ export default styled(Address)(({ theme }: ThemeProps) => ` } .hiddenIcon { - color: ${theme.errorColor}; + color: var(--errorColor); &:hover { - color: ${theme.accountDotsIconColor}; + color: var(--accountDotsIconColor); } } } .externalIcon, .hardwareIcon { margin-right: 0.3rem; - color: ${theme.labelColor}; + color: var(--labelColor); width: 0.875em; } @@ -409,8 +408,8 @@ export default styled(Address)(({ theme }: ThemeProps) => ` } .parentName { - color: ${theme.labelColor}; - font-size: ${theme.inputLabelFontSize}; + color: var(--labelColor); + font-size: var(--inputLabelFontSize); line-height: 14px; overflow: hidden; padding: 0.25rem 0 0 0.8rem; @@ -422,23 +421,23 @@ export default styled(Address)(({ theme }: ThemeProps) => ` .fullAddress { overflow: hidden; text-overflow: ellipsis; - color: ${theme.labelColor}; + color: var(--labelColor); font-size: 12px; line-height: 16px; } .detailsIcon { - background: ${theme.accountDotsIconColor}; + background: var(--accountDotsIconColor); width: 3px; height: 19px; &.active { - background: ${theme.primaryColor}; + background: var(--primaryColor); } } .deriveIcon { - color: ${theme.labelColor}; + color: var(--labelColor); position: absolute; top: 5px; width: 9px; @@ -471,12 +470,12 @@ export default styled(Address)(({ theme }: ThemeProps) => ` top: 25%; bottom: 25%; width: 1px; - background: ${theme.boxBorderColor}; + background: var(--boxBorderColor); } &:hover { cursor: pointer; - background: ${theme.readonlyInputBackground}; + background: var(--readonlyInputBackground); } } -`); +`; diff --git a/packages/extension-ui/src/components/BackButton.tsx b/packages/extension-ui/src/components/BackButton.tsx index 11cbff7d..8c4842a3 100644 --- a/packages/extension-ui/src/components/BackButton.tsx +++ b/packages/extension-ui/src/components/BackButton.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; @@ -30,18 +28,18 @@ function BackButton ({ className, onClick }: Props): React.ReactElement { ); } -export default styled(BackButton)(({ theme }: ThemeProps) => ` - background: ${theme.backButtonBackground}; +export default styled(BackButton)` + background: var(--backButtonBackground); margin-right: 11px; width: 42px; .arrowLeft { - color: ${theme.backButtonTextColor}; + color: var(--backButtonTextColor); display: block; margin: auto; } &:not(:disabled):hover { - background: ${theme.backButtonBackgroundHover}; + background: var(--backButtonBackgroundHover); } -`); +`; diff --git a/packages/extension-ui/src/components/Box.tsx b/packages/extension-ui/src/components/Box.tsx index 31eda4ac..d6483985 100644 --- a/packages/extension-ui/src/components/Box.tsx +++ b/packages/extension-ui/src/components/Box.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React from 'react'; import { styled } from '../styled.js'; @@ -22,20 +20,20 @@ function Box ({ banner, children, className }: Props): React.ReactElement ); } -export default styled(Box)(({ theme }: ThemeProps) => ` - background: ${theme.readonlyInputBackground}; - border: 1px solid ${theme.inputBorderColor}; - border-radius: ${theme.borderRadius}; - color: ${theme.subTextColor}; - font-family: ${theme.fontFamily}; - font-size: ${theme.fontSize}; +export default styled(Box)` + background: var(--readonlyInputBackground); + border: 1px solid var(--inputBorderColor); + border-radius: var(--borderRadius); + color: var(--subTextColor); + font-family: var(--fontFamily); + font-size: var(--fontSize); margin: 0.75rem 24px; - padding: ${theme.boxPadding}; + padding: var(--boxPadding); position: relative; .banner { background: darkorange; - border-radius: 0 ${theme.borderRadius} 0 ${theme.borderRadius}; + border-radius: 0 var(--borderRadius) 0 var(--borderRadius); color: white; font-size: 0.75rem; padding: 0.25rem 0.5rem; @@ -43,4 +41,4 @@ export default styled(Box)(({ theme }: ThemeProps) => ` right: 0; top: 0; } -`); +`; diff --git a/packages/extension-ui/src/components/BoxWithLabel.tsx b/packages/extension-ui/src/components/BoxWithLabel.tsx index 0e6a35c5..7494e229 100644 --- a/packages/extension-ui/src/components/BoxWithLabel.tsx +++ b/packages/extension-ui/src/components/BoxWithLabel.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React from 'react'; import styled from 'styled-components'; @@ -27,18 +25,18 @@ function BoxWithLabel ({ className, label, value }: Props): React.ReactElement

` +export default styled(BoxWithLabel)` .seedBox { - background: ${theme.readonlyInputBackground}; + background: var(--readonlyInputBackground); box-shadow: none; - border-radius: ${theme.borderRadius}; - border: 1px solid ${theme.inputBorderColor}; - border-color: ${theme.inputBorderColor}; + border-radius: var(--borderRadius); + border: 1px solid var(--inputBorderColor); + border-color: var(--inputBorderColor); box-sizing: border-box; display: block; - font-family: ${theme.fontFamily}; + font-family: var(--fontFamily); outline: none; resize: none; width: 100%; } -`); +`; diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx index 99b62464..61bd1464 100644 --- a/packages/extension-ui/src/components/Button.tsx +++ b/packages/extension-ui/src/components/Button.tsx @@ -1,24 +1,22 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React, { useCallback } from 'react'; import { styled } from '../styled.js'; import Spinner from './Spinner.js'; -interface Props extends ThemeProps { +export interface ButtonProps { className?: string; children?: React.ReactNode; isBusy?: boolean; isDanger?: boolean; isDisabled?: boolean; - onClick?: () => void | Promise; + onClick?: () => void | Promise | null; to?: string; } -function Button ({ children, className = '', isBusy, isDisabled, onClick, to }: Props): React.ReactElement { +function Button ({ children, className = '', isBusy, isDisabled, onClick, to }: ButtonProps): React.ReactElement { const _onClick = useCallback( (): void => { if (isBusy || isDisabled) { @@ -47,16 +45,16 @@ function Button ({ children, className = '', isBusy, isDisabled, onClick, to }: ); } -export default styled(Button)(({ isDanger, theme }: Props) => ` - background: ${isDanger ? theme.buttonBackgroundDanger : theme.buttonBackground}; +export default styled(Button)(({ isDanger }) => ` + background: var(${isDanger ? '--buttonBackgroundDanger' : '--buttonBackground'}); cursor: pointer; display: block; width: 100%; height: ${isDanger ? '40px' : '48px'}; box-sizing: border-box; border: none; - border-radius: ${theme.borderRadius}; - color: ${theme.buttonTextColor}; + border-radius: var(--borderRadius); + color: var(--buttonTextColor); font-size: 15px; line-height: 20px; padding: 0 1rem; @@ -68,7 +66,7 @@ export default styled(Button)(({ isDanger, theme }: Props) => ` } &:not(:disabled):hover { - background: ${isDanger ? theme.buttonBackgroundDangerHover : theme.buttonBackgroundHover}; + background: var(${isDanger ? '--buttonBackgroundDangerHover' : '--buttonBackgroundHover'}); } .busyOverlay, @@ -78,7 +76,7 @@ export default styled(Button)(({ isDanger, theme }: Props) => ` .disabledOverlay { background: rgba(96,96,96,0.75); - border-radius: ${theme.borderRadius}; + border-radius: var(--borderRadius); bottom: 0; left: 0; position: absolute; diff --git a/packages/extension-ui/src/components/ButtonArea.tsx b/packages/extension-ui/src/components/ButtonArea.tsx index 8653ee11..929905a2 100644 --- a/packages/extension-ui/src/components/ButtonArea.tsx +++ b/packages/extension-ui/src/components/ButtonArea.tsx @@ -1,13 +1,11 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React from 'react'; import { styled } from '../styled.js'; -interface Props extends ThemeProps { +interface Props { className?: string; children: React.ReactNode; } @@ -20,11 +18,11 @@ function ButtonArea ({ children, className }: Props): React.ReactElement ); } -export default styled(ButtonArea)(({ theme }: ThemeProps) => ` +export default styled(ButtonArea)` display: flex; flex-direction: row; - background: ${theme.highlightedAreaBackground}; - border-top: 1px solid ${theme.inputBorderColor}; + background: var(--highlightedAreaBackground); + border-top: 1px solid var(--inputBorderColor); padding: 12px 24px; margin-left: 0; margin-right: 0; @@ -32,4 +30,4 @@ export default styled(ButtonArea)(({ theme }: ThemeProps) => ` & > button:not(:last-of-type) { margin-right: 8px; } -`); +`; diff --git a/packages/extension-ui/src/components/Checkbox.tsx b/packages/extension-ui/src/components/Checkbox.tsx index aa21fca6..7dfc1744 100644 --- a/packages/extension-ui/src/components/Checkbox.tsx +++ b/packages/extension-ui/src/components/Checkbox.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React, { useCallback, useEffect } from 'react'; import Checkmark from '../assets/checkmark.svg'; @@ -53,8 +51,8 @@ function Checkbox ({ checked, className, indeterminate, label, onChange, onClick ); } -export default styled(Checkbox)(({ theme }: ThemeProps) => ` - margin: ${theme.boxMargin}; +export default styled(Checkbox)` + margin: var(--boxMargin); label { display: block; @@ -63,9 +61,9 @@ export default styled(Checkbox)(({ theme }: ThemeProps) => ` user-select: none; padding-left: 24px; padding-top: 1px; - color: ${theme.subTextColor}; - font-size: ${theme.fontSize}; - line-height: ${theme.lineHeight}; + color: var(--subTextColor); + font-size: var(--fontSize); + line-height: var(--lineHeight); & input { position: absolute; @@ -81,10 +79,11 @@ export default styled(Checkbox)(({ theme }: ThemeProps) => ` left: 0; height: 16px; width: 16px; - border-radius: ${theme.borderRadius}; - background-color: ${theme.readonlyInputBackground}; - border: 1px solid ${theme.inputBorderColor}; - border: 1px solid ${theme.inputBorderColor}; + border-radius: var(--borderRadius); + background-color: var(--readonlyInputBackground); + border: 1px solid var(--inputBorderColor); + border: 1px solid var(--inputBorderColor); + &:after { content: ''; display: none; @@ -95,12 +94,12 @@ export default styled(Checkbox)(({ theme }: ThemeProps) => ` top: 2px; mask: url(${Checkmark}); mask-size: cover; - background: ${theme.primaryColor}; + background: var(--primaryColor); } } &:hover input ~ span { - background-color: ${theme.inputBackground}; + background-color: var(--inputBackground); } input:checked ~ span:after { @@ -108,7 +107,7 @@ export default styled(Checkbox)(({ theme }: ThemeProps) => ` } input:indeterminate ~ span { - background: ${theme.primaryColor} + background: var(--primaryColor) } } -`); +`; diff --git a/packages/extension-ui/src/components/Dropdown.tsx b/packages/extension-ui/src/components/Dropdown.tsx index 18276df3..4862f303 100644 --- a/packages/extension-ui/src/components/Dropdown.tsx +++ b/packages/extension-ui/src/components/Dropdown.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React, { useCallback } from 'react'; import arrow from '../assets/arrow-down.svg'; @@ -10,11 +8,11 @@ import { styled } from '../styled.js'; import Label from './Label.js'; interface DropdownOption { - text: string; - value: string; + text: string | React.ReactNode; + value?: string | number | null; } -interface Props extends ThemeProps { +interface Props { className?: string; defaultValue?: string | null; isDisabled?: boolean @@ -22,9 +20,10 @@ interface Props extends ThemeProps { isFocussed?: boolean; label: string; onBlur?: () => void; - onChange?: (value: string) => void; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + onChange?: (value: any) => void; options: DropdownOption[]; - value?: string; + value?: number | string | null; } function Dropdown ({ className, defaultValue, isDisabled, isFocussed, label, onBlur, onChange, options, value }: Props): React.ReactElement { @@ -46,12 +45,12 @@ function Dropdown ({ className, defaultValue, isDisabled, isFocussed, label, onB disabled={isDisabled} onBlur={onBlur} onChange={_onChange} - value={value} + value={value ?? undefined} > {options.map(({ text, value }): React.ReactNode => ( @@ -62,23 +61,23 @@ function Dropdown ({ className, defaultValue, isDisabled, isFocussed, label, onB ); } -export default React.memo(styled(Dropdown)(({ isError, label, theme }: Props) => ` +export default React.memo(styled(Dropdown)(({ isError, label }) => ` position: relative; select { -webkit-appearance: none; -moz-appearance: none; appearance: none; - background: ${theme.readonlyInputBackground}; - border-color: ${isError ? theme.errorBorderColor : theme.inputBorderColor}; - border-radius: ${theme.borderRadius}; + background: var(--readonlyInputBackground); + border-color: var(${isError ? '--errorBorderColor' : '--inputBorderColor'}); + border-radius: var(--borderRadius); border-style: solid; border-width: 1px; box-sizing: border-box; - color: ${isError ? theme.errorBorderColor : theme.textColor}; + color: var(${isError ? '--errorBorderColor' : '--textColor'}); display: block; - font-family: ${theme.fontFamily}; - font-size: ${theme.fontSize}; + font-family: var(--fontFamily); + font-size: var(--fontSize); padding: 0.5rem 0.75rem; width: 100%; cursor: pointer; diff --git a/packages/extension-ui/src/components/Icon.tsx b/packages/extension-ui/src/components/Icon.tsx index d69fd236..e970d35c 100644 --- a/packages/extension-ui/src/components/Icon.tsx +++ b/packages/extension-ui/src/components/Icon.tsx @@ -22,7 +22,7 @@ function Icon ({ className = '', icon, onClick }: Props): React.ReactElement ` +export default styled(Icon)(({ onClick }) => ` background: white; border-radius: 50%; box-sizing: border-box; diff --git a/packages/extension-ui/src/components/Identicon.tsx b/packages/extension-ui/src/components/Identicon.tsx index 9721c6dc..d35e109f 100644 --- a/packages/extension-ui/src/components/Identicon.tsx +++ b/packages/extension-ui/src/components/Identicon.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { IconTheme } from '@polkadot/react-identicon/types'; -import type { ThemeProps } from '../types.js'; import React from 'react'; @@ -34,7 +33,7 @@ function Identicon ({ className, iconTheme, onCopy, prefix, value }: Props): Rea ); } -export default styled(Identicon)(({ theme }: ThemeProps) => ` +export default styled(Identicon)` background: rgba(192, 192, 292, 0.25); border-radius: 50%; display: flex; @@ -42,7 +41,7 @@ export default styled(Identicon)(({ theme }: ThemeProps) => ` .container:before { box-shadow: none; - background: ${theme.identiconBackground}; + background: var(--identiconBackground); } svg { @@ -50,4 +49,4 @@ export default styled(Identicon)(({ theme }: ThemeProps) => ` display: none; } } -`); +`; diff --git a/packages/extension-ui/src/components/InputFileWithLabel.tsx b/packages/extension-ui/src/components/InputFileWithLabel.tsx index f5dbe8ea..f5f7d3ab 100644 --- a/packages/extension-ui/src/components/InputFileWithLabel.tsx +++ b/packages/extension-ui/src/components/InputFileWithLabel.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { DropzoneRef } from 'react-dropzone'; -import type { ThemeProps } from '../types.js'; import React, { createRef, useCallback, useState } from 'react'; import Dropzone from 'react-dropzone'; @@ -131,11 +130,11 @@ function InputFile ({ accept, className = '', clearContent, convertHex, isDisabl : dropZone; } -export default React.memo(styled(InputFile)(({ isError, theme }: InputFileProps & ThemeProps) => ` - border: 1px solid ${isError ? theme.errorBorderColor : theme.inputBorderColor}; - background: ${theme.inputBackground}; - border-radius: ${theme.borderRadius}; - color: ${isError ? theme.errorBorderColor : theme.textColor}; +export default React.memo(styled(InputFile)(({ isError }) => ` + border: 1px solid var(${isError ? '--errorBorderColor' : '--inputBorderColor'}); + background: var(--inputBackground); + border-radius: var(--borderRadius); + color: var(${isError ? '--errorBorderColor' : '--textColor'}); font-size: 1rem; margin: 0.25rem 0; overflow-wrap: anywhere; diff --git a/packages/extension-ui/src/components/InputFilter.tsx b/packages/extension-ui/src/components/InputFilter.tsx index 552a42a5..1258cc7a 100644 --- a/packages/extension-ui/src/components/InputFilter.tsx +++ b/packages/extension-ui/src/components/InputFilter.tsx @@ -1,8 +1,6 @@ // Copyright 2017-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import { faTimes } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { useCallback, useRef } from 'react'; @@ -10,7 +8,7 @@ import React, { useCallback, useRef } from 'react'; import { styled } from '../styled.js'; import { Input } from './TextInputs.js'; -interface Props extends ThemeProps { +interface Props { className?: string; onChange: (filter: string) => void; placeholder: string; @@ -54,7 +52,7 @@ function InputFilter ({ className, onChange, placeholder, value, withReset = fal ); } -export default styled(InputFilter)(({ theme }: Props) => ` +export default styled(InputFilter)` padding-left: 1rem !important; padding-right: 1rem !important; position: relative; @@ -63,7 +61,7 @@ export default styled(InputFilter)(({ theme }: Props) => ` position: absolute; right: 28px; top: 12px; - color: ${theme.iconNeutralColor}; + color: var(--iconNeutralColor); cursor: pointer; } -`); +`; diff --git a/packages/extension-ui/src/components/InputWithLabel.tsx b/packages/extension-ui/src/components/InputWithLabel.tsx index aa720c75..40087c16 100644 --- a/packages/extension-ui/src/components/InputWithLabel.tsx +++ b/packages/extension-ui/src/components/InputWithLabel.tsx @@ -80,7 +80,7 @@ function InputWithLabel ({ className, defaultValue, disabled, isError, isFocused ); } -export default styled(InputWithLabel)` +export default styled(InputWithLabel)` margin-bottom: 16px; &.withoutMargin { diff --git a/packages/extension-ui/src/components/Label.tsx b/packages/extension-ui/src/components/Label.tsx index c1200993..ccbdd42a 100644 --- a/packages/extension-ui/src/components/Label.tsx +++ b/packages/extension-ui/src/components/Label.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React from 'react'; import { styled } from '../styled.js'; @@ -22,15 +20,15 @@ function Label ({ children, className, label }: Props): React.ReactElement ` - color: ${theme.textColor}; +export default styled(Label)` + color: var(--textColor); label { - font-size: ${theme.inputLabelFontSize}; + font-size: var(--inputLabelFontSize); line-height: 14px; letter-spacing: 0.04em; opacity: 0.65; margin-bottom: 12px; text-transform: uppercase; } -`); +`; diff --git a/packages/extension-ui/src/components/Link.tsx b/packages/extension-ui/src/components/Link.tsx index eab348aa..8807a1bc 100644 --- a/packages/extension-ui/src/components/Link.tsx +++ b/packages/extension-ui/src/components/Link.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React from 'react'; import { Link as RouterLink } from 'react-router-dom'; @@ -53,21 +51,21 @@ function Link ({ children, className = '', isDisabled, onClick, title, to }: Pro ); } -export default styled(Link)(({ isDanger, theme }: Props & ThemeProps) => ` +export default styled(Link)(({ isDanger }) => ` align-items: center; - color: ${isDanger ? theme.textColorDanger : theme.textColor}; + color: var(${isDanger ? '--textColorDanger' : '--textColor'}); display: flex; opacity: 0.85; text-decoration: none; vertical-align: middle; &:hover { - color: ${isDanger ? theme.textColorDanger : theme.textColor}; + color: var(${isDanger ? '--textColorDanger' : '--textColor'}); opacity: 1.0; } &:visited { - color: ${isDanger ? theme.textColorDanger : theme.textColor}; + color: var(${isDanger ? '--textColorDanger' : '--textColor'}); } &.isDisabled { diff --git a/packages/extension-ui/src/components/List.tsx b/packages/extension-ui/src/components/List.tsx index 4be4c70b..e1f08c90 100644 --- a/packages/extension-ui/src/components/List.tsx +++ b/packages/extension-ui/src/components/List.tsx @@ -1,13 +1,11 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React from 'react'; import { styled } from '../styled.js'; -interface Props extends ThemeProps { +interface Props { className?: string; children: React.ReactNode; } @@ -18,7 +16,7 @@ const List = ({ children, className }: Props) => ( ); -export default styled(List)(({ theme }: ThemeProps) => ` +export default styled(List)` list-style: none; padding-inline-start: 10px; padding-inline-end: 10px; @@ -31,10 +29,10 @@ export default styled(List)(({ theme }: ThemeProps) => ` li::before { content: '\\2022'; - color: ${theme.primaryColor}; + color: var(--primaryColor); font-size: 30px; font-weight: bold; margin-right: 10px; vertical-align: -20%; } -`); +`; diff --git a/packages/extension-ui/src/components/Main.tsx b/packages/extension-ui/src/components/Main.tsx index a3dc1f25..cf80a277 100644 --- a/packages/extension-ui/src/components/Main.tsx +++ b/packages/extension-ui/src/components/Main.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React from 'react'; import { styled } from '../styled.js'; @@ -20,22 +18,22 @@ function Main ({ children, className }: Props): React.ReactElement { ); } -export default styled(Main)(({ theme }: ThemeProps) => ` +export default styled(Main)` display: flex; flex-direction: column; height: calc(100vh - 2px); - background: ${theme.background}; - color: ${theme.textColor}; - font-size: ${theme.fontSize}; - line-height: ${theme.lineHeight}; - border: 1px solid ${theme.inputBorderColor}; + background: var(--background); + color: var(--textColor); + font-size: var(--fontSize); + line-height: var(--lineHeight); + border: 1px solid var(--inputBorderColor); * { - font-family: ${theme.fontFamily}; + font-family: var(--fontFamily); } > * { padding-left: 24px; padding-right: 24px; } -`); +`; diff --git a/packages/extension-ui/src/components/Menu.tsx b/packages/extension-ui/src/components/Menu.tsx index 2c506ee0..4a972be0 100644 --- a/packages/extension-ui/src/components/Menu.tsx +++ b/packages/extension-ui/src/components/Menu.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React from 'react'; import { styled } from '../styled.js'; @@ -24,15 +22,15 @@ function Menu ({ children, className, reference }: Props): React.ReactElement ` - background: ${theme.popupBackground}; +export default styled(Menu)` + background: var(--popupBackground); border-radius: 4px; - border: 1px solid ${theme.boxBorderColor}; + border: 1px solid var(--boxBorderColor); box-sizing: border-box; - box-shadow: 0 0 10px ${theme.boxShadow}; + box-shadow: 0 0 10px var(--boxShadow); margin-top: 60px; padding: 16px 0; position: absolute; right: 0; z-index: 2; -`); +`; diff --git a/packages/extension-ui/src/components/MenuDivider.tsx b/packages/extension-ui/src/components/MenuDivider.tsx index 3bc45413..57e66fcb 100644 --- a/packages/extension-ui/src/components/MenuDivider.tsx +++ b/packages/extension-ui/src/components/MenuDivider.tsx @@ -1,13 +1,11 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React from 'react'; import { styled } from '../styled.js'; -interface Props extends ThemeProps { +interface Props { className?: string; } @@ -17,8 +15,8 @@ function MenuDivider ({ className }: Props): React.ReactElement { ); } -export default styled(MenuDivider)(({ theme }: Props) => ` +export default styled(MenuDivider)` padding-top: 16px; margin-bottom: 16px; - border-bottom: 1px solid ${theme.inputBorderColor}; -`); + border-bottom: 1px solid var(--inputBorderColor); +`; diff --git a/packages/extension-ui/src/components/MenuItem.tsx b/packages/extension-ui/src/components/MenuItem.tsx index ec9369eb..32a8ea71 100644 --- a/packages/extension-ui/src/components/MenuItem.tsx +++ b/packages/extension-ui/src/components/MenuItem.tsx @@ -1,13 +1,11 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; - import React from 'react'; import { styled } from '../styled.js'; -interface Props extends ThemeProps { +interface Props { children: React.ReactNode; className?: string; noBorder?: boolean; @@ -25,7 +23,7 @@ function MenuItem ({ children, className = '', title }: Props): React.ReactEleme ); } -export default styled(MenuItem)(({ theme }: ThemeProps) => ` +export default styled(MenuItem)` min-width: 13rem; padding: 0 16px; max-width: 100%; @@ -33,15 +31,15 @@ export default styled(MenuItem)(({ theme }: ThemeProps) => ` > .itemTitle { margin: 0; width: 100%; - font-size: ${theme.inputLabelFontSize}; + font-size: var(--inputLabelFontSize); line-height: 14px; letter-spacing: 0.04em; text-transform: uppercase; - color: ${theme.textColor}; + color: var(--textColor); opacity: 0.65; } &+&.isTitled { margin-top: 16px; } -`); +`; diff --git a/packages/extension-ui/src/components/MnemonicSeed.tsx b/packages/extension-ui/src/components/MnemonicSeed.tsx index 876baea9..e6ef1d69 100644 --- a/packages/extension-ui/src/components/MnemonicSeed.tsx +++ b/packages/extension-ui/src/components/MnemonicSeed.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { MouseEventHandler } from 'react'; -import type { ThemeProps } from '../types.js'; import { faCopy } from '@fortawesome/free-regular-svg-icons'; import React from 'react'; @@ -44,7 +43,7 @@ function MnemonicSeed ({ className, onCopy, seed }: Props): React.ReactElement

` +export default styled(MnemonicSeed)` margin-bottom: 21px; .buttonsRow { @@ -58,13 +57,13 @@ export default styled(MnemonicSeed)(({ theme }: ThemeProps) => ` .mnemonicDisplay { .seedBox { - color: ${theme.primaryColor}; - font-size: ${theme.fontSize}; + color: var(--primaryColor); + font-size: var(--fontSize); height: unset; letter-spacing: -0.01em; - line-height: ${theme.lineHeight}; + line-height: var(--lineHeight); margin-bottom: 10px; padding: 14px; } } -`); +`; diff --git a/packages/extension-ui/src/components/NextStepButton.tsx b/packages/extension-ui/src/components/NextStepButton.tsx index c1d05076..3a52fdd5 100644 --- a/packages/extension-ui/src/components/NextStepButton.tsx +++ b/packages/extension-ui/src/components/NextStepButton.tsx @@ -1,7 +1,7 @@ // Copyright 2019-2023 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '../types.js'; +import type { ButtonProps } from './Button.js'; import { faArrowRight } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -10,9 +10,7 @@ import React from 'react'; import { styled } from '../styled.js'; import Button from './Button.js'; -type Props = React.ComponentProps; - -function NextStepButton ({ children, ...props }: Props): React.ReactElement { +function NextStepButton ({ children, ...props }: ButtonProps): React.ReactElement { return (