example: AsyncRendererExample: improve styles of rendered results

Author: lemke-ethan

example/src/AsyncRendererExample.css

@@ -2,12 +2,21 @@
  *  Copyright 2022 MFB Technologies, Inc.
  */
 
-.success {
-  color: green
+.renderer-result {
+  display: inline-block;
+  padding: 2px 5px;
+}
+.info {  
+  color: white;
+  background-color: blue;
 }
-.info {
-  color: blue;
+.loading {
+  background-color: yellow;
+}
+.success {
+  color: white;
+  background-color: green
 }
 .error {
-  color: red;
+  background-color: red;
 }

example/src/AsyncRendererExample.tsx

@@ -37,13 +37,13 @@ export function AsyncRendererExample() {
       <div>
         {renderer((args) => {
           return (
-            <p className='success'>{args.data}</p>
+            <p className='renderer-result success'>{args.data}</p>
           )
         },
           {
-            onInit: () => (<p className='info'>Waiting for long running process to start...</p>),
-            onLoading: () => (<p className='info'>custom spinner...</p>),
-            onCompletedWithError: (props) => (<p className='error'>{props.errorMessage ?? "error"}</p>)
+            onInit: () => (<p className='renderer-result info'>Waiting for long running process to start...</p>),
+            onLoading: () => (<p className='renderer-result loading'>custom spinner...</p>),
+            onCompletedWithError: (props) => (<p className='renderer-result error'>{props.errorMessage ?? "error"}</p>)
           })}
       </div>
     </div>