add viewport notification

platform/ui/src/components/Notification/Notification.jsx

@@ -35,7 +35,7 @@ const Notification = ({ type, text, actionButtons }) => {
   const { icon, color } = getIconData();
 
   return (
-    <div className="p-2 flex flex-col lg:flex-row lg:items-center bg-common-bright rounded">
+    <div className="mx-2 p-2 flex flex-col lg:flex-row lg:items-center bg-common-bright rounded">
       <div className="flex flex-grow">
         <Icon name={icon} className={classnames('w-5', color)} />
         <span className="text-base text-black ml-2">{text}</span>

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -69,7 +69,7 @@ const ViewportActionBar = ({ isTracked, isLocked, modality }) => {
     );
   };
   return (
-    <div className="flex items-center m-2 pb-2 border-b border-primary-light">
+    <div className="flex items-center mx-2 mt-2 pb-2 border-b border-primary-light">
       <div className="flex flex-grow">
         <div className="flex items-center">
           {renderIconStatus()}

platform/ui/src/views/Viewer/Viewer.mdx

@@ -18,6 +18,7 @@ import {
   StudyBrowser,
   ViewportActionBar,
   ViewportGrid,
+  Notification,
 } from '@ohif/ui';
 
 import Header from './components/Header';
@@ -57,7 +58,35 @@ import ViewportToolbar from './components/ViewportToolBar';
             <div className="flex flex-2 w-100 border-b border-transparent h-12">
               <ViewportToolbar />
             </div>
-            <div className="flex flex-1 items-center justify-center bg-black text-white border rounded-lg border-secondary-light h-100 overflow-hidden">CONTENT</div>
+            <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
+              <ViewportGrid
+                rows={1}
+                cols={2}
+                viewportContents={[
+                  <div className="flex flex-col h-full">
+                    <ViewportActionBar isTracked modality="CT" />
+                    <Notification
+                      text="Track all measurement for this series?"
+                      type="info"
+                      actionButtons={
+                        <div>
+                          <Button>No</Button>
+                          <Button className="ml-2">No, do not ask again</Button>
+                          <Button className="ml-2" color="primary">
+                            Yes
+                          </Button>
+                        </div>
+                      }
+                    />
+                  </div>,
+                  <div className="flex flex-col h-full">
+                    <ViewportActionBar isTracked={false} modality="CT" />
+                  </div>,
+                ]}
+                setActiveViewportIndex={setActiveViewportIndex}
+                activeViewportIndex={activeViewportIndex}
+              />
+            </div>
           </div>
           <SidePanel
             side="right"