Filtering in Dashboard/Services Tab Difficult

[drniiken]

Long story short

It's not easy to perceive and use the filtering in the Dashboard/Services tab.

Expected behaviour

• [x] the color/highlight of the selected item should distinguish more from the background
• [x] I want to select multiple "Categories" at the same time

Actual behaviour

It's hard to see what I'm doing, if things are active or not. And I can't select multiple items in the lower list.

Steps to reproduce

Please see above.

Your environment

[
  {
    "name": "osparc-simcore",
    "version": "57c704a",
    "url": "https://github.com/ITISFoundation/osparc-simcore/tree/57c704a/"
  },
  {
    "name": "osparc-simcore UI ['clean']",
    "version": "57c704a",
    "url": "https://github.com/ITISFoundation/osparc-simcore/tree/57c704a/services/web/client/"
  },
  {
    "name": "qooxdoo-compiler",
    "version": "0.3.0-alpha.20190423-1234",
    "url": "https://github.com/qooxdoo/qooxdoo-compiler"
  },
  {
    "name": "qxapp",
    "version": "1.0.0",
    "url": ""
  },
  {
    "name": "qooxdoo framework",
    "version": "6.0.0-alpha-20190409-f79cc78",
    "url": "http://qooxdoo.org"
  },
  {
    "name": "qx-iconfont-fontawesome5",
    "version": "0.0.6",
    "url": "https://github.com/ITISFoundation/qx-iconfont-fontawesome5"
  },
  {
    "name": "qx-iconfont-material",
    "version": "0.1.4",
    "url": "https://github.com/ITISFoundation/qx-osparc-theme"
  },
  {
    "name": "qx-osparc-theme",
    "version": "0.4.6",
    "url": "https://github.com/ITISFoundation/qx-osparc-theme"
  },
  {
    "name": "socket.io",
    "version": "2.1.2",
    "url": "https://github.com/socketio/socket.io"
  },
  {
    "name": "jsondiffpatch",
    "version": "0.3.11",
    "url": "https://github.com/benjamine/jsondiffpatch"
  },
  {
    "name": "jsonTreeViewer",
    "version": "0.6.0",
    "url": "https://github.com/summerstyle/jsonTreeViewer"
  },
  {
    "name": "Ajv",
    "version": "6.5.0",
    "url": "https://github.com/epoberezkin/ajv"
  },
  {
    "name": "plotly",
    "version": "1.43.2",
    "url": "https://github.com/plotly/plotly.js"
  },
  {
    "name": "gridster",
    "version": "0.7.0",
    "url": "https://github.com/dsmorse/gridster.js"
  },
  {
    "name": "svg.js",
    "version": "2.6.4",
    "url": "https://github.com/svgdotjs/svg.js"
  }
]

[ignapas]

For this we could use the same filters we are using for the workbench and for the listing maybe the same design that we will have in the service selection window (upcoming).

[ignapas]

For this I integrated the same filters we use in the workbench... you can filter by text and also add as many categories as you want.