[add] new visual for message bar

Author: brassy-

contents/components/message-bars.html

@@ -109,8 +109,8 @@ <h3>
         Unless they contain critical information, message bars should be dismissible by clicking or tapping the ghost button, placed always on the right corner.
       </p>
     </div>
-    <div class="fl-ns w-50-ns ph2"> 
-      <img class="w-100-ns" src="../images/message-bars/ghost-btn.svg" alt="pairing example">
+    <div class="fl-ns w-50-ns ph2">
+      <img class="w-100-ns" src="../images/message-bars/action-1.svg" alt="Dismissable behavior">
     </div>
   </div> 
   <h3>
@@ -124,7 +124,7 @@ <h3>
     </div>
 
     <div class="fl-ns w-50-ns ph2">
-      <img class="w-100-ns" src="../images/message-bars/action-1.svg" alt="pairing example">
+      <img class="w-100-ns" src="../images/message-bars/mb-action-example.jpg" alt="message bar in action">
     </div>
   </div>
   <% include ../includes/components/message-bars/behavior-tabs-structure.html %> 

contents/includes/components/message-bars/message-bar-error.html

@@ -25,7 +25,7 @@ <h5>BUTTONS</h5>
       <p>Pressed: Red-80 <code>#5a0002</code></p>
     </div>
     <div class="fl-ns w-50-ns ph2"> 
-       <img class="w-100-ns" src="../images/message-bars/btn-error.svg" alt="pairing example">
+       <img class="w-100-ns" src="../images/message-bars/c-err.svg" alt="pairing example">
     </div>
   </div>
 

contents/includes/components/message-bars/message-bar-generic.html

@@ -25,7 +25,7 @@ <h5>BUTTONS</h5>
       <p>Pressed: Blue-80 <code>#003eaa</code></p>
     </div>
     <div class="fl-ns w-50-ns ph2"> 
-       <img class="w-100-ns" src="../images/message-bars/btn-generic.svg" alt="pairing example">
+       <img class="w-100-ns" src="../images/message-bars/c-gen.svg" alt="pairing example">
     </div>
   </div>
 

contents/includes/components/message-bars/message-bar-success.html

@@ -25,7 +25,7 @@ <h5>BUTTONS</h5>
       <p>Pressed: Green-80 <code>#006504</code></p>
     </div>
     <div class="fl-ns w-50-ns ph2">
-       <img class="w-100-ns" src="../images/message-bars/btn-success.svg" alt="pairing example">
+       <img class="w-100-ns" src="../images/message-bars/c-succ.svg" alt="pairing example">
     </div>
   </div>
 
@@ -63,6 +63,6 @@ <h3>
       </p>
     </div>
     <div class="fl-ns w-50-ns ph2"> 
-      <img class="w-100-ns" src="../images/message-bars/t-suc.svg" alt="pairing example">
+      <img class="w-100-ns" src="../images/message-bars/t-succ.svg" alt="pairing example">
     </div>
   </div>

contents/includes/components/message-bars/message-bar-warning.html

@@ -25,7 +25,7 @@ <h5>BUTTONS</h5>
       <p>Pressed: Yellow-80 <code>#715100</code></p>
     </div>
     <div class="fl-ns w-50-ns ph2">
-       <img class="w-100-ns" src="../images/message-bars/btn-warning.svg" alt="pairing example">
+       <img class="w-100-ns" src="../images/message-bars/c-warn.svg" alt="pairing example">
     </div>
   </div>
 

contents/includes/patterns/errors/system-errors.html

@@ -19,9 +19,9 @@
   </div>
   <div class="fl-ns w-50-ns ph2">
     <figure>
-      <img class="w-100-ns outline outline--black-01 outline-offset--1" src="../images/patterns/errors/system-error-example.png" alt="System Error Example">
+      <img class="w-100-ns outline outline--black-01 outline-offset--1" src="../images/patterns/errors/error-tab-crashed.jpg" alt="System Error Example">
       <figcaption>
-        Firefox inability to connect to a website it's an example of a system error.
+        Tab crash.
       </figcaption>
     </figure>
   </div>