feat: responsive study list (#1068)

* feat: 🎸 Load spinner when selecting gcloud store. Add key on td

* feat: 🎸 Code review. Translate loading study status

* feat: 🎸 Code review. Minor code refactoring

* fix: add missing study and index declerations

* Newer version of react-dates (calendar input component)

* Add useMedia hook

* Add useDebounce hook

* Export hooks for consumption

* Pull search filter into own component

* StudyListWithData to StudyListRoute

* Rename pagination component

* Rename Toolbar

* CustomeDateRangePicker to plain ol' css

* Remove unused styles

* Misc

* Magic to make our "OR" filters work

* Play w/ Mobile styles

* Fix pagination pushing out max width for viewport

* Tidy up small and medium templates

* Remove unecessary nesting

* Better mobile header and logo styles

* Fix studyList font size

* Remove unused code

* hookup on click

* Fix table search selectors

* Cypress uses medium width

* Remove irrelevant test

* Fix primary sort

* Fix sort for our smaller displays

* fix study list sometimes longer than specified rowsPerPage

* Simplify date picker styles

* restore study date filters

* Fix about table styling

* fix take value for search

* Fix header sizing for viewer and list route

* Remove dead code

* Restore isLoading

* Update platform/ui/src/components/studyList/StudyList.styl

Co-Authored-By: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

* Attempt first usage of translations w/ hooks

* Pull from react-i18n library

* Fit presets on to a single line

* add no results message

* Show error message in studyList table

* Update input selectors for e2e tests

* Make sure messages span all columns

* fix test selector for table results

* Skip hover for result rows

* fix imports

* Date filtering w/ config

* Default export

* Pushed to PageComponent

* Remove DropZone

This previously only worked for null/undefined studies. I'm unable to trigger the state by testing the data. This "might" have happened when using a fresh/empty PACS; but even an empty array of studies would not show

platform/viewer/src/components/OHIFLogo/OHIFLogo.css

@@ -7,7 +7,9 @@
   color: var(--text-primary-color);
 }
 
-.header-brand:hover, .header-brand:active, .header-band:visited {
+.header-brand:hover,
+.header-brand:active,
+.header-band:visited {
   color: var(--text-primary-color);
   text-decoration: none;
 }
@@ -23,3 +25,9 @@
   width: 30px;
   font-size: 30px;
 }
+
+@media only screen and (max-width: 768px) {
+  .header-logo-text {
+    display: none;
+  }
+}

platform/viewer/src/components/OHIFLogo/OHIFLogo.js

@@ -12,6 +12,13 @@ function OHIFLogo() {
       href="http://ohif.org"
     >
       <Icon name="ohif-logo" className="header-logo-image" />
+      {/* Logo text would fit smaller displays at two lines:
+       *
+       * Open Health
+       * Imaging Foundation
+       *
+       * Or as `OHIF` on really small displays
+       */}
       <Icon name="ohif-text-logo" className="header-logo-text" />
     </a>
   );