Align Icon in Button

electron-builder.yml

@@ -1,5 +1,10 @@
 appId: com.electron.ledger
 
+protocols:
+  name: Ledger Wallet Desktop
+  schemes:
+    - ledgerhq
+
 mac:
   category: public.app-category.utilities
 linux:

src/components/AccountPage.js

@@ -51,7 +51,7 @@ class AccountPage extends PureComponent<Props> {
           <Box horizontal align="center" justify="flex-end" grow flow={20}>
             <Box>
               <Button primary onClick={() => openModal(MODAL_SEND, { account })}>
-                <Box horizontal flow={2}>
+                <Box horizontal flow={2} align="center">
                   <Box>
                     <Icon name="upload" />
                   </Box>
@@ -61,7 +61,7 @@ class AccountPage extends PureComponent<Props> {
             </Box>
             <Box>
               <Button primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
-                <Box horizontal flow={2}>
+                <Box horizontal flow={2} align="center">
                   <Box>
                     <Icon name="download" />
                   </Box>

src/components/ReceiveBox.js

@@ -27,9 +27,10 @@ const AddressBox = styled(Box).attrs({
 `
 
 const Action = styled(Box).attrs({
-  flow: 1,
-  flex: 1,
+  align: 'center',
   color: 'mouse',
+  flex: 1,
+  flow: 1,
   fontSize: 0,
 })`
   font-weight: bold;

src/components/base/Button/index.js

@@ -4,6 +4,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { borderColor, borderWidth, space, fontSize, fontWeight, color } from 'styled-system'
 
+import Box from 'components/base/Box'
 import Icon from 'components/base/Icon'
 
 const Base = styled.button`
@@ -27,7 +28,13 @@ type Props = {
 }
 
 const Button = ({ primary, children, icon, ...props }: Props) => {
-  children = icon ? <Icon name={icon} /> : children
+  children = icon ? (
+    <Box align="center" justify="center">
+      <Icon name={icon} />
+    </Box>
+  ) : (
+    children
+  )
 
   props = {
     ...props,

src/main/app.js

@@ -78,6 +78,13 @@ const installExtensions = async () => {
   ).catch(console.log) // eslint-disable-line
 }
 
+app.setAsDefaultProtocolClient('ledgerhq')
+
+app.on('open-url', (e, url) => {
+  e.preventDefault()
+  console.log('open url', e, url)
+})
+
 app.on('ready', async () => {
   if (__DEV__) {
     await installExtensions()