change Process ui

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/src/components/Message/index.tsx

@@ -1,4 +1,4 @@
-import Message from '../Message'
+import { Message } from '@alifd/next'
 import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
@@ -22,7 +22,9 @@ const ProcessMessages = ({ processes }: Props) => {
   return (
     <div css={styles.container}>
       {processes.map((process) => (
-        <Message key={process.title} type="loading" size="medium" title={process.title} content={process.description} />
+        <Message key={process.title} type="notice" iconType="loading" size="medium" title={process.title}>
+          {process.description}
+        </Message>
       ))}
     </div>
   )

web-app/src/components/ProcessMessages/index.tsx

@@ -180,3 +180,12 @@ storiesOf('Tutorial', module)
     }
     return <Tutorial state="Completed" context={lastLevel} send={action('send')} />
   })
+  .add('1.1 Loading', () => {
+    const firstLevel = {
+      ...context,
+      processes: [{ title: 'Process', description: 'A process here', status: 'RUNNING' }],
+      position: { levelId: '1', stepId: '1.2' },
+      progress: { levels: {}, steps: {}, complete: false },
+    }
+    return <Tutorial state="Level.Normal" context={firstLevel} send={action('send')} />
+  })