core: improve alert and info boxes

Signed-off-by: Skia <skia@libskia.so>

com/tests.py

@@ -47,7 +47,7 @@ class ComTest(TestCase):
 """})
         r = self.client.get(reverse("core:index"))
         self.assertTrue(r.status_code == 200)
-        self.assertTrue("""<div id="alert_box">\\n            <div class="markdown"><h3>ALERTE!</h3>\\n<p><strong>Caaaataaaapuuuulte!!!!</strong></p>""" in str(r.content))
+        self.assertTrue("""<div id="alert_box">\\n                <div class="markdown"><h3>ALERTE!</h3>\\n<p><strong>Caaaataaaapuuuulte!!!!</strong></p>""" in str(r.content))
 
     def test_info_msg(self):
         response = self.client.post(reverse("com:info_edit"), {"info_msg": """
@@ -55,4 +55,4 @@ class ComTest(TestCase):
 """})
         r = self.client.get(reverse("core:index"))
         self.assertTrue(r.status_code == 200)
-        self.assertTrue("""<div id="info_box">\\n            <div class="markdown"><h3>INFO: <strong>Caaaataaaapuuuulte!!!!</strong></h3>""" in str(r.content))
+        self.assertTrue("""<div id="info_box">\\n                <div class="markdown"><h3>INFO: <strong>Caaaataaaapuuuulte!!!!</strong></h3>""" in str(r.content))

core/static/core/style.scss

@@ -171,7 +171,7 @@ header {
 #info_boxes {
   display: flex;
   width: 90%;
-  margin: 0 auto;
+  margin: 1em auto;
   p {
     margin: 0px;
     padding: 0px;
@@ -180,20 +180,30 @@ header {
     font-size: smaller;
     display: inline-block;
     flex: auto;
-    vertical-align: top;
     padding: 2px;
     margin: 0.2em 1.5%;
     min-width: 10%;
     max-width: 46%;
     min-height: 20px;
+    &:before {
+      float: left;
+      margin: 0.2em;
+      margin-right: 0.5em;
+    }
   }
   #info_box {
     border: solid 1px $primary-neutral-light-color;
     background: $white-color;
+    &:before {
+      content: url('img/info.png');
+    }
   }
   #alert_box {
     border: solid 1px grey;
     background: gold;
+    &:before {
+      content: url('img/warning.png');
+    }
   }
 }
 
@@ -203,7 +213,7 @@ header {
 nav {
   display: block;
   width: 90%;
-  margin: 0px auto;
+  margin: 1em auto 0em auto;
   background: $primary-color;
   color: $white-color;
   a {