neptune/ghost-keychain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Adjust styles for styled-components 6.x (#1279)

Browse Source 
* Adjust styles for styled-components 6.x

* Additional cleanups

* Cleanups

* Adjust

* styled with <Props>

* Adjust

* Additional

* Theme jiggling

* Non-vars overrides

* Adjust

* Adjust

* Adjust
This commit is contained in:
Jaco 2023-08-20 09:39:29 +03:00 committed by GitHub
parent 2390dc4348
commit 0870570407
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
89 changed files with 2259 additions and 820 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -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"
}
}

2
packages/extension-base/package.json
View File

@ -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"

2
packages/extension-chains/package.json
View File

@ -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": "*",

2
packages/extension-compat-metamask/package.json
View File

@ -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": {

2
packages/extension-dapp/package.json
View File

@ -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": "*",

2
packages/extension-inject/package.json
View File

@ -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",

2
packages/extension-mocks/package.json
View File

@ -19,6 +19,6 @@
"main": "index.js",
"dependencies": {
"sinon-chrome": "^3.0.1",
"tslib": "^2.6.1"
"tslib": "^2.6.2"
}
}

4
packages/extension-ui/package.json
View File

@ -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",

14
packages/extension-ui/src/Popup/Accounts/Account.spec.tsx
View File

@ -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<string, unknown>, theme: Theme = themes.dark): ReactWrapper => mount(
const mountAccountComponent = (additionalAccountProperties: Record<string, unknown>): ReactWrapper => mount(
<MemoryRouter>
<ThemeProvider theme={theme}>
<Account
{...{ address: VALID_ADDRESS, ...additionalAccountProperties }}
>
</Account>
</ThemeProvider>
<Account
{...{ address: VALID_ADDRESS, ...additionalAccountProperties }}
/>
</MemoryRouter>);
it('shows Export option if account is not external', async () => {

9
packages/extension-ui/src/Popup/Accounts/Account.tsx
View File

@ -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)<Props>`
.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;
}
}
`);
`;

2
packages/extension-ui/src/Popup/Accounts/AccountsTree.tsx
View File

@ -44,7 +44,7 @@ function AccountsTree ({ className, parentName, showHidden = true, suri, withChe
);
}
export default styled(AccountsTree)`
export default styled(AccountsTree)<Props>`
.accountWichCheckbox {
display: flex;
align-items: center;

14
packages/extension-ui/src/Popup/Accounts/AddAccount.tsx
View File

@ -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<Props> {
);
}
export default React.memo(styled(AddAccount)(({ theme }: Props) => `
color: ${theme.textColor};
export default React.memo(styled(AddAccount)<Props>`
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);
}
`));
`);

14
packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx
View File

@ -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<Pro
);
}
export default React.memo(styled(AddAccountImage)(({ theme }: Props) => `
export default React.memo(styled(AddAccountImage)<Props>`
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);
}
`));
`);

5
packages/extension-ui/src/Popup/Accounts/index.tsx
View File

@ -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)<Props>`
height: calc(100vh - 2px);
overflow-y: scroll;
margin-top: -25px;

6
packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx
View File

@ -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<Props> {
);
}
export default styled(AccountManagement)`
export default styled(AccountManagement)<Props>`
.accountSelection{
.accountList{
height: 390px;

9
packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx
View File

@ -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)<Props>`
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;
}
`);
`;

5
packages/extension-ui/src/Popup/AuthManagement/index.tsx
View File

@ -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<Props> {
);
}
export default styled(AuthManagement)`
export default styled(AuthManagement)<Props>`
height: calc(100vh - 2px);
overflow-y: auto;

7
packages/extension-ui/src/Popup/Authorize/Authorize.spec.tsx
View File

@ -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) : []
}}
>
<ThemeProvider theme={themes.dark}>
<Authorize />
</ThemeProvider>
<Authorize />
</AccountContext.Provider>
</AuthorizeReqContext.Provider>);

6
packages/extension-ui/src/Popup/Authorize/NoAccount.tsx
View File

@ -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<Props> {
);
}
export default styled(NoAccount)`
export default styled(NoAccount)<Props>`
.acceptButton {
width: 90%;
margin: 25px auto 0;

5
packages/extension-ui/src/Popup/Authorize/Request.tsx
View File

@ -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)<Props>`
.acceptButton {
width: 90%;
margin: .5rem auto 0;

6
packages/extension-ui/src/Popup/Authorize/index.tsx
View File

@ -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)<Props>`
overflow-y: auto;
&.lastRequest {

7
packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx
View File

@ -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(
<ActionContext.Provider value={onActionStub}>
<ThemeProvider theme={themes.dark}>
<CreateAccount />
</ThemeProvider>
<CreateAccount />
</ActionContext.Provider>
);

2
packages/extension-ui/src/Popup/CreateAccount/index.tsx
View File

@ -132,7 +132,7 @@ function CreateAccount ({ className }: Props): React.ReactElement {
);
}
export default styled(CreateAccount)`
export default styled(CreateAccount)<Props>`
margin-bottom: 16px;
label::after {

14
packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx
View File

@ -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)<Props>`
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;
}
}
`);
`;

10
packages/extension-ui/src/Popup/Derive/DerivationPath.tsx
View File

@ -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)<Props>`
> .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%;
}
}
`));
`);

11
packages/extension-ui/src/Popup/Derive/Derive.spec.tsx
View File

@ -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)
}}
>
<ThemeProvider theme={themes.dark}>
<Route path='/account/derive/:address'>
<Derive isLocked={locked} />
</Route>
</ThemeProvider>
<Route path='/account/derive/:address'>
<Derive isLocked={locked} />
</Route>
</AccountContext.Provider>
</ActionContext.Provider>
</MemoryRouter>

7
packages/extension-ui/src/Popup/Export.spec.tsx
View File

@ -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(
<MemoryRouter initialEntries={ [`/account/export/${VALID_ADDRESS}`] }>
<ThemeProvider theme={themes.dark}>
<Route path='/account/export/:address'><Export /></Route>
</ThemeProvider>
<Route path='/account/export/:address'><Export /></Route>
</MemoryRouter>
);
});

3
packages/extension-ui/src/Popup/Export.tsx
View File

@ -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;
}

3
packages/extension-ui/src/Popup/ExportAll.tsx
View File

@ -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;
}

3
packages/extension-ui/src/Popup/Forget.tsx
View File

@ -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;
}

5
packages/extension-ui/src/Popup/ImportLedger.tsx
View File

@ -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)<Props>`
.refreshIcon {
margin-right: 0.3rem;
}

15
packages/extension-ui/src/Popup/ImportSeed/SeedAndPath.tsx
View File

@ -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)<Props>`
.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;
}
`);
`;

9
packages/extension-ui/src/Popup/Metadata/Request.tsx
View File

@ -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)<Props>`
.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;
}
`);
`;

12
packages/extension-ui/src/Popup/PhishingDetected.tsx
View File

@ -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<Props> {
);
}
export default styled(PhishingDetected)(({ theme }: Props) => `
export default styled(PhishingDetected)<Props>`
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;
}
}
`);
`;

2
packages/extension-ui/src/Popup/RestoreJson.tsx
View File

@ -174,7 +174,7 @@ function Upload ({ className }: Props): React.ReactElement {
);
}
export default styled(Upload)`
export default styled(Upload)<Props>`
.restoreButton {
margin-top: 16px;
}

14
packages/extension-ui/src/Popup/Signing/Bytes.tsx
View File

@ -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<Props> {
);
}
export default styled(Bytes)(({ theme }: ThemeProps) => `
export default styled(Bytes)<Props>`
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;
}
`);
`;

2
packages/extension-ui/src/Popup/Signing/LedgerSign.tsx
View File

@ -93,7 +93,7 @@ function LedgerSign ({ accountIndex, addressOffset, className, error, genesisHas
);
}
export default styled(LedgerSign)`
export default styled(LedgerSign)<Props>`
flex-direction: column;
padding: 6px 24px;

2
packages/extension-ui/src/Popup/Signing/Qr.tsx
View File

@ -85,7 +85,7 @@ function Qr ({ address, className, cmd, genesisHash, onSignature, payload }: Pro
);
}
export default styled(Qr)`
export default styled(Qr)<Props>`
height: 100%;
.qrContainer {

2
packages/extension-ui/src/Popup/Signing/Request/SignArea.tsx
View File

@ -130,7 +130,7 @@ function SignArea ({ buttonText, className, error, isExternal, isFirst, setError
);
}
export default styled(SignArea)`
export default styled(SignArea)<Props>`
flex-direction: column;
padding: 6px 24px;

7
packages/extension-ui/src/Popup/Signing/Signing.spec.tsx
View File

@ -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(
<ActionContext.Provider value={onActionStub}>
<ThemeProvider theme={themes.dark}>
<MockRequestsProvider />
</ThemeProvider>
<MockRequestsProvider />
</ActionContext.Provider>
);
await act(flushAllPromises);

22
packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx
View File

@ -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)<Props>`
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);
}
`);
`;

10
packages/extension-ui/src/Popup/Welcome.tsx
View File

@ -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<Props> {
);
}
export default styled(Welcome)(({ theme }: Props) => `
export default styled(Welcome)<Props>`
p {
color: ${theme.subTextColor};
color: var(--subTextColor);
margin-bottom: 6px;
margin-top: 0;
}
`);
`;

8
packages/extension-ui/src/components/AccountNamePasswordCreation.tsx
View File

@ -20,7 +20,13 @@ function AccountNamePasswordCreation ({ buttonLabel, isBusy, onBackClick, onCrea
const [password, setPassword] = useState<string | null>(null);
const _onCreate = useCallback(
() => name && password && onCreate(name, password),
(): void => {
if (name && password) {
Promise
.resolve(onCreate(name, password))
.catch(console.error);
}
},
[name, password, onCreate]
);

2
packages/extension-ui/src/components/ActionBar.tsx
View File

@ -18,7 +18,7 @@ function ActionBar ({ children, className }: Props): React.ReactElement<Props> {
);
}
export default styled(ActionBar)`
export default styled(ActionBar)<Props>`
align-content: flex-end;
display: flex;
justify-content: space-between;

13
packages/extension-ui/src/components/ActionText.tsx
View File

@ -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)<Props>`
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;
}
`);
`;

37
packages/extension-ui/src/components/Address.tsx
View File

@ -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)<Props>`
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);
}
}
`);
`;

12
packages/extension-ui/src/components/BackButton.tsx
View File

@ -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<Props> {
);
}
export default styled(BackButton)(({ theme }: ThemeProps) => `
background: ${theme.backButtonBackground};
export default styled(BackButton)<Props>`
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);
}
`);
`;

22
packages/extension-ui/src/components/Box.tsx
View File

@ -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<Props>
);
}
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)<Props>`
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;
}
`);
`;

16
packages/extension-ui/src/components/BoxWithLabel.tsx
View File

@ -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<P
);
}
export default styled(BoxWithLabel)(({ theme }: ThemeProps) => `
export default styled(BoxWithLabel)<Props>`
.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%;
}
`);
`;

20
packages/extension-ui/src/components/Button.tsx
View File

@ -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<void | boolean>;
onClick?: () => void | Promise<void | boolean> | null;
to?: string;
}
function Button ({ children, className = '', isBusy, isDisabled, onClick, to }: Props): React.ReactElement<Props> {
function Button ({ children, className = '', isBusy, isDisabled, onClick, to }: ButtonProps): React.ReactElement<ButtonProps> {
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)<ButtonProps>(({ 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;

12
packages/extension-ui/src/components/ButtonArea.tsx
View File

@ -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<Props>
);
}
export default styled(ButtonArea)(({ theme }: ThemeProps) => `
export default styled(ButtonArea)<Props>`
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;
}
`);
`;

29
packages/extension-ui/src/components/Checkbox.tsx
View File

@ -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)<Props>`
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)
}
}
`);
`;

31
packages/extension-ui/src/components/Dropdown.tsx
View File

@ -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<Props> {
@ -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 => (
<option
key={value}
value={value}
value={value ?? undefined}
>
{text}
</option>
@ -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)<Props>(({ 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;

2
packages/extension-ui/src/components/Icon.tsx
View File

@ -22,7 +22,7 @@ function Icon ({ className = '', icon, onClick }: Props): React.ReactElement<Pro
);
}
export default styled(Icon)(({ onClick }: Props) => `
export default styled(Icon)<Props>(({ onClick }) => `
background: white;
border-radius: 50%;
box-sizing: border-box;

7
packages/extension-ui/src/components/Identicon.tsx
View File

@ -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)<Props>`
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;
}
}
`);
`;

11
packages/extension-ui/src/components/InputFileWithLabel.tsx
View File

@ -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)<InputFileProps>(({ 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;

10
packages/extension-ui/src/components/InputFilter.tsx
View File

@ -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)<Props>`
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;
}
`);
`;

2
packages/extension-ui/src/components/InputWithLabel.tsx
View File

@ -80,7 +80,7 @@ function InputWithLabel ({ className, defaultValue, disabled, isError, isFocused
);
}
export default styled(InputWithLabel)`
export default styled(InputWithLabel)<Props>`
margin-bottom: 16px;
&.withoutMargin {

10
packages/extension-ui/src/components/Label.tsx
View File

@ -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<Props
);
}
export default styled(Label)(({ theme }: ThemeProps) => `
color: ${theme.textColor};
export default styled(Label)<Props>`
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;
}
`);
`;

10
packages/extension-ui/src/components/Link.tsx
View File

@ -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)<Props>(({ 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 {

10
packages/extension-ui/src/components/List.tsx
View File

@ -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) => (
</ul>
);
export default styled(List)(({ theme }: ThemeProps) => `
export default styled(List)<Props>`
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%;
}
`);
`;

18
packages/extension-ui/src/components/Main.tsx
View File

@ -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<Props> {
);
}
export default styled(Main)(({ theme }: ThemeProps) => `
export default styled(Main)<Props>`
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;
}
`);
`;

12
packages/extension-ui/src/components/Menu.tsx
View File

@ -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<Pr
);
}
export default styled(Menu)(({ theme }: ThemeProps) => `
background: ${theme.popupBackground};
export default styled(Menu)<Props>`
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;
`);
`;

10
packages/extension-ui/src/components/MenuDivider.tsx
View File

@ -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<Props> {
);
}
export default styled(MenuDivider)(({ theme }: Props) => `
export default styled(MenuDivider)<Props>`
padding-top: 16px;
margin-bottom: 16px;
border-bottom: 1px solid ${theme.inputBorderColor};
`);
border-bottom: 1px solid var(--inputBorderColor);
`;

12
packages/extension-ui/src/components/MenuItem.tsx
View File

@ -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)<Props>`
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;
}
`);
`;

11
packages/extension-ui/src/components/MnemonicSeed.tsx
View File

@ -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<P
);
}
export default styled(MnemonicSeed)(({ theme }: ThemeProps) => `
export default styled(MnemonicSeed)<Props>`
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;
}
}
`);
`;

12
packages/extension-ui/src/components/NextStepButton.tsx
View File

@ -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<typeof Button>;
function NextStepButton ({ children, ...props }: Props): React.ReactElement<Props> {
function NextStepButton ({ children, ...props }: ButtonProps): React.ReactElement<ButtonProps> {
return (
<Button {...props}>
{children}
@ -25,11 +23,11 @@ function NextStepButton ({ children, ...props }: Props): React.ReactElement<Prop
);
}
export default styled(NextStepButton)(({ theme }: ThemeProps) => `
export default styled(NextStepButton)<ButtonProps>`
.arrowRight{
float: right;
margin-top: 4px;
margin-right: 1px;
color: ${theme.buttonTextColor};
color: var(--buttonTextColor);
}
`);
`;

12
packages/extension-ui/src/components/RemoveAuth.tsx
View File

@ -1,15 +1,13 @@
// Copyright 2019-2023 @polkadot/extension-ui authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { ThemeProps } from '../types.js';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { styled } from '../styled.js';
interface Props{
interface Props {
className?: string
onRemove: () => void
}
@ -25,12 +23,12 @@ function RemoveAuth ({ className, onRemove }: Props): React.ReactElement {
);
}
export default styled(RemoveAuth)(({ theme }: ThemeProps) => `
export default styled(RemoveAuth)<Props>`
cursor: pointer;
color: ${theme.labelColor};
color: var(--labelColor);
margin-right: 1rem;
&.selected {
color: ${theme.primaryColor};
color: var(--primaryColor);
}
`);
`;

6
packages/extension-ui/src/components/Spinner.tsx
View File

@ -1,14 +1,12 @@
// 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 spinnerSrc from '../assets/spinner.png';
import { styled } from '../styled.js';
interface Props extends ThemeProps {
interface Props {
className?: string;
size?: 'normal';
}
@ -22,7 +20,7 @@ function Spinner ({ className = '', size = 'normal' }: Props): React.ReactElemen
);
}
export default React.memo(styled(Spinner)`
export default React.memo(styled(Spinner)<Props>`
bottom: 0rem;
height: 3rem;
left: 50%;

10
packages/extension-ui/src/components/Svg.tsx
View File

@ -1,21 +1,19 @@
// 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;
src: string;
}
const Svg = ({ className }: Props) => <span className={className} />;
const Svg = ({ className }: Props) => <span className={`Comp--Svg ${className}`} />;
export default styled(Svg)(({ src, theme }: Props) => `
background: ${theme.textColor};
export default styled(Svg)<Props>(({ src }) => `
background: var(--textColor);
display: inline-block;
mask: url(${src});
mask-size: cover;

12
packages/extension-ui/src/components/Switch.tsx
View File

@ -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 { styled } from '../styled.js';
@ -38,7 +36,7 @@ function Switch ({ checked, checkedLabel, className, onChange, uncheckedLabel }:
);
}
export default styled(Switch)(({ theme }: ThemeProps) => `
export default styled(Switch)<Props>`
label {
position: relative;
display: inline-block;
@ -64,10 +62,10 @@ export default styled(Switch)(({ theme }: ThemeProps) => `
left: 0;
right: 0;
bottom: 0;
background-color: ${theme.readonlyInputBackground};
background-color: var(--readonlyInputBackground);
transition: 0.2s;
border-radius: 100px;
border: 1px solid ${theme.inputBorderColor};
border: 1px solid var(--inputBorderColor);
&:before {
position: absolute;
@ -76,9 +74,9 @@ export default styled(Switch)(({ theme }: ThemeProps) => `
width: 16px;
left: 4px;
bottom: 3px;
background-color: ${theme.primaryColor};
background-color: var(--primaryColor);
transition: 0.4s;
border-radius: 50%;
}
}
`);
`;

10
packages/extension-ui/src/components/Table.tsx
View File

@ -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';
@ -23,11 +21,11 @@ function Table ({ children, className = '', isFull }: Props): React.ReactElement
);
}
export default React.memo(styled(Table)(({ theme }: ThemeProps) => `
export default React.memo(styled(Table)<Props>`
border: 0;
display: block;
font-size: ${theme.labelFontSize};
line-height: ${theme.labelLineHeight};
font-size: var(--labelFontSize);
line-height: var(--labelLineHeight);
margin-bottom: 1rem;
&.isFull {
@ -73,4 +71,4 @@ export default React.memo(styled(Table)(({ theme }: ThemeProps) => `
white-space: normal;
}
}
`));
`);

22
packages/extension-ui/src/components/TextInputs.ts
View File

@ -1,26 +1,24 @@
// Copyright 2019-2023 @polkadot/extension-ui authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { ThemeProps } from '../types.js';
import { css } from 'styled-components';
import { styled } from '../styled.js';
interface Props extends ThemeProps {
interface Props {
withError?: boolean;
}
const TextInput = css(({ theme, withError }: Props) => `
background: ${theme.inputBackground};
border-radius: ${theme.borderRadius};
border: 1px solid ${theme.inputBorderColor};
border-color: ${withError ? theme.errorBorderColor : theme.inputBorderColor};
const TextInput = css<Props>(({ withError }) => `
background: var(--inputBackground);
border-radius: var(--borderRadius);
border: 1px solid var(--inputBorderColor);
border-color: var(${withError ? '--errorBorderColor' : '--inputBorderColor'});
box-sizing: border-box;
color: ${withError ? theme.errorColor : theme.textColor};
color: var(${withError ? '--errorColor' : '--textColor'});
display: block;
font-family: ${theme.fontFamily};
font-size: ${theme.fontSize};
font-family: var(--fontFamily);
font-size: var(--fontSize);
height: 40px;
outline: none;
padding: 0.5rem 0.75rem;
@ -28,7 +26,7 @@ const TextInput = css(({ theme, withError }: Props) => `
width: 100%;
&:read-only {
background: ${theme.readonlyInputBackground};
background: var(--readonlyInputBackground);
box-shadow: none;
outline: none;
}

7
packages/extension-ui/src/components/Toast/Toast.tsx
View File

@ -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';
@ -10,6 +8,7 @@ import { styled } from '../../styled.js';
interface Props {
content: React.ReactChild;
className?: string;
visible?: boolean;
}
function Toast ({ className, content }: Props): React.ReactElement<Props> {
@ -20,7 +19,7 @@ function Toast ({ className, content }: Props): React.ReactElement<Props> {
);
}
export default styled(Toast)<{visible: boolean}>`
export default styled(Toast)<Props>`
position: fixed;
display: ${({ visible }): string => visible ? 'block' : 'none'};
height: 40px;
@ -32,6 +31,6 @@ export default styled(Toast)<{visible: boolean}>`
&& {
margin: auto;
border-radius: 25px;
background: ${({ theme }: ThemeProps): string => theme.highlightedAreaBackground};
background: var(--highlightedAreaBackground);
}
`;

2
packages/extension-ui/src/components/VerticalSpace.tsx
View File

@ -13,6 +13,6 @@ function VerticalSpace ({ className }: Props): React.ReactElement<Props> {
return <div className={className} />;
}
export default styled(VerticalSpace)`
export default styled(VerticalSpace)<Props>`
height: 100%;
`;

48
packages/extension-ui/src/components/View.tsx
View File

@ -1,48 +1,44 @@
// Copyright 2019-2023 @polkadot/extension-ui authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { ThemeProps } from '../types.js';
import type { AvailableThemes } from './index.js';
import React, { useCallback, useState } from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import React, { useEffect } from 'react';
import { createGlobalStyle } from 'styled-components';
// FIXME We should not import from index when this one is imported there as well
import { chooseTheme, Main, themes, ThemeSwitchContext } from './index.js';
import { chooseTheme, Main, ThemeSwitchContext } from './index.js';
interface Props {
children: React.ReactNode;
className?: string;
}
function setGlobalTheme (theme: string): void {
const _theme = theme === 'dark'
? 'dark'
: 'light';
localStorage.setItem('theme', _theme);
document?.documentElement?.setAttribute('data-theme', _theme);
}
function View ({ children, className }: Props): React.ReactElement<Props> {
const [theme, setTheme] = useState(chooseTheme());
const switchTheme = useCallback(
(theme: AvailableThemes): void => {
localStorage.setItem('theme', theme);
setTheme(theme);
},
[]
);
const _theme = themes[theme];
useEffect((): void => {
setGlobalTheme(chooseTheme());
}, []);
return (
<ThemeSwitchContext.Provider value={switchTheme}>
<ThemeProvider theme={_theme}>
<BodyTheme theme={_theme} />
<Main className={className}>
{children}
</Main>
</ThemeProvider>
<ThemeSwitchContext.Provider value={setGlobalTheme}>
<BodyTheme />
<Main className={className}>
{children}
</Main>
</ThemeSwitchContext.Provider>
);
}
const BodyTheme = createGlobalStyle<ThemeProps>`
const BodyTheme = createGlobalStyle`
body {
background-color: ${({ theme }: ThemeProps): string => theme.bodyColor};
background-color: var(--bodyColor);
}
html {

18
packages/extension-ui/src/components/Warning.tsx
View File

@ -1,15 +1,13 @@
// Copyright 2019-2023 @polkadot/extension-ui authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { ThemeProps } from '../types.js';
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { styled } from '../styled.js';
interface Props extends ThemeProps {
interface Props {
children: React.ReactNode;
className?: string;
isBelowInput?: boolean;
@ -28,18 +26,18 @@ function Warning ({ children, className = '', isBelowInput, isDanger }: Props):
);
}
export default React.memo(styled(Warning)<Props>(({ isDanger, theme }: Props) => `
export default React.memo(styled(Warning)<Props>(({ isDanger }) => `
display: flex;
flex-direction: row;
padding-left: 18px;
color: ${theme.subTextColor};
color: var(--subTextColor);
margin-right: 20px;
margin-top: 6px;
border-left: ${`0.25rem solid ${theme.iconWarningColor}`};
border-left: 0.25rem solid var(--iconWarningColor);
&.belowInput {
font-size: ${theme.labelFontSize};
line-height: ${theme.labelLineHeight};
font-size: var(--labelFontSize);
line-height: var(--labelLineHeight);
&.danger {
margin-top: -10px;
@ -47,7 +45,7 @@ export default React.memo(styled(Warning)<Props>(({ isDanger, theme }: Props) =>
}
&.danger {
border-left-color: ${theme.buttonBackgroundDanger};
border-left-color: var(--buttonBackgroundDanger);
}
.warning-message {
@ -57,6 +55,6 @@ export default React.memo(styled(Warning)<Props>(({ isDanger, theme }: Props) =>
.warningImage {
margin: 5px 10px 5px 0;
color: ${isDanger ? theme.iconDangerColor : theme.iconWarningColor};
color: var(${isDanger ? '--iconDangerColor' : '--iconWarningColor'});
}
`));

4
packages/extension-ui/src/components/contexts.tsx
View File

@ -3,7 +3,7 @@
import type { AccountsContext, AuthorizeRequest, MetadataRequest, SigningRequest } from '@polkadot/extension-base/background/types';
import type { SettingsStruct } from '@polkadot/ui-settings/types';
import type { AvailableThemes } from './themes';
import type { Theme } from './themes.js';
import React from 'react';
@ -18,7 +18,7 @@ const MediaContext = React.createContext<boolean>(false);
const MetadataReqContext = React.createContext<MetadataRequest[]>([]);
const SettingsContext = React.createContext<SettingsStruct>(settings.get());
const SigningReqContext = React.createContext<SigningRequest[]>([]);
const ThemeSwitchContext = React.createContext<(theme: AvailableThemes) => void>(noop);
const ThemeSwitchContext = React.createContext<(theme: Theme) => void>(noop);
const ToastContext = React.createContext<({show: (message: string) => void})>({ show: noop });
export { AccountContext, ActionContext, AuthorizeReqContext, MediaContext, MetadataReqContext, SettingsContext, SigningReqContext, ThemeSwitchContext, ToastContext };

86
packages/extension-ui/src/components/themes.ts
View File

@ -1,91 +1,11 @@
// Copyright 2019-2023 @polkadot/extension-ui authors & contributors
// SPDX-License-Identifier: Apache-2.0
const darkTheme = {
accountDotsIconColor: '#8E8E8E',
addAccountImageBackground: '#1A1B20',
backButtonBackground: '#3A3B41',
backButtonBackgroundHover: '#3a3b41ad',
backButtonTextColor: '#FFFFFF',
background: '#26272C',
bodyColor: '#20222A',
borderRadius: '4px',
boxBackground: '#1A1B20',
boxBorderColor: '#303030',
boxLineHeight: '1rem',
boxMargin: '0.75rem 0',
boxPadding: '0 0.25rem',
boxShadow: 'rgba(0, 0, 0, 0.86)',
buttonBackground: '#E86F00',
buttonBackgroundDanger: '#AF1111',
buttonBackgroundDangerHover: '#D93B3B',
buttonBackgroundHover: '#ED9329',
buttonTextColor: '#FFFFFF',
connectedDotColor: 'seagreen',
errorBorderColor: '#7E3530',
errorColor: '#E42F2F',
fontFamily: 'Nunito, sans-serif',
fontSize: '16px',
highlightedAreaBackground: '#212226',
iconDangerColor: '#AF1111',
iconNeutralColor: '#8E8E8E',
iconWarningColor: '#FF7D01',
id: 'dark',
identiconBackground: '#F4F5F8',
inputBackground: '#111218',
inputBorderColor: '#43444B',
inputLabelFontSize: '10px',
labelColor: '#9F9E99',
labelFontSize: '13px',
labelLineHeight: '18px',
lineHeight: '26px',
parentLabelColor: '#4A7463',
popupBackground: '#38393F',
primaryColor: '#FF7D01',
readonlyInputBackground: '#1A1B20',
subTextColor: '#DDD',
textColor: '#FFFFFF',
textColorDanger: '#FF8686'
};
export declare type Theme = 'light' | 'dark';
export declare type Theme = typeof darkTheme;
export const themes = ['light', 'dark'] as const;
const lightTheme: Theme = {
...darkTheme,
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',
id: 'light',
inputBackground: '#FFFFFF',
inputBorderColor: '#DDE1EB',
labelColor: '#333333',
parentLabelColor: '#215B4F',
popupBackground: '#FFFFFF',
readonlyInputBackground: '#FFF',
subTextColor: '#454545',
textColor: '#242529',
textColorDanger: '#F24A4A'
};
export const themes = {
dark: darkTheme,
light: lightTheme
};
export declare type AvailableThemes = keyof typeof themes;
export function chooseTheme (): AvailableThemes {
export function chooseTheme (): Theme {
const preferredTheme = localStorage.getItem('theme');
if (preferredTheme) {

10
packages/extension-ui/src/partials/AccountSelection.tsx
View File

@ -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, useMemo, useState } from 'react';
import { Trans } from 'react-i18next';
@ -11,7 +9,7 @@ import { useTranslation } from '../hooks/index.js';
import AccountsTree from '../Popup/Accounts/AccountsTree.js';
import { styled } from '../styled.js';
interface Props extends ThemeProps {
interface Props {
className?: string;
url: string;
origin: string;
@ -92,7 +90,7 @@ function AccounSelection ({ className, origin, showHidden = false, url, withWarn
);
}
export default styled(AccounSelection)(({ theme }: Props) => `
export default styled(AccounSelection)<Props>`
.accountList {
overflow-y: auto;
height: 270px;
@ -100,7 +98,7 @@ export default styled(AccounSelection)(({ theme }: Props) => `
.tab-name,
.tab-url {
color: ${theme.textColor};
color: var(--textColor);
display: inline-block;
max-height: 10rem;
width: 100%;
@ -120,4 +118,4 @@ export default styled(AccounSelection)(({ theme }: Props) => `
width: 100%
}
}
`);
`;

7
packages/extension-ui/src/partials/Header.spec.tsx
View File

@ -11,9 +11,7 @@ import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import enzyme from 'enzyme';
import React from 'react';
import { MemoryRouter } from 'react-router';
import { ThemeProvider } from 'styled-components';
import { themes } from '../components/index.js';
import Header from './Header.js';
import Settings from './MenuSettings.js';
@ -27,10 +25,7 @@ describe('Header component', () => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
const mountHeader = (props: React.ComponentProps<typeof Header> = {}): ReactWrapper => mount(
<MemoryRouter>
<ThemeProvider theme={themes.dark}>
<Header {...props}>
</Header>
</ThemeProvider>
<Header {...props} />
</MemoryRouter>);
it('gear icon is not highlighted when settings are hidden', () => {

28
packages/extension-ui/src/partials/Header.tsx
View File

@ -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, faCog, faPlusCircle, faSearch } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
@ -17,7 +15,7 @@ import { styled } from '../styled.js';
import MenuAdd from './MenuAdd.js';
import MenuSettings from './MenuSettings.js';
interface Props extends ThemeProps {
interface Props {
children?: React.ReactNode;
className?: string;
onFilter?: (filter: string) => void;
@ -187,7 +185,7 @@ function Header ({ children, className = '', onFilter, showAdd, showBackArrow, s
);
}
export default React.memo(styled(Header)(({ theme }: Props) => `
export default React.memo(styled(Header)<Props>`
max-width: 100%;
box-sizing: border-box;
font-weight: normal;
@ -203,15 +201,15 @@ export default React.memo(styled(Header)(({ theme }: Props) => `
display: flex;
justify-content: space-between;
width: 100%;
border-bottom: 1px solid ${theme.inputBorderColor};
border-bottom: 1px solid var(--inputBorderColor);
min-height: 70px;
.branding {
display: flex;
justify-content: center;
align-items: center;
color: ${theme.labelColor};
font-family: ${theme.fontFamily};
color: var(--labelColor);
font-family: var(--fontFamily);
text-align: center;
margin-left: 24px;
@ -222,8 +220,8 @@ export default React.memo(styled(Header)(({ theme }: Props) => `
}
.logoText {
color: ${theme.textColor};
font-family: ${theme.fontFamily};
color: var(--textColor);
font-family: var(--fontFamily);
font-size: 20px;
line-height: 27px;
}
@ -241,14 +239,14 @@ export default React.memo(styled(Header)(({ theme }: Props) => `
}
.connectedAccounts {
border: 1px solid ${theme.inputBorderColor};
border: 1px solid var(--inputBorderColor);
border-radius: 4px;
padding: 0 0.5rem;
.greenDot {
margin-right: 0.3rem;
font-size: 1.5rem;
color: ${theme.connectedDotColor};
color: var(--connectedDotColor);
padding-bottom: 0.2rem;
}
}
@ -291,15 +289,15 @@ export default React.memo(styled(Header)(({ theme }: Props) => `
}
.plusIcon, .cogIcon, .searchIcon {
color: ${theme.iconNeutralColor};
color: var(--iconNeutralColor);
&.selected {
color: ${theme.primaryColor};
color: var(--primaryColor);
}
}
.arrowLeftIcon {
color: ${theme.labelColor};
color: var(--labelColor);
margin-right: 1rem;
cursor: pointer;
}
@ -307,4 +305,4 @@ export default React.memo(styled(Header)(({ theme }: Props) => `
&.smallMargin {
margin-bottom: 15px;
}
`));
`);

20
packages/extension-ui/src/partials/HeaderWithSteps.tsx
View File

@ -1,15 +1,13 @@
// 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, ActionText } from '../components/index.js';
import { styled } from '../styled.js';
import Header from './Header.js';
interface Props extends ThemeProps {
interface Props {
className?: string;
step: number;
text: string;
@ -41,11 +39,11 @@ function HeaderWithSteps ({ className, step, text }: Props): React.ReactElement<
);
}
export default React.memo(styled(HeaderWithSteps)(({ theme }: Props) => `
export default React.memo(styled(HeaderWithSteps)<Props>`
.current {
font-size: ${theme.labelFontSize};
line-height: ${theme.labelLineHeight};
color: ${theme.primaryColor};
font-size: var(--labelFontSize);
line-height: var(--labelLineHeight);
color: var(--primaryColor);
}
.steps {
@ -59,8 +57,8 @@ export default React.memo(styled(HeaderWithSteps)(({ theme }: Props) => `
}
.total {
font-size: ${theme.labelFontSize};
line-height: ${theme.labelLineHeight};
color: ${theme.textColor};
font-size: var(--labelFontSize);
line-height: var(--labelLineHeight);
color: var(--textColor);
}
`));
`);

10
packages/extension-ui/src/partials/MenuAdd.tsx
View File

@ -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 { faUsb } from '@fortawesome/free-brands-svg-icons';
import { faCodeBranch, faFileExport, faFileUpload, faKey, faPlusCircle, faQrcode } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -13,7 +11,7 @@ import { useIsPopup, useLedger, useTranslation } from '../hooks/index.js';
import { windowOpen } from '../messaging.js';
import { styled } from '../styled.js';
interface Props extends ThemeProps {
interface Props {
className?: string;
reference: React.MutableRefObject<null>;
}
@ -128,7 +126,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement<Props> {
);
}
export default React.memo(styled(MenuAdd)(({ theme }: Props) => `
export default React.memo(styled(MenuAdd)<Props>`
margin-top: 50px;
right: 50px; // 24 + 18 + 8
user-select: none;
@ -146,9 +144,9 @@ export default React.memo(styled(MenuAdd)(({ theme }: Props) => `
}
.svg-inline--fa {
color: ${theme.iconNeutralColor};
color: var(--iconNeutralColor);
margin-right: 0.3rem;
width: 0.875em;
}
}
`));
`);

46
packages/extension-ui/src/partials/MenuSettings.tsx
View File

@ -1,15 +1,12 @@
// Copyright 2019-2023 @polkadot/extension-ui authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { Theme, ThemeProps } from '../types.js';
import { faExpand, faTasks } from '@fortawesome/free-solid-svg-icons';
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { ThemeContext } from 'styled-components';
import settings from '@polkadot/ui-settings';
import { ActionContext, ActionText, Checkbox, Dropdown, Menu, MenuDivider, MenuItem, Svg, Switch, themes, ThemeSwitchContext } from '../components/index.js';
import { ActionContext, ActionText, Checkbox, chooseTheme, Dropdown, Menu, MenuDivider, MenuItem, Switch, ThemeSwitchContext } from '../components/index.js';
import { useIsPopup, useTranslation } from '../hooks/index.js';
import { setNotification, windowOpen } from '../messaging.js';
import { styled } from '../styled.js';
@ -20,7 +17,7 @@ interface Option {
value: string;
}
interface Props extends ThemeProps {
interface Props {
className?: string;
reference: React.MutableRefObject<null>;
}
@ -37,8 +34,8 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
const [camera, setCamera] = useState(settings.camera === 'on');
const [prefix, setPrefix] = useState(`${settings.prefix === -1 ? 42 : settings.prefix}`);
const [notification, updateNotification] = useState(settings.notification);
const themeContext = useContext(ThemeContext as React.Context<Theme>);
const setTheme = useContext(ThemeSwitchContext);
const [theme, setTheme] = useState(chooseTheme());
const setThemeContext = useContext(ThemeSwitchContext);
const isPopup = useIsPopup();
const languageOptions = useMemo(() => getLanguageOptions(), []);
const onAction = useContext(ActionContext);
@ -63,9 +60,14 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
}, []
);
const _onChangeTheme = useCallback(
(checked: boolean): void => setTheme(checked ? 'dark' : 'light'),
[setTheme]
const _onSetTheme = useCallback(
(checked: boolean): void => {
const theme = checked ? 'dark' : 'light';
setThemeContext(theme);
setTheme(theme);
},
[setThemeContext]
);
const _onWindowOpen = useCallback(
@ -96,9 +98,9 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
title='Theme'
>
<Switch
checked={themeContext.id === themes.dark.id}
checked={theme === 'dark'}
checkedLabel={t('Dark')}
onChange={_onChangeTheme}
onChange={_onSetTheme}
uncheckedLabel={t('Light')}
/>
</MenuItem>
@ -172,22 +174,22 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
);
}
export default React.memo(styled(MenuSettings)(({ theme }: Props) => `
export default React.memo(styled(MenuSettings)<Props>`
margin-top: 50px;
right: 24px;
user-select: none;
.openWindow, .manageWebsiteAccess{
span {
color: ${theme.textColor};
font-size: ${theme.fontSize};
line-height: ${theme.lineHeight};
color: var(--textColor);
font-size: var(--fontSize);
line-height: var(--lineHeight);
text-decoration: none;
vertical-align: middle;
}
${Svg} {
background: ${theme.textColor};
.Comp--Svg {
background: var(--textColor);
height: 20px;
top: 4px;
width: 20px;
@ -196,7 +198,7 @@ export default React.memo(styled(MenuSettings)(({ theme }: Props) => `
> .setting {
> .checkbox {
color: ${theme.textColor};
color: var(--textColor);
line-height: 20px;
font-size: 15px;
margin-bottom: 0;
@ -206,16 +208,16 @@ export default React.memo(styled(MenuSettings)(({ theme }: Props) => `
}
label {
color: ${theme.textColor};
color: var(--textColor);
}
}
> .dropdown {
background: ${theme.background};
background: var(--background);
margin-bottom: 0;
margin-top: 9px;
margin-right: 0;
width: 100%;
}
}
`));
`);

14
packages/extension-ui/src/styled.ts
View File

@ -1,16 +1,4 @@
// Copyright 2019-2023 @polkadot/extension-ui authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { StyledInterface } from 'styled-components';
import styledComponents from 'styled-components';
// In styled-components v6, there is a named export which can be used
// directly, i.e. "import { styled } from ..." with no more magic. Until
// such time the cjs vs esm import here is problematic, so we hack around
// the various shapes below
export const styled = (
(styledComponents as unknown as { styled: StyledInterface }).styled ||
(styledComponents as unknown as { default: StyledInterface }).default ||
styledComponents as unknown as StyledInterface
);
export { styled } from 'styled-components';

4
packages/extension/package.json
View File

@ -21,10 +21,10 @@
"@polkadot/extension-base": "0.46.6-3-x",
"@polkadot/extension-inject": "0.46.6-3-x",
"@polkadot/extension-ui": "0.46.6-3-x",
"tslib": "^2.6.1"
"tslib": "^2.6.2"
},
"devDependencies": {
"@polkadot/dev": "^0.76.16",
"@polkadot/dev": "^0.76.17",
"browser-resolve": "^2.0.0",
"buffer": "^6.0.3",
"copy-webpack-plugin": "^11.0.0",

77
packages/extension/public/index.html
View File

@ -21,6 +21,83 @@
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;
}
</style>
</head>
<body>

2001
yarn.lock
View File

File diff suppressed because it is too large Load Diff