refactor out of cards

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

@@ -1,30 +1,37 @@
+import { Button } from '@alifd/next'
 import * as React from 'react'
-import { Button, Card } from '@alifd/next'
 import CR from 'typings'
 
 import Markdown from '../Markdown'
 import Step from '../Step'
 
 const styles = {
   card: {
-    // width: '20rem',
+    padding: 0,
   },
+  content: {
+    padding: '0rem 1rem',
+  },
+  title: {},
 }
 
 interface Props {
   stage: CR.TutorialStage
   steps: {
     [stepId: string]: any // CC.Step
   }
-  onNextStage(): void
   complete: boolean
+  onNextStage(): void
 }
 
 const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
   const { title, text } = stage.content
   return (
-    <Card style={styles.card} title={title} showTitleBullet={false} contentHeight="auto">
-      <Markdown>{text}</Markdown>
+    <div style={styles.card}>
+      <div style={styles.content}>
+        <h2 style={styles.title}>{title}</h2>
+        <Markdown>{text}</Markdown>
+      </div>
       <div>
         {stage.stepList.map((stepId: string) => {
           const step = steps[stepId]
@@ -36,7 +43,7 @@ const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
           <Button onClick={onNextStage}>Continue</Button>
         </div>
       )}
-    </Card>
+    </div>
   )
 }
 

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

@@ -14,7 +14,7 @@ const styles = {
     gridTemplateAreas: 'CheckboxMargin Content',
     gridTemplateColumns: '2rem 1fr',
     gridTemplateRows: '1fr',
-    margin: '1rem',
+    padding: '1rem',
   },
   left: {
     justifySelf: 'center',

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

@@ -1,11 +1,18 @@
-import * as React from 'react'
 import { Button, Card } from '@alifd/next'
+import * as React from 'react'
 import CR from 'typings'
 
 const styles = {
   card: {
     // width: '20rem',
   },
+  content: {
+    padding: '0rem 1rem',
+  },
+  options: {
+    padding: '1rem',
+  },
+  title: {},
 }
 
 interface Props {
@@ -16,10 +23,15 @@ interface Props {
 const Summary = ({ data, onNext }: Props) => {
   const { summary } = data
   return (
-    <Card style={styles.card} title={summary.title} showTitleBullet={false} contentHeight="auto">
-      <p>{summary.description}</p>
-      <Button onClick={() => onNext()}>Continue</Button>
-    </Card>
+    <div style={styles.card}>
+      <div style={styles.content}>
+        <h2 style={styles.title}>{summary.title}</h2>
+        <p>{summary.description}</p>
+      </div>
+      <div style={styles.options}>
+        <Button onClick={() => onNext()}>Continue</Button>
+      </div>
+    </div>
   )
 }