diff --git a/new-lamassu-admin/src/components/SearchFilter.js b/new-lamassu-admin/src/components/SearchFilter.js index dacbfd16..2cbdf4f9 100644 --- a/new-lamassu-admin/src/components/SearchFilter.js +++ b/new-lamassu-admin/src/components/SearchFilter.js @@ -1,38 +1,56 @@ import { makeStyles } from '@material-ui/core' +import * as R from 'ramda' import React from 'react' import Chip from 'src/components/Chip' -import { P } from 'src/components/typography' +import { ActionButton } from 'src/components/buttons' +import { P, Label2 } from 'src/components/typography' import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg' +import { ReactComponent as FilterIcon } from 'src/styling/icons/button/filter/white.svg' +import { ReactComponent as ReverseFilterIcon } from 'src/styling/icons/button/filter/zodiac.svg' import { chipStyles, styles } from './SearchFilter.styles' const useChipStyles = makeStyles(chipStyles) const useStyles = makeStyles(styles) -const SearchFilter = ({ filters, onFilterDelete, setFilters }) => { +const capitalize = R.converge(R.concat(), [ + R.compose(R.toUpper, R.head), + R.tail +]) + +const SearchFilter = ({ filters, onFilterDelete, setFilters, entries }) => { const chipClasses = useChipStyles() const classes = useStyles() return ( <>

{'Filters:'}

-
- {filters.map((f, idx) => ( - onFilterDelete(f)} - deleteIcon={} - /> - ))} - setFilters([])} - deleteIcon={} - /> +
+
+ {filters.map((f, idx) => ( + onFilterDelete(f)} + deleteIcon={} + /> + ))} +
+
+ {entries && ( + {`${entries} entries`} + )} + setFilters([])}> + Delete filters + +
) diff --git a/new-lamassu-admin/src/components/SearchFilter.styles.js b/new-lamassu-admin/src/components/SearchFilter.styles.js index ff316135..fd2f8ccb 100644 --- a/new-lamassu-admin/src/components/SearchFilter.styles.js +++ b/new-lamassu-admin/src/components/SearchFilter.styles.js @@ -4,28 +4,26 @@ import { smallestFontSize, inputFontFamily, inputFontWeight, - spacer + spacer, + offColor } from 'src/styling/variables' const chipStyles = { root: { - borderRadius: spacer / 2, - marginTop: spacer / 2, - marginRight: spacer / 4, - marginBottom: spacer / 2, - marginLeft: spacer / 4, - height: spacer * 3, + marginLeft: 0, + height: 20, backgroundColor: zircon, '&:hover, &:focus, &:active': { backgroundColor: zircon - } + }, + marginBottom: 'auto' }, label: { fontSize: smallestFontSize, fontWeight: inputFontWeight, fontFamily: inputFontFamily, - paddingRight: spacer / 2, - paddingLeft: spacer / 2, + paddingRight: 0, + paddingLeft: spacer, color: primaryColor } } @@ -34,11 +32,30 @@ const styles = { button: { width: 8, height: 8, - marginLeft: 8 + marginLeft: 8, + marginRight: 8 }, text: { marginTop: 0, marginBottom: 0 + }, + filters: { + display: 'flex', + marginBottom: 16 + }, + deleteWrapper: { + display: 'flex', + marginLeft: 'auto', + justifyContent: 'flex-end', + flexDirection: 'row' + }, + entries: { + color: offColor, + margin: 'auto', + marginRight: 12 + }, + chips: { + marginTop: 'auto' } } diff --git a/new-lamassu-admin/src/pages/Customers/CustomersList.js b/new-lamassu-admin/src/pages/Customers/CustomersList.js index 943aadfe..5e638f9f 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomersList.js +++ b/new-lamassu-admin/src/pages/Customers/CustomersList.js @@ -20,36 +20,36 @@ const CustomersList = ({ data, locale, onClick, loading }) => { const elements = [ { header: 'Phone', - width: 172, + width: 175, view: it => getFormattedPhone(it.phone, locale.country) }, { header: 'Name', - width: 241, + width: 247, view: getName }, { header: 'Total TXs', - width: 126, + width: 130, textAlign: 'right', view: it => `${Number.parseInt(it.totalTxs)}` }, { header: 'Total spent', - width: 152, + width: 155, textAlign: 'right', view: it => `${Number.parseFloat(it.totalSpent)} ${it.lastTxFiatCode ?? ''}` }, { header: 'Last active', - width: 133, + width: 137, view: it => ifNotNull(it.lastActive, moment.utc(it.lastActive).format('YYYY-MM-D')) }, { header: 'Last transaction', - width: 161, + width: 165, textAlign: 'right', view: it => { const hasLastTx = !R.isNil(it.lastTxFiatCode) @@ -66,7 +66,7 @@ const CustomersList = ({ data, locale, onClick, loading }) => { }, { header: 'Status', - width: 188, + width: 191, view: it => } ] @@ -78,6 +78,7 @@ const CustomersList = ({ data, locale, onClick, loading }) => { emptyText="No customers so far" elements={elements} data={data} + width={'1200'} onClick={onClick} /> diff --git a/new-lamassu-admin/src/pages/Transactions/Transactions.js b/new-lamassu-admin/src/pages/Transactions/Transactions.js index 08f52736..29bcacca 100644 --- a/new-lamassu-admin/src/pages/Transactions/Transactions.js +++ b/new-lamassu-admin/src/pages/Transactions/Transactions.js @@ -285,18 +285,19 @@ const Transactions = () => { )}
-
- - Cash-out -
Cash-in
+
+ + Cash-out +
{filters.length > 0 && ( + + icon/button/filter/white + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/button/filter/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/filter/zodiac.svg new file mode 100644 index 00000000..51cdefd6 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/button/filter/zodiac.svg @@ -0,0 +1,7 @@ + + + icon/button/filter/zodiac + + + + \ No newline at end of file