Finance filters refresh (aragon#767)

Improve the filters layout:

- Move TransfersFilters to its own component.
- Make the layout work at all sizes.
- Update the download button so it looks like the other icon buttons.
- Update some labels:
  - “Date range” => “Period”
  - “Transfer type” => “Type” (since it is already below the “Transfers” title).
- Select the last 90 days (rolling) by default.

apps/finance/app/src/components/DateRange/DateRangeInput.js

@@ -174,7 +174,6 @@ const StyledDatePickersContainer = styled.div`
       display: flex;
       flex-direction: row;
       align-items: baseline;
-      left: -250px;
     `
   )}
 `

apps/finance/app/src/components/DownloadButton.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { ButtonIcon } from '@aragon/ui'
+import IconDownload from './IconDownload'
+
+const Download = ({ url, filename, ...props }) => (
+  <ButtonIcon
+    href={url}
+    download={filename}
+    rel="noopener noreferrer"
+    label="Download"
+    css={`
+      height: 40px;
+      padding-top: 4px;
+    `}
+    {...props}
+  >
+    <IconDownload />
+  </ButtonIcon>
+)
+
+export default Download

apps/finance/app/src/components/Download.js → apps/finance/app/src/components/IconDownload.js

@@ -1,20 +1,4 @@
 import React from 'react'
-import { ButtonIcon } from '@aragon/ui'
-
-const Download = props => (
-  <ButtonIcon
-    {...props}
-    css={`
-      width: auto;
-      height: 100%;
-      padding: 0 8px;
-      margin: 0 8px;
-    `}
-    label="Download"
-  >
-    <IconDownload />
-  </ButtonIcon>
-)
 
 const IconDownload = props => (
   <svg
@@ -35,4 +19,4 @@ const IconDownload = props => (
   </svg>
 )
 
-export default Download
+export default IconDownload