From f12639987fc01ead2ec462a36061f465eed8e116 Mon Sep 17 00:00:00 2001
From: Sonny Bakker <sonny871@hotmail.com>
Date: Tue, 6 Oct 2020 22:34:24 +0200
Subject: [PATCH] Update messages styling

---
 src/newsreader/js/components/Messages.js      |  2 +-
 .../scss/components/messages/_messages.scss   | 31 ++++++++++++++++---
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/newsreader/js/components/Messages.js b/src/newsreader/js/components/Messages.js
index 843677c..150b003 100644
--- a/src/newsreader/js/components/Messages.js
+++ b/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>;
   }
 }
 
diff --git a/src/newsreader/scss/components/messages/_messages.scss b/src/newsreader/scss/components/messages/_messages.scss
index 74d88b5..b1ba9d0 100644
--- a/src/newsreader/scss/components/messages/_messages.scss
+++ b/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;
+  }
 }