diff --git a/src/components/browser-modal/browser-modal.css b/src/components/browser-modal/browser-modal.css index a7f86ac4e..2f4145bf6 100644 --- a/src/components/browser-modal/browser-modal.css +++ b/src/components/browser-modal/browser-modal.css @@ -27,17 +27,23 @@ } .illustration { + display: flex; + align-items: center; + justify-content: center; width: 100%; - height: 208px; - background-color: $motion-primary; - background-image: url('./unsupported.png'); - background-size: cover; + height: 100px; + background-color: $control-primary; } [dir="rtl"] .illustration { transform: scaleX(-1); } +.illustration img { + height: 80%; + width: auto; +} + .body { background: $ui-white; padding: 1.5rem 2.25rem; diff --git a/src/components/browser-modal/browser-modal.jsx b/src/components/browser-modal/browser-modal.jsx index ec4f28bbb..0419e9122 100644 --- a/src/components/browser-modal/browser-modal.jsx +++ b/src/components/browser-modal/browser-modal.jsx @@ -5,85 +5,107 @@ import Box from '../box/box.jsx'; import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl'; import styles from './browser-modal.css'; +import unhappyBrowser from './unsupported-browser.svg'; const messages = defineMessages({ label: { id: 'gui.unsupportedBrowser.label', defaultMessage: 'Browser is not supported', description: '' + }, + error: { + id: 'gui.unsupportedBrowser.errorLabel', + defaultMessage: 'An Error Occurred', + description: 'Heading shown when there is an unhandled exception in an unsupported browser' } }); -const BrowserModal = ({intl, ...props}) => ( - -
- - - -

- -

-

- { /* eslint-disable max-len */ } - - { /* eslint-enable max-len */ } -

- - - - +const BrowserModal = ({intl, ...props}) => { + const label = props.error ? messages.error : messages.label; + return ( + +
+ + -
- - - - ) - }} - /> -
- -
- -); + + +

+ +

+

+ { /* eslint-disable max-len */ } + { + props.error ? : + } + { /* eslint-enable max-len */ } +

+ + + + + +
+ + + + ) + }} + /> +
+ +
+ + ); +}; BrowserModal.propTypes = { + error: PropTypes.bool, intl: intlShape.isRequired, isRtl: PropTypes.bool, onBack: PropTypes.func.isRequired }; +BrowserModal.defaultProps = { + error: false +}; + const WrappedBrowserModal = injectIntl(BrowserModal); WrappedBrowserModal.setAppElement = ReactModal.setAppElement; diff --git a/src/components/browser-modal/unsupported-browser.svg b/src/components/browser-modal/unsupported-browser.svg new file mode 100644 index 000000000..7749f7539 --- /dev/null +++ b/src/components/browser-modal/unsupported-browser.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/browser-modal/unsupported.png b/src/components/webgl-modal/unsupported.png similarity index 100% rename from src/components/browser-modal/unsupported.png rename to src/components/webgl-modal/unsupported.png diff --git a/src/components/webgl-modal/webgl-modal.css b/src/components/webgl-modal/webgl-modal.css index 10eed71f1..85fcc0d01 100644 --- a/src/components/webgl-modal/webgl-modal.css +++ b/src/components/webgl-modal/webgl-modal.css @@ -30,7 +30,7 @@ width: 100%; height: 208px; background-color: $motion-primary; - background-image: url('../browser-modal/unsupported.png'); + background-image: url('./unsupported.png'); background-size: cover; } diff --git a/src/containers/error-boundary.jsx b/src/containers/error-boundary.jsx index 3c8b26fee..0b7704ba2 100644 --- a/src/containers/error-boundary.jsx +++ b/src/containers/error-boundary.jsx @@ -4,7 +4,7 @@ import {connect} from 'react-redux'; import BrowserModalComponent from '../components/browser-modal/browser-modal.jsx'; import CrashMessageComponent from '../components/crash-message/crash-message.jsx'; import log from '../lib/log.js'; -import supportedBrowser from '../lib/supported-browser'; +import {recommendedBrowser} from '../lib/supported-browser'; class ErrorBoundary extends React.Component { constructor (props) { @@ -22,8 +22,8 @@ class ErrorBoundary extends React.Component { message: 'Unknown error' }; - // Log errors to analytics, leaving out supported browsers from unsupported. - if (supportedBrowser() && window.Sentry) { + // Log errors to analytics, leaving out browsers that are not in our recommended set + if (recommendedBrowser() && window.Sentry) { window.Sentry.withScope(scope => { Object.keys(info).forEach(key => { scope.setExtra(key, info[key]); @@ -53,7 +53,7 @@ class ErrorBoundary extends React.Component { render () { if (this.state.hasError) { - if (supportedBrowser()) { + if (recommendedBrowser()) { return ( ); diff --git a/src/lib/supported-browser.js b/src/lib/supported-browser.js index 181fb1cb6..6f5ac8bac 100644 --- a/src/lib/supported-browser.js +++ b/src/lib/supported-browser.js @@ -1,15 +1,34 @@ import bowser from 'bowser'; +const minVersions = { + chrome: '63', + msedge: '15', + firefox: '57', + safari: '11' +}; + /** - * Helper function to determine if the browser is supported. + * Helper function to determine if the browser is supported at all. * @returns {boolean} False if the platform is definitely not supported. */ -export default function () { - if (bowser.msie || - bowser.opera || - bowser.silk) { +const supportedBrowser = () => { + if (bowser.msie) { return false; } - // @todo Should also test for versions of supported browsers return true; -} +}; + +/** + * Helper function to determine if the browser meets the minimum recommended version + * @returns {boolean} False if the browser isn't a recommended browser, or doesn't + * meet the minimum version for recommended browsers. + * NOTE: uses strict_mode==true so that any browser not listed in the minVersions + * always returns false + */ + +const recommendedBrowser = () => !bowser.isUnsupportedBrowser(minVersions, true); + +export { + supportedBrowser as default, + recommendedBrowser +};