feat: enhanced notifications and toolbar hover states (#3032)

* fix: button hover state and overlay colors in tmtv

* fix: styles for notificaionts

platform/ui/src/components/Snackbar/Snackbar.css

@@ -42,19 +42,11 @@
   background: #fff;
 }
 
-.sb-title {
-  @apply break-normal text-lg font-bold;
-}
-
-.sb-message {
-  @apply break-normal text-base;
-}
-
 .sb-item {
   animation: fadein 1s;
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
     0 3px 5px -1px rgba(0, 0, 0, 0.14);
-  @apply relative p-5 text-white overflow-hidden rounded-md transition-height ease-in-out duration-300;
+  @apply relative p-3 text-white overflow-hidden rounded-md transition-height ease-in-out duration-300;
 }
 
 @keyframes fadein {

platform/ui/src/components/Snackbar/SnackbarContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import SnackbarItem from './SnackbarItem'
+import SnackbarItem from './SnackbarItem';
 import { useSnackbar } from '../../contextProviders/SnackbarProvider';
 
 import './Snackbar.css';
@@ -8,11 +8,7 @@ const SnackbarContainer = () => {
   const { snackbarItems, hide } = useSnackbar();
 
   const renderItem = item => (
-    <SnackbarItem
-      key={item.itemId}
-      options={item}
-      onClose={hide}
-    />
+    <SnackbarItem key={item.itemId} options={item} onClose={hide} />
   );
 
   const renderItems = () => {
@@ -26,23 +22,27 @@ const SnackbarContainer = () => {
     };
 
     snackbarItems.forEach(item => items[item.position].push(item));
+    return (
+      snackbarItems && (
+        <div>
+          {Object.keys(items).map(pos => {
+            if (!items[pos].length) {
+              return null;
+            }
 
-    return snackbarItems && (
-      <div>
-        {Object.keys(items).map(pos => {
-          if (!items[pos].length) {
-            return null;
-          }
-
-          return (
-            <div key={pos} className={`fixed z-50 p-6 box-border h-auto sb-${pos}`}>
-              {items[pos].map((item, index) => (
-                <div key={item.id + index}>{renderItem(item)}</div>
-              ))}
-            </div>
-          );
-        })}
-      </div>
+            return (
+              <div
+                key={pos}
+                className={`fixed z-50 p-6 box-border h-auto sb-${pos}`}
+              >
+                {items[pos].map((item, index) => (
+                  <div key={item.id + index}>{renderItem(item)}</div>
+                ))}
+              </div>
+            );
+          })}
+        </div>
+      )
     );
   };
 

platform/ui/src/components/Snackbar/SnackbarItem.tsx

@@ -1,10 +1,16 @@
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import Icon from '../Icon';
-import IconButton from '../IconButton';
 
 import SnackbarTypes from './SnackbarTypes';
 
+const iconClasses = {
+  [SnackbarTypes.INFO]: 'notifications-info',
+  [SnackbarTypes.WARNING]: 'notifications-warning',
+  [SnackbarTypes.SUCCESS]: 'notifications-success',
+  [SnackbarTypes.ERROR]: 'notifications-error',
+};
+
 const SnackbarItem = ({ options, onClose }) => {
   const handleClose = () => onClose(options.id);
 
@@ -15,10 +21,10 @@ const SnackbarItem = ({ options, onClose }) => {
   }, []);
 
   const typeClasses = {
-    [SnackbarTypes.INFO]: 'bg-primary-active',
-    [SnackbarTypes.WARNING]: 'bg-yellow-600',
-    [SnackbarTypes.SUCCESS]: 'bg-green-600',
-    [SnackbarTypes.ERROR]: 'bg-red-600',
+    [SnackbarTypes.INFO]: 'bg-[#bed1db]',
+    [SnackbarTypes.WARNING]: 'bg-[#ebe5c4]',
+    [SnackbarTypes.SUCCESS]: 'bg-[#c6d9bf]',
+    [SnackbarTypes.ERROR]: 'bg-[#dabdbe]',
   };
 
   const hidden =
@@ -31,17 +37,28 @@ const SnackbarItem = ({ options, onClose }) => {
         typeClasses[options.type]
       )}
     >
-      {/* <span className="sb-closeBtn" onClick={handleClose}> */}
-      {/* <span className="sb-closeIcon">x</span> */}
-      <div
-        onClick={handleClose}
-        className="w-5 h-5 rounded-full absolute bg-white flex items-center justify-center right-0 top-0 mr-2 mt-2"
-      >
-        <Icon name="close" className="w-4 text-black" />
+      <div className="flex ">
+        <div
+          onClick={handleClose}
+          className="w-5 h-5 rounded-full absolute flex items-center justify-center right-0 top-0 mr-2 mt-2 text-[#0944b3]"
+        >
+          <Icon name="close" className="w-5 h-5 text-black" />
+        </div>
+        <Icon name={iconClasses[options.type]} className="w-5 h-5 mt-[1px]" />
+        <div className="flex-col ml-2">
+          {/* </span> */}
+          {options.title && (
+            <div className="break-normal text-lg font-bold text-black">
+              {options.title}
+            </div>
+          )}
+          {options.message && (
+            <div className="break-normal text-base text-black">
+              {options.message}
+            </div>
+          )}
+        </div>
       </div>
-      {/* </span> */}
-      {options.title && <div className="sb-title">{options.title}</div>}
-      {options.message && <div className="sb-message">{options.message}</div>}
     </div>
   );
 };