ref: Creating popups with hook, fix translation keys passing

client/src/components/Header/Header.jsx

@@ -3,13 +3,18 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 import { Icon, Menu } from 'semantic-ui-react';
+import { usePopup } from '../../lib/popup';
 
 import Paths from '../../constants/Paths';
-import NotificationsPopup from './NotificationsPopup';
-import UserPopup from '../UserPopup';
+import NotificationsStep from './NotificationsStep';
+import UserStep from '../UserStep';
 
 import styles from './Header.module.scss';
 
+const POPUP_PROPS = {
+  position: 'bottom right',
+};
+
 const Header = React.memo(
   ({
     project,
@@ -30,6 +35,9 @@ const Header = React.memo(
       }
     }, [canEditProject, onProjectSettingsClick]);
 
+    const NotificationsPopup = usePopup(NotificationsStep, POPUP_PROPS);
+    const UserPopup = usePopup(UserStep, POPUP_PROPS);
+
     return (
       <div className={styles.wrapper}>
         {!project && (

client/src/components/Header/NotificationsStep.jsx

@@ -4,14 +4,13 @@ import PropTypes from 'prop-types';
 import { useTranslation, Trans } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { Button } from 'semantic-ui-react';
-import { withPopup } from '../../lib/popup';
 import { Popup } from '../../lib/custom-ui';
 
 import Paths from '../../constants/Paths';
 import { ActivityTypes } from '../../constants/Enums';
 import User from '../User';
 
-import styles from './NotificationsPopup.module.scss';
+import styles from './NotificationsStep.module.scss';
 
 const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
   const [t] = useTranslation();
@@ -123,6 +122,4 @@ NotificationsStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default withPopup(NotificationsStep, {
-  position: 'bottom right',
-});
+export default NotificationsStep;