Tweaking design of error and warning messages
This commit is contained in:
parent
521f7965b0
commit
8a18304225
@ -28,8 +28,9 @@ exports[`Message rendering with icon 1`] = `
|
|||||||
<div
|
<div
|
||||||
class="header"
|
class="header"
|
||||||
>
|
>
|
||||||
|
Sample icon SVG
|
||||||
<h2>
|
<h2>
|
||||||
Sample icon SVGTesting
|
Testing
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -49,8 +50,8 @@ exports[`Message rendering with type 1`] = `
|
|||||||
<div
|
<div
|
||||||
class="header"
|
class="header"
|
||||||
>
|
>
|
||||||
|
<svg />
|
||||||
<h2>
|
<h2>
|
||||||
<svg />
|
|
||||||
Testing
|
Testing
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
@ -25,7 +25,8 @@ const renderIcon = (type, icon) => {
|
|||||||
const Message = ({ type, icon, heading, children }) => (
|
const Message = ({ type, icon, heading, children }) => (
|
||||||
<div className={ [ style.message, type && style[type] ].filter(Boolean).join(' ') }>
|
<div className={ [ style.message, type && style[type] ].filter(Boolean).join(' ') }>
|
||||||
<div className={ style.header }>
|
<div className={ style.header }>
|
||||||
<h2>{ renderIcon(type, icon) }{ heading }</h2>
|
{ renderIcon(type, icon) }
|
||||||
|
<h2>{ heading }</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className={ style.content }>
|
<div className={ style.content }>
|
||||||
{ children }
|
{ children }
|
||||||
|
@ -6,16 +6,17 @@
|
|||||||
box-shadow: 0 0 1rem color(var(--color-black) alpha(0.7));
|
box-shadow: 0 0 1rem color(var(--color-black) alpha(0.7));
|
||||||
|
|
||||||
& .header {
|
& .header {
|
||||||
padding: var(--spacing-margin);
|
|
||||||
|
|
||||||
& h2 {
|
& h2 {
|
||||||
|
display: inline-block;
|
||||||
|
padding: var(--spacing-margin);
|
||||||
|
line-height: 2.8rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
& h2 svg {
|
& svg {
|
||||||
margin-right: 0.5rem;
|
padding: var(--spacing-margin);
|
||||||
height: 3rem;
|
height: 2.8rem;
|
||||||
width: 3rem;
|
width: 2.8rem;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -37,6 +38,11 @@
|
|||||||
& .header {
|
& .header {
|
||||||
background: var(--color-red);
|
background: var(--color-red);
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
|
|
||||||
|
& svg {
|
||||||
|
background: var(--color-white);
|
||||||
|
color: var(--color-red);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -44,5 +50,10 @@
|
|||||||
& .header {
|
& .header {
|
||||||
background: var(--color-orange);
|
background: var(--color-orange);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
& svg {
|
||||||
|
background: var(--color-black);
|
||||||
|
color: var(--color-orange);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user