Merge pull request #790 from josepfo/fix/clean-filters-button-styling

Fix: search filter section according to spec

lib/new-admin/graphql/resolvers/customer.resolver.js

@@ -1,7 +1,6 @@
 const anonymous = require('../../../constants').anonymousCustomer
 const customers = require('../../../customers')
 const filters = require('../../filters')
-const loyalty = require('../../../loyalty')
 
 const resolvers = {
   Customer: {

new-lamassu-admin/src/components/SearchFilter.js

@@ -2,37 +2,51 @@ import { makeStyles } from '@material-ui/core'
 import React from 'react'
 
 import Chip from 'src/components/Chip'
-import { P } from 'src/components/typography'
+import { ActionButton } from 'src/components/buttons'
+import { P, Label3 } 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 { onlyFirstToUpper } from 'src/utils/string'
 
 import { chipStyles, styles } from './SearchFilter.styles'
 
 const useChipStyles = makeStyles(chipStyles)
 const useStyles = makeStyles(styles)
 
-const SearchFilter = ({ filters, onFilterDelete, setFilters }) => {
+const SearchFilter = ({ filters, onFilterDelete, setFilters, entries }) => {
   const chipClasses = useChipStyles()
   const classes = useStyles()
 
   return (
     <>
       <P className={classes.text}>{'Filters:'}</P>
-      <div>
+      <div className={classes.filters}>
+        <div className={classes.chips}>
           {filters.map((f, idx) => (
             <Chip
               key={idx}
               classes={chipClasses}
-            label={`${f.type}: ${f.value}`}
+              label={`${onlyFirstToUpper(f.type)}: ${f.value}`}
               onDelete={() => onFilterDelete(f)}
               deleteIcon={<CloseIcon className={classes.button} />}
             />
           ))}
-        <Chip
+        </div>
-          classes={chipClasses}
+        <div className={classes.deleteWrapper}>
-          label={`Delete filters`}
+          {
-          onDelete={() => setFilters([])}
+            <Label3 className={classes.entries}>{`${entries ??
-          deleteIcon={<CloseIcon className={classes.button} />}
+              0} entries`}</Label3>
-        />
+          }
+          <ActionButton
+            color="secondary"
+            Icon={ReverseFilterIcon}
+            InverseIcon={FilterIcon}
+            className={classes.deleteButton}
+            onClick={() => setFilters([])}>
+            Delete filters
+          </ActionButton>
+        </div>
       </div>
     </>
   )

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,
+    marginLeft: 0,
-    marginTop: spacer / 2,
+    height: 20,
-    marginRight: spacer / 4,
-    marginBottom: spacer / 2,
-    marginLeft: spacer / 4,
-    height: spacer * 3,
     backgroundColor: zircon,
     '&:hover, &:focus, &:active': {
       backgroundColor: zircon
-    }
+    },
+    marginBottom: 'auto'
   },
   label: {
     fontSize: smallestFontSize,
     fontWeight: inputFontWeight,
     fontFamily: inputFontFamily,
-    paddingRight: spacer / 2,
+    paddingRight: 0,
-    paddingLeft: spacer / 2,
+    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'
   }
 }
 

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 => <MainStatus statuses={[getAuthorizedStatus(it)]} />
     }
   ]

new-lamassu-admin/src/pages/Transactions/Transactions.js

@@ -286,18 +286,19 @@ const Transactions = () => {
           )}
         </div>
         <div className={classes.headerLabels}>
-          <div>
-            <TxOutIcon />
-            <span>Cash-out</span>
-          </div>
           <div>
             <TxInIcon />
             <span>Cash-in</span>
           </div>
+          <div>
+            <TxOutIcon />
+            <span>Cash-out</span>
+          </div>
         </div>
       </div>
       {filters.length > 0 && (
         <SearchFilter
+          entries={filteredTransactions.length}
           filters={filters}
           onFilterDelete={onFilterDelete}
           setFilters={setFilters}

new-lamassu-admin/src/styling/icons/button/filter/white.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/filter/white</title>
+    <g id="icon/button/filter/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M0.6,-3.33066907e-16 L0.509218076,0.00652107669 C0.068925647,0.0708166555 -0.160361948,0.596737342 0.124968515,0.966531156 L4.166,6.204 L4.16660432,9.6 C4.16660432,9.79162756 4.25813682,9.97172829 4.41293455,10.0846831 L6.8797259,11.8846831 L6.96095139,11.9350192 C7.34801849,12.1353088 7.83339568,11.8580867 7.83339568,11.4 L7.833,6.204 L11.8750315,0.966531156 C12.179384,0.572084421 11.8982155,-3.33066907e-16 11.4,-3.33066907e-16 L0.6,-3.33066907e-16 Z M10.179,1.199 L6.75836419,5.63346884 L6.70465653,5.71638775 C6.65811535,5.80315577 6.63339568,5.90052663 6.63339568,6 L6.633,10.219 L5.366,9.294 L5.36660432,6 L5.35847177,5.90154229 C5.34231401,5.80441508 5.30240262,5.71222382 5.24163581,5.63346884 L1.82,1.199 L10.179,1.199 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/button/filter/zodiac.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/filter/zodiac</title>
+    <g id="icon/button/filter/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M0.6,-4.56301663e-14 L0.509218076,0.00652107669 C0.068925647,0.0708166555 -0.160361948,0.596737342 0.124968515,0.966531156 L4.166,6.204 L4.16660432,9.6 C4.16660432,9.79162756 4.25813682,9.97172829 4.41293455,10.0846831 L6.8797259,11.8846831 L6.96095139,11.9350192 C7.34801849,12.1353088 7.83339568,11.8580867 7.83339568,11.4 L7.833,6.204 L11.8750315,0.966531156 C12.179384,0.572084421 11.8982155,-4.56301663e-14 11.4,-4.56301663e-14 L0.6,-4.56301663e-14 Z M10.179,1.199 L6.75836419,5.63346884 L6.70465653,5.71638775 C6.65811535,5.80315577 6.63339568,5.90052663 6.63339568,6 L6.633,10.219 L5.366,9.294 L5.36660432,6 L5.35847177,5.90154229 C5.34231401,5.80441508 5.30240262,5.71222382 5.24163581,5.63346884 L1.82,1.199 L10.179,1.199 Z" id="Path" fill="#1B2559" fill-rule="nonzero"></path>
+    </g>
+</svg>

package-lock.json

@@ -17319,6 +17319,13 @@
           "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
           "requires": {
             "ms": "2.1.2"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.1.2",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+              "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+            }
           }
         },
         "http-proxy-agent": {
@@ -17332,9 +17339,14 @@
           }
         },
         "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        },
+        "yallist": {
           "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
         }
       }
     },
@@ -19680,6 +19692,11 @@
             "locate-path": "^2.0.0"
           }
         },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
+        },
         "load-json-file": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -19702,6 +19719,11 @@
             "path-exists": "^3.0.0"
           }
         },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        },
         "p-limit": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
@@ -19741,6 +19763,16 @@
             "find-up": "^2.0.0",
             "load-json-file": "^4.0.0"
           }
+        },
+        "progress": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+          "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
+        },
+        "regexpp": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
+          "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw=="
         }
       }
     },
@@ -20184,6 +20216,11 @@
             "universalify": "^0.1.0"
           }
         },
+        "is-buffer": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ=="
+        },
         "jsonfile": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -20476,6 +20513,29 @@
         "xtend": "~4.0.1"
       },
       "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "form-data": {
+          "version": "2.5.1",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.1.tgz",
+          "integrity": "sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.6",
+            "mime-types": "^2.1.12"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        },
         "readable-stream": {
           "version": "2.3.7",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -20571,6 +20631,14 @@
         "kind-of": "^3.0.2"
       },
       "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
         "kind-of": {
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@@ -20579,6 +20647,11 @@
           "requires": {
             "is-buffer": "^1.1.5"
           }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
         }
       }
     },