From bc3df24173aa2c2fe415e7c47924fc3390d91d3b Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 14 Jul 2019 14:33:29 -0700
Subject: [PATCH 1/3] adjust card styles

---
 web-app/src/components/Step/index.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/web-app/src/components/Step/index.tsx b/web-app/src/components/Step/index.tsx
index b594ca13..37e2a85e 100644
--- a/web-app/src/components/Step/index.tsx
+++ b/web-app/src/components/Step/index.tsx
@@ -5,19 +5,24 @@ import CR from 'typings'
 import Markdown from '../Markdown'
 
 const styles = {
+  active: {
+    backgroundColor: '#e6f7ff',
+  },
   card: {
-    display: 'flex',
-    flexDirection: 'row' as 'row',
+    borderRadius: '0.3rem',
+    display: 'grid',
+    gridTemplateAreas: 'CheckboxMargin Content',
+    gridTemplateColumns: '2rem 1fr',
+    gridTemplateRows: '1fr',
     margin: '1rem',
   },
   left: {
-    width: '2rem',
+    justifySelf: 'center',
+    paddingTop: '0.8rem',
   },
   right: {
-    flex: 1,
-  },
-  active: {
-    backgroundColor: 'yellow',
+    padding: '0.2rem',
+    paddingTop: 0,
   },
 }
 

From c3cf2a6cf4022b6d4998df1d1d3b25baa7ccbb83 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 14 Jul 2019 14:49:20 -0700
Subject: [PATCH 2/3] refactor out of cards

---
 web-app/src/components/Stage/index.tsx   | 19 +++++++++++++------
 web-app/src/components/Step/index.tsx    |  2 +-
 web-app/src/components/Summary/index.tsx | 22 +++++++++++++++++-----
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/web-app/src/components/Stage/index.tsx b/web-app/src/components/Stage/index.tsx
index c58bb9ce..e11a1a62 100644
--- a/web-app/src/components/Stage/index.tsx
+++ b/web-app/src/components/Stage/index.tsx
@@ -1,5 +1,5 @@
+import { Button } from '@alifd/next'
 import * as React from 'react'
-import { Button, Card } from '@alifd/next'
 import CR from 'typings'
 
 import Markdown from '../Markdown'
@@ -7,8 +7,12 @@ import Step from '../Step'
 
 const styles = {
   card: {
-    // width: '20rem',
+    padding: 0,
   },
+  content: {
+    padding: '0rem 1rem',
+  },
+  title: {},
 }
 
 interface Props {
@@ -16,15 +20,18 @@ interface Props {
   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>
   )
 }
 
diff --git a/web-app/src/components/Step/index.tsx b/web-app/src/components/Step/index.tsx
index 37e2a85e..5b49445e 100644
--- a/web-app/src/components/Step/index.tsx
+++ b/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',
diff --git a/web-app/src/components/Summary/index.tsx b/web-app/src/components/Summary/index.tsx
index 8f5e415f..2aa4700d 100644
--- a/web-app/src/components/Summary/index.tsx
+++ b/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>
   )
 }
 

From 8d57540c08cff7023f777303dc9c6cd79a985be2 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 14 Jul 2019 15:48:53 -0700
Subject: [PATCH 3/3] clean up styles

---
 web-app/src/App.tsx                           |  4 +-
 web-app/src/components/Divider.tsx            | 12 +++++
 .../components/Level/LevelStageSummary.tsx    | 51 +++++++++++++++++++
 web-app/src/components/Level/index.tsx        | 48 +++++++++--------
 web-app/src/components/Stage/index.tsx        |  9 +++-
 web-app/src/components/Summary/index.tsx      |  2 +-
 web-app/stories/Level.stories.tsx             | 30 ++++++++---
 web-app/stories/Summary.stories.tsx           | 10 ++--
 8 files changed, 129 insertions(+), 37 deletions(-)
 create mode 100644 web-app/src/components/Divider.tsx
 create mode 100644 web-app/src/components/Level/LevelStageSummary.tsx

diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx
index ce9e2c4d..2eae39bd 100644
--- a/web-app/src/App.tsx
+++ b/web-app/src/App.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import * as CR from 'typings'
 
-import Debugger from './components/Debugger'
+// import Debugger from './components/Debugger'
 import Routes from './Routes'
+import DataContext, { initialData, initialState } from './utils/DataContext'
 import { send } from './utils/vscode'
-import DataContext, { initialState, initialData } from './utils/DataContext'
 
 interface ReceivedEvent {
   data: CR.Action
diff --git a/web-app/src/components/Divider.tsx b/web-app/src/components/Divider.tsx
new file mode 100644
index 00000000..a46b558d
--- /dev/null
+++ b/web-app/src/components/Divider.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+const styles = {
+  divider: {
+    backgroundColor: '#e8e8e8',
+    height: '0.1rem',
+  },
+}
+
+const Divider = () => <div style={styles.divider} />
+
+export default Divider
diff --git a/web-app/src/components/Level/LevelStageSummary.tsx b/web-app/src/components/Level/LevelStageSummary.tsx
new file mode 100644
index 00000000..0d36180a
--- /dev/null
+++ b/web-app/src/components/Level/LevelStageSummary.tsx
@@ -0,0 +1,51 @@
+import { Button } from '@alifd/next'
+import * as React from 'react'
+import CC from '../../../../typings/context'
+
+import Markdown from '../Markdown'
+
+const styles = {
+  active: {
+    backgroundColor: '#e6f7ff',
+  },
+  card: {
+    padding: '0.5rem 1rem',
+  },
+  completed: {
+    backgroundColor: '#f6ffed',
+  },
+  disabled: {
+    // backgroundColor: 'blue',
+  },
+  options: {},
+  title: {
+    margin: 0,
+  },
+}
+
+interface Props {
+  stage: CC.StageWithStatus
+  onNext(): void
+}
+
+const LevelStageSummary = (props: Props) => {
+  const { stage, onNext } = props
+  const { complete, active } = stage.status
+  const cardStyle = {
+    ...styles.card,
+    ...(active ? styles.active : styles.disabled),
+    ...(complete ? styles.completed : {}),
+  }
+  return (
+    <div style={cardStyle}>
+      <h3 style={styles.title}>{stage.content.title}</h3>
+      <Markdown>{stage.content.text}</Markdown>
+      <div style={styles.options}>
+        {active && <Button onClick={onNext}>Continue</Button>}
+        {complete && <div>Complete</div>}
+      </div>
+    </div>
+  )
+}
+
+export default LevelStageSummary
diff --git a/web-app/src/components/Level/index.tsx b/web-app/src/components/Level/index.tsx
index f37d26b2..4596e634 100644
--- a/web-app/src/components/Level/index.tsx
+++ b/web-app/src/components/Level/index.tsx
@@ -1,48 +1,54 @@
+import { Button } from '@alifd/next'
 import * as React from 'react'
-import { Button, Card } from '@alifd/next'
 import CR from 'typings'
 
+import Divider from '../Divider'
 import Markdown from '../Markdown'
+import LevelStageSummary from './LevelStageSummary'
 
 const styles = {
-  card: {
-    // width: '20rem',
+  card: {},
+  content: {
+    padding: '0rem 1rem',
+    paddingBottom: '1rem',
   },
-  disabled: {
-    backgroundColor: 'grey',
+  list: {
+    padding: '0rem',
   },
+  options: {
+    padding: '0rem 1rem',
+  },
+  title: {},
 }
 
 interface Props {
   level: CR.TutorialLevel
-  onNext(): void
-  onBack(): void
   stages: {
     [stageId: string]: any // CC.StageWithStatus
   }
+  onNext(): void
+  onBack(): void
 }
 
 const Level = ({ level, stages, onNext, onBack }: Props) => {
   const { title, text } = level.content
   return (
-    <Card style={styles.card} title={title} showTitleBullet={false} contentHeight="auto">
-      <Markdown>{text}</Markdown>
-      <div>
+    <div style={styles.card}>
+      <div style={styles.content}>
+        <h2 style={styles.title}>{title}</h2>
+        <Markdown>{text}</Markdown>
+      </div>
+      <Divider />
+      <div style={styles.list}>
         {level.stageList.map((stageId: string) => {
           const stage = stages[stageId]
-          const unavailable = !stage.status.complete && !stage.status.active
-          return (
-            <div key={stageId} style={unavailable ? styles.disabled : {}}>
-              <h3>{stage.content.title}</h3>
-              <p>{stage.content.text}</p>
-              {stage.status.active && <Button onClick={onNext}>Continue</Button>}
-              {stage.status.complete && <div>Complete</div>}
-            </div>
-          )
+          return <LevelStageSummary key={stageId} stage={stage} onNext={onNext} />
         })}
       </div>
-      <Button onClick={onBack}>Back</Button>
-    </Card>
+      <div style={styles.options}>
+        <Button onClick={onBack}>Back</Button>
+      </div>
+    </div>
   )
 }
 
diff --git a/web-app/src/components/Stage/index.tsx b/web-app/src/components/Stage/index.tsx
index e11a1a62..44254be5 100644
--- a/web-app/src/components/Stage/index.tsx
+++ b/web-app/src/components/Stage/index.tsx
@@ -2,6 +2,7 @@ import { Button } from '@alifd/next'
 import * as React from 'react'
 import CR from 'typings'
 
+import Divider from '../Divider'
 import Markdown from '../Markdown'
 import Step from '../Step'
 
@@ -11,6 +12,10 @@ const styles = {
   },
   content: {
     padding: '0rem 1rem',
+    paddingBottom: '1rem',
+  },
+  options: {
+    padding: '0rem 1rem',
   },
   title: {},
 }
@@ -32,14 +37,16 @@ const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
         <h2 style={styles.title}>{title}</h2>
         <Markdown>{text}</Markdown>
       </div>
+      <Divider />
       <div>
         {stage.stepList.map((stepId: string) => {
           const step = steps[stepId]
           return <Step key={stepId} content={step.content} status={step.status} />
         })}
       </div>
+
       {complete && (
-        <div>
+        <div style={styles.options}>
           <Button onClick={onNextStage}>Continue</Button>
         </div>
       )}
diff --git a/web-app/src/components/Summary/index.tsx b/web-app/src/components/Summary/index.tsx
index 2aa4700d..ee8d56a8 100644
--- a/web-app/src/components/Summary/index.tsx
+++ b/web-app/src/components/Summary/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Card } from '@alifd/next'
+import { Button } from '@alifd/next'
 import * as React from 'react'
 import CR from 'typings'
 
diff --git a/web-app/stories/Level.stories.tsx b/web-app/stories/Level.stories.tsx
index 8b26f24b..e039b8e9 100644
--- a/web-app/stories/Level.stories.tsx
+++ b/web-app/stories/Level.stories.tsx
@@ -6,39 +6,55 @@ import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 import Level from '../src/components/Level'
-import demo from './data/basic'
 
 storiesOf('Tutorial SideBar', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
   .add('Level', () => (
     <Level
-      level={object('level', demo.data.levels.level1Id)}
+      level={object('level', {
+        content: {
+          text: 'A description of this stage',
+          title: 'Sum Level',
+        },
+        stageList: ['stage1Id', 'stage2Id', 'stage3Id'],
+      })}
       stages={object('stages', {
         stage1Id: {
-          stepList: [],
           content: {
-            title: 'Stage 1',
             text: 'some description',
+            title: 'Stage 1',
           },
           status: {
             active: false,
             complete: true,
           },
+          stepList: [],
         },
         stage2Id: {
-          stepList: [],
           content: {
-            title: 'Stage 2',
             text: 'some description',
+            title: 'Stage 2',
           },
           status: {
             active: true,
             complete: false,
           },
+          stepList: [],
+        },
+        stage3Id: {
+          content: {
+            text: 'some description',
+            title: 'Stage 3',
+          },
+          status: {
+            active: false,
+            complete: false,
+          },
+          stepList: [],
         },
       })}
-      onStageSelect={linkTo('Tutorial SideBar', 'Stage')}
+      onNext={linkTo('Tutorial SideBar', 'Stage')}
       onBack={linkTo('TUtorial SideBar', 'Summary')}
     />
   ))
diff --git a/web-app/stories/Summary.stories.tsx b/web-app/stories/Summary.stories.tsx
index 542ee378..3b5d61ce 100644
--- a/web-app/stories/Summary.stories.tsx
+++ b/web-app/stories/Summary.stories.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 
-import { storiesOf } from '@storybook/react'
+import { object, withKnobs } from '@storybook/addon-knobs'
 import { linkTo } from '@storybook/addon-links'
-import { withKnobs, object } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 
-import demo from './data/basic'
 import Summary from '../src/components/Summary'
+import demo from './data/basic'
 
 storiesOf('Tutorial SideBar', module)
   .addDecorator(SideBarDecorator)
@@ -14,9 +14,9 @@ storiesOf('Tutorial SideBar', module)
   .add('Summary', () => (
     <Summary
       data={object('data', {
-        summary: demo.data.summary,
         levels: demo.data.levels,
+        summary: demo.data.summary,
       })}
-      onLevelSelect={linkTo('Tutorial SideBar', 'Level')}
+      onNext={linkTo('Tutorial SideBar', 'Level')}
     />
   ))