Adding some styling to messages to spice up errors
This commit is contained in:
parent
63e56c5df7
commit
4923bbd985
@ -10,14 +10,19 @@ const renderIcon = icon => {
|
|||||||
return <Icon/>;
|
return <Icon/>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Message = ({ icon, heading, children }) => (
|
const Message = ({ className, icon, heading, children }) => (
|
||||||
<div className="message">
|
<div className={ ['message', className].filter(Boolean).join(' ') }>
|
||||||
<h2>{ renderIcon(icon) }{ heading }</h2>
|
<div className="header">
|
||||||
{ children }
|
<h2>{ renderIcon(icon) }{ heading }</h2>
|
||||||
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
{ children }
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
Message.propTypes = {
|
Message.propTypes = {
|
||||||
|
className: PropTypes.string,
|
||||||
icon: PropTypes.oneOfType([
|
icon: PropTypes.oneOfType([
|
||||||
PropTypes.element,
|
PropTypes.element,
|
||||||
PropTypes.func
|
PropTypes.func
|
||||||
|
@ -5,7 +5,7 @@ import Message from './Message';
|
|||||||
|
|
||||||
test('Message rendering', () => {
|
test('Message rendering', () => {
|
||||||
const component = shallow(
|
const component = shallow(
|
||||||
<Message heading="Testing">
|
<Message heading="Testing" className="testing">
|
||||||
<p>Message content</p>
|
<p>Message content</p>
|
||||||
</Message>
|
</Message>
|
||||||
);
|
);
|
||||||
|
@ -22,7 +22,7 @@ class RavenError extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
const { heading } = this.props;
|
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>
|
<p>This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.</p>
|
||||||
</Message>;
|
</Message>;
|
||||||
}
|
}
|
||||||
|
@ -2,14 +2,22 @@
|
|||||||
|
|
||||||
exports[`Message rendering 1`] = `
|
exports[`Message rendering 1`] = `
|
||||||
<div
|
<div
|
||||||
className="message"
|
className="message testing"
|
||||||
>
|
>
|
||||||
<h2>
|
<div
|
||||||
Testing
|
className="header"
|
||||||
</h2>
|
>
|
||||||
<p>
|
<h2>
|
||||||
Message content
|
Testing
|
||||||
</p>
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="content"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
Message content
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -17,11 +25,19 @@ exports[`Message rendering with icon 1`] = `
|
|||||||
<div
|
<div
|
||||||
class="message"
|
class="message"
|
||||||
>
|
>
|
||||||
<h2>
|
<div
|
||||||
Sample icon SVGTesting
|
class="header"
|
||||||
</h2>
|
>
|
||||||
<p>
|
<h2>
|
||||||
Message content
|
Sample icon SVGTesting
|
||||||
</p>
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="content"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
Message content
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
exports[`RavenError rendering 1`] = `
|
exports[`RavenError rendering 1`] = `
|
||||||
<Message
|
<Message
|
||||||
|
className="error"
|
||||||
heading="Test error"
|
heading="Test error"
|
||||||
icon={[Function]}
|
icon={[Function]}
|
||||||
>
|
>
|
||||||
|
@ -7,7 +7,7 @@ import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
|||||||
|
|
||||||
export default renderToString(
|
export default renderToString(
|
||||||
<PageTemplate>
|
<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>
|
<p>The page you have requested could not be found</p>
|
||||||
</Message>
|
</Message>
|
||||||
</PageTemplate>
|
</PageTemplate>
|
||||||
|
@ -8,7 +8,7 @@ import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
|||||||
export default renderToString(
|
export default renderToString(
|
||||||
<PageTemplate>
|
<PageTemplate>
|
||||||
<noscript>
|
<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>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>
|
<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>
|
<ul>
|
||||||
|
@ -126,21 +126,40 @@ a {
|
|||||||
|
|
||||||
.message {
|
.message {
|
||||||
background: var(--color-tan);
|
background: var(--color-tan);
|
||||||
padding: var(--spacing-margin);
|
|
||||||
margin: var(--spacing-margin) 0;
|
margin: var(--spacing-margin) 0;
|
||||||
|
|
||||||
& h2 {
|
& .header {
|
||||||
margin: var(--spacing-margin) 0;
|
padding: var(--spacing-margin);
|
||||||
|
|
||||||
|
& h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& h2 svg {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
height: 3rem;
|
||||||
|
width: 3rem;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& h2 svg {
|
& .content {
|
||||||
margin-right: 0.5rem;
|
padding: var(--spacing-margin);
|
||||||
height: 3rem;
|
|
||||||
width: 3rem;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
& 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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user