Update messages styling

src/newsreader/js/components/Messages.js

@@ -22,7 +22,7 @@ class Messages extends React.Component {
       );
     });
 
-    return <ul className="list messages">{messages}</ul>;
+    return <ul className="list messages messages--fixed">{messages}</ul>;
   }
 }
 

src/newsreader/scss/components/messages/_messages.scss

@@ -3,12 +3,10 @@
   flex-direction: column;
   align-items: center;
 
-  position: fixed;
-  top: 0;
   width: 100%;
   margin: 5px 0 20px 0;
 
-  color: $white;
+  color: $font-color;
 
   &__item {
     width: 80%;
@@ -17,7 +15,7 @@
     padding: 20px 15px;
     margin: 5px 0;
 
-    background-color: $blue;
+    background-color: $transparant-blue;
 
     &--error {
       background-color: $transparant-red;
@@ -27,7 +25,6 @@
       background-color: $transparant-orange;
     }
 
-    // TODO check this color
     &--success {
       background-color: $transparant-green;
     }
@@ -39,4 +36,28 @@
       --ggs: 2;
     }
   }
+
+  &--fixed {
+    position: fixed;
+    top: 0;
+  }
+
+  &--fixed &__item {
+    color: $white;
+    background-color: $blue;
+  }
+
+  &--fixed &__item--error {
+    color: $white;
+    background-color: $red;
+  }
+
+  &--fixed &__item--warning {
+    background-color: $orange;
+  }
+
+  &--fixed &__item--success {
+    color: $white;
+    background-color: $green;
+  }
 }