diff options
-rw-r--r-- | webapp/components/error_bar.jsx | 8 | ||||
-rw-r--r-- | webapp/root.jsx | 2 | ||||
-rw-r--r-- | webapp/sass/components/_error-bar.scss | 30 |
3 files changed, 38 insertions, 2 deletions
diff --git a/webapp/components/error_bar.jsx b/webapp/components/error_bar.jsx index 7257ffe94..d28be671d 100644 --- a/webapp/components/error_bar.jsx +++ b/webapp/components/error_bar.jsx @@ -67,8 +67,14 @@ export default class ErrorBar extends React.Component { return <div/>; } + var errClass = 'error-bar'; + + if (this.state.type && this.state.type === 'developer') { + errClass = 'error-bar-developer'; + } + return ( - <div className='error-bar'> + <div className={errClass}> <span>{this.state.message}</span> <a href='#' diff --git a/webapp/root.jsx b/webapp/root.jsx index b0625438f..d6028e8a7 100644 --- a/webapp/root.jsx +++ b/webapp/root.jsx @@ -88,7 +88,7 @@ function preRenderSetup(callwhendone) { }); if (window.mm_config && window.mm_config.EnableDeveloper === 'true') { - window.ErrorStore.storeLastError({message: 'DEVELOPER MODE: A javascript error has occured. Please use the javascript console to capture and report the error (row: ' + line + ' col: ' + column + ').'}); + window.ErrorStore.storeLastError({type: 'developer', message: 'DEVELOPER MODE: A javascript error has occured. Please use the javascript console to capture and report the error (row: ' + line + ' col: ' + column + ').'}); window.ErrorStore.emitChange(); } }; diff --git a/webapp/sass/components/_error-bar.scss b/webapp/sass/components/_error-bar.scss index cf940b59a..2791337c4 100644 --- a/webapp/sass/components/_error-bar.scss +++ b/webapp/sass/components/_error-bar.scss @@ -29,3 +29,33 @@ } } } + +.error-bar-developer { + background-color: #B0171F; + color: white; + padding: 5px 30px; + position: absolute; + text-align: center; + top: 0; + width: 100%; + z-index: 9999; + + a { + &.error-bar__close { + color: $white; + font-family: 'Open Sans', sans-serif; + font-size: 20px; + font-weight: 600; + padding: 0 10px; + position: absolute; + right: 0; + text-decoration: none; + top: 0; + + &:hover { + color: $white; + text-decoration: none; + } + } + } +} |