feat: add notification UI

showPopup was also refactored to be better

frontend/src/App/index.tsx

@@ -3,6 +3,7 @@ import jwtDecode from 'jwt-decode';
 import { createBrowserHistory } from 'history';
 import { Router } from 'react-router';
 import { PopupProvider } from 'shared/components/PopupMenu';
+import { ToastContainer } from 'react-toastify';
 import { setAccessToken } from 'shared/utils/accessToken';
 import styled, { ThemeProvider } from 'styled-components';
 import NormalizeStyles from './NormalizeStyles';
@@ -11,6 +12,39 @@ import theme from './ThemeStyles';
 import Routes from './Routes';
 import { UserContext, CurrentUserRaw, CurrentUserRoles, PermissionLevel, PermissionObjectType } from './context';
 
+import 'react-toastify/dist/ReactToastify.css';
+
+const StyledContainer = styled(ToastContainer).attrs({
+  // custom props
+})`
+  .Toastify__toast-container {
+  }
+  .Toastify__toast {
+    padding: 5px;
+    margin-left: 5px;
+    margin-right: 5px;
+    border-radius: 10px;
+    background: #7367f0;
+    color: #fff;
+  }
+  .Toastify__toast--error {
+    background: rgba(${props => props.theme.colors.danger});
+  }
+  .Toastify__toast--warning {
+    background: rgba(${props => props.theme.colors.warning});
+  }
+  .Toastify__toast--success {
+    background: rgba(${props => props.theme.colors.success});
+  }
+  .Toastify__toast-body {
+  }
+  .Toastify__progress-bar {
+  }
+  .Toastify__close-button {
+    display: none;
+  }
+`;
+
 const history = createBrowserHistory();
 type RefreshTokenResponse = {
   accessToken: string;
@@ -72,6 +106,18 @@ const App = () => {
               )}
             </PopupProvider>
           </Router>
+          <StyledContainer
+            position="bottom-right"
+            autoClose={5000}
+            hideProgressBar
+            newestOnTop
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+            limit={5}
+          />
         </ThemeProvider>
       </UserContext.Provider>
     </>