fix/chore: Various style improvements (#2015)

* Update all the icons

* Turn off global tool sync; watch as the world burns

* Shift a bunch of things around so we can start tracking/setting per element

* ToolBarService to initiate one of three different calls; callback passed to all button types

* SplitButton and Toolbar Button to use new `onInteraction` prop and new toolbar state

* Changes to toolbar button interface and config

* Fix broken layout selector

* Update SR viewport to activate tools in viewport component

* Duplicate activation logic in measurement tracking extension

* Add alternative/dashed variants for SR Viewport

* pass through "setToolActive" commands for other viewport types

* fix small overlay bugs (no wwwc or scale info)

* Show SpacingBetweenSlices instead of PixelSpacing in patient information dialog

* Fix prop-types

* Update tracked viewport to have alternative tracked styling

* alt styling for SR viewports

* Update to support isLocked + isRehydratable

* fix broken logic

* fix broken logic

* switch icon style

* fix icon styles

* hover and click to start flow

* expedited workflow when data is not dirty (just after SR hydration)

* fix: setting elliptical roi tool

* fix arrow annotate dialog

* fix: do not show learn more button for now

* remove dead code

* simpler cache invalidation

* simpler cache invalidation part 2

* Fix for unable to spand study cards on separate pages

* fix: viewport grid area top padding should align with sidepanel gap

* fix: don't wrap split button list item text

* fix: cine player moz/chrome styles

* fix: split button arrows

* fix: tighten toolbar and splitbutton styles

* chore: clean up worklist sort logic

platform/ui/src/components/CinePlayer/CinePlayer.jsx

@@ -13,7 +13,7 @@ const CinePlayer = ({
   frameRate: defaultFrameRate,
   onFrameRateChange,
   onPlayPauseChange,
-  onClose
+  onClose,
 }) => {
   const [frameRate, setFrameRate] = useState(defaultFrameRate);
   const debouncedSetFrameRate = debounce(onFrameRateChange, 300);
@@ -28,21 +28,21 @@ const CinePlayer = ({
 
   const action = {
     false: { icon: 'old-play' },
-    true: { icon: 'old-stop' }
+    true: { icon: 'old-stop' },
   };
 
   return (
-    <div className="CinePlayer flex flex-row h-10 items-center justify-center border border-primary-light rounded-full">
+    <div className="flex flex-row items-center justify-center h-10 border rounded-full CinePlayer border-primary-light">
       <IconButton
         variant="text"
         color="inherit"
         size="initial"
-        className="mr-3 ml-4 text-primary-active"
+        className="ml-4 mr-3 text-primary-active"
         onClick={onPlayPauseChangeHandler}
       >
         <Icon width="15px" height="15px" name={action[isPlaying].icon} />
       </IconButton>
-      <div className="flex flex-col h-full justify-center pt-2 mr-3 pl-1 pr-1">
+      <div className="flex flex-col justify-center h-full pt-2 pl-1 pr-1 mr-3">
         <input
           type="range"
           name="frameRate"
@@ -52,12 +52,14 @@ const CinePlayer = ({
           value={frameRate}
           onChange={onFrameRateChangeHandler}
         />
-        <p className="mt-1 text-sm text-primary-light">{`${frameRate.toFixed(1)} fps`}</p>
+        <p className="-mt-2 text-sm text-primary-light">{`${frameRate.toFixed(
+          1
+        )} fps`}</p>
       </div>
       <IconButton
         color="inherit"
         size="initial"
-        className="mr-3 text-primary-active border border-primary-active rounded-full"
+        className="mr-3 border rounded-full text-primary-active border-primary-active"
         onClick={onClose}
       >
         <Icon name="close" width="15px" height="15px" />
@@ -66,7 +68,7 @@ const CinePlayer = ({
   );
 };
 
-const noop = () => { };
+const noop = () => {};
 
 CinePlayer.defaultProps = {
   isPlaying: false,
@@ -76,7 +78,7 @@ CinePlayer.defaultProps = {
   frameRate: 24,
   onPlayPauseChange: noop,
   onFrameRateChange: noop,
-  onClose: noop
+  onClose: noop,
 };
 
 CinePlayer.propTypes = {

platform/ui/src/components/CinePlayer/CinePlayerCustomInputRange.css

@@ -3,17 +3,19 @@
  * written in plain CSS with color variables from tailwind
  * to avoid complex compatibility configuration.
  */
-.CinePlayer input[type=range] {
+.CinePlayer input[type='range'] {
   -webkit-appearance: none;
   background: transparent;
   width: 100%;
+  height: 20px;
+  z-index: 5;
 }
 
-.CinePlayer input[type=range]:focus {
+.CinePlayer input[type='range']:focus {
   outline: none;
 }
 
-.CinePlayer input[type=range]::-webkit-slider-runnable-track {
+.CinePlayer input[type='range']::-webkit-slider-runnable-track {
   width: 100%;
   height: 2px;
   cursor: pointer;
@@ -24,7 +26,7 @@
   border: 0px solid #000000;
 }
 
-.CinePlayer input[type=range]::-webkit-slider-thumb {
+.CinePlayer input[type='range']::-webkit-slider-thumb {
   box-shadow: 0px 0px 0px #000000;
   border: 4px solid #000000;
   height: 18px;
@@ -36,11 +38,11 @@
   margin-top: -9px;
 }
 
-.CinePlayer input[type=range]:focus::-webkit-slider-runnable-track {
+.CinePlayer input[type='range']:focus::-webkit-slider-runnable-track {
   @apply bg-primary-light;
 }
 
-.CinePlayer input[type=range]::-moz-range-track {
+.CinePlayer input[type='range']::-moz-range-track {
   width: 100%;
   height: 2px;
   cursor: pointer;
@@ -51,17 +53,17 @@
   border: 0px solid #000000;
 }
 
-.CinePlayer input[type=range]::-moz-range-thumb {
+.CinePlayer input[type='range']::-moz-range-thumb {
   box-shadow: 0px 0px 0px #000000;
-  border: 4px solid #000000;
-  height: 18px;
-  width: 17px;
+  border: 2px solid #000000;
+  height: 12px;
+  width: 12px;
   border-radius: 50px;
   @apply bg-primary-light;
   cursor: pointer;
 }
 
-.CinePlayer input[type=range]::-ms-track {
+.CinePlayer input[type='range']::-ms-track {
   width: 100%;
   height: 2px;
   cursor: pointer;
@@ -71,21 +73,21 @@
   color: transparent;
 }
 
-.CinePlayer input[type=range]::-ms-fill-lower {
+.CinePlayer input[type='range']::-ms-fill-lower {
   @apply bg-primary-light;
   border: 0px solid #000000;
   border-radius: 10px;
   box-shadow: 0px 0px 0px #000000;
 }
 
-.CinePlayer input[type=range]::-ms-fill-upper {
+.CinePlayer input[type='range']::-ms-fill-upper {
   @apply bg-primary-light;
   border: 0px solid #000000;
   border-radius: 10px;
   box-shadow: 0px 0px 0px #000000;
 }
 
-.CinePlayer input[type=range]::-ms-thumb {
+.CinePlayer input[type='range']::-ms-thumb {
   margin-top: 1px;
   box-shadow: 0px 0px 0px #000000;
   border: 4px solid #000000;
@@ -96,10 +98,10 @@
   cursor: pointer;
 }
 
-.CinePlayer input[type=range]:focus::-ms-fill-lower {
+.CinePlayer input[type='range']:focus::-ms-fill-lower {
   @apply bg-primary-light;
 }
 
-.CinePlayer input[type=range]:focus::-ms-fill-upper {
+.CinePlayer input[type='range']:focus::-ms-fill-upper {
   @apply bg-primary-light;
 }