Refactor button and mnemonic

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,9 +64,8 @@ const Info = styled.div`
 `;
 
 const AcceptButton = styled(Button)`
-  padding-top: 25px;
   width: 90%;
-  margin: auto;
+  margin: 25px auto 0;
 `;
 
 const RequestWarning = styled(Warning)`

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>
       </>
     )}

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/>

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

@@ -53,11 +53,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>
           </ActionArea>
         </Address>
       </div>

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

@@ -27,18 +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
-            label='I want to forget this account'
-            onClick={_onClick}
-          />
+          <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;
 `;
 

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

@@ -49,10 +49,9 @@ export default function ImportQr (): React.ReactElement<Props> {
           <VerticalSpace/>
           {name && (
             <ButtonArea>
-              <Button
-                label='Add the account with identified address'
-                onClick={_onCreate}
-              />
+              <Button onClick={_onCreate}>
+                Add the account with identified address
+              </Button>
             </ButtonArea>
           )}
         </>

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

@@ -64,10 +64,7 @@ export default function Import (): React.ReactElement<Props> {
           />
           <VerticalSpace/>
           <ButtonArea>
-            <Button
-              label='Add the account with the supplied seed'
-              onClick={_onCreate}
-            />
+            <Button onClick={_onCreate}>Add the account with the supplied seed</Button>
           </ButtonArea>
         </>
       )}
@@ -77,8 +74,8 @@ export default function Import (): React.ReactElement<Props> {
 
 const SeedInput = styled(TextAreaWithLabel)`
   margin-bottom: 16px;
-  
+
   textarea {
-    height: unset;  
+    height: unset;
   }
 `;

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>
   );

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>
   );

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>
   );
 }

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>
     </>
   );

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

@@ -10,13 +10,11 @@ interface Props {
   children?: React.ReactNode;
   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 +28,34 @@ 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>
   );
 }
 
 export default styled(Button)`
+  display: block;
+  width: 100%;
+  height: ${({ isDanger }): string => isDanger ? '40px' : '48px'};
   box-sizing: border-box;
-  display: ${({ isSmall }): string => isSmall ? 'inline-block' : 'block'};
-  width: ${({ isSmall }): string => isSmall ? 'auto' : '100%'};
+  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 {
+    opacity: 0.3;
+    cursor: default;
+  }
 
-  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: ${({ isDanger }): string => isDanger ? '40px' : '48px'};
-    line-height: 20px;
-    padding: 0 1rem;
-    text-align: center;
-    width: 100%;
-
-    &:disabled {
-      opacity: 0.3;
-      cursor: default;
-    }
-
-    &:not(:disabled):hover {
-      background: ${({ theme }): string => theme.primaryColor};
-    }
+  &:not(:disabled):hover {
+    background: ${({ isDanger, theme }): string => isDanger ? theme.buttonBackgroundDangerHover : theme.primaryColor};
   }
 `;

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',