From ed35f3de976cc8d2212c9c87834e4f5d8a7839e1 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Mon, 1 Feb 2021 16:48:39 +0100
Subject: [PATCH] Icon consistency (#641)

* icon consistency consistent

* make icons consistent

* nit
---
 packages/extension-ui/src/Popup/ImportQr.test.tsx |  2 +-
 .../extension-ui/src/assets/arrowParentLabel.svg  |  1 -
 .../extension-ui/src/components/Address.test.tsx  |  2 +-
 packages/extension-ui/src/components/Address.tsx  | 15 +++++++--------
 4 files changed, 9 insertions(+), 11 deletions(-)
 delete mode 100644 packages/extension-ui/src/assets/arrowParentLabel.svg

diff --git a/packages/extension-ui/src/Popup/ImportQr.test.tsx b/packages/extension-ui/src/Popup/ImportQr.test.tsx
index 9aa2a34c..bc90652f 100644
--- a/packages/extension-ui/src/Popup/ImportQr.test.tsx
+++ b/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', () => {
diff --git a/packages/extension-ui/src/assets/arrowParentLabel.svg b/packages/extension-ui/src/assets/arrowParentLabel.svg
deleted file mode 100644
index 5a1eb932..00000000
--- a/packages/extension-ui/src/assets/arrowParentLabel.svg
+++ /dev/null
@@ -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>
diff --git a/packages/extension-ui/src/components/Address.test.tsx b/packages/extension-ui/src/components/Address.test.tsx
index e7a66bac..e1d873c9 100644
--- a/packages/extension-ui/src/components/Address.test.tsx
+++ b/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);
     });
   });
 
diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx
index 84699595..b19eded4 100644
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/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;