use LbcMessage on snackbars

ui/component/common/lbc-message.jsx

@@ -10,7 +10,7 @@ type Props = {
 export default function LbcMessage(props: Props) {
   let amount;
   const tokenizedMessage = props.children.replace(
-    /(\d?\.?-?\d?\.?-?\d+?)\s(LBC)/g,
+    /(\d?\.?-?\d?\.?-?\d+?)\s(LBC|LBRY Credits?)/g,
     (originalString, lbcAmount, thirdArg) => {
       amount = lbcAmount;
       return `%lbc%`;

ui/component/snackBar/view.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import Button from 'component/button';
 import classnames from 'classnames';
 import Icon from 'component/common/icon';
+import LbcMessage from 'component/common/lbc-message';
 
 type Props = {
   removeSnack: any => void,
@@ -52,7 +53,9 @@ class SnackBar extends React.PureComponent<Props> {
         <div className="snack-bar__message">
           <Icon icon={isError ? ICONS.ALERT : ICONS.COMPLETED} size={18} />
 
-          <div>{message}</div>
+          <div>
+            <LbcMessage>{message}</LbcMessage>
+          </div>
         </div>
         {linkText && linkTarget && (
           // This is a little weird because of `linkTarget` code in `lbry-redux`

ui/scss/component/_snack-bar.scss

@@ -52,7 +52,12 @@
   flex-direction: row;
   font-size: var(--font-body);
 
-  .icon {
+  .credit-amount {
+    color: inherit;
+  }
+
+  .icon--CheckCircle,
+  .icon--AlertCircle {
     margin-right: var(--spacing-m);
     min-width: 1rem;
   }