diff --git a/src/components/Message/__snapshots__/test.js.snap b/src/components/Message/__snapshots__/test.js.snap index 1c156eb..b3fba55 100644 --- a/src/components/Message/__snapshots__/test.js.snap +++ b/src/components/Message/__snapshots__/test.js.snap @@ -28,8 +28,9 @@ exports[`Message rendering with icon 1`] = `
+ Sample icon SVG

- Sample icon SVGTesting + Testing

+

- Testing

diff --git a/src/components/Message/index.js b/src/components/Message/index.js index e898c36..b6ae16a 100644 --- a/src/components/Message/index.js +++ b/src/components/Message/index.js @@ -25,7 +25,8 @@ const renderIcon = (type, icon) => { const Message = ({ type, icon, heading, children }) => (
-

{ renderIcon(type, icon) }{ heading }

+ { renderIcon(type, icon) } +

{ heading }

{ children } diff --git a/src/components/Message/style.css b/src/components/Message/style.css index 7fe8d4f..0279daa 100644 --- a/src/components/Message/style.css +++ b/src/components/Message/style.css @@ -6,16 +6,17 @@ box-shadow: 0 0 1rem color(var(--color-black) alpha(0.7)); & .header { - padding: var(--spacing-margin); - & h2 { + display: inline-block; + padding: var(--spacing-margin); + line-height: 2.8rem; margin: 0; } - & h2 svg { - margin-right: 0.5rem; - height: 3rem; - width: 3rem; + & svg { + padding: var(--spacing-margin); + height: 2.8rem; + width: 2.8rem; vertical-align: bottom; } } @@ -37,6 +38,11 @@ & .header { background: var(--color-red); color: var(--color-white); + + & svg { + background: var(--color-white); + color: var(--color-red); + } } } @@ -44,5 +50,10 @@ & .header { background: var(--color-orange); } + + & svg { + background: var(--color-black); + color: var(--color-orange); + } } }