Fix anontools in header, convert it to functional (#236)

dockerfiles/docker-compose.yml

@@ -13,10 +13,10 @@ services:
     volumes:
       - ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
     environment:
-      # RAZZLE_INTERNAL_API_PATH: http://backend:8080/Plone
+      RAZZLE_INTERNAL_API_PATH: http://backend:8080/Plone
       # In case that you want to connect to and outside (non-docker) local instance
       # coment the above, use the next line
-      RAZZLE_INTERNAL_API_PATH: http://host.docker.internal:8080/Plone
+      # RAZZLE_INTERNAL_API_PATH: http://host.docker.internal:8080/Plone
       RAZZLE_API_PATH: http://127.0.0.1:8080/Plone
       HOST: 0.0.0.0
     depends_on:

news/236.bugfix

@@ -0,0 +1 @@
+Fix anontools in header, convert it to functional @sneridagh

src/components/Anontools/Anontools.jsx

@@ -1,79 +1,53 @@
 // SemanticUI-free pre-@plone/components
-// Refactor when https://github.com/plone/volto/pull/4845 is merged
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
+import { useSelector, shallowEqual } from 'react-redux';
 
-/**
- * Anontools container class.
- */
-export class Anontools extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    token: PropTypes.string,
-    content: PropTypes.shape({
-      '@id': PropTypes.string,
-    }),
-  };
+const Anontools = () => {
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const content = useSelector((state) => state.content.data, shallowEqual);
 
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    token: null,
-    content: {
-      '@id': null,
-    },
-  };
+  const { settings } = config;
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { settings } = config;
-    return (
-      !this.props.token && (
-        <div className="anontools">
-          {settings.showSelfRegistration && (
-            <div>
-              <Link aria-label="register" to="/register">
-                <FormattedMessage id="Register" defaultMessage="Register" />
-              </Link>
-            </div>
-          )}
-          <div>
-            <Link
-              aria-label="login"
-              to={`/login${
-                this.props.content?.['@id']
-                  ? `?return_url=${this.props.content['@id'].replace(
-                      settings.apiPath,
-                      '',
-                    )}`
-                  : ''
-              }`}
-            >
-              <FormattedMessage id="Log in" defaultMessage="Log in" />
-            </Link>
-          </div>
-        </div>
-      )
-    );
-  }
-}
+  return (
+    !token && (
+      <div className="anontools">
+        {settings.showSelfRegistration && (
+          <Link aria-label="register" to="/register">
+            <FormattedMessage id="Register" defaultMessage="Register" />
+          </Link>
+        )}
 
-export default connect((state) => ({
-  token: state.userSession.token,
-  content: state.content.data,
-}))(Anontools);
+        <Link
+          aria-label="login"
+          to={`/login${
+            content?.['@id']
+              ? `?return_url=${flattenToAppURL(content['@id'])}`
+              : ''
+          }`}
+        >
+          <FormattedMessage id="Log in" defaultMessage="Log in" />
+        </Link>
+      </div>
+    )
+  );
+};
+
+export default Anontools;
+
+Anontools.propTypes = {
+  token: PropTypes.string,
+  content: PropTypes.shape({
+    '@id': PropTypes.string,
+  }),
+};
+
+Anontools.defaultProps = {
+  token: null,
+  content: {
+    '@id': null,
+  },
+};

src/theme/_header.scss

@@ -209,6 +209,9 @@
     .language-selector a {
       text-transform: uppercase;
     }
+    .tools {
+      display: flex;
+    }
 
     .tools a {
       margin-right: 10px;
@@ -224,26 +227,18 @@
       font-size: 14px;
     }
 
-    // .tools a:last-child:after {
-    //   padding-right: 5px;
-    //   padding-left: 5px;
-    //   content: '';
-    // }
-
     .tools .anontools {
       display: flex;
       margin-right: 10px;
 
       a {
-        margin-right: 0;
+        margin-right: 10px;
         color: $black;
       }
 
-      > div {
-        &:first-of-type::after {
-          content: '|';
-          font-size: 1rem;
-        }
+      &:after {
+        content: '|';
+        font-size: 14px;
       }
     }
   }

src/theme/_typo-custom.scss

@@ -100,12 +100,15 @@ h1.documentFirstHeading {
   line-height: 48px;
 }
 
-.block-editor-heading {
-  .block .heading-wrapper {
-    margin-right: 0 !important;
-    margin-left: 0 !important;
-  }
-}
+// Sept2023 - @sneridagh: removing this, since it's breaking
+// the layout in edit view. Can't say why it was here in the
+// first place, we'll see if it breaks in another place after it.
+// .block-editor-heading {
+//   .block .heading-wrapper {
+//     margin-right: 0 !important;
+//     margin-left: 0 !important;
+//   }
+// }
 
 // Slate headings
 h2 {