Redesign filters on report

centrifuge-app/src/components/Report/ReportFilter.tsx

@@ -1,6 +1,18 @@
 import { Loan, Pool } from '@centrifuge/centrifuge-js'
 import { useGetNetworkName } from '@centrifuge/centrifuge-react'
-import { AnchorButton, Box, DateInput, SearchInput, Select, Shelf } from '@centrifuge/fabric'
+import {
+  AnchorButton,
+  Box,
+  Button,
+  DateInput,
+  IconBalanceSheet,
+  IconCashflow,
+  IconDownload,
+  IconProfitAndLoss,
+  SearchInput,
+  Select,
+  Shelf,
+} from '@centrifuge/fabric'
 import * as React from 'react'
 import { useNavigate } from 'react-router'
 import { nftMetadataSchema } from '../../schemas'
@@ -336,9 +348,25 @@ export function ReportFilter({ pool }: ReportFilterProps) {
           />
         </>
       )}
+      <Button variant="secondary" icon={<IconBalanceSheet color="textInverted" />}>
+        Balance sheet
+      </Button>
+      <Button variant="secondary" icon={<IconProfitAndLoss />}>
+        Profit & loss
+      </Button>
+      <Button variant="secondary" icon={<IconCashflow />}>
+        Cash flow
+      </Button>
       <Box ml="auto">
-        <AnchorButton href={csvData?.dataUrl} download={csvData?.fileName} variant="primary" small disabled={!csvData}>
-          Export CSV
+        <AnchorButton
+          disabled={!csvData}
+          download={csvData?.fileName}
+          href={csvData?.dataUrl}
+          icon={<IconDownload />}
+          small
+          variant="inverted"
+        >
+          CSV
         </AnchorButton>
       </Box>
     </Shelf>