feat: created the search component

style: added spec styles

fix: fixed font color on search input

style: added box-shadow to the search component

feat: added local search functionality to the search component

feat: integrated search component into the transactions page

feat: allow multiple filter selection on the search component

fix: let the user select only one filter for each type

feat: added chips for the selected filters on the transactions page

feat: added the remove function on the filter chips

style: styled items according to spec

refactor: simplified search component (moved logic to the outside)

feat: added transaction filters to the gql query

feat: added a 'clear all filters' button

feat: added a filters query

feat: added a gql query for the transaction filters

fix: fixed the transactions gql query so it haves the same options as
the transaction filters

feat: added a 'loading' feature to the search box (shown while loading
the filters)

fix: fetch transactions and filters separately in the transactions page

fix: style export

fix: packages

fix: transaction conflicts

new-lamassu-admin/src/components/SearchBox.styles.js

@@ -0,0 +1,78 @@
+import baseButtonStyles from 'src/components/buttons/BaseButton.styles'
+import { bySize, bold } from 'src/styling/helpers'
+import { zircon, comet, primaryColor } from 'src/styling/variables'
+
+const { baseButton } = baseButtonStyles
+
+const searchBoxBorderRadius = baseButton.height / 2
+const searchBoxHeight = 32
+const popupBorderRadiusFocus = baseButton.height / 4
+
+const hoverColor = 'rgba(0, 0, 0, 0.08)'
+const boxShadow = `0 4px 4px 0 ${hoverColor}`
+
+const styles = {
+  size: ({ size }) => ({
+    marginTop: size === 'lg' ? 0 : 2,
+    ...bySize(size)
+  }),
+  bold,
+  autocomplete: {
+    '&[data-focus="true"]': {
+      backgroundColor: hoverColor
+    }
+  },
+  popup: {
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: [[0, 0, popupBorderRadiusFocus, popupBorderRadiusFocus]],
+    backgroundColor: zircon,
+    boxShadow
+  },
+  separator: {
+    width: '88%',
+    height: 1,
+    margin: '0 auto',
+    border: 'solid 0.5px',
+    borderColor: comet
+  },
+  item: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    height: 36,
+    alignItems: 'center'
+  },
+  itemLabel: {
+    margin: [0],
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  itemType: {
+    marginLeft: 'auto',
+    fontSize: 12,
+    color: comet,
+    margin: [0]
+  },
+  input: {
+    display: 'flex',
+    flex: 1,
+    width: 273,
+    padding: [[8, 12]],
+    alignItems: 'center',
+    height: searchBoxHeight,
+    borderRadius: searchBoxBorderRadius,
+    backgroundColor: zircon,
+    color: primaryColor
+  },
+  inputWithPopup: {
+    borderRadius: [[popupBorderRadiusFocus, popupBorderRadiusFocus, 0, 0]],
+    boxShadow
+  },
+  iconButton: {
+    marginRight: 12
+  }
+}
+
+export default styles