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/SplitButton/SplitButton.jsx

@@ -7,7 +7,7 @@ import { Icon, Tooltip, ListMenu } from '@ohif/ui';
 
 const baseClasses = {
   Button:
-    'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer',
+    'flex items-center rounded-md border-transparent border-2 cursor-pointer',
   Primary:
     'h-full flex flex-1 items-center rounded-md rounded-tr-none rounded-br-none',
   Secondary:
@@ -15,7 +15,7 @@ const baseClasses = {
   PrimaryIcon: 'w-5 h-5',
   SecondaryIcon: 'w-4 h-full stroke-1',
   Separator: 'border-l pt-2 pb-2',
-  Content: 'absolute z-10 top-0 mt-16',
+  Content: 'absolute z-10 top-0 mt-12',
 };
 
 const classes = {
@@ -154,6 +154,7 @@ const SplitButton = ({
             ...state,
             primary: { isActive: isPrimaryActive },
           })}
+          style={{ height: '40px' }}
           onMouseEnter={onMouseEnterHandler}
           onMouseLeave={onMouseLeaveHandler}
         >
@@ -169,7 +170,10 @@ const SplitButton = ({
                 isDisabled={!state.primary.tooltip}
                 content={state.primary.tooltip}
               >
-                <div className="flex items-center justify-center w-full h-full p-3">
+                <div
+                  className="flex items-center justify-center w-full h-full"
+                  style={{ padding: '10px' }}
+                >
                   <Icon
                     name={state.primary.icon}
                     className={classes.PrimaryIcon({
@@ -225,10 +229,12 @@ const DefaultListItemRenderer = ({ icon, label, isActive }) => (
       isActive && 'bg-primary-dark'
     )}
   >
-    <span className="mr-4 text-base text-common-bright">
+    <span className="mr-4 text-base whitespace-pre text-common-bright">
       <Icon name={icon} className="w-5 h-5 text-common-bright" />
     </span>
-    <span className="mr-5 text-base text-common-bright">{label}</span>
+    <span className="mr-5 text-base whitespace-pre text-common-bright">
+      {label}
+    </span>
   </div>
 );
 

platform/ui/src/components/SplitButton/SplitButton.mdx

@@ -24,7 +24,7 @@ import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
       primary: {
         tooltip: 'W/L',
         icon: 'tool-window-level',
-        onClick: (args) => console.debug('Primary click!', args)
+        onClick: args => console.debug('Primary click!', args),
       },
       secondary: {
         icon: 'chevron-down',
@@ -33,23 +33,43 @@ import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
         tooltip: 'More Measure Tools',
       },
       items: [
-        { id: '1', icon: 'tool-layout', label: 'Layout', onClick: (args) => console.debug('Item click!', args) },
-        { id: '2', icon: 'tool-window-level', label: 'W/L', onClick: (args) => console.debug('Item click!', args) },
-        { id: '3', icon: 'tool-length', label: 'Length', onClick: (args) => console.debug('Item click!', args) }
+        {
+          id: '1',
+          icon: 'tool-layout',
+          label: 'Layout',
+          onClick: args => console.debug('Item click!', args),
+        },
+        {
+          id: '2',
+          icon: 'tool-window-level',
+          label: 'W/L',
+          onClick: args => console.debug('Item click!', args),
+        },
+        {
+          id: '3',
+          icon: 'tool-length',
+          label: 'Length',
+          onClick: args => console.debug('Item click!', args),
+        },
       ],
-      onClick: (args) => console.debug('Any click!', args)
+      onClick: args => console.debug('Any click!', args),
     };
     return (
       <div className="mb-2">
-        <div className="flex flex-row min-h-16 w-full justify-center items-center bg-secondary-dark">
+        <div className="flex flex-row w-full justify-center items-center bg-secondary-dark">
           <SplitButton {...mockedProps} isRadio />
-          <SplitButton {...mockedProps} isAction renderer={WindowLevelMenuItem} items={[
-            { id: '1', value: 1, title: 'Soft tissue', subtitle: '400 / 40' },
-            { id: '2', value: 2, title: 'Lung', subtitle: '1500 / -600' },
-            { id: '3', value: 3, title: 'Liver', subtitle: '150 / 90' },
-            { id: '4', value: 4, title: 'Bone', subtitle: '80 / 40' },
-            { id: '5', value: 5, title: 'Brain', subtitle: '2500 / 480' },
-          ]} />
+          <SplitButton
+            {...mockedProps}
+            isAction
+            renderer={WindowLevelMenuItem}
+            items={[
+              { id: '1', value: 1, title: 'Soft tissue', subtitle: '400 / 40' },
+              { id: '2', value: 2, title: 'Lung', subtitle: '1500 / -600' },
+              { id: '3', value: 3, title: 'Liver', subtitle: '150 / 90' },
+              { id: '4', value: 4, title: 'Bone', subtitle: '80 / 40' },
+              { id: '5', value: 5, title: 'Brain', subtitle: '2500 / 480' },
+            ]}
+          />
           <SplitButton {...mockedProps} />
         </div>
       </div>