feat: Notification Service (#1011)

* WIP - Notification Service

* add snackbar provider into the main App component

* feat: Notification Service

* revert unmodified file

* Update DicomHtmlViewport.js

* update css classnames

* revert toolbarRow

* fix revert toolbarRow

* styles adjustments and hide method

* remove unecessary default options

* minor fixes

* fix long truncated messages

* move SnackbarContext to ui project, rename, export

platform/viewer/src/App.js

@@ -27,6 +27,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { getActiveContexts } from './store/layout/selectors.js';
 import i18n from '@ohif/i18n';
 import store from './store';
+import { SnackbarProvider } from '@ohif/ui';
 
 // Contexts
 import WhiteLabellingContext from './context/WhiteLabellingContext';
@@ -99,7 +100,9 @@ class App extends Component {
                     <WhiteLabellingContext.Provider
                       value={this.props.whiteLabelling}
                     >
-                      <OHIFStandaloneViewer userManager={userManager} />
+                      <SnackbarProvider>
+                        <OHIFStandaloneViewer userManager={userManager} />
+                      </SnackbarProvider>
                     </WhiteLabellingContext.Provider>
                   </Router>
                 </UserManagerContext.Provider>
@@ -116,7 +119,9 @@ class App extends Component {
           <I18nextProvider i18n={i18n}>
             <Router basename={this.props.routerBasename}>
               <WhiteLabellingContext.Provider value={this.props.whiteLabelling}>
-                <OHIFStandaloneViewer />
+                <SnackbarProvider>
+                  <OHIFStandaloneViewer />
+                </SnackbarProvider>
               </WhiteLabellingContext.Provider>
             </Router>
           </I18nextProvider>

platform/viewer/src/variables.css

@@ -1,6 +1,6 @@
-/* Sizes */
-
 :root {
+  /* Sizes */
+
   --top-bar-height: 40px;
   --top-bar-expanded-height: 160px;
   --toolbar-height: 78px;
@@ -9,19 +9,26 @@
   --right-sidepanel-menu-width: 323px;
   --study-list-padding: 8%;
   --study-list-padding-medium-screen: 10px;
-}
+  --snackbar-size: 344px;
 
-/* Transitions */
+  /* Transitions */
 
-:root {
   --transition-duration: 0.3s;
   --transition-effect: ease;
   --sidepanel-transition: all 0.3s ease;
-}
 
-/* Thicknesses */
+  /* Thicknesses */
 
-:root {
   --viewport-border-thickness: 1px;
   --ui-border-thickness: 1px;
+
+  /** Colors **/
+
+  --snackbar-success: rgba(94, 164, 0, 0.9);
+  --snackbar-error: rgba(236, 61, 61, 0.9);
+  --snackbar-warning: rgba(235, 173, 23, 0.9);
+  --snackbar-info: rgba(54, 156, 199, 0.9);
+
+  /** z-Index **/
+  --snackbar-zIndex: 10;
 }