Use FontAwesome as much as possible (#499)
* header * menuAdd * bring in regular and ActionText * settings menu * replace arrow-left * warning * lock unlock derivation path * fix test Header * fix test Header * alpha ordering * neutral colors for menu icons * Update package.json * add a back button hover color (#502) Co-authored-by: Github Actions <action@github.com> * Update package.json * Apply suggestions from code review Co-authored-by: Jaco Greeff <jacogr@gmail.com> Co-authored-by: Github Actions <action@github.com> Co-authored-by: Jaco Greeff <jacogr@gmail.com>
This commit is contained in:
Thibaut Sardan
co-authored by
Github Actions
Jaco Greeff
Github Actions
Jaco Greeff
parent
95716b7da9
commit
fe4148f12f
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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<Props> {
|
||||
const { t } = useTranslation();
|
||||
const [path, setPath] = useState<string>(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 (
|
||||
<div className={className}>
|
||||
<div className='container'>
|
||||
<PathInput isUnlocked={isDisabled}>
|
||||
<div className={`pathInput ${isDisabled ? 'locked' : ''}`}>
|
||||
<InputWithLabel
|
||||
data-input-suri
|
||||
disabled={!isDisabled}
|
||||
disabled={isDisabled}
|
||||
isError={isError || !path}
|
||||
label={
|
||||
isDisabled
|
||||
? t('Derivation Path')
|
||||
: t('Derivation Path (unlock to edit)')
|
||||
? t('Derivation Path (unlock to edit)')
|
||||
: t('Derivation Path')
|
||||
}
|
||||
onChange={_onChange}
|
||||
placeholder={t<string>('//hard/soft')}
|
||||
value={path}
|
||||
/>
|
||||
</PathInput>
|
||||
<LockButton onClick={_onExpand}>
|
||||
{!isDisabled ? <LockIcon/> : <UnlockIcon/>}
|
||||
</LockButton>
|
||||
</div>
|
||||
<Button
|
||||
className='lockButton'
|
||||
onClick={_onExpand}>
|
||||
<FontAwesomeIcon
|
||||
className='lockIcon'
|
||||
icon={isDisabled ? faLock : faLockOpen}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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%;
|
||||
}
|
||||
}
|
||||
`));
|
||||
|
||||
@@ -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<Props> {
|
||||
const previousClickActive = index !== 0;
|
||||
const nextClickActive = index < totalItems - 1;
|
||||
@@ -32,36 +28,23 @@ function TransactionIndex ({ className, index, onNextClick, onPreviousClick, tot
|
||||
<span className='totalSteps'>/{totalItems}</span>
|
||||
</div>
|
||||
<div>
|
||||
<ArrowLeft
|
||||
isActive={previousClickActive}
|
||||
onClick={(): unknown => previousClickActive && onPreviousClick()}
|
||||
<FontAwesomeIcon
|
||||
className={`arrowLeft ${previousClickActive ? 'active' : ''}`}
|
||||
icon={faArrowLeft}
|
||||
onClick={(): void => { previousClickActive && onPreviousClick(); }}
|
||||
size='sm'
|
||||
/>
|
||||
<ArrowRight
|
||||
isActive={nextClickActive}
|
||||
onClick={(): unknown => nextClickActive && onNextClick()}
|
||||
<FontAwesomeIcon
|
||||
className={`arrowRight ${nextClickActive ? 'active' : ''}`}
|
||||
icon={faArrowRight}
|
||||
onClick={(): void => { nextClickActive && onNextClick(); }}
|
||||
size='sm'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ArrowLeft = styled(Svg).attrs(() => ({ src: ArrowLeftImage }))<ArrowProps>`
|
||||
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};
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 7L1 7" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 13L1 7L7 1" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
Before Width: | Height: | Size: 310 B |
@@ -1,62 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="arrowTopRight.svg"
|
||||
inkscape:version="0.92.3 (2405546, 2018-03-11)">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1137"
|
||||
inkscape:window-height="772"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="22.627417"
|
||||
inkscape:cx="12.76945"
|
||||
inkscape:cy="8.9508825"
|
||||
inkscape:window-x="393"
|
||||
inkscape:window-y="259"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg6" />
|
||||
<path
|
||||
d="M 12.654628,1.3598586 1.3442182,12.66615"
|
||||
id="path2"
|
||||
inkscape:connector-curvature="0"
|
||||
style="stroke:#6c6c6c;stroke-width:2.67733049;stroke-linecap:round;stroke-linejoin:round" />
|
||||
<path
|
||||
d="M 1.2846487,1.363854 12.651896,1.3419767 12.673836,12.673441"
|
||||
id="path4"
|
||||
inkscape:connector-curvature="0"
|
||||
style="stroke:#6c6c6c;stroke-width:2.67507029;stroke-linecap:round;stroke-linejoin:round" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
@@ -1 +0,0 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.7368 12.7273H3.78947V3.81818H10.7368V12.7273ZM10.7368 2.54545H3.78947C3.09474 2.54545 2.52632 3.11818 2.52632 3.81818V12.7273C2.52632 13.4273 3.09474 14 3.78947 14H10.7368C11.4316 14 12 13.4273 12 12.7273V3.81818C12 3.11818 11.4316 2.54545 10.7368 2.54545ZM8.8421 0H1.26316C0.568421 0 0 0.572727 0 1.27273V10.1818H1.26316V1.27273H8.8421V0Z" fill="#8E8E8E"/></svg>
|
||||
|
Before Width: | Height: | Size: 472 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm65.18 216.01H224v80c0 8.84-7.16 16-16 16h-32c-8.84 0-16-7.16-16-16v-80H94.82c-14.28 0-21.41-17.29-11.27-27.36l96.42-95.7c6.65-6.61 17.39-6.61 24.04 0l96.42 95.7c10.15 10.07 3.03 27.36-11.25 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"/></svg>
|
||||
|
Before Width: | Height: | Size: 467 B |
@@ -1 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 14H5V19H10V17H7V14ZM5 10H7V7H10V5H5V10ZM17 17H14V19H19V14H17V17ZM14 5V7H17V10H19V5H14Z" fill="white"/></svg>
|
||||
|
Before Width: | Height: | Size: 256 B |
@@ -1 +0,0 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.031 9.82502L15.0227 9.84169C15.056 9.56669 15.0893 9.28335 15.0893 9.00002C15.0893 8.71669 15.0643 8.45002 15.031 8.17502L15.0393 8.19169L17.0727 6.59169L15.0477 3.07502L12.656 4.04169L12.6643 4.05002C12.231 3.71669 11.756 3.43335 11.2393 3.21669H11.2477L10.8643 0.666687H6.80599L6.43932 3.22502H6.44766C5.93099 3.44169 5.45599 3.72502 5.02266 4.05835L5.03099 4.05002L2.63099 3.07502L0.597656 6.59169L2.63099 8.19169L2.63932 8.17502C2.60599 8.45002 2.58099 8.71669 2.58099 9.00002C2.58099 9.28335 2.60599 9.56669 2.64766 9.84169L2.63932 9.82502L0.889323 11.2L0.614323 11.4167L2.63932 14.9167L5.03932 13.9584L5.02266 13.925C5.46432 14.2667 5.93932 14.55 6.46432 14.7667H6.43932L6.81432 17.3334H10.856C10.856 17.3334 10.881 17.1834 10.906 16.9834L11.2227 14.775H11.2143C11.731 14.5584 12.2143 14.275 12.656 13.9334L12.6393 13.9667L15.0393 14.925L17.0643 11.425C17.0643 11.425 16.9477 11.325 16.7893 11.2084L15.031 9.82502ZM8.83099 11.9167C7.22266 11.9167 5.91432 10.6084 5.91432 9.00002C5.91432 7.39169 7.22266 6.08335 8.83099 6.08335C10.4393 6.08335 11.7477 7.39169 11.7477 9.00002C11.7477 10.6084 10.4393 11.9167 8.83099 11.9167Z" fill="#6C6C6C"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -1 +0,0 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"><g><g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)"><path d="M8291.2,3962.5c-126.1-39.7-191.4-95.7-781.9-683.9L6900,2671.7l-219.4,81.7c-1626.9,609.2-3279.5,329.1-4792-809.9C1393.7,1572.4,796.2,956.1,399.4,412.3C105.3,6.1,60.9-112.9,126.3-313.7c84-245.1,800.6-952.3,1398.2-1379.5c163.4-116.7,543.9-359.5,590.5-375.8c16.3-7-177.4-219.4-429.5-473.9c-252.1-256.8-476.2-497.2-494.8-534.5c-98-193.7-67.7-387.5,86.4-539.2c165.7-168.1,380.5-189.1,578.9-56c135.4,91,6913.8,6878.7,6958.1,6967.4c98,193.7,65.4,387.5-86.4,539.2C8601.6,3962.5,8445.2,4006.9,8291.2,3962.5z M5158.7,2006.5c114.4-53.7,170.4-154,170.4-303.4c0-102.7-11.7-135.4-70-203.1c-81.7-93.4-158.7-121.4-373.5-140c-448.2-39.7-807.6-415.5-863.6-896.3c-23.3-214.7-39.7-256.8-137.7-338.5c-147.1-123.7-392.1-84-492.5,81.7c-102.7,170.4-37.3,606.9,144.7,959.3c130.7,252.1,422.5,550.9,660.6,674.6c156.4,81.7,399.1,168.1,525.2,189.1C4874,2055.5,5081.7,2043.9,5158.7,2006.5z M3111.7,1551.3C2665.8,790.4,2677.5-101.2,3142-820.1l105-161.1L3039.3-1189l-210.1-207.7l-154.1,81.7C2248-1090.9,1655.2-647.4,1305-292.6L1144-126.9l184.4,228.8C1727.5,599,2241,1077.5,2721.9,1399.6c193.7,130.7,420.1,266.1,455.2,273.1C3179.4,1672.7,3151.4,1616.7,3111.7,1551.3z"/><path d="M7843,1560.7l-322.1-322.1l231.1-191.4c280.1-231.1,676.9-637.2,924.3-945.3l184.4-228.8l-196.1-198.4c-658.2-667.6-1598.9-1218.4-2460.2-1440.2c-485.5-126.1-637.2-142.4-1253.4-144.7h-578.9l-373.5-373.5c-205.4-205.4-373.5-380.4-373.5-387.5c0-16.3,427.1-102.7,676.9-135.4c915-119,1923.3,14,2829,373.5c770.3,305.8,1577.9,840.3,2203.4,1461.2c625.6,620.9,681.6,779.6,413.2,1178.7c-224.1,336.1-497.2,669.9-824,1006c-298.8,310.4-697.9,669.9-739.9,669.9C8174.5,1882.8,8020.4,1738.1,7843,1560.7z"/><path d="M5833.3-449L4505.2-1777.1l91-21c49-9.3,242.7-18.7,429.5-16.3c275.4,0,375.8,9.4,534.5,53.7c394.5,105,725.9,298.8,1017.7,595.2C7019-719.8,7245.4-131.6,7212.8,494C7187.1,956.1,7350.5,1068.2,5833.3-449z"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB |
@@ -1 +0,0 @@
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5001 7.09999H9.6001V4.39999C9.6001 2.41999 7.9801 0.799988 6.0001 0.799988C4.0201 0.799988 2.4001 2.41999 2.4001 4.39999V7.09999H1.5001C1.0501 7.09999 0.600098 7.54999 0.600098 7.99999V14.3C0.600098 14.75 1.0501 15.2 1.5001 15.2H10.5001C10.9501 15.2 11.4001 14.75 11.4001 14.3V7.99999C11.4001 7.54999 10.9501 7.09999 10.5001 7.09999ZM6.9001 13.4H5.1001L5.4601 11.42C5.0101 11.24 4.6501 10.7 4.6501 10.25C4.6501 9.52999 5.2801 8.89999 6.0001 8.89999C6.7201 8.89999 7.3501 9.52999 7.3501 10.25C7.3501 10.79 7.0801 11.24 6.5401 11.42L6.9001 13.4ZM7.8001 7.09999H4.2001V4.39999C4.2001 3.40999 5.0101 2.59999 6.0001 2.59999C6.9901 2.59999 7.8001 3.40999 7.8001 4.39999V7.09999Z" fill="#8D8D8D"/></svg>
|
||||
|
Before Width: | Height: | Size: 805 B |
@@ -1,3 +0,0 @@
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve"><path d="M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M38.5,28H28v11c0,1.104-0.896,2-2,2
|
||||
s-2-0.896-2-2V28H13.5c-1.104,0-2-0.896-2-2s0.896-2,2-2H24V14c0-1.104,0.896-2,2-2s2,0.896,2,2v10h10.5c1.104,0,2,0.896,2,2
|
||||
S39.604,28,38.5,28z"/><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
|
||||
|
Before Width: | Height: | Size: 582 B |
@@ -1 +0,0 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0V8H2V10H4V8H8V0H0ZM8 8V10H10V12H6V14H0V22H8V14H14V12H12V10H16V8H18V10H20V8H22V0H14V8H8ZM20 10V12H22V10H20ZM20 12H18V14H20V12ZM20 14V16H22V14H20ZM20 16H18V14H16V16H11V22H13V18H17V20H19V18H20V16ZM17 20H15V22H17V20ZM18 12V10H16V12H18ZM6 12V10H4V12H6ZM2 10H0V12H2V10ZM10 0V4H9V6H10V7H12V4H13V2H12V0H10ZM2 2H6V6H2V2ZM16 2H20V6H16V2ZM3 3V5H5V3H3ZM17 3V5H19V3H17ZM2 16H6V20H2V16ZM3 17V19H5V17H3ZM20 20V22H22V20H20Z" fill="white"/></svg>
|
||||
|
Before Width: | Height: | Size: 538 B |
@@ -1 +0,0 @@
|
||||
<svg id="Capa_1" enable-background="new 0 0 512.007 512.007" height="512" viewBox="0 0 512.007 512.007" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m497.007 281.013h-10v-17c0-34.003-24.032-62.486-56-69.391v-114.609c0-7.717-5.897-14.232-13.627-14.931-1.18-.108-402.547-.147-404.195.052-7.415.907-13.052 7.142-13.167 14.648-.002.145-.064 288.148.054 289.517.566 6.664 5.52 12.22 12.209 13.455 2.166.4-17.056.259 308.726.259v49c0 8.284 6.716 15 15 15h161c8.284 0 15-6.716 15-15v-136c0-8.284-6.716-15-15-15zm-40-17v17h-82v-17c0-22.607 18.393-41 41-41s41 18.393 41 41zm-117.158 17-64.774-56.999 125.932-110.82v81.428c-31.968 6.904-56 35.388-56 69.391v17zm36.407-186-160.274 141.041-161.075-141.041zm-346.249 18.072 126.683 110.926-126.683 110.929zm24.899 239.928 124.553-109.064 26.666 23.349c5.659 4.955 14.126 4.96 19.791-.024l26.453-23.278 68.638 60.398v48.619zm427.101 64h-131v-106h131z"/><path d="m416.007 345.013c-8.284 0-15 6.716-15 15v8c0 8.284 6.716 15 15 15s15-6.716 15-15v-8c0-8.284-6.716-15-15-15z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1 +0,0 @@
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.6001 7.10005H10.5001C10.9501 7.10005 11.4001 7.55005 11.4001 8.00005V14.3C11.4001 14.75 10.9501 15.2 10.5001 15.2H1.5001C1.0501 15.2 0.600098 14.75 0.600098 14.3V8.00005C0.600098 7.55005 1.0501 7.10005 1.5001 7.10005H2.4001V4.40005C2.4001 2.42005 4.0201 0.800049 6.0001 0.800049C7.67121 0.800049 9.08589 1.95403 9.48661 3.50446L7.77075 4.07642C7.61719 3.23946 6.87969 2.60005 6.0001 2.60005C5.0101 2.60005 4.2001 3.41005 4.2001 4.40005V7.10005H7.8001V7.1H9.6001V7.10005ZM5.4601 11.42L5.1001 13.4H6.9001L6.5401 11.42C7.0801 11.24 7.3501 10.79 7.3501 10.25C7.3501 9.53005 6.7201 8.90005 6.0001 8.90005C5.2801 8.90005 4.6501 9.53005 4.6501 10.25C4.6501 10.7 5.0101 11.24 5.4601 11.42Z" fill="#8D8D8D"/></svg>
|
||||
|
Before Width: | Height: | Size: 853 B |
@@ -1 +0,0 @@
|
||||
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.04729 0.808984L0.821115 12.1715C0.427365 12.8816 0.951193 13.75 1.77385 13.75H14.2297C15.0489 13.75 15.5727 12.8816 15.1824 12.1715L8.95276 0.808984C8.54143 0.0636719 7.45861 0.0636719 7.04729 0.808984ZM8.61877 5.52344L8.49221 9.8125H7.50783L7.38127 5.52344H8.61877ZM8.00002 12.1469C7.62385 12.1469 7.32854 11.8621 7.32854 11.5C7.32854 11.1379 7.62385 10.8531 8.00002 10.8531C8.37619 10.8531 8.67151 11.1379 8.67151 11.5C8.67151 11.8621 8.37619 12.1469 8.00002 12.1469Z" fill="#FF5858"/></svg>
|
||||
|
Before Width: | Height: | Size: 601 B |
@@ -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<HTMLDivElement>;
|
||||
text: string;
|
||||
}
|
||||
@@ -21,7 +21,7 @@ function ActionText ({ className, icon, onClick, text }: Props): React.ReactElem
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
{icon && <Svg src={icon} />}
|
||||
{icon && <FontAwesomeIcon icon={icon} />}
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
);
|
||||
@@ -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;
|
||||
}
|
||||
`);
|
||||
|
||||
@@ -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) && (
|
||||
<Svg
|
||||
<FontAwesomeIcon
|
||||
className='externalIcon'
|
||||
src={externalIcon}
|
||||
icon={faExternalLinkSquareAlt}
|
||||
title={t('external account')}
|
||||
/>
|
||||
)}
|
||||
@@ -141,7 +141,10 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
|
||||
? (
|
||||
<>
|
||||
<div className='banner'>
|
||||
<ArrowLabel/>
|
||||
<Svg
|
||||
className='parentArrow'
|
||||
src={parentArrow}
|
||||
/>
|
||||
<div
|
||||
className='parentName'
|
||||
data-field='parent'
|
||||
@@ -175,36 +178,46 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
|
||||
</div>
|
||||
)}
|
||||
<div className='addressDisplay'>
|
||||
<FullAddress data-field='address'>{formatted || t('<unknown>')}</FullAddress>
|
||||
<div
|
||||
className='fullAddress'
|
||||
data-field='address'
|
||||
>
|
||||
{formatted || t('<unknown>')}
|
||||
</div>
|
||||
<CopyToClipboard text={(formatted && formatted) || ''} >
|
||||
<Svg
|
||||
<FontAwesomeIcon
|
||||
icon={faCopy}
|
||||
onClick={_onCopy}
|
||||
src={copyIcon}
|
||||
size='sm'
|
||||
/>
|
||||
</CopyToClipboard>
|
||||
{isHidden && (
|
||||
<Svg
|
||||
<FontAwesomeIcon
|
||||
className='hiddenIcon'
|
||||
src={hiddenIcon}
|
||||
icon={faEyeSlash}
|
||||
size='sm'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{actions && (
|
||||
<>
|
||||
<Settings onClick={_onClick}>
|
||||
{showActionsMenu
|
||||
? <ActiveActionsIcon />
|
||||
: <ActionsIcon />
|
||||
}
|
||||
</Settings>
|
||||
<div
|
||||
className='settings'
|
||||
onClick={_onClick}
|
||||
>
|
||||
<Svg
|
||||
className={`detailsIcon ${showActionsMenu ? 'active' : ''}`}
|
||||
src={details}
|
||||
/>
|
||||
</div>
|
||||
{showActionsMenu && (
|
||||
<MovableMenu
|
||||
isMoved={moveMenuUp}
|
||||
<Menu
|
||||
className={`movableMenu ${moveMenuUp ? 'isMoved' : ''}`}
|
||||
reference={actionsRef}
|
||||
>
|
||||
{actions}
|
||||
</MovableMenu>
|
||||
</Menu>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
@@ -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};
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
@@ -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<Props> {
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Svg
|
||||
<FontAwesomeIcon
|
||||
className='arrowLeft'
|
||||
src={arrowLeft}
|
||||
icon={faArrowLeft}
|
||||
size='sm'
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
@@ -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};
|
||||
}
|
||||
`);
|
||||
|
||||
@@ -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<P
|
||||
<ActionText
|
||||
className='copyBtn'
|
||||
data-seed-action='copy'
|
||||
icon={copy}
|
||||
icon={faCopy}
|
||||
onClick={onCopy}
|
||||
text={t<string>('Copy to clipboard')}
|
||||
/>
|
||||
|
||||
@@ -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<typeof Button>;
|
||||
|
||||
export default function NextStepButton ({ children, ...props }: Props): React.ReactElement<Props> {
|
||||
function NextStepButton ({ children, ...props }: Props): React.ReactElement<Props> {
|
||||
return (
|
||||
<Button {...props}>
|
||||
{children}
|
||||
<ArrowRight />
|
||||
<FontAwesomeIcon
|
||||
className='arrowRight'
|
||||
icon={faArrowRight}
|
||||
size='sm'
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
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};
|
||||
}
|
||||
`);
|
||||
|
||||
@@ -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<Props> {
|
||||
return (
|
||||
<div className={className}>
|
||||
<div>
|
||||
<Svg
|
||||
<FontAwesomeIcon
|
||||
className='warningImage'
|
||||
src={warningImageSrc}
|
||||
icon={faExclamationTriangle}
|
||||
/>
|
||||
</div>
|
||||
<div>{children}</div>
|
||||
@@ -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};
|
||||
}
|
||||
`));
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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;
|
||||
@@ -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<Props> {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<BackLink to={to}>
|
||||
<ArrowLeft />
|
||||
{t<string>('Back')}
|
||||
</BackLink>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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};
|
||||
`));
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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<Props> {
|
||||
const [isAddOpen, setShowAdd] = useState(false);
|
||||
const [isSettingsOpen, setShowSettings] = useState(false);
|
||||
@@ -59,9 +53,15 @@ function Header ({ children, className, showAdd, showBackArrow, showSettings, te
|
||||
<div className='branding'>
|
||||
{showBackArrow
|
||||
? (
|
||||
<BackLink to='/'>
|
||||
<ArrowLeft/>
|
||||
</BackLink>
|
||||
<Link
|
||||
className='backlink'
|
||||
to='/'
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
className='arrowLeftIcon'
|
||||
icon={faArrowLeft}
|
||||
/>
|
||||
</Link>
|
||||
)
|
||||
: (
|
||||
<img
|
||||
@@ -78,7 +78,11 @@ function Header ({ children, className, showAdd, showBackArrow, showSettings, te
|
||||
className='popupToggle'
|
||||
onClick={_toggleAdd}
|
||||
>
|
||||
<Plus isSelected={isAddOpen} />
|
||||
<FontAwesomeIcon
|
||||
className={`plusIcon ${isAddOpen ? 'selected' : ''}`}
|
||||
icon={faPlusCircle}
|
||||
size='lg'
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{showSettings && (
|
||||
@@ -87,7 +91,11 @@ function Header ({ children, className, showAdd, showBackArrow, showSettings, te
|
||||
data-toggle-settings
|
||||
onClick={_toggleSettings}
|
||||
>
|
||||
<Gear isSelected={isSettingsOpen} />
|
||||
<FontAwesomeIcon
|
||||
className={`cogIcon ${isSettingsOpen ? 'selected' : ''}`}
|
||||
icon={faCog}
|
||||
size='lg'
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -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 }))<MenuSelectProps>`
|
||||
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 }))<MenuSelectProps>`
|
||||
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};
|
||||
}
|
||||
|
||||
}
|
||||
`));
|
||||
|
||||
@@ -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<Props> {
|
||||
>
|
||||
<MenuItem className='menuItem'>
|
||||
<Link to={master ? `/account/derive/${master.address}` : '/account/create'}>
|
||||
<Svg src={plusIcon} />
|
||||
<FontAwesomeIcon icon={faPlusCircle} />
|
||||
<span>{
|
||||
master
|
||||
? t('Create new account (root or derived)')
|
||||
@@ -50,7 +48,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement<Props> {
|
||||
<MenuDivider />
|
||||
<MenuItem className='menuItem'>
|
||||
<Link to='/account/import-seed'>
|
||||
<Svg src={seedIcon} />
|
||||
<FontAwesomeIcon icon={faKey} />
|
||||
<span>{t<string>('Import account from pre-existing seed')}</span>
|
||||
</Link>
|
||||
</MenuItem>
|
||||
@@ -59,7 +57,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement<Props> {
|
||||
onClick={isPopup ? _openJson : undefined}
|
||||
to={isPopup ? undefined : jsonPath}
|
||||
>
|
||||
<Svg src={fileIcon} />
|
||||
<FontAwesomeIcon icon={faFileUpload} />
|
||||
<span>{t<string>('Restore account from backup JSON file')}</span>
|
||||
</Link>
|
||||
</MenuItem>
|
||||
@@ -69,7 +67,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement<Props> {
|
||||
isDisabled={!mediaAllowed}
|
||||
to='/account/import-qr'
|
||||
>
|
||||
<Svg src={qrIcon} />
|
||||
<FontAwesomeIcon icon={faQrcode} />
|
||||
<span>{t<string>('Attach external QR-signer account')}</span>
|
||||
</Link>
|
||||
</MenuItem>
|
||||
@@ -77,7 +75,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement<Props> {
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
`);
|
||||
`));
|
||||
|
||||
@@ -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<Prop
|
||||
<MenuItem className='setting'>
|
||||
<ActionText
|
||||
className='openWindow'
|
||||
icon={FullScreenIcon}
|
||||
icon={faExpand}
|
||||
onClick={_onWindowOpen}
|
||||
text={t<string>('Open extension in new window')}
|
||||
/>
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user