From f930d4c1131d5b1b9002cc2bf11cb560923d40c6 Mon Sep 17 00:00:00 2001
From: Peter Chung <1391892+touhonoob@users.noreply.github.com>
Date: Tue, 8 Oct 2019 15:35:40 +0800
Subject: [PATCH] Align Sig Validity Indicator (#1660) (#1697)

* Align Sig Validity Indicator (#1660)

* Verify: moved AlignedIcon to top of the file and adjust indent size

* Verify: add font-size:32px to i element of AlignedIcon and remove redundant className
---
 packages/app-toolbox/src/Verify.tsx | 32 ++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/app-toolbox/src/Verify.tsx b/packages/app-toolbox/src/Verify.tsx
index d1873e123e..c596d6b3dd 100644
--- a/packages/app-toolbox/src/Verify.tsx
+++ b/packages/app-toolbox/src/Verify.tsx
@@ -11,6 +11,7 @@ import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
 import { isHex } from '@polkadot/util';
 import { naclVerify, schnorrkelVerify } from '@polkadot/util-crypto';
+import styled from 'styled-components';
 
 import translate from './translate';
 
@@ -34,6 +35,23 @@ interface State {
   signature: string;
 }
 
+const AlignedIcon = styled(Icon)`
+  &&&::before {
+    position: relative;
+    left: 0.88rem;
+    top: 1rem; 
+    width: 32px;
+    height: 32px;
+    font-size: 32px;
+    background: white !important;
+    border-radius: 50%;
+  }
+  
+  &&&.big.icon {
+    font-size: 32px;
+  }
+`;
+
 class Verify extends React.PureComponent<Props, State> {
   public state: State;
 
@@ -89,15 +107,15 @@ class Verify extends React.PureComponent<Props, State> {
           />
         </div>
         <div className='ui--row'>
+          <div className="ui--AlignedIconContainer" style={{ position: 'absolute', zIndex: 1 }}>
+            <AlignedIcon
+              color={isValid ? 'green' : (isValidSignature ? 'red' : undefined)}
+              name={isValid ? 'check circle' : (isValidSignature ? 'exclamation circle' : 'help circle')}
+              size="big"
+            />
+          </div>
           <Input
             className='full'
-            icon={
-              <Icon
-                color={isValid ? 'green' : (isValidSignature ? 'red' : undefined)}
-                name={isValid ? 'check circle' : (isValidSignature ? 'exclamation circle' : 'help circle')}
-                size='big'
-              />
-            }
             isError={!isValidSignature}
             help={t('The signature as by the account being checked, supplied as a hex-formatted string.')}
             label={t('the supplied signature')}