adjust message styling

Author: dom-the-dev

package.json

@@ -30,5 +30,17 @@
   },
   "eslintConfig": {
     "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/components/Layout.js

@@ -15,11 +15,13 @@ const Layout = props => {
                 <div className="row justify-content-md-center">
                     <div className="col-12 col-md-8">
 
+
+                        <Header userLogout={props.userLogout} userName={props.user.name} setShowImprint={props.setShowImprint}/>
+
                         {props.message ?
                             <Message message={props.message.message} type={props.message.type}/>
                             : null}
 
-                        <Header userLogout={props.userLogout} userName={props.user.name} setShowImprint={props.setShowImprint}/>
 
                         {props.children}
                     </div>

src/components/Message.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import "./Message.scss"
 
 const Message = props => {
     return (

src/components/Message.scss

@@ -0,0 +1,9 @@
+@import '../styles/text.scss';
+@import '../styles/buttons.scss';
+
+.stm-message  {
+  text-align: center;
+  background: #1DB954;
+  color: white;
+  padding: 5px;
+}