diff --git a/package.json b/package.json index 285a5b34..a8beb184 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,10 @@ "webpack-extension-manifest-plugin": "^0.5.0" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.32", + "@fortawesome/free-regular-svg-icons": "^5.15.1", + "@fortawesome/free-solid-svg-icons": "^5.15.1", + "@fortawesome/react-fontawesome": "^0.1.11", "@polkadot/networks": "3.6.0-beta.14" } } diff --git a/packages/extension-ui/src/Popup/Accounts/Account.test.tsx b/packages/extension-ui/src/Popup/Accounts/Account.test.tsx index 763cad9f..065e983a 100644 --- a/packages/extension-ui/src/Popup/Accounts/Account.test.tsx +++ b/packages/extension-ui/src/Popup/Accounts/Account.test.tsx @@ -30,7 +30,7 @@ describe('Account component', () => { it('shows Export option if account is not external', () => { wrapper = mountAccountComponent({ isExternal: false }); - wrapper.find('Details').simulate('click'); + wrapper.find('.settings').first().simulate('click'); expect(wrapper.find('a.menuItem').length).toBe(4); expect(wrapper.find('a.menuItem').at(0).text()).toBe('Rename'); @@ -41,7 +41,7 @@ describe('Account component', () => { it('does not show Export option if account is external', () => { wrapper = mountAccountComponent({ isExternal: true }); - wrapper.find('Details').simulate('click'); + wrapper.find('.settings').first().simulate('click'); expect(wrapper.find('a.menuItem').length).toBe(2); expect(wrapper.find('a.menuItem').at(0).text()).toBe('Rename'); diff --git a/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx b/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx index 6ffb0ab3..2ba636b7 100644 --- a/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx +++ b/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx @@ -3,15 +3,15 @@ import { ThemeProps } from '../../types'; +import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { useCallback, useState } from 'react'; import styled from 'styled-components'; -import lockIcon from '../../assets/lock.svg'; -import unlockIcon from '../../assets/unlock.svg'; -import { InputWithLabel, Svg, Button } from '../../components'; +import { InputWithLabel, Button } from '../../components'; import useTranslation from '../../hooks/useTranslation'; -interface Props { +interface Props extends ThemeProps{ className?: string; defaultPath: string; isError: boolean; @@ -23,7 +23,7 @@ interface Props { function DerivationPath ({ className, defaultPath, isError, onChange }: Props): React.ReactElement { const { t } = useTranslation(); const [path, setPath] = useState(defaultPath); - const [isDisabled, setIsDisabled] = useState(false); + const [isDisabled, setIsDisabled] = useState(true); const _onExpand = useCallback(() => setIsDisabled(!isDisabled), [isDisabled]); @@ -35,72 +35,69 @@ function DerivationPath ({ className, defaultPath, isError, onChange }: Props): return (
- +
('//hard/soft')} value={path} /> - - - {!isDisabled ? : } - +
+
); } -const PathInput = styled.div<{ isUnlocked: boolean }>` - width: 100%; - - & input { - opacity: ${({ isUnlocked }): string => isUnlocked ? '100' : '50'}%; - } -`; - -const LockIcon = styled(Svg).attrs(() => ({ src: lockIcon }))` - width: 11px; - height: 14px; - background: ${({ theme }: ThemeProps) => theme.iconNeutralColor}; -`; - -const UnlockIcon = styled(Svg).attrs(() => ({ src: unlockIcon }))` - width: 11px; - height: 14px; - background: ${({ theme }: ThemeProps) => theme.iconNeutralColor}; -`; - -const LockButton = styled(Button)` - background: none; - height: 14px; - margin: 36px 2px 0 10px; - padding: 3px; - width: 11px; - - &:not(:disabled):hover { - background: none; - } - - &:active, &:focus { - outline: none; - } - - &::-moz-focus-inner { - border: 0; - } -`; - -export default React.memo(styled(DerivationPath)` +export default React.memo(styled(DerivationPath)(({ theme }: Props) => ` > .container { display: flex; flex-direction: row; } -`); + + .lockButton { + background: none; + height: 14px; + margin: 36px 2px 0 10px; + padding: 3px; + width: 11px; + + &:not(:disabled):hover { + background: none; + } + + &:active, &:focus { + outline: none; + } + + &::-moz-focus-inner { + border: 0; + } + } + + .lockIcon { + color: ${theme.iconNeutralColor} + } + + .pathInput { + width: 100%; + + &.locked input { + opacity: 50%; + } + } +`)); diff --git a/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx b/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx index e6814847..ed008aa2 100644 --- a/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx +++ b/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx @@ -6,8 +6,8 @@ import { ThemeProps } from '../../types'; import React from 'react'; import styled from 'styled-components'; -import ArrowLeftImage from '../../assets/arrowLeft.svg'; -import { Svg } from '../../components'; +import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; interface Props { className?: string; @@ -17,10 +17,6 @@ interface Props { onPreviousClick: () => void; } -interface ArrowProps extends ThemeProps { - isActive: boolean; -} - function TransactionIndex ({ className, index, onNextClick, onPreviousClick, totalItems }: Props): React.ReactElement { const previousClickActive = index !== 0; const nextClickActive = index < totalItems - 1; @@ -32,36 +28,23 @@ function TransactionIndex ({ className, index, onNextClick, onPreviousClick, tot /{totalItems}
- previousClickActive && onPreviousClick()} + { previousClickActive && onPreviousClick(); }} + size='sm' /> - nextClickActive && onNextClick()} + { nextClickActive && onNextClick(); }} + size='sm' />
); } -const ArrowLeft = styled(Svg).attrs(() => ({ src: ArrowLeftImage }))` - display: inline-block; - background: ${({ isActive, theme }: ArrowProps): string => isActive ? theme.primaryColor : theme.iconNeutralColor}; - cursor: ${({ isActive }): string => isActive ? 'pointer' : 'default'}; - width: 12px; - height: 12px; -`; - -ArrowLeft.displayName = 'ArrowLeft'; - -const ArrowRight = styled(ArrowLeft)` - margin-left: 6px; - transform: rotate(180deg); -`; - -ArrowRight.displayName = 'ArrowRight'; - export default styled(TransactionIndex)(({ theme }: ThemeProps) => ` align-items: center; display: flex; @@ -69,6 +52,20 @@ export default styled(TransactionIndex)(({ theme }: ThemeProps) => ` flex-grow: 1; padding-right: 24px; + .arrowLeft, .arrowRight { + display: inline-block; + color: ${theme.iconNeutralColor}; + + &.active { + color: ${theme.primaryColor}; + cursor: pointer; + } + } + + .arrowRight { + margin-left: 0.5rem; + } + .currentStep { color: ${theme.primaryColor}; font-size: ${theme.labelFontSize}; diff --git a/packages/extension-ui/src/assets/arrowLeft.svg b/packages/extension-ui/src/assets/arrowLeft.svg deleted file mode 100644 index 23eef33b..00000000 --- a/packages/extension-ui/src/assets/arrowLeft.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/extension-ui/src/assets/arrowTopRight.svg b/packages/extension-ui/src/assets/arrowTopRight.svg deleted file mode 100644 index 4a1476cf..00000000 --- a/packages/extension-ui/src/assets/arrowTopRight.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - diff --git a/packages/extension-ui/src/assets/copy.svg b/packages/extension-ui/src/assets/copy.svg deleted file mode 100644 index 6cecf47c..00000000 --- a/packages/extension-ui/src/assets/copy.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/extension-ui/src/assets/file-upload.svg b/packages/extension-ui/src/assets/file-upload.svg deleted file mode 100644 index 49b0a88d..00000000 --- a/packages/extension-ui/src/assets/file-upload.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/extension-ui/src/assets/fullscreen.svg b/packages/extension-ui/src/assets/fullscreen.svg deleted file mode 100644 index 26886852..00000000 --- a/packages/extension-ui/src/assets/fullscreen.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/extension-ui/src/assets/gear.svg b/packages/extension-ui/src/assets/gear.svg deleted file mode 100644 index 88aeb61c..00000000 --- a/packages/extension-ui/src/assets/gear.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/extension-ui/src/assets/hidden.svg b/packages/extension-ui/src/assets/hidden.svg deleted file mode 100644 index 40e1f663..00000000 --- a/packages/extension-ui/src/assets/hidden.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/extension-ui/src/assets/lock.svg b/packages/extension-ui/src/assets/lock.svg deleted file mode 100644 index 35d6ebab..00000000 --- a/packages/extension-ui/src/assets/lock.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/extension-ui/src/assets/plus.svg b/packages/extension-ui/src/assets/plus.svg deleted file mode 100644 index 985806a0..00000000 --- a/packages/extension-ui/src/assets/plus.svg +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/packages/extension-ui/src/assets/qr.svg b/packages/extension-ui/src/assets/qr.svg deleted file mode 100644 index e4be3a12..00000000 --- a/packages/extension-ui/src/assets/qr.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/extension-ui/src/assets/secret.svg b/packages/extension-ui/src/assets/secret.svg deleted file mode 100644 index 5c3e0fb2..00000000 --- a/packages/extension-ui/src/assets/secret.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/extension-ui/src/assets/unlock.svg b/packages/extension-ui/src/assets/unlock.svg deleted file mode 100644 index 91e7e742..00000000 --- a/packages/extension-ui/src/assets/unlock.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/extension-ui/src/assets/warning.svg b/packages/extension-ui/src/assets/warning.svg deleted file mode 100644 index c1e9de32..00000000 --- a/packages/extension-ui/src/assets/warning.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/extension-ui/src/components/ActionText.tsx b/packages/extension-ui/src/components/ActionText.tsx index bccb35e0..3641990b 100644 --- a/packages/extension-ui/src/components/ActionText.tsx +++ b/packages/extension-ui/src/components/ActionText.tsx @@ -1,16 +1,16 @@ // Copyright 2019-2020 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ThemeProps } from '../types'; +import { IconDefinition } from '@fortawesome/fontawesome-svg-core'; import React, { MouseEventHandler } from 'react'; import styled from 'styled-components'; -import Svg from './Svg'; - interface Props { className?: string; - icon?: string; + icon?: IconDefinition; onClick: MouseEventHandler; text: string; } @@ -21,7 +21,7 @@ function ActionText ({ className, icon, onClick, text }: Props): React.ReactElem className={className} onClick={onClick} > - {icon && } + {icon && } {text} ); @@ -37,13 +37,11 @@ export default styled(ActionText)(({ theme }: ThemeProps) => ` text-decoration-line: underline; } - ${Svg} { - background: ${theme.iconNeutralColor}; + .svg-inline--fa { + color: ${theme.iconNeutralColor}; display: inline-block; - height: 14px; - margin-right: 6px; + margin-right: 0.3rem; position: relative; top: 2px; - width: 14px; } `); diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx index 984aec84..0c2980d0 100644 --- a/packages/extension-ui/src/components/Address.tsx +++ b/packages/extension-ui/src/components/Address.tsx @@ -6,14 +6,14 @@ import { Chain } from '@polkadot/extension-chains/types'; import { SettingsStruct } from '@polkadot/ui-settings/types'; import { ThemeProps } from '../types'; +import { decodeAddress, encodeAddress } from '@polkadot/util-crypto'; +import { faCopy, faEyeSlash } from '@fortawesome/free-regular-svg-icons'; +import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import styled from 'styled-components'; -import { decodeAddress, encodeAddress } from '@polkadot/util-crypto'; -import copyIcon from '../assets/copy.svg'; -import externalIcon from '../assets/arrowTopRight.svg'; -import hiddenIcon from '../assets/hidden.svg'; import details from '../assets/details.svg'; import parentArrow from '../assets/arrowParentLabel.svg'; import { AccountContext, SettingsContext } from './contexts'; @@ -115,9 +115,9 @@ function Address ({ actions, address, children, className, genesisHash, isExtern const displayedName = ( <> {(account?.isExternal || isExternal) && ( - )} @@ -141,7 +141,10 @@ function Address ({ actions, address, children, className, genesisHash, isExtern ? ( <>
- +
)}
- {formatted || t('')} +
+ {formatted || t('')} +
- {isHidden && ( - )}
{actions && ( <> - - {showActionsMenu - ? - : - } - +
+ +
{showActionsMenu && ( - {actions} - + )} )} @@ -214,69 +227,6 @@ function Address ({ actions, address, children, className, genesisHash, isExtern ); } -const FullAddress = styled.div(({ theme }: ThemeProps) => ` - overflow: hidden; - text-overflow: ellipsis; - color: ${theme.labelColor}; - font-size: 12px; - line-height: 16px; -`); - -FullAddress.displayName = 'FullAddress'; - -const Settings = styled.div(({ theme }: ThemeProps) => ` - position: relative; - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 40px; - - & ${Svg} { - width: 3px; - height: 19px; - } - - &:before { - content: ''; - position: absolute; - left: 0; - top: 25%; - bottom: 25%; - width: 1px; - background: ${theme.boxBorderColor}; - } - - &:hover { - cursor: pointer; - background: ${theme.readonlyInputBackground}; - } -`); - -Settings.displayName = 'Details'; - -const ActionsIcon = styled(Svg).attrs(() => ({ src: details }))` - background: ${({ theme }: ThemeProps): string => theme.accountDotsIconColor}; -`; - -const ActiveActionsIcon = styled(Svg).attrs(() => ({ src: details }))` - background: ${({ theme }: ThemeProps): string => theme.primaryColor}; -`; - -const ArrowLabel = styled(Svg).attrs(() => ({ src: parentArrow }))` - background: ${({ theme }: ThemeProps): string => theme.labelColor}; - position: absolute; - top: 5px; - width: 9px; - height: 9px; -`; - -const MovableMenu = styled(Menu)<{ isMoved: boolean }>` - ${({ isMoved }): string => isMoved ? 'bottom: 0;' : 'top: 0;'} - margin-top: -20px; - right: 28px; -`; - export default styled(Address)(({ theme }: ThemeProps) => ` background: ${theme.accountBackground}; border: 1px solid ${theme.boxBorderColor}; @@ -306,13 +256,13 @@ export default styled(Address)(({ theme }: ThemeProps) => ` justify-content: space-between; position: relative; - & ${Svg} { + .svg-inline--fa { width: 14px; height: 14px; margin-right: 10px; - background: ${theme.accountDotsIconColor}; + color: ${theme.accountDotsIconColor}; &:hover { - background: ${theme.labelColor}; + color: ${theme.labelColor}; cursor: pointer; } } @@ -325,10 +275,8 @@ export default styled(Address)(({ theme }: ThemeProps) => ` } .externalIcon { - height: 10px; - width: 10px; - margin-right: 0.5rem; - background: ${theme.labelColor} + margin-right: 0.3rem; + color: ${theme.labelColor} } .identityIcon { @@ -378,4 +326,65 @@ export default styled(Address)(({ theme }: ThemeProps) => ` text-overflow: ellipsis; width: 270px; } + + .fullAddress { + overflow: hidden; + text-overflow: ellipsis; + color: ${theme.labelColor}; + font-size: 12px; + line-height: 16px; + } + + .detailsIcon { + background: ${theme.accountDotsIconColor}; + width: 3px; + height: 19px; + + &.active { + background: ${theme.primaryColor}; + } + } + + .parentArrow { + background: ${theme.labelColor}; + position: absolute; + top: 5px; + width: 9px; + height: 9px; + } + + .movableMenu { + margin-top: -20px; + right: 28px; + top: 0; + + &.isMoved { + top: auto; + bottom: 0; + } + } + + .settings { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 40px; + + &:before { + content: ''; + position: absolute; + left: 0; + top: 25%; + bottom: 25%; + width: 1px; + background: ${theme.boxBorderColor}; + } + + &:hover { + cursor: pointer; + background: ${theme.readonlyInputBackground}; + } + } `); diff --git a/packages/extension-ui/src/components/BackButton.tsx b/packages/extension-ui/src/components/BackButton.tsx index 4a98d1ce..4d7bebc0 100644 --- a/packages/extension-ui/src/components/BackButton.tsx +++ b/packages/extension-ui/src/components/BackButton.tsx @@ -3,12 +3,12 @@ import { ThemeProps } from '../types'; +import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; import styled from 'styled-components'; -import arrowLeft from '../assets/arrowLeft.svg'; import Button from './Button'; -import Svg from './Svg'; interface Props { className?: string; @@ -21,9 +21,10 @@ function BackButton ({ className, onClick }: Props): React.ReactElement { className={className} onClick={onClick} > - ); @@ -35,10 +36,12 @@ export default styled(BackButton)(({ theme }: ThemeProps) => ` width: 42px; .arrowLeft { - background: ${theme.backButtonTextColor}; + color: ${theme.backButtonTextColor}; display: block; - height: 12px; margin: auto; - width: 12px; + } + + &:not(:disabled):hover { + background: ${theme.backButtonBackgroundHover}; } `); diff --git a/packages/extension-ui/src/components/MnemonicSeed.tsx b/packages/extension-ui/src/components/MnemonicSeed.tsx index ec7385c5..c38911db 100644 --- a/packages/extension-ui/src/components/MnemonicSeed.tsx +++ b/packages/extension-ui/src/components/MnemonicSeed.tsx @@ -3,10 +3,10 @@ import { ThemeProps } from '../types'; +import { faCopy } from '@fortawesome/free-regular-svg-icons'; import React, { MouseEventHandler } from 'react'; import styled from 'styled-components'; -import copy from '../assets/copy.svg'; import useTranslation from '../hooks/useTranslation'; import ActionText from './ActionText'; import TextAreaWithLabel from './TextAreaWithLabel'; @@ -32,7 +32,7 @@ function MnemonicSeed ({ className, onCopy, seed }: Props): React.ReactElement

('Copy to clipboard')} /> diff --git a/packages/extension-ui/src/components/NextStepButton.tsx b/packages/extension-ui/src/components/NextStepButton.tsx index 83bef2f9..230b7cf8 100644 --- a/packages/extension-ui/src/components/NextStepButton.tsx +++ b/packages/extension-ui/src/components/NextStepButton.tsx @@ -3,29 +3,33 @@ import { ThemeProps } from '../types'; +import { faArrowRight } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; import styled from 'styled-components'; -import arrowLeft from '../assets/arrowLeft.svg'; -import Svg from './Svg'; import Button from './Button'; type Props = React.ComponentProps; -export default function NextStepButton ({ children, ...props }: Props): React.ReactElement { +function NextStepButton ({ children, ...props }: Props): React.ReactElement { return ( ); } -const ArrowRight = styled(Svg).attrs(() => ({ src: arrowLeft }))` - float: right; - width: 12px; - height: 12px; - margin: 4px 1px 0 0; - transform: rotate(180deg); - background: ${({ theme }: ThemeProps): string => theme.buttonTextColor}; -`; +export default styled(NextStepButton)(({ theme }: ThemeProps) => ` + .arrowRight{ + float: right; + margin-top: 4px; + margin-right: 1px; + color: ${theme.buttonTextColor}; + } +`); diff --git a/packages/extension-ui/src/components/Warning.tsx b/packages/extension-ui/src/components/Warning.tsx index 68cc416b..0bf48869 100644 --- a/packages/extension-ui/src/components/Warning.tsx +++ b/packages/extension-ui/src/components/Warning.tsx @@ -6,8 +6,8 @@ import { ThemeProps } from '../types'; import React from 'react'; import styled from 'styled-components'; -import warningImageSrc from '../assets/warning.svg'; -import Svg from './Svg'; +import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; interface Props extends ThemeProps { children: React.ReactNode; @@ -19,9 +19,9 @@ function Warning ({ children, className }: Props): React.ReactElement { return (

-
{children}
@@ -38,9 +38,7 @@ export default React.memo(styled(Warning)(({ isDanger, theme }: Props) => ` border-left: ${isDanger ? `0.25rem solid ${theme.buttonBackgroundDanger}` : ''}; .warningImage { - width: 16px; - height: 14px; margin: 5px 10px 5px 0; - background: ${isDanger ? theme.iconDangerColor : theme.iconWarningColor}; + color: ${isDanger ? theme.iconDangerColor : theme.iconWarningColor}; } `)); diff --git a/packages/extension-ui/src/components/themes.ts b/packages/extension-ui/src/components/themes.ts index 432a71c1..39d20ebd 100644 --- a/packages/extension-ui/src/components/themes.ts +++ b/packages/extension-ui/src/components/themes.ts @@ -6,6 +6,7 @@ const darkTheme = { accountDotsIconColor: '#8E8E8E', addAccountImageBackground: '#1A1B20', backButtonBackground: '#3A3B41', + backButtonBackgroundHover: '#3a3b41ad', backButtonTextColor: '#FFFFFF', background: '#26272C', bodyColor: '#20222A', @@ -51,6 +52,7 @@ const lightTheme: Theme = { accountBackground: '#FFFFFF', addAccountImageBackground: '#FFF', backButtonBackground: '#D7D7D7', + backButtonBackgroundHover: '#d7d7d7ad', backButtonTextColor: '#454545', background: '#FAFAFA', bodyColor: '#FFFFFF', diff --git a/packages/extension-ui/src/components/unicode.tsx b/packages/extension-ui/src/components/unicode.tsx deleted file mode 100644 index 77b9ae1b..00000000 --- a/packages/extension-ui/src/components/unicode.tsx +++ /dev/null @@ -1,14 +0,0 @@ -// Copyright 2019-2020 @polkadot/extension-ui authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -// via http://www.amp-what.com/unicode/search/ (in hex) - -const unicode = { - BACK: '\u21E6', // ⇦ - DOWN: '\u21E9', // ⇩ - FWD: '\u21E8', // ⇨ - GEAR: '\u2699', // ⚙ - UP: '\u21E7' // ⇧ -}; - -export default unicode; diff --git a/packages/extension-ui/src/partials/Back.tsx b/packages/extension-ui/src/partials/Back.tsx deleted file mode 100644 index 7d7935fa..00000000 --- a/packages/extension-ui/src/partials/Back.tsx +++ /dev/null @@ -1,53 +0,0 @@ -// Copyright 2019-2020 @polkadot/extension-ui authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -import { ThemeProps } from '../types'; - -import React from 'react'; -import styled from 'styled-components'; - -import ArrowLeftImage from '../assets/arrowLeft.svg'; -import useTranslation from '../hooks/useTranslation'; -import { Link, Svg } from '../components'; - -interface Props extends ThemeProps { - className?: string; - to?: string; -} - -function Back ({ className, to = '/' }: Props): React.ReactElement { - const { t } = useTranslation(); - - return ( -
- - - {t('Back')} - -
- ); -} - -const ArrowLeft = styled(Svg).attrs(() => ({ src: ArrowLeftImage }))` - width: 12px; - height: 12px; - margin-right: 13px; - background: ${({ theme }: ThemeProps) => theme.labelColor}; -`; - -const BackLink = styled(Link)` - width: min-content; - text-decoration: underline; - color: ${({ theme }: ThemeProps) => theme.labelColor}; - - &:visited { - color: ${({ theme }: ThemeProps) => theme.labelColor}; - } -`; - -export default React.memo(styled(Back)(({ theme }: Props) => ` - margin: 0; - line-height: 52px; - border-bottom: 1px solid ${theme.inputBorderColor}; - font-size: ${theme.labelFontSize}; -`)); diff --git a/packages/extension-ui/src/partials/Header.test.tsx b/packages/extension-ui/src/partials/Header.test.tsx index 7b8b5d28..622495fc 100644 --- a/packages/extension-ui/src/partials/Header.test.tsx +++ b/packages/extension-ui/src/partials/Header.test.tsx @@ -30,7 +30,7 @@ describe('Header component', () => { wrapper = mountHeader({ showSettings: true }); expect(wrapper.find(Settings).length).toBe(0); - expect(wrapper.find('Gear').prop('isSelected')).toBe(false); + expect(wrapper.find('.cogIcon').first().hasClass('selected')).toBe(false); }); it('highlights gear icon when settings are toggled', () => { @@ -39,6 +39,6 @@ describe('Header component', () => { wrapper.find('div[data-toggle-settings]').simulate('click'); expect(wrapper.find(Settings).length).toBe(1); - expect(wrapper.find('Gear').prop('isSelected')).toBe(true); + expect(wrapper.find('.cogIcon').first().hasClass('selected')).toBe(true); }); }); diff --git a/packages/extension-ui/src/partials/Header.tsx b/packages/extension-ui/src/partials/Header.tsx index f52f4a43..c898586f 100644 --- a/packages/extension-ui/src/partials/Header.tsx +++ b/packages/extension-ui/src/partials/Header.tsx @@ -3,15 +3,13 @@ import { ThemeProps } from '../types'; +import { faArrowLeft, faCog, faPlusCircle } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { useCallback, useRef, useState } from 'react'; import styled from 'styled-components'; -import ArrowLeftImage from '../assets/arrowLeft.svg'; -import gear from '../assets/gear.svg'; -import plus from '../assets/plus.svg'; import logo from '../assets/pjs.svg'; import Link from '../components/Link'; -import Svg from '../components/Svg'; import useOutsideClick from '../hooks/useOutsideClick'; import MenuAdd from './MenuAdd'; import MenuSettings from './MenuSettings'; @@ -25,10 +23,6 @@ interface Props extends ThemeProps { text?: React.ReactNode; } -interface MenuSelectProps { - isSelected: boolean; -} - function Header ({ children, className, showAdd, showBackArrow, showSettings, text }: Props): React.ReactElement { const [isAddOpen, setShowAdd] = useState(false); const [isSettingsOpen, setShowSettings] = useState(false); @@ -59,9 +53,15 @@ function Header ({ children, className, showAdd, showBackArrow, showSettings, te
{showBackArrow ? ( - - - + + + ) : ( - +
)} {showSettings && ( @@ -87,7 +91,11 @@ function Header ({ children, className, showAdd, showBackArrow, showSettings, te data-toggle-settings onClick={_toggleSettings} > - +
)}
@@ -103,38 +111,6 @@ function Header ({ children, className, showAdd, showBackArrow, showSettings, te ); } -const BackLink = styled(Link)` - color: ${({ theme }: ThemeProps) => theme.labelColor}; - min-height: 52px; - text-decoration: underline; - width: min-content; - - &:visited { - color: ${({ theme }: ThemeProps) => theme.labelColor}; - } -`; - -const ArrowLeft = styled(Svg).attrs(() => ({ src: ArrowLeftImage }))` - background: ${({ theme }: ThemeProps) => theme.labelColor}; - width: 12px; - height: 12px; - margin-right: 13px; -`; - -const Gear = styled(Svg).attrs(() => ({ src: gear }))` - background: ${({ isSelected, theme }: ThemeProps & MenuSelectProps): string => isSelected ? theme.primaryColor : theme.iconNeutralColor}; - height: 22px; - width: 22px; -`; - -Gear.displayName = 'Gear'; - -const Plus = styled(Svg).attrs(() => ({ src: plus }))` - background: ${({ isSelected, theme }: ThemeProps & MenuSelectProps): string => isSelected ? theme.primaryColor : theme.iconNeutralColor}; - height: 22px; - width: 22px; -`; - export default React.memo(styled(Header)(({ theme }: Props) => ` max-width: 100%; box-sizing: border-box; @@ -198,4 +174,29 @@ export default React.memo(styled(Header)(({ theme }: Props) => ` } } } + + .plusIcon, .cogIcon { + color: ${theme.iconNeutralColor}; + + &.selected { + color: ${theme.primaryColor}; + } + } + + .arrowLeftIcon { + color: ${theme.labelColor}; + margin-right: 1rem; + } + + .backlink { + color: ${theme.labelColor}; + min-height: 52px; + text-decoration: underline; + width: min-content; + + &:visited { + color: ${theme.labelColor}; + } + + } `)); diff --git a/packages/extension-ui/src/partials/MenuAdd.tsx b/packages/extension-ui/src/partials/MenuAdd.tsx index 6c35f986..2ccea0be 100644 --- a/packages/extension-ui/src/partials/MenuAdd.tsx +++ b/packages/extension-ui/src/partials/MenuAdd.tsx @@ -3,14 +3,12 @@ import { ThemeProps } from '../types'; +import { faPlusCircle, faFileUpload, faKey, faQrcode } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { useCallback, useContext } from 'react'; import styled from 'styled-components'; -import fileIcon from '../assets/file-upload.svg'; -import plusIcon from '../assets/plus.svg'; -import qrIcon from '../assets/qr.svg'; -import seedIcon from '../assets/secret.svg'; -import { AccountContext, Link, MediaContext, Menu, MenuDivider, MenuItem, Svg } from '../components'; +import { AccountContext, Link, MediaContext, Menu, MenuDivider, MenuItem } from '../components'; import useIsPopup from '../hooks/useIsPopup'; import useTranslation from '../hooks/useTranslation'; import { windowOpen } from '../messaging'; @@ -39,7 +37,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement { > - + { master ? t('Create new account (root or derived)') @@ -50,7 +48,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement { - + {t('Import account from pre-existing seed')} @@ -59,7 +57,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement { onClick={isPopup ? _openJson : undefined} to={isPopup ? undefined : jsonPath} > - + {t('Restore account from backup JSON file')} @@ -69,7 +67,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement { isDisabled={!mediaAllowed} to='/account/import-qr' > - + {t('Attach external QR-signer account')} @@ -77,7 +75,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement { ); } -export default React.memo(styled(MenuAdd)` +export default React.memo(styled(MenuAdd)(({ theme }: Props) => ` margin-top: 50px; right: 50px; // 24 + 18 + 8 user-select: none; @@ -93,5 +91,10 @@ export default React.memo(styled(MenuAdd)` span { vertical-align: middle; } + + .svg-inline--fa { + color: ${theme.iconNeutralColor}; + margin-right: 0.3rem; + } } -`); +`)); diff --git a/packages/extension-ui/src/partials/MenuSettings.tsx b/packages/extension-ui/src/partials/MenuSettings.tsx index 7092e5d0..db9d4083 100644 --- a/packages/extension-ui/src/partials/MenuSettings.tsx +++ b/packages/extension-ui/src/partials/MenuSettings.tsx @@ -3,11 +3,11 @@ import { Theme, ThemeProps } from '../types'; +import settings from '@polkadot/ui-settings'; +import { faExpand } from '@fortawesome/free-solid-svg-icons'; import React, { useCallback, useContext, useEffect, useState, useMemo } from 'react'; import styled, { ThemeContext } from 'styled-components'; -import settings from '@polkadot/ui-settings'; -import FullScreenIcon from '../assets/fullscreen.svg'; import { ActionText, Checkbox, Dropdown, Menu, MenuDivider, MenuItem, Svg, Switch, ThemeSwitchContext, themes } from '../components'; import useIsPopup from '../hooks/useIsPopup'; import useTranslation from '../hooks/useTranslation'; @@ -126,7 +126,7 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement ('Open extension in new window')} /> diff --git a/packages/extension-ui/src/partials/index.ts b/packages/extension-ui/src/partials/index.ts index 274b3575..34321555 100644 --- a/packages/extension-ui/src/partials/index.ts +++ b/packages/extension-ui/src/partials/index.ts @@ -1,7 +1,6 @@ // Copyright 2019-2020 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -export { default as Back } from './Back'; export { default as Header } from './Header'; export { default as MenuSettings } from './MenuSettings'; export { default as Name } from './Name'; diff --git a/yarn.lock b/yarn.lock index e7f8bc56..b7097bb7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1492,6 +1492,52 @@ __metadata: languageName: node linkType: hard +"@fortawesome/fontawesome-common-types@npm:^0.2.32": + version: 0.2.32 + resolution: "@fortawesome/fontawesome-common-types@npm:0.2.32" + checksum: a3654c397d9fb62edb7a6070220d18f55ec1fbc16aec14ea0c4c425e626589fcde6534eb61346e145ef07922221514646923695d536d17d754b50dfe3ca66dc6 + languageName: node + linkType: hard + +"@fortawesome/fontawesome-svg-core@npm:^1.2.32": + version: 1.2.32 + resolution: "@fortawesome/fontawesome-svg-core@npm:1.2.32" + dependencies: + "@fortawesome/fontawesome-common-types": ^0.2.32 + checksum: 0fd346935c42fbf37eaf19f2a0b7e5f5f6da0a922d9b44326b3db44602143334885ad0fed29c26ce56f5fd54616023655f8a1f0316c68161fd2779ce94756d4b + languageName: node + linkType: hard + +"@fortawesome/free-regular-svg-icons@npm:^5.15.1": + version: 5.15.1 + resolution: "@fortawesome/free-regular-svg-icons@npm:5.15.1" + dependencies: + "@fortawesome/fontawesome-common-types": ^0.2.32 + checksum: 5f1c0838a36f331a040bbb2dd7b27d94ab08550c8be0ece3a855e7d83665f1179a0c794aba494ace520153589a542e97bd465b7a8e120126b85f813bf8c63e26 + languageName: node + linkType: hard + +"@fortawesome/free-solid-svg-icons@npm:^5.15.1": + version: 5.15.1 + resolution: "@fortawesome/free-solid-svg-icons@npm:5.15.1" + dependencies: + "@fortawesome/fontawesome-common-types": ^0.2.32 + checksum: ca31ed2dbfcb9fb08c785f41768313ff6dd4570f1eca5cde8c3b2de6656fb58492c3b5474e2d9453d6e90214f6e4621d73bf50cf73c0bfc6b4257caaeea16860 + languageName: node + linkType: hard + +"@fortawesome/react-fontawesome@npm:^0.1.11": + version: 0.1.11 + resolution: "@fortawesome/react-fontawesome@npm:0.1.11" + dependencies: + prop-types: ^15.7.2 + peerDependencies: + "@fortawesome/fontawesome-svg-core": ^1.2.20 + react: 16.x + checksum: ede137d0f7d205295d30caeaabb1651f2d60ee2adcefda14578e4259c2c80e8ca47a4f1f6c4a22cca98d6acb19e8cfa3357e3c5dd3897fcc48269a93b1104af6 + languageName: node + linkType: hard + "@istanbuljs/load-nyc-config@npm:^1.0.0": version: 1.1.0 resolution: "@istanbuljs/load-nyc-config@npm:1.1.0" @@ -13701,6 +13747,10 @@ fsevents@^1.2.7: resolution: "root-workspace-0b6124@workspace:." dependencies: "@babel/core": ^7.11.6 + "@fortawesome/fontawesome-svg-core": ^1.2.32 + "@fortawesome/free-regular-svg-icons": ^5.15.1 + "@fortawesome/free-solid-svg-icons": ^5.15.1 + "@fortawesome/react-fontawesome": ^0.1.11 "@polkadot/dev": ^0.58.1 "@polkadot/networks": 3.6.0-beta.14 "@types/jest": ^26.0.14