diff --git a/index.template.html b/index.template.html index 75743bb..24b43d4 100644 --- a/index.template.html +++ b/index.template.html @@ -34,6 +34,25 @@ return t; })(document, 'script', 'twitter-wjs'); + diff --git a/src/components/app/about-tab/about.scss b/src/components/app/about-tab/about.scss index 59b6963..729d597 100644 --- a/src/components/app/about-tab/about.scss +++ b/src/components/app/about-tab/about.scss @@ -12,4 +12,12 @@ margin-right: 0.5em; } } + + .follow-btn { + display: none; + + &--rendered { + display: inline; + } + } } diff --git a/src/components/app/about-tab/index.jsx b/src/components/app/about-tab/index.jsx index 3ed8877..c34aa44 100644 --- a/src/components/app/about-tab/index.jsx +++ b/src/components/app/about-tab/index.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from 'react'; +import React, { useEffect } from 'react'; import propTypes from 'prop-types'; import { applyUpdate } from 'offline-plugin/runtime'; import './about.scss'; @@ -11,23 +11,13 @@ const handleUpdateClick = e => { }; const AboutTabComponent = ({ version, isUpdateAvailable, isOnline }) => { - const followBtnRef = useRef(null); - useEffect( - () => { - if (window.twttr && followBtnRef.current) { - window.twttr.ready(twttr => { - twttr.widgets.createFollowButton( - 'alex_bainter', - followBtnRef.current, - { showCount: false } - ); - }); - } - }, - window.twttr, - followBtnRef.current - ); - + useEffect(() => { + if (window.twttr) { + window.twttr.ready(twttr => { + twttr.widgets.load(); + }); + } + }, [window.twttr]); return (
{isUpdateAvailable && isOnline && ( @@ -63,7 +53,14 @@ const AboutTabComponent = ({ version, isUpdateAvailable, isOnline }) => {

- Follow on Twitter for app news and updates: + + Follow @alex_bainter + {' '} + on Twitter for app news and updates.{' '}


{`v${version}`}

diff --git a/src/components/app/help-tab/index.jsx b/src/components/app/help-tab/index.jsx index ba479e3..e3d007f 100644 --- a/src/components/app/help-tab/index.jsx +++ b/src/components/app/help-tab/index.jsx @@ -12,44 +12,42 @@ const HelpTabComponent = () => ( This might be resolved in a future update.

The audio pops, crackles, or snaps

-

- Here's some steps you can try: -

    - {!isMobile && ( -
  1. - Try turning the site volume down and using your computer's volume - instead. -
  2. - )} - {isMobile && ( -
  3. - If you're using external speakers, try turning your device's volume - down and using your speakers' volume instead. -
  4. - )} + Here's some steps you can try: +
      + {!isMobile && (
    1. - Try listening to the pieces towards the end of the list. Some pieces - play better than others. + Try turning the site volume down and using your computer's volume + instead.
    2. + )} + {isMobile && (
    3. - Try using a more powerful device - {isMobile && ', like a desktop or laptop'}. + If you're using external speakers, try turning your device's volume + down and using your speakers' volume instead.
    4. -
    - You can also report the issue{' '} - - on Github - {' '} - or by sending an email to{' '} - - alex@alexbainter.com - - . -

    + )} +
  5. + Try listening to the pieces towards the end of the list. Some pieces + play better than others. +
  6. +
  7. + Try using a more powerful device + {isMobile && ', like a desktop or laptop'}. +
  8. +
+ You can also report the issue{' '} + + on Github + {' '} + or by sending an email to{' '} + + alex@alexbainter.com + + .
);