(improvement) Columns filter representation

public/locales/en/translations.json

@@ -224,7 +224,9 @@
     "clear": "Clear",
     "cancel": "Cancel",
     "apply": "Apply",
+    "none": "None",
     "filters": {
+      "title": "Filters",
       "contains": "Contains",
       "beginsWith": "Begins with",
       "endsWith": "Ends with",

src/icons/index.js

@@ -40,6 +40,7 @@ import { ReactComponent as NOTEBOOK } from './notebook.svg'
 import { ReactComponent as OFFLINE } from './offline.svg'
 import { ReactComponent as ORDERS } from './orders.svg'
 import { ReactComponent as PIE_CHART } from './pie-chart.svg'
+import { ReactComponent as PLUS } from './plus.svg'
 import { ReactComponent as PLUS_CIRCLE } from './plus-circle.svg'
 import { ReactComponent as REFRESH_DOUBLE } from './refresh-double.svg'
 import { ReactComponent as SEARCH } from './search.svg'
@@ -98,6 +99,7 @@ export default {
   OFFLINE,
   ORDERS,
   PIE_CHART,
+  PLUS,
   PLUS_CIRCLE,
   REFRESH_DOUBLE,
   SEARCH,

src/ui/ColumnsFilter/ColumnsFilter.helpers.js

@@ -0,0 +1,33 @@
+import _size from 'lodash/size'
+import _filter from 'lodash/filter'
+import _isEmpty from 'lodash/isEmpty'
+import _toString from 'lodash/toString'
+
+const getActiveFilters = (filters) => _filter(
+  filters, filter => !_isEmpty(_toString(filter?.value ?? '')),
+)
+
+export const getFiltersClassNames = (filters) => {
+  const activeFilters = getActiveFilters(filters)
+  return _size(activeFilters) > 0 ? '' : 'no-filters'
+}
+
+export const getFiltersTitle = (filters, t) => {
+  if (_size(filters) > 0) {
+    const activeFilters = getActiveFilters(filters)
+    const filtersTitle = _size(activeFilters) > 1
+      ? t('columnsfilter.filters.title')
+      : t('columnsfilter.title')
+
+    return _size(activeFilters) > 0
+      ? `${_size(activeFilters)} ${filtersTitle}`
+      : t('columnsfilter.none')
+  }
+
+  return t('columnsfilter.none')
+}
+
+export default {
+  getFiltersTitle,
+  getFiltersClassNames,
+}

src/ui/ColumnsFilter/ColumnsFilter.js

@@ -1,14 +1,13 @@
 import React, { PureComponent } from 'react'
 import { withTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import {
   Button,
   InputGroup,
-  Intent,
 } from '@blueprintjs/core'
 import _isEqual from 'lodash/isEqual'
 import _isString from 'lodash/isString'
 
+
 import ColumnsSelect from 'ui/ColumnsSelect'
 import DateInput from 'ui/DateInput'
 import Icon from 'icons'
@@ -25,6 +24,7 @@ import { propTypes, defaultProps } from './ColumnsFilter.props'
 import { FILTERS_SELECTOR } from './ColumnSelector/ColumnSelector.columns'
 import SideSelector from './Selectors/SideSelector'
 import WalletSelector from './Selectors/WalletSelector'
+import { getFiltersTitle, getFiltersClassNames } from './ColumnsFilter.helpers'
 
 const MAX_FILTERS = 7
 const { DATE } = DATA_TYPES
@@ -200,18 +200,17 @@ class ColumnsFilter extends PureComponent {
     const { isOpen, filters } = this.state
 
     const hasChanges = this.haveFiltersChanged()
-    const hasAppliedFilters = currentFilters.some(filter => filter.value)
-    const buttonClasses = classNames('button--large', { 'columns-filter--active': hasAppliedFilters })
+    const filtersTitle = getFiltersTitle(currentFilters, t)
+    const filtersClassName = getFiltersClassNames(currentFilters)
 
     return (
       <>
         <div className='columns-filter-wrapper'>
-          <Button
-            onClick={this.toggleDialog}
-            className={buttonClasses}
-            intent={Intent.SUCCESS}
-          >
-            {t('columnsfilter.title')}
+          <Button onClick={this.toggleDialog}>
+            <span className={filtersClassName}>
+              {filtersTitle}
+            </span>
+            <Icon.PLUS />
           </Button>
         </div>
 

src/ui/ColumnsFilter/_ColumnsFilter.scss

@@ -5,8 +5,25 @@
 
     .bp3-button {
       height: 34px;
-      min-width: 95px;
+      min-width: 133px;
       font-size: 14px;
+      background-color: var(--multiBg);
+      border: none;
+
+      &:active, &:hover {
+        border: none;
+      }
+
+      &-text {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .no-filters {
+          color: var(--color2);
+        }
+      }
     }
   }
 
@@ -68,8 +85,8 @@
       margin-right: 13px;
 
       .bp3-input {
-        height: 40px;
-        line-height: 40px;
+        height: 33px;
+        line-height: 33px;
       }
 
       &--select {
@@ -164,6 +181,10 @@
 
 @media screen and (max-width: 576px) {
   .columns-filter {
+    &-dialog {
+      min-width: 100%;
+    }
+
     &-item {
       max-width: 380px;
       padding: 30px 0;

src/ui/MultiSelect/_MultiSelect.scss

@@ -6,13 +6,14 @@
   &.bp3-input {
     box-shadow: none;
     background-color: var(--multiBg);
-    border: 1px solid var(--borderColor);
+    border: none;
   }
 
   &-arrow {
     position: absolute;
     top: 5px;
     right: 8px;
+    cursor: pointer;
   }
 
   input {

src/ui/RefreshButton/RefreshButton.js

@@ -1,27 +1,24 @@
-import React from 'react'
-import { withTranslation } from 'react-i18next'
+import React, { memo } from 'react'
 import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+import { Button, Intent } from '@blueprintjs/core'
 
-import Icon from 'icons'
-import Tooltip from 'ui/Tooltip'
-
-const RefreshButton = (props) => {
-  const { onClick, t } = props
+const RefreshButton = ({ onClick }) => {
+  const { t } = useTranslation()
 
   return (
-    <Tooltip
-      content={t('timeframe.refresh')}
-      usePortal={false}
-      targetClassName='refresh-button'
+    <Button
+      onClick={onClick}
+      intent={Intent.SUCCESS}
+      className='refresh-button'
     >
-      <Icon.REFRESH_DOUBLE onClick={onClick} />
-    </Tooltip>
+      {t('columnsfilter.title')}
+    </Button>
   )
 }
 
 RefreshButton.propTypes = {
   onClick: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired,
 }
 
-export default withTranslation('translations')(RefreshButton)
+export default memo(RefreshButton)

src/ui/RefreshButton/_RefreshButton.scss

@@ -1,16 +1,5 @@
 .refresh-button {
-  height: 24px;
+  height: 34px;
+  min-width: 74px;
   cursor: pointer;
 }
-
-@media screen and (min-width: 2560px) {
-  .refresh-button {
-    height: 28px;
-    margin-bottom: 10px;
-
-    svg {
-      width: 28px;
-      height: 28px;
-    }
-  }
-}

src/ui/RefreshButton/index.js

@@ -1,3 +1 @@
-import RefreshButton from './RefreshButton'
-
-export default RefreshButton
+export { default } from './RefreshButton'

src/ui/Select/_Select.scss

@@ -6,26 +6,46 @@
     padding-right: 8px;
     background-color: var(--multiBg);
     color: var(--color);
-    border: 1px solid var(--borderColor);
+    border: none;
     box-shadow: none;
     justify-content: space-between;
+
+    &:active, &:hover {
+      border: none;
+    }
   }
 
   &--language .bp3-button {
     width: 140px;
+
+    &:active, &:hover {
+      border: none;
+    }
   }
 
   &--balance-precision .bp3-button {
     width: 150px;
+
+    &:active, &:hover {
+      border: none;
+    }
   }
 
   &--unrealized-profit .bp3-button {
     width: 160px;
+
+    &:active, &:hover {
+      border: none;
+    }
   }
 
   &--report-type .bp3-button {
     width: fit-content;
 
+    &:active, &:hover {
+      border: none;
+    }
+
     .bp3-button-text {
       display: flex;
       align-items: center;
@@ -39,6 +59,10 @@
 
   &--timeframe .bp3-button {
     width: 100px;
+
+    &:active, &:hover {
+      border: none;
+    }
   }
 
   &-menu {
@@ -320,6 +344,14 @@
   }
 }
 
+@media screen and (max-width: 576px) {
+  .bitfinex-select {
+    .bp3-button {
+      min-width: fit-content;
+    }
+  }
+}
+
 @media screen and (max-width: 390px) {
   .bitfinex-select {
     .bp3-button {

src/ui/TimeRange/_TimeRange.scss

@@ -6,8 +6,8 @@
   vertical-align: middle;
   color: var(--timeRangeColor);
   background-color: var(--multiBg);
-  border: 1px solid var(--borderColor);
   border-radius: 4px;
+  min-height: 34px;
 
   svg {
     margin-left: 10px;