updated notifications

Author: Yeliazar

src/pages/Ui/Notifications/Notifications.vue

@@ -39,9 +39,9 @@
           <h5 class="m-t-1">Notification Types</h5>
           <p>Different types of notifications for lots of use cases. Custom classes are also
             supported.</p>
-          <p><b-button variant="info" id="show-info-message" @click="addInfoNotification">Info
+          <p><b-button variant="info" class="text-white" id="show-info-message" @click="addInfoNotification">Info
             Message</b-button></p>
-          <p><b-button variant="danger" id="show-error-message" @click="addErrorNotification">Error
+          <p><b-button variant="danger" class="text-white" id="show-error-message" @click="addErrorNotification">Error
             Message</b-button></p>
           <p><b-button
             variant="success" id="show-success-message" @click="addSuccessNotification"

src/styles/_overrides.scss

@@ -164,10 +164,12 @@ small {
 
 .btn-secondary {
   border-color: $gray-400;
-  color: $gray-800;
+  color: $gray-100;
 }
 
 .btn-success,
+.btn-default,
+.btn-gray,
 .btn-info,
 .btn-warning {
   color: $white;

src/styles/_variables.scss

@@ -50,6 +50,7 @@ $yellow:  #EBB834 !default;
 $green:   #68ca66 !default;
 $teal:    #26CD5F !default;
 $cyan:    #17a2b8 !default;
+$turquoise: #10CFD0 !default;
 $default: #E9ECEF !default;
 $inverse: #002B49 !default;
 $gray-inverse: #30324C !default;
@@ -59,7 +60,7 @@ $theme-colors: (
   primary: $blue,
   secondary: $gray-600,
   success: $teal,
-  info: $purple,
+  info: $turquoise,
   warning: $yellow,
   danger: $red,
   dark: $gray-800,