fix: UI tweaks to satisfy OHIF-161, OHIF-254, OHIF-167, OHIF-249, OHIF-170, OHIF-162

* add group hover for borderColor

* measurements action buttons hover state

* fixes and button/buttongroup/iconButton refactor

* OHIF-161: Fix Tracked/Untracked Text in Thumbnail's Tooltip

* OHIF-254: Format SR series date

* OHIF-167 - Fix Study Date Time format

* OHIF-249: Fix viewport border thickness and action bar min height

* pass viewportIdentificator to SR Thumbnail

* show tooltip when hover over the SR thumbnail

* OHIF-170: Display tooltip when hovering over an untracked series in the Viewport Action Bar

* Undo accidental date change

* Sneak in "Create Report" messaging for createReport notifications

* Fix text clipping

* Add no-select text styles for action bar, thumbnail, and thumbnail no image (sr)

* fix for OHIF-162

Modified to remove Viewport Identifier. Text now only reads: “Structured Report”This was partly to address a bug where the Viewport Identifier was incorrect for all but the first displayed SR. Component API changed for ThumbnailNoImage to accomodate any generic “modalityTooltip”

* Some ViewportPane resize magic

Co-authored-by: dannyrb <danny.ri.brown@gmail.com>

platform/ui/src/components/ButtonGroup/ButtonGroup.jsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const baseButtonClass = 'border';
+const baseButtonClass = 'border outline-none';
 const roundedClasses = {
   vertical: {
     none: '',
@@ -41,18 +41,22 @@ const variantClasses = {
     primary: 'border-primary-main',
     secondary: 'border-secondary-light',
     white: 'border-white',
+    black: 'border-primary-main',
   },
   outlined: {
     default: '',
     primary: '',
     secondary: '',
     white: '',
+    black:
+      'border-primary-main group-hover:bg-primary-main group-hover:border-black',
   },
   contained: {
     default: 'border-white',
     primary: 'border-white',
     secondary: 'border-white',
     white: 'border-black',
+    black: 'border-primary-main',
   },
 };
 
@@ -89,6 +93,7 @@ const ButtonGroup = ({
     <div
       role="group"
       className={classnames(
+        'group',
         className,
         orientationClasses[orientation],
         fullWidth ? fullWidthDisplayClass : baseDisplayClass
@@ -96,7 +101,7 @@ const ButtonGroup = ({
       ref={ref}
       {...other}
     >
-      {React.Children.map(children, (child) => {
+      {React.Children.map(children, child => {
         if (!React.isValidElement(child)) {
           return null;
         }
@@ -118,7 +123,14 @@ const ButtonGroup = ({
 ButtonGroup.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
-  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
+  color: PropTypes.oneOf([
+    'default',
+    'inherit',
+    'primary',
+    'secondary',
+    'white',
+    'black',
+  ]),
   disabled: PropTypes.bool,
   fullWidth: PropTypes.bool,
   orientation: PropTypes.oneOf(['vertical', 'horizontal']),