Icon consistency (#641)

* icon consistency consistent

* make icons consistent

* nit

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

@@ -76,7 +76,7 @@ describe('ImportQr component', () => {
 
   describe('Address component', () => {
     it('shows account as external', () => {
-      expect(wrapper.find('Name').find('FontAwesomeIcon [data-icon="external-link-square-alt"]').exists()).toBe(true);
+      expect(wrapper.find('Name').find('FontAwesomeIcon [data-icon="qrcode"]').exists()).toBe(true);
     });
 
     it('shows the correct name', () => {

packages/extension-ui/src/assets/arrowParentLabel.svg

@@ -1 +0,0 @@
-<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 7.33333L6 11.3333L5.05333 10.3867L7.44667 8H0V0H1.33333V6.66667H7.44667L5.05333 4.28L6 3.33333L10 7.33333Z" fill="#B3B3B5"/></svg>

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

@@ -266,7 +266,7 @@ describe('Address', () => {
     });
 
     it('has an icon in front of its name', () => {
-      expect(wrapper.find('Name').find('FontAwesomeIcon [data-icon="external-link-square-alt"]').exists()).toBe(true);
+      expect(wrapper.find('Name').find('FontAwesomeIcon [data-icon="qrcode"]').exists()).toBe(true);
     });
   });
 

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

@@ -10,7 +10,7 @@ import type { ThemeProps } from '../types';
 
 import { faUsb } from '@fortawesome/free-brands-svg-icons';
 import { faCopy, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCodeBranch, faQrcode } 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';
@@ -18,7 +18,6 @@ import styled from 'styled-components';
 
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
-import parentArrow from '../assets/arrowParentLabel.svg';
 import details from '../assets/details.svg';
 import useMetadata from '../hooks/useMetadata';
 import useOutsideClick from '../hooks/useOutsideClick';
@@ -172,7 +171,7 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
             />
             : <FontAwesomeIcon
               className='externalIcon'
-              icon={faExternalLinkSquareAlt}
+              icon={faQrcode}
               title={t('external account')}
             />
         )}
@@ -198,9 +197,9 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
             ? (
               <>
                 <div className='banner'>
-                  <Svg
-                    className='parentArrow'
-                    src={parentArrow}
+                  <FontAwesomeIcon
+                    className='deriveIcon'
+                    icon={faCodeBranch}
                   />
                   <div
                     className='parentName'
@@ -423,8 +422,8 @@ export default styled(Address)(({ theme }: ThemeProps) => `
     }
   }
 
-  .parentArrow {
-    background: ${theme.labelColor};
+  .deriveIcon {
+    color: ${theme.labelColor};
     position: absolute;
     top: 5px;
     width: 9px;