Progress

app/javascript/gabsocial/components/link_footer.js

@@ -1,5 +1,4 @@
 import moment from 'moment'
-import classNames from 'classnames/bind'
 import {
   FormattedMessage,
   defineMessages,
@@ -11,8 +10,11 @@ import {
   source_url,
   me,
 } from '../initial_state'
+import Text from './text'
+import Button from './button'
 
 const messages = defineMessages({
+  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' },
@@ -20,7 +22,7 @@ const messages = defineMessages({
   developers: { id: 'getting_started.developers', defaultMessage: 'Developers' },
   terms: { id: 'getting_started.terms', defaultMessage: 'Terms of Service' },
   dmca: { id: 'getting_started.dmca', defaultMessage: 'DMCA' },
-  terms: { id: 'getting_started.terms_of_sale', defaultMessage: 'Terms of Sale' },
+  salesTerms: { id: 'getting_started.terms_of_sale', defaultMessage: 'Terms of Sale' },
   privacy: { id: 'getting_started.privacy', defaultMessage: 'Privacy Policy' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
 })
@@ -31,9 +33,6 @@ const mapDispatchToProps = (dispatch) => ({
   },
 })
 
-const cx = classNames.bind(_s)
-const currentYear = moment().format('YYYY')
-
 export default @connect(null, mapDispatchToProps)
 @injectIntl
 class LinkFooter extends PureComponent {
@@ -43,29 +42,18 @@ class LinkFooter extends PureComponent {
     onOpenHotkeys: PropTypes.func.isRequired,
   }
 
-  state = {
-    hoveringItemIndex: null,
-  }
-
-  onMouseEnterLinkFooterItem = (i) => {
-    this.setState({
-      hoveringItemIndex: i,
-    })
-  }
-
-  onMouseLeaveLinkFooterItem = () => {
-    this.setState({
-      hoveringItemIndex: null,
-    })
-  }
-
   render() {
     const { onOpenHotkeys, intl } = this.props
-    const { hoveringItemIndex } = this.state
+
+    const currentYear = moment().format('YYYY')
 
     const linkFooterItems = [
       {
-        to: '#',
+        to: '/help',
+        text: intl.formatMessage(messages.help),
+        requiresUser: true,
+      },
+      {
         onClick: onOpenHotkeys,
         text: intl.formatMessage(messages.hotkeys),
         requiresUser: true,
@@ -93,7 +81,7 @@ class LinkFooter extends PureComponent {
       },
       {
         to: '/about/sales',
-        text: intl.formatMessage(messages.terms),
+        text: intl.formatMessage(messages.salesTerms),
       },
       {
         to: '/about/privacy',
@@ -108,64 +96,50 @@ class LinkFooter extends PureComponent {
     ]
 
     return (
-      <div className={[_s.default, _s.paddingHorizontal10PX].join(' ')}>
+      <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginBottom15PX].join(' ')}>
         <nav aria-label='Footer' role='navigation' className={[_s.default, _s.flexWrap, _s.flexRow].join(' ')}>
           {
             linkFooterItems.map((linkFooterItem, i) => {
               if (linkFooterItem.requiresUser && !me) return null
-              const classes = cx({
-                default: 1,
-                fontSize13PX: 1,
-                text: 1,
-                marginVertical5PX: 1,
-                paddingRight15PX: 1,
-                cursorPointer: 1,
-                backgroundTransparent: 1,
-                colorSecondary: i !== hoveringItemIndex,
-                noUnderline: i !== hoveringItemIndex,
-                colorPrimary: i === hoveringItemIndex,
-                underline: i === hoveringItemIndex,
-              })
-
-              if (linkFooterItem.onClick) {
-                return (
-                  <button
-                    key={`link-footer-item-${i}`}
-                    data-method={linkFooterItem.logout ? 'delete' : null}
-                    onClick={linkFooterItem.onClick || null}
-                    onMouseEnter={() => this.onMouseEnterLinkFooterItem(i)}
-                    onMouseLeave={() => this.onMouseLeaveLinkFooterItem(i)}
-                    className={classes}
-                  >
-                    {linkFooterItem.text}
-                  </button>
-                )
-              }
 
               return (
-                <a
+                <Button
+                  text
+                  underlineOnHover
+                  color='none'
+                  backgroundColor='none'
                   key={`link-footer-item-${i}`}
                   href={linkFooterItem.to}
                   data-method={linkFooterItem.logout ? 'delete' : null}
-                  onMouseEnter={() => this.onMouseEnterLinkFooterItem(i)}
-                  onMouseLeave={() => this.onMouseLeaveLinkFooterItem(i)}
-                  className={classes}
+                  onClick={linkFooterItem.onClick || null}
+                  className={[_s.marginVertical5PX, _s.paddingRight15PX].join(' ')}
                 >
-                  {linkFooterItem.text}
-                </a>
+                  <Text size='small' color='secondary'>
+                    {linkFooterItem.text}
+                  </Text>
+                </Button>
               )
             })
           }
-          <span className={[_s.default, _s.text, _s.fontSize13PX, _s.colorSecondary, _s.marginVertical5PX].join(' ')}>© {currentYear} Gab AI, Inc.</span>
         </nav>
 
-        <p className={[_s.default, _s.text, _s.fontSize13PX, _s.colorSecondary, _s.marginTop10PX, _s.marginBottom15PX].join(' ')}>
+        <Text size='small' color='secondary' className={_s.marginTop10PX}>
+          © {currentYear} Gab AI, Inc.
+        </Text>
+
+        <Text size='small' color='secondary' tagName='p' className={_s.marginTop10PX}>
           <FormattedMessage
             id='getting_started.open_source_notice'
             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.inherit].join(' ')} rel='noopener' target='_blank'>{repository}</a> }}
+            values={{
+              gitlab: (
+                <a href={source_url} className={_s.inherit} rel='noopener' target='_blank'>
+                  {repository}
+                </a>
+              )
+            }}
           />
-        </p>
+        </Text>
       </div>
     )
   }