type(styled): fix usage

app/components/button.js

@@ -24,7 +24,7 @@ const DefaultButton = styled.button`
   transition: background-color 0.1s ${props => props.theme.colors.transitionEase};
 `;
 
-const Primary = styled<{ theme: Object }>(DefaultButton)`
+const Primary = styled(DefaultButton)`
   background-color: ${props => props.theme.colors.primary};
   color: ${props => props.theme.colors.secondary};
   border: none;
@@ -40,7 +40,7 @@ const Primary = styled<{ theme: Object }>(DefaultButton)`
   }
 `;
 
-const Secondary = styled<{ theme: Object }>(DefaultButton)`
+const Secondary = styled(DefaultButton)`
   background-color: transparent;
   color: ${props => props.theme.colors.secondary};
   border: 2px solid ${props => props.theme.colors.buttonBorderColor};
@@ -76,6 +76,7 @@ type Props = {
   icon?: string | null,
   className?: string,
   isLoading?: boolean,
+  id?: string,
 };
 
 export const Button = ({
@@ -123,4 +124,5 @@ Button.defaultProps = {
   disabled: false,
   className: '',
   isLoading: false,
+  id: '',
 };

app/components/column.js

@@ -1,8 +1,7 @@
 // @flow
 
-import React from 'react';
+import React, { type Node, type ElementProps } from 'react';
 import styled from 'styled-components';
-import type { Node, ElementProps } from 'react';
 
 const Flex = styled.div`
   display: flex;
@@ -22,7 +21,7 @@ type Props = {
 };
 
 export const ColumnComponent = ({ children, ...props }: Props) => (
-  <Flex {...props}>{React.Children.map(children, ch => ch)}</Flex>
+  <Flex {...props}>{React.Children.map(children, (ch: Node) => ch)}</Flex>
 );
 
 ColumnComponent.defaultProps = {

app/components/confirm-dialog.js

@@ -80,7 +80,7 @@ export const ConfirmDialogComponent = ({
       closeOnEsc={false}
     >
       {toggle => (
-        <Wrapper width={width}>
+        <Wrapper width={Number(width)}>
           <CloseIconWrapper>
             <CloseIconImg src={CloseIcon} onClick={handleClose(toggle)} />
           </CloseIconWrapper>

app/components/dropdown.js

@@ -13,10 +13,9 @@ import truncateAddress from '../utils/truncateAddress';
 
 /* eslint-disable max-len  */
 const MenuWrapper = styled.div`
-  background-image: ${props => `linear-gradient(to right, ${darken(
-    0.05,
-    props.theme.colors.activeItem,
-  )}, ${props.theme.colors.activeItem})`};
+  background-image: ${props => `linear-gradient(to right, ${darken(0.05, props.theme.colors.activeItem)}, ${
+    props.theme.colors.activeItem
+  })`};
   border-radius: ${props => props.theme.boxBorderRadius};
   margin-left: -10px;
   max-width: 400px;
@@ -56,7 +55,7 @@ const MenuItem = styled.button`
 
 const OptionItem = styled(MenuItem)`
   &:hover {
-    background-color: #F9D114;
+    background-color: #f9d114;
   }
 `;
 
@@ -100,9 +99,7 @@ export class DropdownComponent extends Component<Props, State> {
     } = this.props;
 
     const body = [
-      <ClickOutside
-        onClickOutside={() => this.setState(() => ({ isOpen: false }))}
-      >
+      <ClickOutside onClickOutside={() => this.setState(() => ({ isOpen: false }))}>
         <MenuWrapper>
           {label && (
             <MenuItem disabled isGroupLabel>
@@ -126,10 +123,7 @@ export class DropdownComponent extends Component<Props, State> {
         tipSize={7}
         body={body}
       >
-        {renderTrigger(
-          () => this.setState(state => ({ isOpen: !state.isOpen })),
-          isOpen,
-        )}
+        {renderTrigger(() => this.setState(state => ({ isOpen: !state.isOpen })), isOpen)}
       </PopoverWithStyle>
     );
   }

app/components/input-label.js

@@ -1,9 +1,9 @@
 //  @flow
 import styled from 'styled-components';
 
-import { TextComponent, type Props } from './text';
+import { TextComponent } from './text';
 
-export const InputLabelComponent = styled<{ ...Props, marginTop: string }>(TextComponent)`
+export const InputLabelComponent = styled(TextComponent)`
   margin: ${props => props.marginTop || '20px'} 0 8.5px 0;
   font-weight: ${props => props.theme.fontWeight.bold};
 `;

utils/debug-shortcut.js

@@ -3,13 +3,9 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { globalShortcut, typeof BrowserWindow, typeof app as ElectronApp } from 'electron';
 
-export const registerDebugShortcut = (app: ElectronApp, mainWindow: BrowserWindow) => {
-  if (globalShortcut) {
-    globalShortcut.register('CommandOrControl+Option+B', () => {
-      // $FlowFixMe
-      app.dock.show();
-      // $FlowFixMe
-      mainWindow.webContents.openDevTools();
-    });
-  }
-};
+export const registerDebugShortcut = (app: ElectronApp, mainWindow: BrowserWindow) => globalShortcut.register('CommandOrControl+Option+B', () => {
+  // $FlowFixMe
+  app.dock.show();
+  // $FlowFixMe
+  mainWindow.webContents.openDevTools();
+});