Adding support for "info"-type Messages

src/components/Message/index.js

@@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
 
 import style from './style.css';
 
+import InfoIcon from 'feather-icons/dist/icons/info.svg';
 import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
 import WarningIcon from 'feather-icons/dist/icons/alert-triangle.svg';
 
 const iconTypes = {
+  info: InfoIcon,
   error: ErrorIcon,
   warning: WarningIcon
 };
@@ -36,6 +38,7 @@ const Message = ({ type, icon, heading, children }) => (
 
 Message.propTypes = {
   type: PropTypes.oneOf([
+    'info',
     'error',
     'warning'
   ]),

src/components/Message/style.css

@@ -57,4 +57,16 @@
       color: var(--color-orange);
     }
   }
+
+  &.info {
+    & .header {
+      background: var(--color-blue);
+      color: var(--color-white);
+    }
+
+    & svg {
+      background: var(--color-white);
+      color: var(--color-blue);
+    }
+  }
 }

src/globals.css

@@ -6,6 +6,7 @@
   --color-white: #fff;
   --color-red: #b3151a;
   --color-orange: #fa0;
+  --color-blue: #025d8c;
 
   --gradient-green: linear-gradient(to bottom,
     var(--color-green) 0%,