Prepare footer for new item

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

@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import FooterMenu from './FooterMenu';
 
 const PreviewWrapper: ComponentType<{ style?: CSSProperties }> = ({ style, children }) => (
-    <div style={{ padding: '25px', ...style }}>{children}</div>
+    <div style={{ padding: '25px', width: 320, boxSizing: 'border-box', ...style }}>{children}</div>
 );
 
 storiesOf('Components', module).add('FooterMenu', () => (

packages/app/components/footerMenu/FooterMenu.tsx

@@ -20,18 +20,33 @@ const FooterMenu: ComponentType = () => {
 
     return (
         <div className={styles.footerMenu} data-testid="footer">
-            <Link to="/rules" className={styles.footerItem}>
-                <Message key="rules" defaultMessage="Rules" />
-            </Link>
-            <ContactLink className={styles.footerItem}>
-                <Message key="contactUs" defaultMessage="Contact Us" />
-            </ContactLink>
-            <Link to="/dev" className={styles.footerItem}>
-                <Message key="forDevelopers" defaultMessage="For developers" />
-            </Link>
+            <div className={styles.row}>
+                <Link to="/rules" className={styles.footerItem}>
+                    <Message key="rules" defaultMessage="Rules" />
+                </Link>
 
-            <div className={styles.langTriggerContainer}>
-                <a href="#" className={styles.langTrigger} onClick={onLanguageSwitcherClick}>
+                {'ꞏ'}
+
+                <ContactLink className={styles.footerItem}>
+                    <Message key="contactUs" defaultMessage="Contact Us" />
+                </ContactLink>
+            </div>
+
+            <div className={styles.row}>
+                <Link to="/dev" className={styles.footerItem}>
+                    <Message key="forDevelopers" defaultMessage="For developers" />
+                </Link>
+
+                {'ꞏ'}
+
+                {/* TODO: on click open the source code popup */}
+                <a href="#" className={styles.footerItem}>
+                    <Message key="sourceCode" defaultMessage="Source code" />
+                </a>
+            </div>
+
+            <div className={styles.row}>
+                <a href="#" className={styles.footerItem} onClick={onLanguageSwitcherClick}>
                     <span className={styles.langTriggerIcon} />
                     <Message key="siteLanguage" defaultMessage="Site language" />
                 </a>

packages/app/components/footerMenu/footerMenu.scss

@@ -7,23 +7,15 @@
     line-height: 12px;
 }
 
+.row {
+    margin-bottom: 2px;
+}
+
 .footerItem {
     display: inline-block;
-    margin: 2px 5px 2px 0;
+    margin: 2px 2px;
     color: #666;
     border-bottom-color: #666;
-
-    &:last-of-type {
-        margin-right: 0;
-    }
-}
-
-.langTriggerContainer {
-    margin-top: 1px;
-}
-
-.langTrigger {
-    composes: footerItem;
 }
 
 .langTriggerIcon {