852bf7b089
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
78 lines
1.7 KiB
JavaScript
78 lines
1.7 KiB
JavaScript
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
|