Adding some styling to messages to spice up errors

This commit is contained in:
Jeff Avallone 2018-02-11 15:27:01 -05:00
parent 63e56c5df7
commit 4923bbd985
8 changed files with 71 additions and 30 deletions

View File

@ -10,14 +10,19 @@ const renderIcon = icon => {
return <Icon/>;
};
const Message = ({ icon, heading, children }) => (
<div className="message">
<h2>{ renderIcon(icon) }{ heading }</h2>
{ children }
const Message = ({ className, icon, heading, children }) => (
<div className={ ['message', className].filter(Boolean).join(' ') }>
<div className="header">
<h2>{ renderIcon(icon) }{ heading }</h2>
</div>
<div className="content">
{ children }
</div>
</div>
);
Message.propTypes = {
className: PropTypes.string,
icon: PropTypes.oneOfType([
PropTypes.element,
PropTypes.func

View File

@ -5,7 +5,7 @@ import Message from './Message';
test('Message rendering', () => {
const component = shallow(
<Message heading="Testing">
<Message heading="Testing" className="testing">
<p>Message content</p>
</Message>
);

View File

@ -22,7 +22,7 @@ class RavenError extends React.Component {
render() {
const { heading } = this.props;
return <Message icon={ AlertIcon } heading={ heading }>
return <Message className="error" icon={ AlertIcon } heading={ heading }>
<p>This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.</p>
</Message>;
}

View File

@ -2,14 +2,22 @@
exports[`Message rendering 1`] = `
<div
className="message"
className="message testing"
>
<h2>
Testing
</h2>
<p>
Message content
</p>
<div
className="header"
>
<h2>
Testing
</h2>
</div>
<div
className="content"
>
<p>
Message content
</p>
</div>
</div>
`;
@ -17,11 +25,19 @@ exports[`Message rendering with icon 1`] = `
<div
class="message"
>
<h2>
Sample icon SVGTesting
</h2>
<p>
Message content
</p>
<div
class="header"
>
<h2>
Sample icon SVGTesting
</h2>
</div>
<div
class="content"
>
<p>
Message content
</p>
</div>
</div>
`;

View File

@ -2,6 +2,7 @@
exports[`RavenError rendering 1`] = `
<Message
className="error"
heading="Test error"
icon={[Function]}
>

View File

@ -7,7 +7,7 @@ import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
export default renderToString(
<PageTemplate>
<Message icon={ AlertIcon } heading="404 Page Not Found">
<Message className="error" icon={ AlertIcon } heading="404 Page Not Found">
<p>The page you have requested could not be found</p>
</Message>
</PageTemplate>

View File

@ -8,7 +8,7 @@ import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
export default renderToString(
<PageTemplate>
<noscript>
<Message icon={ AlertIcon } heading="JavaScript Required">
<Message className="error" icon={ AlertIcon } heading="JavaScript Required">
<p>You need to enable JavaScript to use Regexper.</p>
<p>Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source by following the GitHub link in the header. There are two data collection tools integrated in the app:</p>
<ul>

View File

@ -126,21 +126,40 @@ a {
.message {
background: var(--color-tan);
padding: var(--spacing-margin);
margin: var(--spacing-margin) 0;
& h2 {
margin: var(--spacing-margin) 0;
& .header {
padding: var(--spacing-margin);
& h2 {
margin: 0;
}
& h2 svg {
margin-right: 0.5rem;
height: 3rem;
width: 3rem;
vertical-align: bottom;
}
}
& h2 svg {
margin-right: 0.5rem;
height: 3rem;
width: 3rem;
vertical-align: bottom;
& .content {
padding: var(--spacing-margin);
}
& p {
margin: var(--spacing-margin) 0;
margin-top: 0;
margin-bottom: var(--spacing-margin) 0;
}
& p:last-child {
margin-bottom: 0;
}
&.error {
& .header {
background: var(--color-red);
color: var(--color-white);
}
}
}