Rework FooterMenu, add vertical padding and let links break on multiple lines. Add a story for the FooterMenu

packages/app/components/footerMenu/FooterMenu.story.tsx

@@ -0,0 +1,20 @@
+import React, { ComponentType, CSSProperties } from 'react';
+import { storiesOf } from '@storybook/react';
+
+import FooterMenu from './FooterMenu';
+
+const PreviewWrapper: ComponentType<{ style?: CSSProperties }> = ({
+  style,
+  children,
+}) => <div style={{ padding: '25px', ...style }}>{children}</div>;
+
+storiesOf('Components', module).add('FooterMenu', () => (
+  <div style={{ display: 'flex' }}>
+    <PreviewWrapper>
+      <FooterMenu />
+    </PreviewWrapper>
+    <PreviewWrapper style={{ backgroundColor: '#232323' }}>
+      <FooterMenu />
+    </PreviewWrapper>
+  </div>
+));

packages/app/components/footerMenu/FooterMenu.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { ComponentType, MouseEventHandler, useCallback } from 'react';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
 import LanguageSwitcher from 'app/components/languageSwitcher';
@@ -9,54 +9,40 @@ import { ContactLink } from 'app/components/contact';
 import styles from './footerMenu.scss';
 import messages from './footerMenu.intl.json';
 
-type Props = {
+const FooterMenu: ComponentType = () => {
-  createLanguageSwitcherPopup: () => void;
+  const dispatch = useDispatch();
+  const onLanguageSwitcherClick = useCallback<MouseEventHandler>(
+    event => {
+      event.preventDefault();
+      dispatch(createPopup({ Popup: LanguageSwitcher }));
+    },
+    [dispatch],
+  );
+
+  return (
+    <div className={styles.footerMenu} data-testid="footer">
+      <Link to="/rules" className={styles.footerItem}>
+        <Message {...messages.rules} />
+      </Link>
+      <ContactLink className={styles.footerItem}>
+        <Message {...messages.contactUs} />
+      </ContactLink>
+      <Link to="/dev" className={styles.footerItem}>
+        <Message {...messages.forDevelopers} />
+      </Link>
+
+      <div className={styles.langTriggerContainer}>
+        <a
+          href="#"
+          className={styles.langTrigger}
+          onClick={onLanguageSwitcherClick}
+        >
+          <span className={styles.langTriggerIcon} />
+          <Message {...messages.siteLanguage} />
+        </a>
+      </div>
+    </div>
+  );
 };
 
-class FooterMenu extends React.Component<Props> {
+export default FooterMenu;
-  render() {
-    return (
-      <div className={styles.footerMenu} data-testid="footer">
-        <Link to="/rules">
-          <Message {...messages.rules} />
-        </Link>
-        {' | '}
-        <ContactLink>
-          <Message {...messages.contactUs} />
-        </ContactLink>
-        {' | '}
-        <Link to="/dev">
-          <Message {...messages.forDevelopers} />
-        </Link>
-
-        <div className={styles.langTriggerContainer}>
-          <a
-            href="#"
-            className={styles.langTrigger}
-            onClick={this.onLanguageSwitcher}
-          >
-            <span className={styles.langTriggerIcon} />
-            <Message {...messages.siteLanguage} />
-          </a>
-        </div>
-      </div>
-    );
-  }
-
-  onLanguageSwitcher = (event: React.MouseEvent<HTMLElement>) => {
-    event.preventDefault();
-
-    this.props.createLanguageSwitcherPopup();
-  };
-}
-
-// mark this component, as not pure, because it is stateless,
-// but should be re-rendered, if current lang was changed
-export default connect(
-  null,
-  {
-    createLanguageSwitcherPopup: () => createPopup({ Popup: LanguageSwitcher }),
-  },
-  null,
-  { pure: false },
-)(FooterMenu);

packages/app/components/footerMenu/footerMenu.scss

@@ -1,16 +1,29 @@
 .footerMenu {
+  padding: 0 25px;
+  text-align: center;
   font-size: 12px;
-  line-height: 1.5;
+  // Set line-height the same as the font-size value to keep the border-bottom
-  color: #666;
+  // close to the text when the inline-block is turned on .footerItem
+  line-height: 12px;
+}
 
-  a {
+.footerItem {
-    color: #666;
+  display: inline-block;
-    border-bottom-color: #666;
+  margin: 2px 5px 2px 0;
+  color: #666;
+  border-bottom-color: #666;
+
+  &:last-of-type {
+    margin-right: 0;
   }
 }
 
 .langTriggerContainer {
-  text-align: center;
+  margin-top: 1px;
+}
+
+.langTrigger {
+  composes: footerItem;
 }
 
 .langTriggerIcon {