feat: Move About and Terms into separate modal

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/AboutPane.jsx

@@ -1,24 +0,0 @@
-/*!
- * Copyright (c) 2024 PLANKA Software GmbH
- * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
- */
-
-import React from 'react';
-import { Image, Tab } from 'semantic-ui-react';
-
-import version from '../../../version';
-
-import aboutLogo from '../../../assets/images/about-logo.png';
-
-import styles from './AboutPane.module.scss';
-
-const AboutPane = React.memo(() => (
-  <Tab.Pane attached={false} className={styles.wrapper}>
-    <a href="https://github.com/plankanban/planka" target="_blank" rel="noreferrer">
-      <Image centered src={aboutLogo} size="large" />
-    </a>
-    <div className={styles.version}>{version}</div>
-  </Tab.Pane>
-));
-
-export default AboutPane;

client/src/components/users/UserSettingsModal/AboutPane.module.scss

@@ -1,16 +0,0 @@
-/*!
- * Copyright (c) 2024 PLANKA Software GmbH
- * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
- */
-
-:global(#app) {
-  .version {
-    font-weight: bold;
-    text-align: center;
-  }
-
-  .wrapper {
-    border: none;
-    box-shadow: none;
-  }
-}

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

@@ -1,49 +0,0 @@
-/*!
- * Copyright (c) 2024 PLANKA Software GmbH
- * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
- */
-
-import React, { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { useTranslation } from 'react-i18next';
-import { Loader, Tab } from 'semantic-ui-react';
-
-import selectors from '../../../selectors';
-import api from '../../../api';
-import Markdown from '../../common/Markdown';
-
-import styles from './TermsPane.module.scss';
-
-const TermsPane = React.memo(() => {
-  const type = useSelector((state) => selectors.selectCurrentUser(state).termsType);
-
-  const { i18n } = useTranslation();
-  const [content, setContent] = useState(null);
-
-  useEffect(() => {
-    async function fetchTerms() {
-      let terms;
-      try {
-        ({ item: terms } = await api.getTerms(type, i18n.resolvedLanguage));
-      } catch {
-        return;
-      }
-
-      setContent(terms.content);
-    }
-
-    fetchTerms();
-  }, [type, i18n.resolvedLanguage]);
-
-  return (
-    <Tab.Pane attached={false} className={styles.wrapper}>
-      {content ? (
-        <Markdown>{content}</Markdown>
-      ) : (
-        <Loader active inverted inline="centered" size="small" />
-      )}
-    </Tab.Pane>
-  );
-});
-
-export default TermsPane;

client/src/components/users/UserSettingsModal/TermsPane.module.scss

@@ -1,11 +0,0 @@
-/*!
- * Copyright (c) 2024 PLANKA Software GmbH
- * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
- */
-
-:global(#app) {
-  .wrapper {
-    border: none;
-    box-shadow: none;
-  }
-}

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 (