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/Header/Header.css

@@ -1,11 +1,13 @@
+/* Viewer Route */
 .entry-header {
-  padding: 10px 10px 0;
+  padding: 10px 15px;
   height: var(--top-bar-height);
 }
 
+/* Home Page */
 .entry-header.header-big {
   background: rgba(21, 25, 30, 0.7);
-  padding: 10px var(--study-list-padding);
+  padding: 35px var(--study-list-padding);
   height: auto;
   display: inline-block;
   width: 100%;
@@ -29,7 +31,7 @@
 
 .entry-header.header-big .header-brand {
   height: auto;
-  padding: 25px 0;
+  padding: 0;
 }
 
 .header-logo-image {
@@ -41,7 +43,7 @@
 }
 
 .entry-header.header-big .header-logo-image {
-  margin: 0 20px 0 0;
+  margin-right: 20px;
   width: 50px;
   height: 50px;
 }
@@ -97,26 +99,45 @@
   margin-right: 1rem;
 }
 
-.header-versionInfo {
-  display: inline-block;
-  color: black;
-  background: #9ccef9;
-  padding: 0px 8px;
-  border-radius: 16px;
-  font-size: 12px;
-  margin-left: 10px;
+.notification-bar {
+  display: none;
+  position: absolute;
+  height: 20px;
+  line-height: 20px;
+  width: 100%;
+  background-color: #91b9cd;
+  color: #ffffff;
   font-weight: bold;
+  text-align: center;
 }
 
-.header-versionInfoHome {
-  display: block;
-  color: black;
-  position: absolute;
-  bottom: 16px;
-  right: 0;
-  background: #9ccef9;
-  padding: 0px 8px;
-  border-radius: 16px;
-  font-size: 12px;
-  font-weight: bold;
+@media only screen and (max-width: 768px) {
+  .entry-header,
+  .entry-header.header-big {
+    padding: 30px 15px 10px 15px;
+  }
+  .entry-header.header-big .header-logo-image {
+    margin: 0 10px 0 0;
+    width: 25px;
+    height: 25px;
+  }
+
+  .entry-header.header-big .header-logo-text {
+    width: 40%;
+  }
+
+  /* Account for notification bar height */
+  .entry-header.header-big .header-brand {
+  }
+
+  .dd-menu {
+  }
+
+  /* Toggle Notification Bar */
+  .notification-bar {
+    display: block;
+  }
+  .header-menu .research-use {
+    display: none;
+  }
 }