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