Progress

app/javascript/gabsocial/components/link_footer.js

@@ -1,29 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
 import {
   FormattedMessage,
   defineMessages,
   injectIntl,
 } from 'react-intl'
-import { openModal } from '../actions/modal'
 import {
+  me,
   repository,
   source_url,
-  me,
 } from '../initial_state'
-import { CX, DEFAULT_REL } from '../constants'
+import { DEFAULT_REL } from '../constants'
 import Text from './text'
 import Button from './button'
+import DotTextSeperator from './dot_text_seperator'
 
 class LinkFooter extends React.PureComponent {
 
   render() {
-    const {
-      intl,
-      noPadding,
-      onOpenHotkeys,
-    } = this.props
+    const { intl } = this.props
 
     const currentYear = new Date().getFullYear()
 
@@ -32,12 +27,6 @@ class LinkFooter extends React.PureComponent {
         href: 'https://help.gab.com',
         text: intl.formatMessage(messages.help),
       },
-      // : todo :
-      // {
-      //   onClick: onOpenHotkeys,
-      //   text: intl.formatMessage(messages.hotkeys),
-      //   requiresUser: true,
-      // },
       {
         href: '/auth/edit',
         text: intl.formatMessage(messages.security),
@@ -52,16 +41,16 @@ class LinkFooter extends React.PureComponent {
         text: intl.formatMessage(messages.investors),
       },
       {
-        to: '/about/tos',
-        text: intl.formatMessage(messages.terms),
+        to: '/about/sales',
+        text: intl.formatMessage(messages.salesTerms),
       },
       {
         to: '/about/dmca',
         text: intl.formatMessage(messages.dmca),
       },
       {
-        to: '/about/sales',
-        text: intl.formatMessage(messages.salesTerms),
+        to: '/about/tos',
+        text: intl.formatMessage(messages.terms),
       },
       {
         to: '/about/privacy',
@@ -75,36 +64,33 @@ class LinkFooter extends React.PureComponent {
       },
     ]
 
-    const containerClasses = CX({
-      d: 1,
-      px10: !noPadding,
-      mb15: 1,
-    })
-
     return (
-      <div className={containerClasses}>
+      <div className={[_s.d, _s.mb15].join(' ')}>
         <nav aria-label='Footer' role='navigation' className={[_s.d, _s.flexWrap, _s.flexRow].join(' ')}>
           {
             linkFooterItems.map((linkFooterItem, i) => {
               if (linkFooterItem.requiresUser && !me) return null
 
               return (
-                <Button
-                  isText
-                  underlineOnHover
-                  color='none'
-                  backgroundColor='none'
-                  key={`link-footer-item-${i}`}
-                  to={linkFooterItem.to}
-                  href={linkFooterItem.href}
-                  data-method={linkFooterItem.logout ? 'delete' : null}
-                  onClick={linkFooterItem.onClick || null}
-                  className={[_s.mt5, _s.mb5, _s.pr15].join(' ')}
-                >
-                  <Text size='small' color='tertiary'>
-                    {linkFooterItem.text}
-                  </Text>
-                </Button>
+                <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
+                  <Button
+                    isText
+                    underlineOnHover
+                    color='none'
+                    backgroundColor='none'
+                    key={`link-footer-item-${i}`}
+                    to={linkFooterItem.to}
+                    href={linkFooterItem.href}
+                    data-method={linkFooterItem.logout ? 'delete' : null}
+                    onClick={linkFooterItem.onClick || null}
+                    className={[_s.mt5].join(' ')}
+                  >
+                    <Text size='small' color='tertiary'>
+                      {linkFooterItem.text}
+                    </Text>
+                  </Button>
+                  { !linkFooterItem.logout && <Text size='small' color='secondary' className={[_s.pt2, _s.mr5, _s.ml5].join(' ')}>·</Text> }
+                </div>
               )
             })
           }
@@ -120,7 +106,7 @@ class LinkFooter extends React.PureComponent {
             defaultMessage='Gab Social is open source software. You can contribute or report issues on our self-hosted GitLab at {gitlab}.'
             values={{
               gitlab: (
-                <a href={source_url} className={[_s.displayBlock, _s.inherit].join(' ')} rel={DEFAULT_REL} target='_blank'>
+                <a href={source_url} className={[_s.displayInlineBlock, _s.inherit].join(' ')} rel={DEFAULT_REL} target='_blank'>
                   {repository}
                 </a>
               )
@@ -136,8 +122,6 @@ class LinkFooter extends React.PureComponent {
 const messages = defineMessages({
   investors: { id: 'getting_started.investors', defaultMessage: 'Investors' },
   help: { id: 'getting_started.help', defaultMessage: 'Help' },
-  invite: { id: 'getting_started.invite', defaultMessage: 'Invite people' },
-  hotkeys: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Hotkeys' },
   security: { id: 'getting_started.security', defaultMessage: 'Security' },
   about: { id: 'navigation_bar.info', defaultMessage: 'About' },
   developers: { id: 'getting_started.developers', defaultMessage: 'Developers' },
@@ -148,16 +132,8 @@ const messages = defineMessages({
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
 })
 
-const mapDispatchToProps = (dispatch) => ({
-  onOpenHotkeys() {
-    dispatch(openModal('HOTKEYS'))
-  },
-})
-
 LinkFooter.propTypes = {
   intl: PropTypes.object.isRequired,
-  noPadding: PropTypes.bool,
-  onOpenHotkeys: PropTypes.func.isRequired,
 }
 
-export default injectIntl(connect(null, mapDispatchToProps)(LinkFooter))
+export default injectIntl(LinkFooter)