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`] = `
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);
+ }
}
}