From f62d26c055d1108dfa28368f39eb9aacca016286 Mon Sep 17 00:00:00 2001
From: Kamil <kamil@ethworks.io>
Date: Wed, 20 Nov 2019 17:14:09 +0100
Subject: [PATCH 1/5] Refactor button and mnemonic

---
 .../src/Popup/Authorize/Request.tsx           |  6 +-
 .../src/Popup/CreateAccount/AccountName.tsx   |  5 +-
 .../src/Popup/CreateAccount/Mnemonic.tsx      |  4 +-
 packages/extension-ui/src/Popup/Export.tsx    |  5 +-
 packages/extension-ui/src/Popup/Forget.tsx    |  5 +-
 packages/extension-ui/src/Popup/ImportQr.tsx  |  5 +-
 .../extension-ui/src/Popup/ImportSeed.tsx     |  5 +-
 .../extension-ui/src/Popup/Settings/index.tsx |  5 +-
 .../extension-ui/src/Popup/Signing/Qr.tsx     |  5 +-
 .../extension-ui/src/Popup/Signing/Unlock.tsx |  5 +-
 packages/extension-ui/src/Popup/Welcome.tsx   |  5 +-
 .../extension-ui/src/components/Button.tsx    | 67 ++++++++++---------
 12 files changed, 54 insertions(+), 68 deletions(-)

diff --git a/packages/extension-ui/src/Popup/Authorize/Request.tsx b/packages/extension-ui/src/Popup/Authorize/Request.tsx
index ed094b17abe..e766590ec71 100644
--- a/packages/extension-ui/src/Popup/Authorize/Request.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/Request.tsx
@@ -39,10 +39,7 @@ function Request ({ authId, className, isFirst, request: { origin }, url }: Prop
         {isFirst && (
           <>
             <RequestWarning>Only approve this request if you trust the application. Approving gives the application access to the addresses of your accounts.</RequestWarning>
-            <AcceptButton
-              label='Yes, allow this application access'
-              onClick={_onApprove}
-            />
+            <AcceptButton onClick={_onApprove}>Yes, allow this application access</AcceptButton>
           </>
         )}
         <RejectButton>
@@ -67,7 +64,6 @@ const Info = styled.div`
 `;
 
 const AcceptButton = styled(Button)`
-  padding-top: 25px;
   width: 90%;
   margin: auto;
 `;
diff --git a/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx b/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
index e3e730951d1..6f372f12f7d 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
@@ -30,9 +30,10 @@ function AccountName ({ onCreate, address }: Props): React.ReactElement<Props> {
         <VerticalSpace/>
         <ButtonArea>
           <Button
-            label='Add the account with the generated seed'
             onClick={(): void | Promise<void | boolean> => onCreate(name, password)}
-          />
+          >
+            Add the account with the generated seed
+          </Button>
         </ButtonArea>
       </>
     )}
diff --git a/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx b/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
index 57280fbe141..1701ea8c1c4 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
@@ -33,8 +33,8 @@ function Mnemonic ({ seed, onNextStep }: Props): React.ReactElement<Props> {
   const [isMnemonicSaved, setIsMnemonicSaved] = useState(false);
   return <>
     <Warning>
-      <div>Please write down your wallet’s mnemonic seed and keep it in a safe place.</div>
-      <div>Mnemonic seed is used to restore your wallet. Keep it carefully in case you lose your assets.</div>
+      Please write down your wallet’s mnemonic seed and keep it in a safe place. <br/>
+      Mnemonic seed is used to restore your wallet. Keep it carefully in case you lose your assets.
     </Warning>
     <MnemonicSeed seed={seed} onCopy={onCopy} onPrint={onPrint(seed)}/>
     <VerticalSpace/>
diff --git a/packages/extension-ui/src/Popup/Export.tsx b/packages/extension-ui/src/Popup/Export.tsx
index f7462696a82..1d4092fb916 100644
--- a/packages/extension-ui/src/Popup/Export.tsx
+++ b/packages/extension-ui/src/Popup/Export.tsx
@@ -50,11 +50,12 @@ function Export ({ match: { params: { address } } }: Props): React.ReactElement<
         <Button
           isDisabled={pass.length === 0}
           isDanger
-          label='I want to export this account'
           onClick={_onExportButtonClick}
           className='export-button'
           data-export-button
-        />
+        >
+          I want to export this account
+        </Button>
       </Address>
     </div>
   );
diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx
index a04d57b6491..3173fd8083a 100644
--- a/packages/extension-ui/src/Popup/Forget.tsx
+++ b/packages/extension-ui/src/Popup/Forget.tsx
@@ -27,9 +27,10 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
         <Warning danger>You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.</Warning>
         <Button
           isDanger
-          label='I want to forget this account'
           onClick={_onClick}
-        />
+        >
+          I want to forget this account
+        </Button>
       </Address>
     </div>
   );
diff --git a/packages/extension-ui/src/Popup/ImportQr.tsx b/packages/extension-ui/src/Popup/ImportQr.tsx
index fc782c321e7..bf59a173f97 100644
--- a/packages/extension-ui/src/Popup/ImportQr.tsx
+++ b/packages/extension-ui/src/Popup/ImportQr.tsx
@@ -42,9 +42,10 @@ export default function ImportQr (): React.ReactElement<Props> {
           >
             {name && (
               <Button
-                label='Add the account with identified address'
                 onClick={_onCreate}
-              />
+              >
+                Add the account with identified address
+              </Button>
             )}
           </Address>
         </>
diff --git a/packages/extension-ui/src/Popup/ImportSeed.tsx b/packages/extension-ui/src/Popup/ImportSeed.tsx
index 1bd9a7b4146..32af887e3a6 100644
--- a/packages/extension-ui/src/Popup/ImportSeed.tsx
+++ b/packages/extension-ui/src/Popup/ImportSeed.tsx
@@ -48,10 +48,7 @@ export default function Import (): React.ReactElement<Props> {
           address={account.address}
           name={name}
         >
-          <Button
-            label='Add the account with the supplied seed'
-            onClick={_onCreate}
-          />
+          <Button onClick={_onCreate}>Add the account with the supplied seed</Button>
         </Address>
       )}
     </div>
diff --git a/packages/extension-ui/src/Popup/Settings/index.tsx b/packages/extension-ui/src/Popup/Settings/index.tsx
index ab19032c5eb..48580d7f618 100644
--- a/packages/extension-ui/src/Popup/Settings/index.tsx
+++ b/packages/extension-ui/src/Popup/Settings/index.tsx
@@ -61,10 +61,7 @@ export default function Settings (): React.ReactElement<{}> {
         value={camera}
       />
       {isPopup && (
-        <Button
-          label='Open extension in new window'
-          onClick={windowOpen}
-        />
+        <Button onClick={windowOpen}>Open extension in new window</Button>
       )}
     </div>
   );
diff --git a/packages/extension-ui/src/Popup/Signing/Qr.tsx b/packages/extension-ui/src/Popup/Signing/Qr.tsx
index 9c46f99b03c..c270ebf8155 100644
--- a/packages/extension-ui/src/Popup/Signing/Qr.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Qr.tsx
@@ -40,10 +40,7 @@ function Qr ({ className, onSignature, payload, request }: Props): React.ReactEl
         />
       }
       {!isScanning && (
-        <Button
-          label='Scan signature via camera'
-          onClick={_onShowQr}
-        />
+        <Button onClick={_onShowQr}>Scan signature via camera</Button>
       )}
     </div>
   );
diff --git a/packages/extension-ui/src/Popup/Signing/Unlock.tsx b/packages/extension-ui/src/Popup/Signing/Unlock.tsx
index 9e3654a12b1..0ff3ac7b72f 100644
--- a/packages/extension-ui/src/Popup/Signing/Unlock.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Unlock.tsx
@@ -34,10 +34,7 @@ export default function Unlock ({ className, onSign }: Props): React.ReactElemen
         onChange={setPassword}
         type='password'
       />
-      <Button
-        label='Sign the transaction'
-        onClick={_onClick}
-      />
+      <Button onClick={_onClick}>Sign the transaction</Button>
     </div>
   );
 }
diff --git a/packages/extension-ui/src/Popup/Welcome.tsx b/packages/extension-ui/src/Popup/Welcome.tsx
index 818b4bc5909..3f5e3e52fe1 100644
--- a/packages/extension-ui/src/Popup/Welcome.tsx
+++ b/packages/extension-ui/src/Popup/Welcome.tsx
@@ -32,10 +32,7 @@ export default function Welcome (): React.ReactElement<Props> {
       <Note>... we are not in the information collection business (even anonymized).</Note>
       <VerticalSpace/>
       <ButtonArea>
-        <Button
-          label='Understood, let me continue'
-          onClick={_onClick}
-        />
+        <Button onClick={_onClick}>Understood, let me continue</Button>
       </ButtonArea>
     </>
   );
diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx
index add1ba4d079..8e68837b6bb 100644
--- a/packages/extension-ui/src/components/Button.tsx
+++ b/packages/extension-ui/src/components/Button.tsx
@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
 
 interface Props {
   className?: string;
@@ -11,12 +11,11 @@ interface Props {
   isDanger?: boolean;
   isDisabled?: boolean;
   isSmall?: boolean;
-  label?: string;
   onClick?: () => void | Promise<void | boolean>;
   to?: string;
 }
 
-function Button ({ children, className, isDisabled, label, onClick, to }: Props): React.ReactElement<Props> {
+function Button ({ children, className, isDisabled, onClick, to }: Props): React.ReactElement<Props> {
   const _onClick = (): void => {
     if (isDisabled) {
       return;
@@ -30,41 +29,43 @@ function Button ({ children, className, isDisabled, label, onClick, to }: Props)
   };
 
   return (
-    <div className={className}>
-      <button onClick={_onClick} disabled={isDisabled}>
-        {label}{children}
-      </button>
-    </div>
+    <button className={className} onClick={_onClick} disabled={isDisabled}>
+      {children}
+    </button>
   );
 }
 
+const smallButtonStyles = css`
+  display: inline-block;
+  width: auto;
+`;
+
+const bigButtonStyles = css`
+  display: block;
+  width: 100%;
+`;
+
 export default styled(Button)`
+  ${({ isSmall }): FlattenSimpleInterpolation => isSmall ? smallButtonStyles : bigButtonStyles};
   box-sizing: border-box;
-  display: ${({ isSmall }): string => isSmall ? 'inline-block' : 'block'};
-  width: ${({ isSmall }): string => isSmall ? 'auto' : '100%'};
+  height: 48px;
+  padding: 0 1rem;
+  background: ${({ isDanger, theme }): string => isDanger ? theme.buttonBackgroundDanger : theme.buttonBackground};
+  border: none;
+  border-radius: ${({ theme }): string => theme.borderRadius};
+  color: ${({ theme }): string => theme.textColor};
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  text-align: center;
+  cursor: pointer;
 
-  button {
-    background: ${({ isDanger, theme }): string => isDanger ? theme.buttonBackgroundDanger : theme.buttonBackground};
-    border: none;
-    border-radius: ${({ theme }): string => theme.borderRadius};
-    color: ${({ theme }): string => theme.textColor};
-    cursor: pointer;
-    display: block;
-    font-size: 15px;
-    font-weight: 600;
-    height: 48px;
-    line-height: 20px;
-    padding: 0.75rem 1rem;
-    text-align: center;
-    width: 100%;
-    
-    &:disabled {
-      opacity: 0.3;
-      cursor: default;
-    }
-    
-    &:not(:disabled):hover {
-      background: ${({ theme }): string => theme.primaryColor};
-    }
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  &:not(:disabled):hover {
+    background: ${({ theme }): string => theme.primaryColor};
   }
 `;

From c040ed41505bb878435f7e26725f1f3bb96f75f0 Mon Sep 17 00:00:00 2001
From: Kamil <kamil@ethworks.io>
Date: Thu, 21 Nov 2019 15:17:07 +0100
Subject: [PATCH 2/5] requested changes

---
 packages/extension-ui/src/components/Button.tsx | 2 +-
 packages/extension-ui/src/components/themes.ts  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx
index 8e68837b6bb..6015bef8f62 100644
--- a/packages/extension-ui/src/components/Button.tsx
+++ b/packages/extension-ui/src/components/Button.tsx
@@ -66,6 +66,6 @@ export default styled(Button)`
   }
 
   &:not(:disabled):hover {
-    background: ${({ theme }): string => theme.primaryColor};
+    background: ${({ isDanger, theme }): string => isDanger ? theme.buttonBackgroundDangerHover : theme.primaryColor};
   }
 `;
diff --git a/packages/extension-ui/src/components/themes.ts b/packages/extension-ui/src/components/themes.ts
index d8990b59920..19f9f3add25 100644
--- a/packages/extension-ui/src/components/themes.ts
+++ b/packages/extension-ui/src/components/themes.ts
@@ -7,6 +7,7 @@ export const defaultTheme = {
   highlightedAreaBackground: 'rgba(13, 14, 19, 0.7)',
   buttonBackground: 'linear-gradient(95.52deg, #FF8A00 0.14%, #FF7A00 100.14%)',
   buttonBackgroundDanger: '#D92A2A',
+  buttonBackgroundDangerHover: '#D93B3B',
   textColor: '#FFFFFF',
   textColorDanger: '#FF5858',
   errorBorderColor: '#7E3530',

From 23d52f9949563a630b2558e9b6f5b9d3d0c26f45 Mon Sep 17 00:00:00 2001
From: Kamil <kamil@ethworks.io>
Date: Fri, 22 Nov 2019 14:58:17 +0100
Subject: [PATCH 3/5] code fix

---
 packages/extension-ui/src/Popup/Authorize/Request.tsx    | 2 +-
 packages/extension-ui/src/Popup/Export.tsx               | 2 +-
 packages/extension-ui/src/Popup/Forget.tsx               | 2 +-
 packages/extension-ui/src/Popup/ImportQr.tsx             | 4 +++-
 packages/extension-ui/src/Popup/Signing/Signing.test.tsx | 2 +-
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/extension-ui/src/Popup/Authorize/Request.tsx b/packages/extension-ui/src/Popup/Authorize/Request.tsx
index 98a690ebf05..79988cd6e6f 100644
--- a/packages/extension-ui/src/Popup/Authorize/Request.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/Request.tsx
@@ -65,7 +65,7 @@ const Info = styled.div`
 
 const AcceptButton = styled(Button)`
   width: 90%;
-  margin: auto;
+  margin: 25px auto 0;
 `;
 
 const RequestWarning = styled(Warning)`
diff --git a/packages/extension-ui/src/Popup/Export.tsx b/packages/extension-ui/src/Popup/Export.tsx
index 0615bbf5929..0fcd206f81d 100644
--- a/packages/extension-ui/src/Popup/Export.tsx
+++ b/packages/extension-ui/src/Popup/Export.tsx
@@ -14,7 +14,7 @@ const MIN_LENGTH = 6;
 
 type Props = RouteComponentProps<{ address: string }>;
 
-function Export({ match: { params: { address } } }: Props): React.ReactElement<Props> {
+function Export ({ match: { params: { address } } }: Props): React.ReactElement<Props> {
   const onAction = useContext(ActionContext);
 
   const [pass, setPass] = useState('');
diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx
index 9a41aaff9d6..ff048273e9d 100644
--- a/packages/extension-ui/src/Popup/Forget.tsx
+++ b/packages/extension-ui/src/Popup/Forget.tsx
@@ -12,7 +12,7 @@ import styled from 'styled-components';
 
 type Props = RouteComponentProps<{ address: string }>;
 
-function Forget({ match: { params: { address } } }: Props): React.ReactElement<Props> {
+function Forget ({ match: { params: { address } } }: Props): React.ReactElement<Props> {
   const onAction = useContext(ActionContext);
 
   const _onClick = (): Promise<void> =>
diff --git a/packages/extension-ui/src/Popup/ImportQr.tsx b/packages/extension-ui/src/Popup/ImportQr.tsx
index 80b74cde937..a8494ef0d15 100644
--- a/packages/extension-ui/src/Popup/ImportQr.tsx
+++ b/packages/extension-ui/src/Popup/ImportQr.tsx
@@ -51,7 +51,9 @@ export default function ImportQr (): React.ReactElement<Props> {
             <ButtonArea>
               <Button
                 onClick={_onCreate}
-              />
+              >
+                Add the account with identified address
+                </Button>
             </ButtonArea>
           )}
         </>
diff --git a/packages/extension-ui/src/Popup/Signing/Signing.test.tsx b/packages/extension-ui/src/Popup/Signing/Signing.test.tsx
index 99141029a91..c504c0cae13 100644
--- a/packages/extension-ui/src/Popup/Signing/Signing.test.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Signing.test.tsx
@@ -46,7 +46,7 @@ describe('Signing requests', () => {
   }];
 
   const emitter = new EventEmitter();
-  function MockRequestsProvider () {
+  function MockRequestsProvider (): React.ReactElement {
     const [requests, setRequests] = useState(signRequests);
 
     emitter.on('request', setRequests);

From b814e61a0402d0a82228c41f0330d35ec23b439a Mon Sep 17 00:00:00 2001
From: ivan <ivanruch@gmail.com>
Date: Mon, 25 Nov 2019 12:56:07 +0300
Subject: [PATCH 4/5] lint fix

---
 packages/extension-ui/src/Popup/ImportQr.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/extension-ui/src/Popup/ImportQr.tsx b/packages/extension-ui/src/Popup/ImportQr.tsx
index a8494ef0d15..20b4fd4315e 100644
--- a/packages/extension-ui/src/Popup/ImportQr.tsx
+++ b/packages/extension-ui/src/Popup/ImportQr.tsx
@@ -49,11 +49,9 @@ export default function ImportQr (): React.ReactElement<Props> {
           <VerticalSpace/>
           {name && (
             <ButtonArea>
-              <Button
-                onClick={_onCreate}
-              >
+              <Button onClick={_onCreate}>
                 Add the account with identified address
-                </Button>
+              </Button>
             </ButtonArea>
           )}
         </>

From 42469bcbe1e5cb4c3688a6e9fdee85ce58644769 Mon Sep 17 00:00:00 2001
From: ivan <ivanruch@gmail.com>
Date: Mon, 25 Nov 2019 13:14:39 +0300
Subject: [PATCH 5/5] fix forget screen

---
 packages/extension-ui/src/Popup/Forget.tsx      | 16 +++++++++-------
 packages/extension-ui/src/components/Button.tsx |  6 +++---
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx
index ff048273e9d..fd98f7a8a41 100644
--- a/packages/extension-ui/src/Popup/Forget.tsx
+++ b/packages/extension-ui/src/Popup/Forget.tsx
@@ -27,19 +27,21 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
       <div>
         <Address address={address}>
           <Warning danger>You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.</Warning>
-          <ForgetButton
-            isDanger
-            onClick={_onClick}
-          >
-            I want to forget this account
-          </ForgetButton>
+          <ActionArea>
+            <Button
+              isDanger
+              onClick={_onClick}
+            >
+              I want to forget this account
+            </Button>
+          </ActionArea>
         </Address>
       </div>
     </>
   );
 }
 
-const ForgetButton = styled(Button)`
+const ActionArea = styled.div`
   padding: 25px 24px;
 `;
 
diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx
index 9142d40acae..ac827b81efb 100644
--- a/packages/extension-ui/src/components/Button.tsx
+++ b/packages/extension-ui/src/components/Button.tsx
@@ -37,17 +37,17 @@ function Button ({ children, className, isDisabled, onClick, to }: Props): React
 export default styled(Button)`
   display: block;
   width: 100%;
+  height: ${({ isDanger }): string => isDanger ? '40px' : '48px'};
   box-sizing: border-box;
-  height: 48px;
-  padding: 0 1rem;
-  background: ${({ isDanger, theme }): string => isDanger ? theme.buttonBackgroundDanger : theme.buttonBackground};
   border: none;
   border-radius: ${({ theme }): string => theme.borderRadius};
   color: ${({ theme }): string => theme.textColor};
   font-size: 15px;
   font-weight: 600;
   line-height: 20px;
+  padding: 0 1rem;
   text-align: center;
+  background: ${({ isDanger, theme }): string => isDanger ? theme.buttonBackgroundDanger : theme.buttonBackground};
   cursor: pointer;
 
   &:disabled {