diff --git a/packages/extension-ui/src/Popup/Derive/Derive.test.tsx b/packages/extension-ui/src/Popup/Derive/Derive.test.tsx index 9316b330..c9e42b53 100644 --- a/packages/extension-ui/src/Popup/Derive/Derive.test.tsx +++ b/packages/extension-ui/src/Popup/Derive/Derive.test.tsx @@ -150,7 +150,7 @@ describe('Derive', () => { it('selects internal root accounts as other options', async () => { const { wrapper } = await mountComponent(); - const options = wrapper.find('[data-parent-option] [data-field="name"] div').map((el) => el.text()); + const options = wrapper.find('[data-parent-option] [data-field="name"]').map((el) => el.text()); expect(options).toEqual(['A', 'B', 'D']); }); diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx index e27367de..6ccbf9a0 100644 --- a/packages/extension-ui/src/Popup/Forget.tsx +++ b/packages/extension-ui/src/Popup/Forget.tsx @@ -36,7 +36,7 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement< />
- + You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed. diff --git a/packages/extension-ui/src/Popup/RestoreJson.tsx b/packages/extension-ui/src/Popup/RestoreJson.tsx index 2620f675..ccb5f7ec 100644 --- a/packages/extension-ui/src/Popup/RestoreJson.tsx +++ b/packages/extension-ui/src/Popup/RestoreJson.tsx @@ -54,8 +54,10 @@ export default function Upload (): React.ReactElement { ); const _onChangeFile = useCallback( - async (file: Uint8Array): Promise => { - setJson(await parseFile(file)); + (file: Uint8Array): void => { + parseFile(file) + .then(setJson) + .catch(console.error); }, [] ); diff --git a/packages/extension-ui/src/components/ActionText.tsx b/packages/extension-ui/src/components/ActionText.tsx index 4ebe49a7..7c000641 100644 --- a/packages/extension-ui/src/components/ActionText.tsx +++ b/packages/extension-ui/src/components/ActionText.tsx @@ -27,23 +27,23 @@ function ActionText ({ className, icon, onClick, text }: Props): React.ReactElem ); } -export default styled(ActionText)` +export default styled(ActionText)(({ theme }: ThemeProps) => ` cursor: pointer; span { - font-size: ${({ theme }: ThemeProps): string => theme.labelFontSize}; - line-height: ${({ theme }: ThemeProps): string => theme.labelLineHeight}; + color: ${theme.labelColor} + font-size: ${theme.labelFontSize}; + line-height: ${theme.labelLineHeight}; text-decoration-line: underline; - color: ${({ theme }: ThemeProps): string => theme.labelColor} } ${Svg} { - background: ${({ theme }: ThemeProps): string => theme.iconNeutralColor}; + background: ${theme.iconNeutralColor}; display: inline-block; + height: 14px; + margin-right: 6px; position: relative; top: 2px; width: 14px; - height: 14px; - margin-right: 6px; } -`; +`); diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx index 2352290d..5567812c 100644 --- a/packages/extension-ui/src/components/Address.tsx +++ b/packages/extension-ui/src/components/Address.tsx @@ -107,105 +107,81 @@ function Address ({ actions, address, children, className, genesisHash, name, pa return (
-
- - - - {parentName ? ( +
+ +
+ {parentName + ? ( <> - +
- {parentName}{suri || ''} - - {displayedName} +
+ {parentName}{suri || ''} +
+
+
{displayedName}
- ) : ( - {displayedName} + ) + : ( +
+ {displayedName} +
+ ) + } +
+ {formatted || ''} + {chain?.genesisHash && ( +
+ {chain.name} +
)} - - {formatted || ''} - {chain?.genesisHash && {chain.name}} - - - - - - {actions && ( - <> - - {showActionsMenu - ? - : - } - - {showActionsMenu && ( - - {actions} - - )} - - )} - - {children} + + + +
+
+ {actions && ( + <> + + {showActionsMenu + ? + : + } + + {showActionsMenu && ( + + {actions} + + )} + + )}
+ {children}
); } -const CopyAddress = styled.div` - display: flex; - justify-content: space-between; - - & ${Svg} { - width: 14px; - height: 14px; - margin-right: 10px; - background: ${({ theme }: ThemeProps): string => theme.accountDotsIconColor}; - &:hover { - background: ${({ theme }: ThemeProps): string => theme.labelColor}; - cursor: pointer; - } - } -`; - -const AccountInfoRow = styled.div` - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - height: 72px; - border-radius: 4px; -`; - -const Info = styled.div` - width: 100%; -`; - -const Name = styled.div` - overflow: hidden; - text-overflow: ellipsis; - width: 300px; - margin: 2px 0; - font-weight: 600; - font-size: 16px; - line-height: 22px; -`; - -const DisplacedName = styled(Name)` - padding-top: 10px; -`; - const FullAddress = styled.div` width: 270px; overflow: hidden; @@ -248,47 +224,15 @@ const Settings = styled.div` Settings.displayName = 'Details'; -const ActionsIcon = styled(Svg).attrs(() => ({ - src: details -}))` +const ActionsIcon = styled(Svg).attrs(() => ({ src: details }))` background: ${({ theme }: ThemeProps): string => theme.accountDotsIconColor}; `; -const ActiveActionsIcon = styled(Svg).attrs(() => ({ - src: details -}))` +const ActiveActionsIcon = styled(Svg).attrs(() => ({ src: details }))` background: ${({ theme }: ThemeProps): string => theme.primaryColor}; `; -const Banner = styled.div` - border-radius: 0 0 8px 8px; - color: white; - font-size: 12px; - line-height: 16px; - position: absolute; - top: 0; -`; - -const ChainBanner = styled(Banner)` - padding: 0.1rem 0.5rem; - right: 40px; - background: ${({ theme }: ThemeProps): string => theme.primaryColor}; -`; - -const ParentName = styled.div` - padding: 0.25rem 0 0 0.8rem; - font-weight: 600; - font-size: 10px; - line-height: 14px; - color: ${({ theme }: ThemeProps): string => theme.labelColor}; - text-overflow: ellipsis; - overflow: hidden; - width: 270px; -`; - -const ArrowLabel = styled(Svg).attrs(() => ({ - src: parentArrow -}))` +const ArrowLabel = styled(Svg).attrs(() => ({ src: parentArrow }))` position: absolute; top: 5px; width: 9px; @@ -296,22 +240,51 @@ const ArrowLabel = styled(Svg).attrs(() => ({ background: ${({ theme }: ThemeProps): string => theme.labelColor}; `; -const MovableMenu = styled(Menu) <{ isMoved: boolean }>` +const MovableMenu = styled(Menu)<{ isMoved: boolean }>` ${({ isMoved }): string => isMoved ? 'bottom: 50px' : ''}; `; -export default styled(Address)` +export default styled(Address)(({ theme }: ThemeProps) => ` position: relative; margin-bottom: 8px; - & > div { - background: ${({ theme }: ThemeProps): string => theme.accountBackground}; - border: 1px solid ${({ theme }: ThemeProps): string => theme.boxBorderColor}; - box-sizing: border-box; - border-radius: 4px; + background: ${theme.accountBackground}; + border: 1px solid ${theme.boxBorderColor}; + box-sizing: border-box; + border-radius: 4px; + + .banner { + border-radius: 0 0 8px 8px; + color: white; + font-size: 12px; + line-height: 16px; + position: absolute; + top: 0; + + &.chain { + background: ${theme.primaryColor}; + padding: 0.1rem 0.5rem; + right: 40px; + } } - & ${Identicon} { + .copyAddress { + display: flex; + justify-content: space-between; + + & ${Svg} { + width: 14px; + height: 14px; + margin-right: 10px; + background: ${theme.accountDotsIconColor}; + &:hover { + background: ${theme.labelColor}; + cursor: pointer; + } + } + } + + .identityIcon { margin-left: 25px; margin-right: 10px; @@ -320,4 +293,42 @@ export default styled(Address)` height: 50px; } } -`; + + .info { + width: 100%; + } + + .infoRow { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + height: 72px; + border-radius: 4px; + } + + .name { + font-size: 16px; + font-weight: 600; + line-height: 22px; + margin: 2px 0; + overflow: hidden; + text-overflow: ellipsis; + width: 300px; + + &.displaced { + padding-top: 10px; + } + } + + .parentName { + color: ${theme.labelColor}; + font-size: 10px; + font-weight: 600; + line-height: 14px; + overflow: hidden; + padding: 0.25rem 0 0 0.8rem; + text-overflow: ellipsis; + width: 270px; + } +`); diff --git a/packages/extension-ui/src/components/BackButton.tsx b/packages/extension-ui/src/components/BackButton.tsx index 22a3e977..436517d0 100644 --- a/packages/extension-ui/src/components/BackButton.tsx +++ b/packages/extension-ui/src/components/BackButton.tsx @@ -29,9 +29,7 @@ const SmallButton = styled(Button)` background: ${({ theme }: ThemeProps): string => theme.backButtonBackground}; `; -const ArrowLeft = styled(Svg).attrs(() => ({ - src: arrowLeft -}))` +const ArrowLeft = styled(Svg).attrs(() => ({ src: arrowLeft }))` width: 12px; height: 12px; display: block; diff --git a/packages/extension-ui/src/components/Box.tsx b/packages/extension-ui/src/components/Box.tsx index 03cdc283..0b5f2644 100644 --- a/packages/extension-ui/src/components/Box.tsx +++ b/packages/extension-ui/src/components/Box.tsx @@ -22,20 +22,20 @@ function Box ({ banner, children, className }: Props): React.ReactElement ); } -export default styled(Box)` - background: ${({ theme }: ThemeProps): string => theme.readonlyInputBackground}; +export default styled(Box)(({ theme }: ThemeProps) => ` + background: ${theme.readonlyInputBackground}; border: none; - border-radius: ${({ theme }: ThemeProps): string => theme.borderRadius}; - color: ${({ theme }: ThemeProps): string => theme.textColor}; - font-family: ${({ theme }: ThemeProps): string => theme.fontFamily}; - font-size: ${({ theme }: ThemeProps): string => theme.fontSize}; - margin: ${({ theme }: ThemeProps): string => theme.boxMargin}; - padding: ${({ theme }: ThemeProps): string => theme.boxPadding}; + border-radius: ${theme.borderRadius}; + color: ${theme.textColor}; + font-family: ${theme.fontFamily}; + font-size: ${theme.fontSize}; + margin: ${theme.boxMargin}; + padding: ${theme.boxPadding}; position: relative; .banner { background: darkorange; - border-radius: 0 ${({ theme }: ThemeProps): string => theme.borderRadius} 0 ${({ theme }: ThemeProps): string => theme.borderRadius}; + border-radius: 0 ${theme.borderRadius} 0 ${theme.borderRadius}; color: white; font-size: 0.75rem; padding: 0.25rem 0.5rem; @@ -43,4 +43,4 @@ export default styled(Box)` right: 0; top: 0; } -`; +`); diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx index 1335dd70..eb829fd9 100644 --- a/packages/extension-ui/src/components/Button.tsx +++ b/packages/extension-ui/src/components/Button.tsx @@ -40,20 +40,20 @@ function Button ({ children, className, isDisabled, onClick, to }: Props): React ); } -export default styled(Button)` +export default styled(Button)(({ isDanger, theme }: Props) => ` display: block; width: 100%; - height: ${({ isDanger }: Props): string => isDanger ? '40px' : '48px'}; + height: ${isDanger ? '40px' : '48px'}; box-sizing: border-box; border: none; - border-radius: ${({ theme }: Props): string => theme.borderRadius}; - color: ${({ theme }: Props): string => theme.buttonTextColor}; + border-radius: ${theme.borderRadius}; + color: ${theme.buttonTextColor}; font-size: 15px; font-weight: 800; line-height: 20px; padding: 0 1rem; text-align: center; - background: ${({ isDanger, theme }: Props): string => isDanger ? theme.buttonBackgroundDanger : theme.buttonBackground}; + background: ${isDanger ? theme.buttonBackgroundDanger : theme.buttonBackground}; cursor: pointer; &:disabled { @@ -62,6 +62,6 @@ export default styled(Button)` } &:not(:disabled):hover { - background: ${({ isDanger, theme }: Props): string => isDanger ? theme.buttonBackgroundDangerHover : theme.buttonBackgroundHover}; + background: ${isDanger ? theme.buttonBackgroundDangerHover : theme.buttonBackgroundHover}; } -`; +`); diff --git a/packages/extension-ui/src/components/ButtonArea.tsx b/packages/extension-ui/src/components/ButtonArea.tsx index 64291c2f..47a7488a 100644 --- a/packages/extension-ui/src/components/ButtonArea.tsx +++ b/packages/extension-ui/src/components/ButtonArea.tsx @@ -7,11 +7,11 @@ import { ThemeProps } from '../types'; import styled from 'styled-components'; import Button from './Button'; -export default styled.div` +export default styled.div(({ theme }: ThemeProps) => ` display: flex; flex-direction: row; - background: ${({ theme }: ThemeProps): string => theme.highlightedAreaBackground}; - border-top: 1px solid ${({ theme }: ThemeProps): string => theme.inputBorderColor}; + background: ${theme.highlightedAreaBackground}; + border-top: 1px solid ${theme.inputBorderColor}; padding: 12px 24px; &&& { @@ -22,4 +22,4 @@ export default styled.div` & > ${Button}:not(:last-of-type) { margin-right: 8px; } -`; +`); diff --git a/packages/extension-ui/src/components/Checkbox.tsx b/packages/extension-ui/src/components/Checkbox.tsx index d707b913..d2eb8038 100644 --- a/packages/extension-ui/src/components/Checkbox.tsx +++ b/packages/extension-ui/src/components/Checkbox.tsx @@ -31,8 +31,8 @@ function Checkbox ({ checked, className, label, onChange }: Props): React.ReactE ); } -export default styled(Checkbox)` - margin: ${({ theme }: ThemeProps): string => theme.boxMargin}; +export default styled(Checkbox)(({ theme }: ThemeProps) => ` + margin: ${theme.boxMargin}; label { display: block; @@ -41,9 +41,9 @@ export default styled(Checkbox)` user-select: none; padding-left: 24px; padding-top: 1px; - color: ${({ theme }: ThemeProps): string => theme.subTextColor}; - font-size: ${({ theme }: ThemeProps): string => theme.fontSize}; - line-height: ${({ theme }: ThemeProps): string => theme.lineHeight}; + color: ${theme.subTextColor}; + font-size: ${theme.fontSize}; + line-height: ${theme.lineHeight}; & input { position: absolute; @@ -59,10 +59,10 @@ export default styled(Checkbox)` left: 0; height: 16px; width: 16px; - border-radius: ${({ theme }: ThemeProps): string => theme.borderRadius}; - background-color: ${({ theme }: ThemeProps): string => theme.readonlyInputBackground}; - border: 1px solid ${({ theme }: ThemeProps): string => theme.inputBorderColor}; - border: 1px solid ${({ theme }: ThemeProps): string => theme.inputBorderColor}; + border-radius: ${theme.borderRadius}; + background-color: ${theme.readonlyInputBackground}; + border: 1px solid ${theme.inputBorderColor}; + border: 1px solid ${theme.inputBorderColor}; &:after { content: ''; display: none; @@ -73,16 +73,16 @@ export default styled(Checkbox)` top: 2px; mask: url(${Checkmark}); mask-size: cover; - background: ${({ theme }: ThemeProps): string => theme.primaryColor}; + background: ${theme.primaryColor}; } } &:hover input ~ span { - background-color: ${({ theme }: ThemeProps): string => theme.inputBackground}; + background-color: ${theme.inputBackground}; } input:checked ~ span:after { display: block; } } -`; +`); diff --git a/packages/extension-ui/src/components/Dropdown.tsx b/packages/extension-ui/src/components/Dropdown.tsx index ebea6bb2..e2aaec75 100644 --- a/packages/extension-ui/src/components/Dropdown.tsx +++ b/packages/extension-ui/src/components/Dropdown.tsx @@ -59,23 +59,23 @@ function Dropdown ({ className, defaultValue, isFocussed, label, onBlur, onChang ); } -export default styled(Dropdown)` +export default React.memo(styled(Dropdown)(({ isError, theme }: Props) => ` position: relative; select { -webkit-appearance: none; -moz-appearance: none; appearance: none; - background: ${({ theme }: Props): string => theme.readonlyInputBackground}; - border-color: ${({ isError, theme }: Props): string => isError ? theme.errorBorderColor : theme.inputBorderColor}; - border-radius: ${({ theme }: ThemeProps): string => theme.borderRadius}; + background: ${theme.readonlyInputBackground}; + border-color: ${isError ? theme.errorBorderColor : theme.inputBorderColor}; + border-radius: ${theme.borderRadius}; border-style: solid; border-width: 1px; box-sizing: border-box; - color: ${({ isError, theme }: Props): string => isError ? theme.errorBorderColor : theme.textColor}; + color: ${isError ? theme.errorBorderColor : theme.textColor}; display: block; - font-family: ${({ theme }: Props): string => theme.fontFamily}; - font-size: ${({ theme }: Props): string => theme.fontSize}; + font-family: ${theme.fontFamily}; + font-size: ${theme.fontSize}; font-weight: 600; padding: 0.5rem 0.75rem; width: 100%; @@ -98,4 +98,4 @@ export default styled(Dropdown)` background: url(${arrow}) center no-repeat; pointer-events: none; } -`; +`)); diff --git a/packages/extension-ui/src/components/Icon.tsx b/packages/extension-ui/src/components/Icon.tsx index 000714e5..95f19657 100644 --- a/packages/extension-ui/src/components/Icon.tsx +++ b/packages/extension-ui/src/components/Icon.tsx @@ -22,13 +22,10 @@ function Icon ({ className = '', icon, onClick }: Props): React.ReactElement ` background: white; border-radius: 50%; box-sizing: border-box; - cursor: ${({ onClick }): string => - onClick - ? 'pointer' - : 'inherit'}; + cursor: ${onClick ? 'pointer' : 'inherit'}; text-align: center; -`; +`); diff --git a/packages/extension-ui/src/components/Identicon.tsx b/packages/extension-ui/src/components/Identicon.tsx index 147832cb..7ef2b8d5 100644 --- a/packages/extension-ui/src/components/Identicon.tsx +++ b/packages/extension-ui/src/components/Identicon.tsx @@ -31,13 +31,13 @@ function Identicon ({ className, iconTheme, onCopy, prefix, value }: Props): Rea ); } -export default styled(Identicon)` +export default styled(Identicon)(({ theme }: ThemeProps) => ` display: flex; justify-content: center; .container:before { box-shadow: none; - background: ${({ theme }: ThemeProps): string => theme.identiconBackground}; + background: ${theme.identiconBackground}; } svg { @@ -45,4 +45,4 @@ export default styled(Identicon)` display: none; } } -`; +`); diff --git a/packages/extension-ui/src/components/Label.tsx b/packages/extension-ui/src/components/Label.tsx index edf46090..43333f91 100644 --- a/packages/extension-ui/src/components/Label.tsx +++ b/packages/extension-ui/src/components/Label.tsx @@ -22,8 +22,8 @@ function Label ({ children, className, label }: Props): React.ReactElement theme.textColor}; +export default styled(Label)(({ theme }: ThemeProps) => ` + color: ${theme.textColor}; label { font-size: 10px; @@ -34,4 +34,4 @@ export default styled(Label)` margin-bottom: 12px; text-transform: uppercase; } -`; +`); diff --git a/packages/extension-ui/src/components/List.tsx b/packages/extension-ui/src/components/List.tsx index d2f87730..3ca7d271 100644 --- a/packages/extension-ui/src/components/List.tsx +++ b/packages/extension-ui/src/components/List.tsx @@ -6,7 +6,7 @@ import { ThemeProps } from '../types'; import styled from 'styled-components'; -export default styled.ul` +export default styled.ul(({ theme }: ThemeProps) => ` list-style: none; padding-inline-start: 10px; padding-inline-end: 10px; @@ -19,10 +19,10 @@ export default styled.ul` li::before { content: '\\2022'; - color: ${({ theme }: ThemeProps): string => theme.primaryColor}; + color: ${theme.primaryColor}; font-size: 30px; font-weight: bold; margin-right: 10px; vertical-align: -20%; } -`; +`); diff --git a/packages/extension-ui/src/components/Menu.tsx b/packages/extension-ui/src/components/Menu.tsx index f11f1234..62e0b76c 100644 --- a/packages/extension-ui/src/components/Menu.tsx +++ b/packages/extension-ui/src/components/Menu.tsx @@ -24,15 +24,15 @@ function Menu ({ children, className, reference }: Props): React.ReactElement ` position: absolute; right: 0; margin-top: 90px; padding: 16px 0; - background: ${({ theme }: ThemeProps): string => theme.popupBackground}; + background: ${theme.popupBackground}; border-radius: 4px; - border: 1px solid ${({ theme }: ThemeProps): string => theme.boxBorderColor}; + border: 1px solid ${theme.boxBorderColor}; box-sizing: border-box; - box-shadow: 0 0 32px ${({ theme }: ThemeProps): string => theme.boxShadow}; + box-shadow: 0 0 32px ${theme.boxShadow}; z-index: 1; -`; +`); diff --git a/packages/extension-ui/src/components/MnemonicSeed.tsx b/packages/extension-ui/src/components/MnemonicSeed.tsx index 8e8f0576..ef0b8a03 100644 --- a/packages/extension-ui/src/components/MnemonicSeed.tsx +++ b/packages/extension-ui/src/components/MnemonicSeed.tsx @@ -20,14 +20,14 @@ function MnemonicSeed ({ className, onCopy, seed }: Props): React.ReactElement

- +

- +
); } @@ -47,15 +47,15 @@ const MnemonicText = styled(TextAreaWithLabel).attrs(() => ({ } `; -const ButtonsRow = styled.div` - display: flex; - flex-direction: row; - - ${ActionText} { - margin-right: 32px; - } -`; - export default styled(MnemonicSeed)` margin-top: 21px; + + .buttonsRow { + display: flex; + flex-direction: row; + + ${ActionText} { + margin-right: 32px; + } + } `; diff --git a/packages/extension-ui/src/components/NextStepButton.tsx b/packages/extension-ui/src/components/NextStepButton.tsx index 8d89db2e..a4e08832 100644 --- a/packages/extension-ui/src/components/NextStepButton.tsx +++ b/packages/extension-ui/src/components/NextStepButton.tsx @@ -22,9 +22,7 @@ export default function NextStepButton ({ children, ...props }: Props): React.Re ); } -const ArrowRight = styled(Svg).attrs(() => ({ - src: arrowLeft -}))` +const ArrowRight = styled(Svg).attrs(() => ({ src: arrowLeft }))` float: right; width: 12px; height: 12px; diff --git a/packages/extension-ui/src/components/Switch.tsx b/packages/extension-ui/src/components/Switch.tsx index 8e0f3861..72bd6f54 100644 --- a/packages/extension-ui/src/components/Switch.tsx +++ b/packages/extension-ui/src/components/Switch.tsx @@ -25,55 +25,20 @@ function Switch ({ checked, checkedLabel, className, onChange, uncheckedLabel }:
{uncheckedLabel} {checkedLabel}
); } -const Slider = styled.span` - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: ${({ theme }: ThemeProps): string => theme.readonlyInputBackground}; - transition: 0.2s; - border-radius: 100px; - border: 1px solid ${({ theme }: ThemeProps): string => theme.inputBorderColor}; - - &:before { - position: absolute; - content: ''; - height: 16px; - width: 16px; - left: 4px; - bottom: 3px; - background-color: ${({ theme }: ThemeProps): string => theme.primaryColor}; - transition: 0.4s; - border-radius: 50%; - } -`; - -const Checkbox = styled.input.attrs(() => ({ - type: 'checkbox' -}))` - opacity: 0; - width: 0; - height: 0; - - &:checked + ${Slider}:before { - transform: translateX(24px); - } -`; - -export default styled(Switch)` +export default styled(Switch)(({ theme }: ThemeProps) => ` label { position: relative; display: inline-block; @@ -85,4 +50,39 @@ export default styled(Switch)` span { font-weight: 600; } -`; + + .checkbox { + opacity: 0; + width: 0; + height: 0; + + &:checked + .slider:before { + transform: translateX(24px); + } + } + + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: ${theme.readonlyInputBackground}; + transition: 0.2s; + border-radius: 100px; + border: 1px solid ${theme.inputBorderColor}; + + &:before { + position: absolute; + content: ''; + height: 16px; + width: 16px; + left: 4px; + bottom: 3px; + background-color: ${theme.primaryColor}; + transition: 0.4s; + border-radius: 50%; + } + } +`); diff --git a/packages/extension-ui/src/components/Table.tsx b/packages/extension-ui/src/components/Table.tsx index 41587786..268c34c2 100644 --- a/packages/extension-ui/src/components/Table.tsx +++ b/packages/extension-ui/src/components/Table.tsx @@ -23,11 +23,11 @@ function Table ({ children, className = '', isFull }: Props): React.ReactElement ); } -export default React.memo(styled(Table)` +export default React.memo(styled(Table)(({ theme }: ThemeProps) => ` border: 0; display: block; - font-size: ${({ theme }: ThemeProps): string => theme.labelFontSize}; - line-height: ${({ theme }: ThemeProps): string => theme.labelLineHeight}; + font-size: ${theme.labelFontSize}; + line-height: ${theme.labelLineHeight}; margin-bottom: 1rem; &.isFull { @@ -73,4 +73,4 @@ export default React.memo(styled(Table)` white-space: normal; } } -`); +`)); diff --git a/packages/extension-ui/src/components/Title.ts b/packages/extension-ui/src/components/Title.ts index 674129fa..7017abff 100644 --- a/packages/extension-ui/src/components/Title.ts +++ b/packages/extension-ui/src/components/Title.ts @@ -6,7 +6,7 @@ import { ThemeProps } from '../types'; import styled from 'styled-components'; -export default styled.div` +export default styled.div(({ theme }: ThemeProps) => ` width: 100%; margin-bottom: 8px; margin-top: 18px; @@ -15,6 +15,6 @@ export default styled.div` line-height: 14px; letter-spacing: 0.04em; text-transform: uppercase; - color: ${({ theme }: ThemeProps): string => theme.textColor}; + color: ${theme.textColor}; opacity: 0.65; -`; +`); diff --git a/packages/extension-ui/src/components/Warning.tsx b/packages/extension-ui/src/components/Warning.tsx index 3b188d8b..cc09c043 100644 --- a/packages/extension-ui/src/components/Warning.tsx +++ b/packages/extension-ui/src/components/Warning.tsx @@ -12,8 +12,8 @@ import Svg from './Svg'; interface Props extends ThemeProps { children: React.ReactNode; - danger?: boolean; className?: string; + isDanger?: boolean; } function Warning ({ children, className }: Props): React.ReactElement { @@ -30,18 +30,18 @@ function Warning ({ children, className }: Props): React.ReactElement { ); } -export default React.memo(styled(Warning)` +export default React.memo(styled(Warning)(({ isDanger, theme }: Props) => ` display: flex; flex-direction: row; - padding-left: ${({ danger }): string => danger ? '18px' : ''}; - color: ${({ theme }: Props): string => theme.subTextColor}; + padding-left: ${isDanger ? '18px' : ''}; + color: ${theme.subTextColor}; margin-right: 20px; - border-left: ${({ danger, theme }: Props): string => danger ? `0.25rem solid ${theme.buttonBackgroundDanger}` : ''}; + border-left: ${isDanger ? `0.25rem solid ${theme.buttonBackgroundDanger}` : ''}; .warningImage { width: 16px; height: 14px; margin: 5px 10px 5px 0; - background: ${({ danger, theme }: Props): string => danger ? theme.iconDangerColor : theme.iconWarningColor}; + background: ${isDanger ? theme.iconDangerColor : theme.iconWarningColor}; } -`); +`)); diff --git a/packages/extension-ui/src/components/contexts.tsx b/packages/extension-ui/src/components/contexts.tsx index 825f0014..27dcca6d 100644 --- a/packages/extension-ui/src/components/contexts.tsx +++ b/packages/extension-ui/src/components/contexts.tsx @@ -10,11 +10,7 @@ import { AvailableThemes } from '.'; // eslint-disable-next-line @typescript-eslint/no-unused-vars const noop = (): void => undefined; -const AccountContext = React.createContext({ - accounts: [], - hierarchy: [], - master: undefined -}); +const AccountContext = React.createContext({ accounts: [], hierarchy: [], master: undefined }); const ActionContext = React.createContext<(to?: string) => void>(noop); const AuthorizeReqContext = React.createContext([]); const MediaContext = React.createContext(false); diff --git a/packages/extension-ui/src/partials/AddAccount.tsx b/packages/extension-ui/src/partials/AddAccount.tsx index cf7f5143..9fc95b4c 100644 --- a/packages/extension-ui/src/partials/AddAccount.tsx +++ b/packages/extension-ui/src/partials/AddAccount.tsx @@ -11,7 +11,7 @@ import { ActionContext } from '../components'; import AddAccountImage from './AddAccountImage'; import Header from './Header'; -interface Props { +interface Props extends ThemeProps { className?: string; } @@ -26,43 +26,43 @@ function AddAccount ({ className }: Props): React.ReactElement { <>
- +
- -
- You currently don't have any accounts. Either create a new account or if you have an existing account you wish to use, import it with the seed phrase. +
+
+

You currently don't have any accounts. Either create a new account or if you have an existing account you wish to use, import it with the seed phrase.

); } -const TipText = styled.p` - text-align: center; - font-size: 16px; - line-height: 26px; - margin: 0 30px; - color: ${({ theme }: ThemeProps): string => theme.subTextColor}; -`; - -const Image = styled.div` - display: flex; - justify-content: center; -`; - -export default styled(AddAccount)` - color: ${({ theme }: ThemeProps): string => theme.textColor}; +export default React.memo(styled(AddAccount)(({ theme }: Props) => ` + color: ${theme.textColor}; height: 100%; h3 { - color: ${({ theme }: ThemeProps): string => theme.textColor}; + color: ${theme.textColor}; margin-top: 0; font-weight: normal; font-size: 24px; line-height: 33px; text-align: center; } -`; + + > .image { + display: flex; + justify-content: center; + } + + > .no-accounts p { + text-align: center; + font-size: 16px; + line-height: 26px; + margin: 0 30px; + color: ${theme.subTextColor}; + } +`)); diff --git a/packages/extension-ui/src/partials/AddAccountImage.tsx b/packages/extension-ui/src/partials/AddAccountImage.tsx index ea1cf7fe..084317b5 100644 --- a/packages/extension-ui/src/partials/AddAccountImage.tsx +++ b/packages/extension-ui/src/partials/AddAccountImage.tsx @@ -69,17 +69,17 @@ function AddAccountImage ({ className, onClick }: Props): React.ReactElement ` circle, path { cursor: pointer; } path { - fill: ${({ theme }: Props): string => theme.textColor}; + fill: ${theme.textColor}; } & > g > circle { - stroke: ${({ theme }: Props): string => theme.inputBorderColor}; - fill: ${({ theme }: Props): string => theme.addAccountImageBackground}; + stroke: ${theme.inputBorderColor}; + fill: ${theme.addAccountImageBackground}; } -`; +`)); diff --git a/packages/extension-ui/src/partials/Back.tsx b/packages/extension-ui/src/partials/Back.tsx index 00c5e898..08248197 100644 --- a/packages/extension-ui/src/partials/Back.tsx +++ b/packages/extension-ui/src/partials/Back.tsx @@ -10,7 +10,7 @@ import styled from 'styled-components'; import ArrowLeftImage from '../assets/arrowLeft.svg'; import { Link, Svg } from '../components'; -interface Props { +interface Props extends ThemeProps { className?: string; to?: string; } @@ -43,9 +43,9 @@ const BackLink = styled(Link)` } `; -export default styled(Back)` +export default React.memo(styled(Back)(({ theme }: Props) => ` margin: 0; line-height: 52px; - border-bottom: 1px solid ${({ theme }: ThemeProps): string => theme.inputBorderColor}; - font-size: ${({ theme }: ThemeProps): string => theme.labelFontSize}; -`; + border-bottom: 1px solid ${theme.inputBorderColor}; + font-size: ${theme.labelFontSize}; +`)); diff --git a/packages/extension-ui/src/partials/DerivationPath.tsx b/packages/extension-ui/src/partials/DerivationPath.tsx index ecd8e57f..848ff4a5 100644 --- a/packages/extension-ui/src/partials/DerivationPath.tsx +++ b/packages/extension-ui/src/partials/DerivationPath.tsx @@ -44,7 +44,7 @@ function DerivationPath ({ className, defaultPath, onChange, parentAddress, pare return (
- +
{!isDisabled ? : } - +
); } -const PathField = styled.div` - display: flex; - flex-direction: row; -`; - interface UnlockableComponentProps { isUnlocked: boolean; } @@ -87,37 +82,41 @@ const PathInput = styled.div` } `; -const LockIcon = styled(Svg).attrs(() => ({ - src: lockIcon -}))` +const LockIcon = styled(Svg).attrs(() => ({ src: lockIcon }))` width: 11px; height: 14px; background: ${({ theme }: ThemeProps) => theme.iconNeutralColor}; `; -const UnlockIcon = styled(Svg).attrs(() => ({ - src: unlockIcon -}))` +const UnlockIcon = styled(Svg).attrs(() => ({ src: unlockIcon }))` width: 11px; height: 14px; background: ${({ theme }: ThemeProps) => theme.iconNeutralColor}; `; const LockButton = styled(Button)` - width: 11px; - height: 14px; - padding: 3px; - margin: 36px 2px 0 10px; 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 DerivationPath; +export default React.memo(styled(DerivationPath)` + > .container { + display: flex; + flex-direction: row; + } +`); diff --git a/packages/extension-ui/src/partials/Header.test.tsx b/packages/extension-ui/src/partials/Header.test.tsx index fa7c72f1..739bc63b 100644 --- a/packages/extension-ui/src/partials/Header.test.tsx +++ b/packages/extension-ui/src/partials/Header.test.tsx @@ -37,7 +37,7 @@ describe('Header component', () => { it('highlights gear icon when settings are toggled', () => { wrapper = mountHeader({ showSettings: true }); - wrapper.find('SettingsToggle').simulate('click'); + wrapper.find('div.settingsToggle').simulate('click'); expect(wrapper.find(Settings).length).toBe(1); expect(wrapper.find('Gear').prop('isSelected')).toBe(true); diff --git a/packages/extension-ui/src/partials/Header.tsx b/packages/extension-ui/src/partials/Header.tsx index 9c4fce77..06fa46a3 100644 --- a/packages/extension-ui/src/partials/Header.tsx +++ b/packages/extension-ui/src/partials/Header.tsx @@ -14,7 +14,7 @@ import { Link, Svg } from '../components'; import useOutsideClick from '../hooks/useOutsideClick'; import Settings from './Settings'; -interface Props { +interface Props extends ThemeProps { children?: React.ReactNode; className?: string; showSettings?: boolean; @@ -35,28 +35,36 @@ function Header ({ children, className, showBackArrow, showSettings, text }: Pro return (
- - +
+
{showBackArrow ? ( ) - : + : ( + + ) } - {text || 'polkadot{.js}'} - + {text || 'polkadot{.js}'} +
{showSettings && ( - +
- +
)} {showActionsMenu && ( )} {children} - +
); } @@ -79,30 +87,6 @@ const ArrowLeft = styled(Svg).attrs(() => ({ src: ArrowLeftImage }))` background: ${({ theme }: ThemeProps) => theme.labelColor}; `; -const Container = styled.div` - display: flex; - justify-content: space-between; - width: 100%; - border-bottom: 1px solid ${({ theme }: ThemeProps) => theme.inputBorderColor}; - min-height: 70px; -`; - -const Branding = styled.div` - display: flex; - justify-content: center; - align-items: center; - color: ${({ theme }: ThemeProps) => theme.labelColor}; - font-family: ${({ theme }: ThemeProps) => theme.fontFamily}; - text-align: center; - margin-left: 24px; -`; - -const Logo = styled.img` - height: 28px; - width: 28px; - margin: 8px 12px 12px 0; -`; - interface GearProps { isSelected: boolean; } @@ -117,23 +101,7 @@ const Gear = styled(Svg).attrs(() => ({ src: gear }))` Gear.displayName = 'Gear'; -const LogoText = styled.span` - color: ${({ theme }: ThemeProps) => theme.textColor}; - font-family: ${({ theme }: ThemeProps) => theme.fontFamily}; - font-size: 20px; - line-height: 27px; -`; - -const SettingsToggle = styled.div` - align-self: center; - &:hover { - cursor: pointer; - } -`; - -SettingsToggle.displayName = 'SettingsToggle'; - -export default styled(Header)` +export default React.memo(styled(Header)(({ theme }: Props) => ` max-width: 100%; box-sizing: border-box; font-weight: normal; @@ -144,4 +112,43 @@ export default styled(Header)` && { padding: 0 0 0; } -`; + + > .container { + display: flex; + justify-content: space-between; + width: 100%; + border-bottom: 1px solid ${theme.inputBorderColor}; + min-height: 70px; + + .branding { + display: flex; + justify-content: center; + align-items: center; + color: ${theme.labelColor}; + font-family: ${theme.fontFamily}; + text-align: center; + margin-left: 24px; + + .logo { + height: 28px; + width: 28px; + margin: 8px 12px 12px 0; + } + + .logoText { + color: ${theme.textColor}; + font-family: ${theme.fontFamily}; + font-size: 20px; + line-height: 27px; + } + } + + .settingsToggle { + align-self: center; + + &:hover { + cursor: pointer; + } + } + } +`)); diff --git a/packages/extension-ui/src/partials/HeaderWithSteps.tsx b/packages/extension-ui/src/partials/HeaderWithSteps.tsx index 8e67aef6..421d4176 100644 --- a/packages/extension-ui/src/partials/HeaderWithSteps.tsx +++ b/packages/extension-ui/src/partials/HeaderWithSteps.tsx @@ -10,12 +10,13 @@ import styled from 'styled-components'; import { ActionContext, ActionText } from '../components'; import Header from './Header'; -interface Props { +interface Props extends ThemeProps { + className?: string; step: number; text: string; } -export default function HeaderWithSteps ({ step, text }: Props): React.ReactElement { +function HeaderWithSteps ({ className, step, text }: Props): React.ReactElement { const onAction = useContext(ActionContext); const _onCancel = useCallback(() => { @@ -23,40 +24,45 @@ export default function HeaderWithSteps ({ step, text }: Props): React.ReactElem }, [onAction]); return ( -
- +
+
- {step} - /2 + {step} + /2
- +
); } -const CreationSteps = styled.div` - align-items: center; - display: flex; - justify-content: space-between; - flex-grow: 1; - padding-right: 24px; - margin-top: 3px; -`; +export default React.memo(styled(HeaderWithSteps)(({ theme }: Props) => ` + .current { + font-size: ${theme.labelFontSize}; + line-height: ${theme.labelLineHeight}; + color: ${theme.primaryColor}; + font-weight: 600; + } -const CurrentStep = styled.span` - font-size: ${({ theme }: ThemeProps) => theme.labelFontSize}; - line-height: ${({ theme }: ThemeProps) => theme.labelLineHeight}; - color: ${({ theme }: ThemeProps) => theme.primaryColor}; - font-weight: 600; -`; + .steps { + align-items: center; + display: flex; + justify-content: space-between; + flex-grow: 1; + padding-right: 24px; + margin-top: 3px; + } -const TotalSteps = styled.span` - font-size: ${({ theme }: ThemeProps) => theme.labelFontSize}; - line-height: ${({ theme }: ThemeProps) => theme.labelLineHeight}; - color: ${({ theme }: ThemeProps) => theme.textColor}; - font-weight: 600; -`; + .total { + font-size: ${theme.labelFontSize}; + line-height: ${theme.labelLineHeight}; + color: ${theme.textColor}; + font-weight: 600; + } +`)); diff --git a/packages/extension-ui/src/partials/Settings.tsx b/packages/extension-ui/src/partials/Settings.tsx index 690892e7..9457e57c 100644 --- a/packages/extension-ui/src/partials/Settings.tsx +++ b/packages/extension-ui/src/partials/Settings.tsx @@ -65,7 +65,7 @@ function Settings ({ className, reference }: Props): React.ReactElement { reference={reference} >
- Theme + Theme { />
- External QR accounts and Access - External QR accounts and Access +
- Display address format For: - Display address format For: + {
{isPopup && (
- { ); } -const CheckboxSetting = styled(Checkbox)` - font-size: 15px; - font-weight: 600; - line-height: 20px; - color: ${({ theme }: ThemeProps) => theme.textColor}; - label { - color: ${({ theme }: ThemeProps) => theme.textColor}; - } -`; - -const DropdownSetting = styled(Dropdown)` - background: ${({ theme }: ThemeProps) => theme.background}; - margin-top: 9px; - margin-bottom: 12px; - width : 100%; - margin-right: 0; -`; - -const SettingTitle = styled(Title)` - margin: 0; -`; - -const OpenInNewWindowButton = styled(ActionText)` - span { - color: ${({ theme }: ThemeProps) => theme.textColor}; - text-decoration: none; - font-weight: 600; - font-size: ${({ theme }: ThemeProps) => theme.fontSize}; - line-height: ${({ theme }: ThemeProps) => theme.lineHeight}; - } - - ${Svg} { - width: 20px; - height: 20px; - top: 4px; - background: ${({ theme }: ThemeProps) => theme.textColor}; - } -`; - -export default React.memo(styled(Settings)` +export default React.memo(styled(Settings)(({ theme }: Props) => ` margin-top: 56px; right: 24px; user-select: none; - .setting { + .openWindow { + span { + color: ${theme.textColor}; + font-size: ${theme.fontSize}; + font-weight: 600; + line-height: ${theme.lineHeight}; + text-decoration: none; + } + + ${Svg} { + background: ${theme.textColor}; + height: 20px; + top: 4px; + width: 20px; + } + } + + > .setting { padding: 0 16px; max-width: 100%; + + > .checkbox { + color: ${theme.textColor}; + line-height: 20px; + font-size: 15px; + font-weight: 600; + + label { + color: ${theme.textColor}; + } + } + + > .dropdown { + background: ${theme.background}; + margin-bottom: 12px; + margin-top: 9px; + margin-right: 0; + width: 100%; + } + + > .title { + margin: 0; + } } .setting+.setting { padding-top: 18px; - border-top: 1px solid ${({ theme }: Props): string => theme.inputBorderColor}; + border-top: 1px solid ${theme.inputBorderColor}; } -`); +`));