feat: Move About and Terms into separate modal

client/src/components/common/Core/Core.jsx

@@ -16,6 +16,7 @@ import Toaster from '../Toaster';
 import Fixed from '../Fixed';
 import Static from '../Static';
 import AdministrationModal from '../AdministrationModal';
+import InformationModal from '../InformationModal';
 import UserSettingsModal from '../../users/UserSettingsModal';
 import ProjectBackground from '../../projects/ProjectBackground';
 import AddProjectModal from '../../projects/AddProjectModal';
@@ -61,6 +62,10 @@ const Core = React.memo(() => {
       case ModalTypes.ADMINISTRATION:
         modalNode = <AdministrationModal />;
 
+        break;
+      case ModalTypes.INFORMATION:
+        modalNode = <InformationModal />;
+
         break;
       case ModalTypes.USER_SETTINGS:
         modalNode = <UserSettingsModal />;

client/src/components/common/Header/Header.jsx

@@ -15,7 +15,7 @@ import entryActions from '../../../entry-actions';
 import Paths from '../../../constants/Paths';
 import { BoardMembershipRoles, BoardViews, UserRoles } from '../../../constants/Enums';
 import UserAvatar from '../../users/UserAvatar';
-import UserStep from '../../users/UserStep';
+import UserActionsStep from '../../users/UserActionsStep';
 import NotificationsStep from '../../notifications/NotificationsStep';
 
 import styles from './Header.module.scss';
@@ -90,7 +90,7 @@ const Header = React.memo(() => {
   }, [canEditProject, dispatch]);
 
   const NotificationsPopup = usePopup(NotificationsStep, POPUP_PROPS);
-  const UserPopup = usePopup(UserStep, POPUP_PROPS);
+  const UserActionsPopup = usePopup(UserActionsStep, POPUP_PROPS);
 
   return (
     <div className={styles.wrapper}>
@@ -152,12 +152,12 @@ const Header = React.memo(() => {
               )}
             </Menu.Item>
           </NotificationsPopup>
-          <UserPopup>
+          <UserActionsPopup>
             <Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
               <span className={styles.userName}>{user.name}</span>
               <UserAvatar id={user.id} size="small" />
             </Menu.Item>
-          </UserPopup>
+          </UserActionsPopup>
         </Menu.Menu>
       </Menu>
     </div>

client/src/components/common/InformationModal/InformationModal.jsx

@@ -0,0 +1,56 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Tab } from 'semantic-ui-react';
+
+import entryActions from '../../../entry-actions';
+import { useClosableModal } from '../../../hooks';
+import TermsPane from './TermsPane';
+import AboutPane from './AboutPane';
+
+const InformationModal = React.memo(() => {
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+
+  const handleClose = useCallback(() => {
+    dispatch(entryActions.closeModal());
+  }, [dispatch]);
+
+  const [ClosableModal] = useClosableModal();
+
+  const panes = [
+    {
+      menuItem: t('common.aboutPlanka', {
+        context: 'title',
+      }),
+      render: () => <AboutPane />,
+    },
+    {
+      menuItem: t('common.termsOfService', {
+        context: 'title',
+      }),
+      render: () => <TermsPane />,
+    },
+  ];
+
+  return (
+    <ClosableModal open closeIcon size="small" centered={false} onClose={handleClose}>
+      <ClosableModal.Content>
+        <Tab
+          menu={{
+            secondary: true,
+            pointing: true,
+          }}
+          panes={panes}
+        />
+      </ClosableModal.Content>
+    </ClosableModal>
+  );
+});
+
+export default InformationModal;

client/src/components/common/InformationModal/TermsPane.jsx

@@ -10,7 +10,7 @@ import { Loader, Tab } from 'semantic-ui-react';
 
 import selectors from '../../../selectors';
 import api from '../../../api';
-import Markdown from '../../common/Markdown';
+import Markdown from '../Markdown';
 
 import styles from './TermsPane.module.scss';
 

client/src/components/common/InformationModal/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import InformationModal from './InformationModal';
+
+export default InformationModal;

client/src/components/users/UserActionsStep/UserActionsStep.jsx

@@ -14,9 +14,9 @@ import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import { UserRoles } from '../../../constants/Enums';
 
-import styles from './UserStep.module.scss';
+import styles from './UserActionsStep.module.scss';
 
-const UserStep = React.memo(({ onClose }) => {
+const UserActionsStep = React.memo(({ onClose }) => {
   const isLogouting = useSelector(selectors.selectIsLogouting);
 
   const customerPanelUrl = useSelector(
@@ -40,6 +40,11 @@ const UserStep = React.memo(({ onClose }) => {
     onClose();
   }, [onClose, dispatch]);
 
+  const handleInformationClick = useCallback(() => {
+    dispatch(entryActions.openInformationModal());
+    onClose();
+  }, [onClose, dispatch]);
+
   const handleLogoutClick = useCallback(() => {
     dispatch(entryActions.logout());
   }, [dispatch]);
@@ -65,7 +70,7 @@ const UserStep = React.memo(({ onClose }) => {
       <Popup.Content>
         <Menu secondary vertical className={styles.menu}>
           <Menu.Item className={styles.menuItem} onClick={handleSettingsClick}>
-            <Icon name="user circle outline" className={styles.menuItemIcon} />
+            <Icon name="user circle" className={styles.menuItemIcon} />
             {t('common.settings', {
               context: 'title',
             })}
@@ -93,6 +98,12 @@ const UserStep = React.memo(({ onClose }) => {
               )}
             </>
           )}
+          <Menu.Item className={styles.menuItem} onClick={handleInformationClick}>
+            <Icon name="info circle" className={styles.menuItemIcon} />
+            {t('common.information', {
+              context: 'title',
+            })}
+          </Menu.Item>
           <hr className={styles.divider} />
           <Menu.Item
             {...logoutMenuItemProps} // eslint-disable-line react/jsx-props-no-spreading
@@ -110,8 +121,8 @@ const UserStep = React.memo(({ onClose }) => {
   );
 });
 
-UserStep.propTypes = {
+UserActionsStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default UserStep;
+export default UserActionsStep;

client/src/components/users/UserActionsStep/index.js

@@ -3,6 +3,6 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-import UserStep from './UserStep';
+import UserActionsStep from './UserActionsStep';
 
-export default UserStep;
+export default UserActionsStep;

client/src/components/users/UserSettingsModal/UserSettingsModal.jsx

@@ -13,8 +13,6 @@ import { useClosableModal } from '../../../hooks';
 import AccountPane from './AccountPane';
 import PreferencesPane from './PreferencesPane';
 import NotificationsPane from './NotificationsPane';
-import TermsPane from './TermsPane';
-import AboutPane from './AboutPane';
 
 const UserSettingsModal = React.memo(() => {
   const dispatch = useDispatch();
@@ -45,18 +43,6 @@ const UserSettingsModal = React.memo(() => {
       }),
       render: () => <NotificationsPane />,
     },
-    {
-      menuItem: t('common.terms', {
-        context: 'title',
-      }),
-      render: () => <TermsPane />,
-    },
-    {
-      menuItem: t('common.aboutPlanka', {
-        context: 'title',
-      }),
-      render: () => <AboutPane />,
-    },
   ];
 
   return (