diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx index db1e0dea..693b8699 100644 --- a/packages/extension-ui/src/Popup/Accounts/Account.tsx +++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx @@ -3,13 +3,12 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { AccountJson } from '@polkadot/extension-base/background/types'; -import { ThemeProps } from '../../types'; import React, { useCallback, useContext, useMemo, useState } from 'react'; import styled from 'styled-components'; import genesisOptions from '@polkadot/extension-chains/genesisHashes'; -import { ActionContext, Address, Checkbox, Dropdown, Link } from '../../components'; +import { ActionContext, Address, Checkbox, Dropdown, Link, MenuDivider } from '../../components'; import { editAccount, showAccount, tieAccount } from '../../messaging'; import { Name } from '../../partials'; @@ -78,7 +77,7 @@ function Account ({ address, className, genesisHash, isExternal, isHidden, paren Derive New Account )} -
+ {!isExternal && ( Forget Account -
+ ` +export default styled(Account)` .address { margin-bottom: 8px; } - .divider { - padding-top: 16px; - margin-bottom: 16px; - border-bottom: 1px solid ${theme.inputBorderColor}; - } - .editName { position: absolute; flex: 1; @@ -168,4 +161,4 @@ export default styled(Account)(({ theme }: ThemeProps) => ` min-width: 13rem; padding: 4px 16px; } -`); +`; diff --git a/packages/extension-ui/src/partials/AddAccount.tsx b/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx similarity index 92% rename from packages/extension-ui/src/partials/AddAccount.tsx rename to packages/extension-ui/src/Popup/Accounts/AddAccount.tsx index 9fc95b4c..b9ee1cd2 100644 --- a/packages/extension-ui/src/partials/AddAccount.tsx +++ b/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx @@ -2,14 +2,14 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { ThemeProps } from '../types'; +import { ThemeProps } from '../../types'; import React, { useCallback, useContext } from 'react'; import styled from 'styled-components'; -import { ActionContext } from '../components'; +import { ActionContext } from '../../components'; +import Header from '../../partials/Header'; import AddAccountImage from './AddAccountImage'; -import Header from './Header'; interface Props extends ThemeProps { className?: string; diff --git a/packages/extension-ui/src/partials/AddAccountImage.tsx b/packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx similarity index 99% rename from packages/extension-ui/src/partials/AddAccountImage.tsx rename to packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx index 084317b5..fe8725b7 100644 --- a/packages/extension-ui/src/partials/AddAccountImage.tsx +++ b/packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx @@ -8,7 +8,7 @@ /* eslint-disable react/jsx-sort-props */ /* eslint-disable react/jsx-max-props-per-line */ -import { ThemeProps } from '../types'; +import { ThemeProps } from '../../types'; import React from 'react'; import styled from 'styled-components'; diff --git a/packages/extension-ui/src/Popup/Accounts/index.tsx b/packages/extension-ui/src/Popup/Accounts/index.tsx index 8520d317..a0ed19a0 100644 --- a/packages/extension-ui/src/Popup/Accounts/index.tsx +++ b/packages/extension-ui/src/Popup/Accounts/index.tsx @@ -2,19 +2,16 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { ThemeProps } from '../../types'; - import React, { useContext } from 'react'; import styled from 'styled-components'; -import { AccountContext, Button, ButtonArea, ButtonWithSubtitle, MediaContext, Svg } from '../../components'; -import { AddAccount, Header } from '../../partials'; +import { AccountContext } from '../../components'; +import { Header } from '../../partials'; import AccountsTree from './AccountsTree'; -import qrIcon from '../../assets/qr.svg'; +import AddAccount from './AddAccount'; export default function Accounts (): React.ReactElement { - const { hierarchy, master } = useContext(AccountContext); - const mediaAllowed = useContext(MediaContext); + const { hierarchy } = useContext(AccountContext); return ( <> @@ -23,6 +20,7 @@ export default function Accounts (): React.ReactElement { : ( <>
@@ -37,37 +35,10 @@ export default function Accounts (): React.ReactElement { ) } - - - - {mediaAllowed && ( - - - - )} - ); } -const QrButton = styled(Button)` - width: 60px; - - ${Svg} { - width: 20px; - height: 20px; - background: ${({ theme }: ThemeProps): string => theme.buttonTextColor}; - } -`; - const AccountsArea = styled.div` height: 100%; overflow-y: scroll; diff --git a/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx b/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx index 22852b6c..1d6e811a 100644 --- a/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx +++ b/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx @@ -3,6 +3,7 @@ // of the Apache-2.0 license. See the LICENSE file for details. import React, { useCallback, useState } from 'react'; + import { ButtonArea, Checkbox, MnemonicSeed, NextStepButton, VerticalSpace, Warning } from '../../components'; import useToast from '../../hooks/useToast'; diff --git a/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx b/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx index 54bfb78b..90673a75 100644 --- a/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx +++ b/packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx @@ -7,8 +7,8 @@ import { ThemeProps } from '../../types'; import React, { useCallback, useRef, useState } from 'react'; import styled from 'styled-components'; -import { Address, Svg } from '../../components'; import arrow from '../../assets/arrow-down.svg'; +import { Address, Svg } from '../../components'; import useOutsideClick from '../../hooks/useOutsideClick'; interface Props { @@ -21,7 +21,6 @@ interface Props { function AddressDropdown ({ allAddresses, className, onSelect, selectedAddress }: Props): React.ReactElement { const [isDropdownVisible, setDropdownVisible] = useState(false); const ref = useRef(null); - const hideDropdown = useCallback(() => setDropdownVisible(false), []); const toggleDropdown = useCallback(() => setDropdownVisible(!isDropdownVisible), [isDropdownVisible]); const selectParent = (newParent: string) => (): void => onSelect(newParent); diff --git a/packages/extension-ui/src/Popup/ImportSeed.tsx b/packages/extension-ui/src/Popup/ImportSeed.tsx index 1016aa6d..645ab918 100644 --- a/packages/extension-ui/src/Popup/ImportSeed.tsx +++ b/packages/extension-ui/src/Popup/ImportSeed.tsx @@ -5,9 +5,8 @@ import React, { useCallback, useContext, useState } from 'react'; import styled from 'styled-components'; -import upload from '../assets/file-upload.svg'; -import { ActionContext, Address, ButtonArea, NextStepButton, TextAreaWithLabel, ValidatedInput, VerticalSpace, ActionText } from '../components'; -import { createAccountSuri, validateSeed, jsonRestoreWindowOpen } from '../messaging'; +import { ActionContext, Address, ButtonArea, NextStepButton, TextAreaWithLabel, ValidatedInput, VerticalSpace } from '../components'; +import { createAccountSuri, validateSeed } from '../messaging'; import { Header, Name, Password } from '../partials'; import { allOf, isNotShorterThan, Result } from '../util/validators'; @@ -53,15 +52,6 @@ export default function Import (): React.ReactElement { } }, [account, name, onAction, password]); - const _toJson = useCallback((): void => { - // are we in a popup? - if (window.innerWidth <= 480) { - jsonRestoreWindowOpen().catch(console.error); - } else { - onAction('/account/restore-json'); - } - }, [onAction]); - return ( <> )} - {!account && - - - - } ); } @@ -118,12 +99,3 @@ const SeedInput = styled(TextAreaWithLabel)` height: unset; } `; - -const ButtonsRow = styled.div` - display: flex; - flex-direction: row; - - ${ActionText} { - margin-right: 32px; - } -`; diff --git a/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx b/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx index f70896a3..b4045c85 100644 --- a/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx +++ b/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx @@ -7,8 +7,8 @@ import { ThemeProps } from '../../types'; import React from 'react'; import styled from 'styled-components'; -import { Svg } from '../../components'; import ArrowLeftImage from '../../assets/arrowLeft.svg'; +import { Svg } from '../../components'; interface Props { className?: string; diff --git a/packages/extension-ui/src/assets/plus.svg b/packages/extension-ui/src/assets/plus.svg new file mode 100644 index 00000000..24f418b7 --- /dev/null +++ b/packages/extension-ui/src/assets/plus.svg @@ -0,0 +1,3 @@ + diff --git a/packages/extension-ui/src/assets/secret.svg b/packages/extension-ui/src/assets/secret.svg new file mode 100644 index 00000000..27627f46 --- /dev/null +++ b/packages/extension-ui/src/assets/secret.svg @@ -0,0 +1,2 @@ + + diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx index 873e3ffd..c4434509 100644 --- a/packages/extension-ui/src/components/Address.tsx +++ b/packages/extension-ui/src/components/Address.tsx @@ -15,14 +15,13 @@ import { decodeAddress, encodeAddress } from '@polkadot/util-crypto'; import copy from '../assets/copy.svg'; import details from '../assets/details.svg'; import parentArrow from '../assets/arrowParentLabel.svg'; - import { AccountContext, SettingsContext } from './contexts'; -import Identicon from './Identicon'; -import Menu from './Menu'; -import Svg from './Svg'; import useOutsideClick from '../hooks/useOutsideClick'; import useMetadata from '../hooks/useMetadata'; import useToast from '../hooks/useToast'; +import Identicon from './Identicon'; +import Menu from './Menu'; +import Svg from './Svg'; interface Props { address?: string | null; diff --git a/packages/extension-ui/src/components/Fonts.ts b/packages/extension-ui/src/components/Fonts.ts index bacdd3f2..1e68ce15 100644 --- a/packages/extension-ui/src/components/Fonts.ts +++ b/packages/extension-ui/src/components/Fonts.ts @@ -3,6 +3,7 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { createGlobalStyle } from 'styled-components'; + import NunitosansregularWoff2 from '../assets/fonts/Nunitosansregular.woff2'; import NunitosansregularWoff from '../assets/fonts/Nunitosansregular.woff'; import NunitosanssemiboldWoff2 from '../assets/fonts/Nunitosanssemibold.woff2'; diff --git a/packages/extension-ui/src/components/Link.tsx b/packages/extension-ui/src/components/Link.tsx index 97ac2132..a89bd8f1 100644 --- a/packages/extension-ui/src/components/Link.tsx +++ b/packages/extension-ui/src/components/Link.tsx @@ -12,11 +12,18 @@ interface Props extends ThemeProps { children?: React.ReactNode; className?: string; isDanger?: boolean; + isDisabled?: boolean; onClick?: () => void; to?: string; } -function Link ({ children, className, onClick, to }: Props): React.ReactElement { +function Link ({ children, className = '', isDisabled, onClick, to }: Props): React.ReactElement { + if (isDisabled) { + return ( +
{children}
+ ); + } + return to ? ( ` align-items: center; color: ${isDanger ? theme.textColorDanger : theme.textColor}; display: flex; - opacity: 0.9; + opacity: 0.85; text-decoration: none; vertical-align: middle; @@ -54,4 +61,8 @@ export default styled(Link)(({ isDanger, theme }: Props) => ` &:visited { color: ${isDanger ? theme.textColorDanger : theme.textColor}; } + + &.isDisabled { + opacity: 0.4; + } `); diff --git a/packages/extension-ui/src/components/MenuDivider.tsx b/packages/extension-ui/src/components/MenuDivider.tsx new file mode 100644 index 00000000..31f5ab54 --- /dev/null +++ b/packages/extension-ui/src/components/MenuDivider.tsx @@ -0,0 +1,24 @@ +// Copyright 2019-2020 @polkadot/extension-ui authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import { ThemeProps } from '../types'; + +import React from 'react'; +import styled from 'styled-components'; + +interface Props extends ThemeProps { + className?: string; +} + +function MenuDivider ({ className }: Props): React.ReactElement { + return ( +
+ ); +} + +export default styled(MenuDivider)(({ theme }: Props) => ` + padding-top: 16px; + margin-bottom: 16px; + border-bottom: 1px solid ${theme.inputBorderColor}; +`); diff --git a/packages/extension-ui/src/components/MenuItem.tsx b/packages/extension-ui/src/components/MenuItem.tsx new file mode 100644 index 00000000..c3020025 --- /dev/null +++ b/packages/extension-ui/src/components/MenuItem.tsx @@ -0,0 +1,39 @@ +// Copyright 2019-2020 @polkadot/extension-ui authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import React from 'react'; +import styled from 'styled-components'; + +import Title from './Title'; + +interface Props { + children: React.ReactNode; + className?: string; + noBorder?: boolean; + title?: React.ReactNode; +} + +function MenuItem ({ children, className = '', title }: Props): React.ReactElement { + return ( +
+ {title && ( + {title} + )} + {children} +
+ ); +} + +export default styled(MenuItem)` + padding: 0 16px; + max-width: 100%; + + > .itemTitle { + margin: 0; + } + + &+& { + margin-top: 16px; + } +`; diff --git a/packages/extension-ui/src/components/Svg.tsx b/packages/extension-ui/src/components/Svg.tsx index 8f993b02..73a81003 100644 --- a/packages/extension-ui/src/components/Svg.tsx +++ b/packages/extension-ui/src/components/Svg.tsx @@ -10,9 +10,9 @@ interface Props { src: string; } -export default styled.span` - display: block; - mask: ${({ src }): string => `url(${src})`}; +export default styled.span(({ src, theme }: Props & ThemeProps) => ` + background: ${theme.textColor}; + display: inline-block; + mask: url(${src}); mask-size: cover; - background: ${({ theme }: ThemeProps): string => theme.textColor}; -`; +`); diff --git a/packages/extension-ui/src/components/index.ts b/packages/extension-ui/src/components/index.ts index 004fb13a..223be7c1 100644 --- a/packages/extension-ui/src/components/index.ts +++ b/packages/extension-ui/src/components/index.ts @@ -22,6 +22,8 @@ export { default as Link } from './Link'; export { default as List } from './List'; export { default as Loading } from './Loading'; export { default as Menu } from './Menu'; +export { default as MenuDivider } from './MenuDivider'; +export { default as MenuItem } from './MenuItem'; export { default as MnemonicSeed } from './MnemonicSeed'; export { default as NextStepButton } from './NextStepButton'; export { default as Svg } from './Svg'; diff --git a/packages/extension-ui/src/partials/Header.test.tsx b/packages/extension-ui/src/partials/Header.test.tsx index 739bc63b..8f50038f 100644 --- a/packages/extension-ui/src/partials/Header.test.tsx +++ b/packages/extension-ui/src/partials/Header.test.tsx @@ -12,7 +12,7 @@ import { ThemeProvider } from 'styled-components'; import { themes } from '../components'; import Header from './Header'; -import Settings from './Settings'; +import Settings from './MenuSettings'; configure({ adapter: new Adapter() }); @@ -37,7 +37,7 @@ describe('Header component', () => { it('highlights gear icon when settings are toggled', () => { wrapper = mountHeader({ showSettings: true }); - wrapper.find('div.settingsToggle').simulate('click'); + wrapper.find('div[data-toggle-settings]').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 06fa46a3..af54dabb 100644 --- a/packages/extension-ui/src/partials/Header.tsx +++ b/packages/extension-ui/src/partials/Header.tsx @@ -8,28 +8,48 @@ import React, { useCallback, useRef, useState } from 'react'; import styled from 'styled-components'; import ArrowLeftImage from '../assets/arrowLeft.svg'; -import logo from '../assets/pjs.svg'; import gear from '../assets/gear.svg'; +import plus from '../assets/plus.svg'; +import logo from '../assets/pjs.svg'; import { Link, Svg } from '../components'; import useOutsideClick from '../hooks/useOutsideClick'; -import Settings from './Settings'; +import MenuAdd from './MenuAdd'; +import MenuSettings from './MenuSettings'; interface Props extends ThemeProps { children?: React.ReactNode; className?: string; + showAdd?: boolean; + showBackArrow?: boolean; showSettings?: boolean; text?: React.ReactNode; - showBackArrow?: boolean; } -function Header ({ children, className, showBackArrow, showSettings, text }: Props): React.ReactElement { - const [showActionsMenu, setShowActionsMenu] = useState(false); - const actionsRef = useRef(null); +interface MenuSelectProps { + isSelected: boolean; +} - useOutsideClick(actionsRef, () => (showActionsMenu && setShowActionsMenu(!showActionsMenu))); +function Header ({ children, className, showAdd, showBackArrow, showSettings, text }: Props): React.ReactElement { + const [isAddOpen, setShowAdd] = useState(false); + const [isSettingsOpen, setShowSettings] = useState(false); + const addRef = useRef(null); + const setRef = useRef(null); + + useOutsideClick(addRef, (): void => { + isAddOpen && setShowAdd(!isAddOpen); + }); + + useOutsideClick(setRef, (): void => { + isSettingsOpen && setShowSettings(!isSettingsOpen); + }); + + const _toggleAdd = useCallback( + (): void => setShowAdd((isAddOpen) => !isAddOpen), + [] + ); const _toggleSettings = useCallback( - (): void => setShowActionsMenu((showActionsMenu) => !showActionsMenu), + (): void => setShowSettings((isSettingsOpen) => !isSettingsOpen), [] ); @@ -52,16 +72,30 @@ function Header ({ children, className, showBackArrow, showSettings, text }: Pro } {text || 'polkadot{.js}'}
- {showSettings && ( -
- -
+
+ {showAdd && ( +
+ +
+ )} + {showSettings && ( +
+ +
+ )} +
+ {isAddOpen && ( + )} - {showActionsMenu && ( - + {isSettingsOpen && ( + )} {children}
@@ -70,10 +104,10 @@ function Header ({ children, className, showBackArrow, showSettings, text }: Pro } const BackLink = styled(Link)` - width: min-content; - text-decoration: underline; color: ${({ theme }: ThemeProps) => theme.labelColor}; min-height: 52px; + text-decoration: underline; + width: min-content; &:visited { color: ${({ theme }: ThemeProps) => theme.labelColor}; @@ -81,26 +115,26 @@ const BackLink = styled(Link)` `; const ArrowLeft = styled(Svg).attrs(() => ({ src: ArrowLeftImage }))` + background: ${({ theme }: ThemeProps) => theme.labelColor}; width: 12px; height: 12px; margin-right: 13px; - background: ${({ theme }: ThemeProps) => theme.labelColor}; `; -interface GearProps { - isSelected: boolean; -} - -const Gear = styled(Svg).attrs(() => ({ src: gear }))` - height: 18px; - width: 18px; - margin-right: 24px; - align-self: center; - background: ${({ isSelected, theme }: ThemeProps & GearProps): string => isSelected ? theme.primaryColor : theme.iconNeutralColor}; +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; @@ -143,11 +177,24 @@ export default React.memo(styled(Header)(({ theme }: Props) => ` } } - .settingsToggle { + .popupMenus { align-self: center; - &:hover { - cursor: pointer; + .popupToggle { + display: inline-block; + vertical-align: middle; + + &:last-child { + margin-right: 24px; + } + + &:hover { + cursor: pointer; + } + } + + .popupToggle+.popupToggle { + margin-left: 8px; } } } diff --git a/packages/extension-ui/src/partials/MenuAdd.tsx b/packages/extension-ui/src/partials/MenuAdd.tsx new file mode 100644 index 00000000..5918005f --- /dev/null +++ b/packages/extension-ui/src/partials/MenuAdd.tsx @@ -0,0 +1,90 @@ +// Copyright 2019-2020 @polkadot/extension-ui authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import { ThemeProps } from '../types'; + +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 { jsonRestoreWindowOpen } from '../messaging'; + +interface Props extends ThemeProps { + className?: string; + reference: React.MutableRefObject; +} + +const isPopup = window.innerWidth <= 480; + +function MenuAdd ({ className, reference }: Props): React.ReactElement { + const { master } = useContext(AccountContext); + const mediaAllowed = useContext(MediaContext); + + const _openJson = useCallback((): void => { + jsonRestoreWindowOpen().catch(console.error); + }, []); + + return ( + + + + + Create new account (root or derived) + + + + + + + Import account from pre-existing seed + + + + + + Restore account from backup JSON file + + + + + + + Attach external QR-signer account + + + + ); +} + +export default React.memo(styled(MenuAdd)` + margin-top: 50px; + right: 50px; // 24 + 18 + 8 + user-select: none; + + .menuItem { + span:first-child { + height: 20px; + margin-right: 8px; + opacity: 0.5; + width: 20px; + } + + span { + vertical-align: middle; + } + } +`); diff --git a/packages/extension-ui/src/partials/Settings.tsx b/packages/extension-ui/src/partials/MenuSettings.tsx similarity index 73% rename from packages/extension-ui/src/partials/Settings.tsx rename to packages/extension-ui/src/partials/MenuSettings.tsx index 951d65a0..635277b4 100644 --- a/packages/extension-ui/src/partials/Settings.tsx +++ b/packages/extension-ui/src/partials/MenuSettings.tsx @@ -9,7 +9,7 @@ import styled, { ThemeContext } from 'styled-components'; import settings from '@polkadot/ui-settings'; import FullScreenIcon from '../assets/fullscreen.svg'; -import { ActionText, Checkbox, Dropdown, Menu, Svg, Switch, ThemeSwitchContext, Title, themes } from '../components'; +import { ActionText, Checkbox, Dropdown, Menu, MenuDivider, MenuItem, Svg, Switch, ThemeSwitchContext, themes } from '../components'; import { windowOpen } from '../messaging'; interface Option { @@ -27,7 +27,7 @@ const prefixOptions = settings.availablePrefixes .filter(({ value }) => value !== -1) .map(({ text, value }): Option => ({ text, value: `${value}` })); -function Settings ({ className, reference }: Props): React.ReactElement { +function MenuSettings ({ className, reference }: Props): React.ReactElement { const [camera, setCamera] = useState(settings.camera === 'on'); const [prefix, setPrefix] = useState(`${settings.prefix === -1 ? 42 : settings.prefix}`); const themeContext = useContext(ThemeContext); @@ -55,26 +55,34 @@ function Settings ({ className, reference }: Props): React.ReactElement { className={className} reference={reference} > -
- Theme + -
-
- External QR accounts and Access + + + -
-
- Display address format For: + + + { options={prefixOptions} value={`${prefix}`} /> -
+ {isPopup && ( -
- -
+ <> + + + + + )} ); } -export default React.memo(styled(Settings)(({ theme }: Props) => ` - margin-top: 56px; +export default React.memo(styled(MenuSettings)(({ theme }: Props) => ` + margin-top: 50px; right: 24px; user-select: none; @@ -120,14 +131,12 @@ export default React.memo(styled(Settings)(({ theme }: Props) => ` } > .setting { - padding: 0 16px; - max-width: 100%; - > .checkbox { color: ${theme.textColor}; line-height: 20px; font-size: 15px; font-weight: 600; + margin-bottom: 0; label { color: ${theme.textColor}; @@ -136,19 +145,10 @@ export default React.memo(styled(Settings)(({ theme }: Props) => ` > .dropdown { background: ${theme.background}; - margin-bottom: 12px; + margin-bottom: 0; margin-top: 9px; margin-right: 0; width: 100%; } - - > .title { - margin: 0; - } - } - - .setting+.setting { - padding-top: 18px; - border-top: 1px solid ${theme.inputBorderColor}; } `)); diff --git a/packages/extension-ui/src/partials/index.ts b/packages/extension-ui/src/partials/index.ts index a0602e3b..61972c98 100644 --- a/packages/extension-ui/src/partials/index.ts +++ b/packages/extension-ui/src/partials/index.ts @@ -2,11 +2,10 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -export { default as AddAccount } from './AddAccount'; export { default as Back } from './Back'; export { default as DerivationPath } from './DerivationPath'; export { default as Header } from './Header'; +export { default as MenuSettings } from './MenuSettings'; export { default as Name } from './Name'; export { default as Password } from './Password'; -export { default as Settings } from './Settings'; export { default as HeaderWithSteps } from './HeaderWithSteps';