diff --git a/images/unhappy_device.png b/images/unhappy_device.png new file mode 100644 index 0000000000..4ccf3b5a62 Binary files /dev/null and b/images/unhappy_device.png differ diff --git a/lib/components/VersionCheckError.js b/lib/components/VersionCheckError.js index 74525d1193..becdf5caa3 100644 --- a/lib/components/VersionCheckError.js +++ b/lib/components/VersionCheckError.js @@ -15,6 +15,7 @@ * == BSD2 LICENSE == */ +import cx from 'classnames'; import React, { Component, PropTypes } from 'react'; import * as errorUtils from '../redux/utils/errors'; @@ -29,9 +30,9 @@ export default class VersionCheckError extends Component { errorText: { CONNECT: 'Please check your connection and relaunch.', ERROR_DETAILS: 'Details for Tidepool\'s developers:', - OFFLINE: 'You don\'t appear to be connected to the Internet.', + OFFLINE: 'You\'re not connected to the Internet.', SERVERS_DOWN: 'Tidepool\'s servers are down.', - TRY_AGAIN: 'Please try again in a few minutes.' + TRY_AGAIN: 'Please relaunch & try again in a few minutes.' } }; @@ -50,8 +51,13 @@ export default class VersionCheckError extends Component { ); const firstLine = offline ? errorText.OFFLINE : errorText.SERVERS_DOWN; const secondLine = offline ? errorText.CONNECT : errorText.TRY_AGAIN; + const versionCheckClass = cx({ + VersionCheck: true, + 'VersionCheck--failed': !offline, + 'VersionCheck--offline': offline + }); return ( -
+

{firstLine}

{secondLine}

diff --git a/styles/components/VersionCheck.less b/styles/components/VersionCheck.less index d36ea92923..4b89c0c64b 100644 --- a/styles/components/VersionCheck.less +++ b/styles/components/VersionCheck.less @@ -11,6 +11,13 @@ background: url(/images/unhappy_meter.png) center center / 69px 166px no-repeat; .mostly-opaque-background(); } + &.VersionCheck--offline { + background: url(/images/unhappy_device.png); + background-position: 50% 60%; + background-size: 105px 237px; + background-repeat: no-repeat; + .mostly-opaque-background(); + } &.VersionCheck--outdated { background: url(/images/happy_device.png); background-position: 50% 60%;