Small adjustments in locations (#356)

* Small adjustments in locations

* Adjust banner location

* Test update

packages/extension-ui/src/Popup/Accounts/Account.test.tsx

@@ -6,13 +6,13 @@ import '../../../../../__mocks__/chrome';
 
 import Adapter from 'enzyme-adapter-react-16';
 import { configure, mount, ReactWrapper } from 'enzyme';
-import { themes, Theme } from '@polkadot/extension-ui/components';
 import { MemoryRouter } from 'react-router';
 import React from 'react';
-
-import Account from './Account';
 import { ThemeProvider } from 'styled-components';
 
+import { themes, Theme } from '../../components';
+import Account from './Account';
+
 configure({ adapter: new Adapter() });
 
 describe('Account component', () => {

packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx

@@ -146,7 +146,7 @@ describe('Create Account', () => {
 
     it('saves account with provided name and password', async () => {
       await enterName('abc').then(password('abcdef')).then(repeat('abcdef'));
-      wrapper.find(Button).find('button').simulate('click');
+      wrapper.find('[data-button-action="add new root"] button').simulate('click');
       await act(flushAllPromises);
 
       expect(messaging.createAccountSuri).toBeCalledWith('abc', 'abcdef', exampleAccount.seed);

packages/extension-ui/src/Popup/Derive/Derive.test.tsx

@@ -10,10 +10,10 @@ import { configure, mount, ReactWrapper } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { act } from 'react-dom/test-utils';
 import { ThemeProvider } from 'styled-components';
-import * as messaging from '@polkadot/extension-ui/messaging';
 
 import { AccountContext, ActionContext, themes } from '../../components';
-import { buildHierarchy } from '../../utils/buildHierarchy';
+import * as messaging from '../../messaging';
+import { buildHierarchy } from '../../util/buildHierarchy';
 import { flushAllPromises } from '../../testHelpers';
 import AddressDropdown from './AddressDropdown';
 import Derive from '.';

packages/extension-ui/src/Popup/Derive/SelectParent.tsx

@@ -8,7 +8,7 @@ import styled from 'styled-components';
 import { AccountContext, ActionContext, Address, ButtonArea, Checkbox, InputWithLabel, Label, NextStepButton, VerticalSpace } from '../../components';
 import { validateAccount } from '../../messaging';
 import { DerivationPath } from '../../partials';
-import { nextDerivationPath } from '../../utils/nextDerivationPath';
+import { nextDerivationPath } from '../../util/nextDerivationPath';
 import AddressDropdown from './AddressDropdown';
 
 interface Props {

packages/extension-ui/src/Popup/Export.test.tsx

@@ -9,13 +9,12 @@ import Adapter from 'enzyme-adapter-react-16';
 import { configure, mount, ReactWrapper } from 'enzyme';
 import { MemoryRouter, Route } from 'react-router';
 import React from 'react';
-import * as messaging from '@polkadot/extension-ui/messaging';
+import { ThemeProvider } from 'styled-components';
 
 import { Button, themes } from '../components';
 import Export from './Export';
-import { exportAccount } from '../messaging';
-import { ThemeProvider } from 'styled-components';
-import { flushAllPromises } from '@polkadot/extension-ui/testHelpers';
+import * as messaging from '../messaging';
+import { flushAllPromises } from '../testHelpers';
 
 configure({ adapter: new Adapter() });
 
@@ -45,7 +44,7 @@ describe('Export component', () => {
     wrapper.find('[data-export-button] button').simulate('click');
     await act(flushAllPromises);
 
-    expect(exportAccount).toHaveBeenCalledWith(VALID_ADDRESS, 'passw0rd');
+    expect(messaging.exportAccount).toHaveBeenCalledWith(VALID_ADDRESS, 'passw0rd');
   });
 
   it('button is disabled before any password is typed', () => {

packages/extension-ui/src/Popup/ImportSeed.tsx

@@ -5,11 +5,11 @@
 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 { allOf, isNotShorterThan, Result } from '../validators';
 import { createAccountSuri, validateSeed, jsonRestoreWindowOpen } from '../messaging';
 import { Header, Name, Password } from '../partials';
-import upload from '../assets/file-upload.svg';
+import { allOf, isNotShorterThan, Result } from '../util/validators';
 
 async function validate (suri: string): Promise<Result<string>> {
   try {

packages/extension-ui/src/Popup/Signing/Signing.test.tsx

@@ -4,22 +4,23 @@
 
 import '../../../../../__mocks__/chrome';
 
-import React, { useState } from 'react';
-import Adapter from 'enzyme-adapter-react-16';
-
-import { configure, mount, ReactWrapper } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import * as messaging from '@polkadot/extension-ui/messaging';
 import { SigningRequest } from '@polkadot/extension-base/background/types';
-import { flushAllPromises } from '@polkadot/extension-ui/testHelpers';
-import { ActionContext, Address, Button, Input, SigningReqContext, themes } from '@polkadot/extension-ui/components';
+
+import Adapter from 'enzyme-adapter-react-16';
+import { configure, mount, ReactWrapper } from 'enzyme';
+import { EventEmitter } from 'events';
+import React, { useState } from 'react';
+import { act } from 'react-dom/test-utils';
 import { ThemeProvider } from 'styled-components';
-import Signing from '.';
+
+import { ActionContext, Address, Button, Input, SigningReqContext, themes } from '../../components';
+import * as messaging from '../../messaging';
+import { flushAllPromises } from '../../testHelpers';
 import TransactionIndex from './TransactionIndex';
 import Request from './Request';
 import Extrinsic from './Extrinsic';
 import Qr from './Qr';
-import { EventEmitter } from 'events';
+import Signing from '.';
 
 configure({ adapter: new Adapter() });
 

packages/extension-ui/src/Popup/index.tsx

@@ -14,7 +14,7 @@ import { Loading } from '../components';
 import { AccountContext, ActionContext, AuthorizeReqContext, MediaContext, MetadataReqContext, SettingsContext, SigningReqContext } from '../components/contexts';
 import ToastProvider from '../components/Toast/ToastProvider';
 import { subscribeAccounts, subscribeAuthorizeRequests, subscribeMetadataRequests, subscribeSigningRequests } from '../messaging';
-import { buildHierarchy } from '../utils/buildHierarchy';
+import { buildHierarchy } from '../util/buildHierarchy';
 import Accounts from './Accounts';
 import Authorize from './Authorize';
 import CreateAccount from './CreateAccount';

packages/extension-ui/src/components/ActionText.tsx

@@ -5,9 +5,10 @@
 import { ThemeProps } from '../types';
 
 import React, { MouseEventHandler } from 'react';
-import Svg from '@polkadot/extension-ui/components/Svg';
 import styled from 'styled-components';
 
+import Svg from './Svg';
+
 interface Props {
   className?: string;
   icon?: string;

packages/extension-ui/src/components/Address.tsx

@@ -238,11 +238,11 @@ const ActiveActionsIcon = styled(Svg).attrs(() => ({ src: details }))`
 `;
 
 const ArrowLabel = styled(Svg).attrs(() => ({ src: parentArrow }))`
+  background: ${({ theme }: ThemeProps): string => theme.labelColor};
   position: absolute;
   top: 5px;
   width: 9px;
   height: 9px;
-  background: ${({ theme }: ThemeProps): string => theme.labelColor};
 `;
 
 const MovableMenu = styled(Menu)<{ isMoved: boolean }>`
@@ -250,17 +250,14 @@ const MovableMenu = styled(Menu)<{ isMoved: boolean }>`
 `;
 
 export default styled(Address)(({ theme }: ThemeProps) => `
-  position: relative;
-  margin-bottom: 8px;
-
   background: ${theme.accountBackground};
   border: 1px solid ${theme.boxBorderColor};
   box-sizing: border-box;
   border-radius: 4px;
+  margin-bottom: 8px;
+  position: relative;
 
   .banner {
-    border-radius: 0 0 8px 8px;
-    color: white;
     font-size: 12px;
     line-height: 16px;
     position: absolute;
@@ -268,8 +265,11 @@ export default styled(Address)(({ theme }: ThemeProps) => `
 
     &.chain {
       background: ${theme.primaryColor};
-      padding: 0.1rem 0.5rem;
-      right: 40px;
+      border-radius: 0 0 0 10px;
+      color: white;
+      padding: 0.1rem 0.5rem 0.1rem 0.75rem;
+      right: 0;
+      z-index: 1;
     }
   }
 

packages/extension-ui/src/components/BackButton.tsx

@@ -12,27 +12,34 @@ import Button from './Button';
 import Svg from './Svg';
 
 interface Props {
+  className?: string;
   onClick: () => void;
 }
 
-export default function BackButton ({ onClick }: Props): React.ReactElement<Props> {
+function BackButton ({ className, onClick }: Props): React.ReactElement<Props> {
   return (
-    <SmallButton onClick={onClick}>
-      <ArrowLeft />
-    </SmallButton>
+    <Button
+      className={className}
+      onClick={onClick}
+    >
+      <Svg
+        className='arrowLeft'
+        src={arrowLeft}
+      />
+    </Button>
   );
 }
 
-const SmallButton = styled(Button)`
+export default styled(BackButton)(({ theme }: ThemeProps) => `
+  background: ${theme.backButtonBackground};
   margin-right: 11px;
   width: 42px;
-  background: ${({ theme }: ThemeProps): string => theme.backButtonBackground};
-`;
 
-const ArrowLeft = styled(Svg).attrs(() => ({ src: arrowLeft }))`
-  width: 12px;
-  height: 12px;
-  display: block;
-  margin: auto;
-  background: ${({ theme }: ThemeProps): string => theme.backButtonTextColor};
-`;
+  > .arrowLeft {
+    background: ${theme.backButtonTextColor};
+    display: block;
+    height: 12px;
+    margin: auto;
+    width: 12px;
+  }
+`);

packages/extension-ui/src/components/Menu.tsx

@@ -25,14 +25,14 @@ function Menu ({ children, className, reference }: Props): React.ReactElement<Pr
 }
 
 export default styled(Menu)(({ theme }: ThemeProps) => `
-  position: absolute;
-  right: 0;
-  margin-top: 90px;
-  padding: 16px 0;
   background: ${theme.popupBackground};
   border-radius: 4px;
   border: 1px solid ${theme.boxBorderColor};
   box-sizing: border-box;
   box-shadow: 0 0 32px ${theme.boxShadow};
-  z-index: 1;
+  margin-top: 90px;
+  padding: 16px 0;
+  position: absolute;
+  right: 0;
+  z-index: 2;
 `);

packages/extension-ui/src/components/MnemonicSeed.tsx

@@ -4,11 +4,12 @@
 
 import { ThemeProps } from '../types';
 
-import styled from 'styled-components';
 import React, { MouseEventHandler } from 'react';
-import TextAreaWithLabel from './TextAreaWithLabel';
-import ActionText from '@polkadot/extension-ui/components/ActionText';
+import styled from 'styled-components';
+
 import copy from '../assets/copy.svg';
+import ActionText from './ActionText';
+import TextAreaWithLabel from './TextAreaWithLabel';
 
 interface Props {
   seed: string;
@@ -19,9 +20,15 @@ interface Props {
 function MnemonicSeed ({ className, onCopy, seed }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
-      <MnemonicText value={seed} />
+      <TextAreaWithLabel
+        className='mnemonicDisplay'
+        isReadOnly
+        label='Generated 12-word mnemonic seed:'
+        value={seed}
+      />
       <div className='buttonsRow'>
         <ActionText
+          className='copyBtn'
           data-seed-action='copy'
           icon={copy}
           onClick={onCopy}
@@ -32,30 +39,27 @@ function MnemonicSeed ({ className, onCopy, seed }: Props): React.ReactElement<P
   );
 }
 
-const MnemonicText = styled(TextAreaWithLabel).attrs(() => ({
-  isReadOnly: true,
-  label: 'Generated 12-word mnemonic seed:'
-}))`
-  textarea {
-    font-size: ${({ theme }: ThemeProps): string => theme.fontSize};
-    line-height: ${({ theme }: ThemeProps): string => theme.lineHeight};
-    height: unset;
-    letter-spacing: -0.01em;
-    padding: 14px;
-    margin-bottom: 10px;
-    color: ${({ theme }: ThemeProps): string => theme.primaryColor};
-  }
-`;
-
-export default styled(MnemonicSeed)`
+export default styled(MnemonicSeed)(({ theme }: ThemeProps) => `
   margin-top: 21px;
 
   .buttonsRow {
     display: flex;
     flex-direction: row;
 
-    ${ActionText} {
+    .copyBtn {
       margin-right: 32px;
     }
   }
-`;
+
+  .mnemonicDisplay {
+    textarea {
+      color: ${theme.primaryColor};
+      font-size: ${theme.fontSize};
+      height: unset;
+      letter-spacing: -0.01em;
+      line-height: ${theme.lineHeight};
+      margin-bottom: 10px;
+      padding: 14px;
+    }
+  }
+`);

packages/extension-ui/src/components/ValidatedInput.tsx

@@ -7,7 +7,7 @@ import { ThemeProps } from '../types';
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
-import { Result, Validator } from '../validators';
+import { Result, Validator } from '../util/validators';
 
 interface BasicProps {
   isError?: boolean;

packages/extension-ui/src/partials/DerivationPath.tsx

@@ -7,11 +7,11 @@ import { ThemeProps } from '../types';
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 
-import { InputWithLabel, Svg, ValidatedInput, Button } from '../components';
-import { validateDerivationPath } from '../messaging';
-import { Result } from '../validators';
 import lockIcon from '../assets/lock.svg';
 import unlockIcon from '../assets/unlock.svg';
+import { InputWithLabel, Svg, ValidatedInput, Button } from '../components';
+import { validateDerivationPath } from '../messaging';
+import { Result } from '../util/validators';
 
 interface Props {
   className?: string;

packages/extension-ui/src/partials/Name.tsx

@@ -5,7 +5,7 @@
 import React, { useContext } from 'react';
 
 import { AccountContext, InputWithLabel, ValidatedInput } from '../components';
-import { isNotShorterThan } from '../validators';
+import { isNotShorterThan } from '../util/validators';
 
 interface Props {
   address?: string;

packages/extension-ui/src/partials/Password.tsx

@@ -5,7 +5,7 @@
 import React, { useState, useEffect } from 'react';
 
 import { InputWithLabel, ValidatedInput } from '../components';
-import { allOf, isNotShorterThan, isSameAs, Validator } from '../validators';
+import { allOf, isNotShorterThan, isSameAs, Validator } from '../util/validators';
 
 interface Props {
   isFocussed?: boolean;