changed loading toast to gray

Author: emilybrick

pages/css/components/toasts.md

@@ -144,9 +144,9 @@ Add the `Toast--spinner` modifier class on the `Toast-icon` `svg` to communicate
 <div class="p-1">
   <div class="Toast Toast--loading">
     <span class="Toast-icon">
-      <svg class="Toast--spinner" viewBox="0 0 32 32" width="18" height="18" fill="#24292E">
-        <path opacity=".2" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
-        <path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"></path>
+      <svg class="Toast--spinner" viewBox="0 0 32 32" width="18" height="18">
+        <path fill="#6a737d" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
+        <path fill="#ffffff" d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"></path>
       </svg>
     </span>
     <span class="Toast-content">Toast message goes here.</span>

src/toasts/toasts.scss

@@ -54,17 +54,19 @@
   background-color: $red-500;
 }
 
-.Toast--warning, .Toast--loading {
-  .Toast-icon {
+.Toast--warning .Toast-icon {
     color: $gray-900;
     background-color: $yellow-600;
-  }
 }
 
 .Toast--success .Toast-icon {
   background-color: $green-500;
 }
 
+.Toast--loading .Toast-icon {
+  background-color: $gray-700;
+}
+
 // Animations
 
 .Toast--animateIn {
@@ -98,6 +100,3 @@
   from { transform:rotate(0deg); }
   to { transform:rotate(360deg); }
 }
-
-
-