From 35d8ed22afbf297342cfe1f7b3ad76bbddb45ac8 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sat, 21 Mar 2020 13:59:38 -0700
Subject: [PATCH 1/3] refactor new => select tutorial

---
 web-app/src/Routes.tsx                        |  4 +-
 web-app/src/containers/New/NewPage.tsx        | 43 -------------
 .../src/containers/New/TutorialList/index.tsx | 34 ----------
 .../SelectTutorial/SelectTutorial.tsx         | 62 +++++++++++++++++++
 .../TutorialItem.tsx                          |  4 +-
 .../{New => SelectTutorial}/index.tsx         |  8 +--
 ...stories.tsx => SelectTutorial.stories.tsx} | 12 ++--
 7 files changed, 74 insertions(+), 93 deletions(-)
 delete mode 100644 web-app/src/containers/New/NewPage.tsx
 delete mode 100644 web-app/src/containers/New/TutorialList/index.tsx
 create mode 100644 web-app/src/containers/SelectTutorial/SelectTutorial.tsx
 rename web-app/src/containers/{New/TutorialList => SelectTutorial}/TutorialItem.tsx (95%)
 rename web-app/src/containers/{New => SelectTutorial}/index.tsx (77%)
 rename web-app/stories/{New.stories.tsx => SelectTutorial.stories.tsx} (67%)

diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx
index 6ed674c3..e06eed95 100644
--- a/web-app/src/Routes.tsx
+++ b/web-app/src/Routes.tsx
@@ -3,7 +3,7 @@ import useRouter from './components/Router'
 import Workspace from './components/Workspace'
 import LoadingPage from './containers/Loading'
 import StartPage from './containers/Start'
-import NewPage from './containers/New'
+import SelectTutorialPage from './containers/SelectTutorial'
 import OverviewPage from './containers/Overview'
 import CompletedPage from './containers/Tutorial/CompletedPage'
 import LevelSummaryPage from './containers/Tutorial/LevelPage'
@@ -27,7 +27,7 @@ const Routes = () => {
           <LoadingPage text="Error" context={context} />
         </Route>
         <Route path="Setup.SelectTutorial">
-          <NewPage send={send} context={context} />
+          <SelectTutorialPage send={send} context={context} />
         </Route>
         <Route path="Setup.Summary">
           <OverviewPage send={send} context={context} />
diff --git a/web-app/src/containers/New/NewPage.tsx b/web-app/src/containers/New/NewPage.tsx
deleted file mode 100644
index 9d88bbf6..00000000
--- a/web-app/src/containers/New/NewPage.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react'
-import * as T from 'typings'
-import * as G from 'typings/graphql'
-import { css, jsx } from '@emotion/core'
-import TutorialList from './TutorialList'
-
-const styles = {
-  page: {
-    position: 'relative' as 'relative',
-    width: '100%',
-  },
-  header: {
-    height: '2rem',
-    backgroundColor: '#EBEBEB',
-    fontSize: '1rem',
-    lineHeight: '1rem',
-    padding: '10px 1rem',
-  },
-  banner: {
-    height: '3rem',
-    fontSize: '1rem',
-    padding: '1rem',
-  },
-}
-
-interface Props {
-  send(action: T.Action): void
-  tutorialList: G.Tutorial[]
-}
-
-const NewPage = (props: Props) => (
-  <div css={styles.page}>
-    <div css={styles.header}>
-      <span>CodeRoad</span>
-    </div>
-    <div css={styles.banner}>
-      <span>Select a tutorial to launch in this workspace:</span>
-    </div>
-    <TutorialList tutorialList={props.tutorialList} send={props.send} />
-  </div>
-)
-
-export default NewPage
diff --git a/web-app/src/containers/New/TutorialList/index.tsx b/web-app/src/containers/New/TutorialList/index.tsx
deleted file mode 100644
index b131db41..00000000
--- a/web-app/src/containers/New/TutorialList/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react'
-import * as T from 'typings'
-import * as G from 'typings/graphql'
-import TutorialItem from './TutorialItem'
-
-interface Props {
-  send(action: T.Action): void
-  tutorialList: G.Tutorial[]
-}
-
-const TutorialList = (props: Props) => {
-  const onSelect = (tutorial: G.Tutorial) => {
-    props.send({
-      type: 'SELECT_TUTORIAL',
-      payload: {
-        tutorial,
-      },
-    })
-  }
-  return (
-    <div>
-      {props.tutorialList.map((tutorial: G.Tutorial) => (
-        <TutorialItem
-          key={tutorial.id}
-          onSelect={() => onSelect(tutorial)}
-          title={tutorial.summary.title || ''}
-          description={tutorial.summary.description || ''}
-        />
-      ))}
-    </div>
-  )
-}
-
-export default TutorialList
diff --git a/web-app/src/containers/SelectTutorial/SelectTutorial.tsx b/web-app/src/containers/SelectTutorial/SelectTutorial.tsx
new file mode 100644
index 00000000..5a744b41
--- /dev/null
+++ b/web-app/src/containers/SelectTutorial/SelectTutorial.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react'
+import * as T from 'typings'
+import * as G from 'typings/graphql'
+import { css, jsx } from '@emotion/core'
+import TutorialItem from './TutorialItem'
+
+const styles = {
+  page: {
+    position: 'relative' as 'relative',
+    width: '100%',
+  },
+  header: {
+    height: '2rem',
+    backgroundColor: '#EBEBEB',
+    fontSize: '1rem',
+    lineHeight: '1rem',
+    padding: '10px 1rem',
+  },
+  banner: {
+    height: '3rem',
+    fontSize: '1rem',
+    padding: '1rem',
+  },
+}
+
+interface Props {
+  send(action: T.Action): void
+  tutorialList: G.Tutorial[]
+}
+
+const SelectTutorial = (props: Props) => {
+  const onSelect = (tutorial: G.Tutorial) => {
+    props.send({
+      type: 'SELECT_TUTORIAL',
+      payload: {
+        tutorial,
+      },
+    })
+  }
+  return (
+    <div css={styles.page}>
+      <div css={styles.header}>
+        <span>CodeRoad</span>
+      </div>
+      <div css={styles.banner}>
+        <span>Select a tutorial to launch in this workspace:</span>
+      </div>
+      <div>
+        {props.tutorialList.map((tutorial: G.Tutorial) => (
+          <TutorialItem
+            key={tutorial.id}
+            onSelect={() => onSelect(tutorial)}
+            title={tutorial.summary.title || ''}
+            description={tutorial.summary.description || ''}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default SelectTutorial
diff --git a/web-app/src/containers/New/TutorialList/TutorialItem.tsx b/web-app/src/containers/SelectTutorial/TutorialItem.tsx
similarity index 95%
rename from web-app/src/containers/New/TutorialList/TutorialItem.tsx
rename to web-app/src/containers/SelectTutorial/TutorialItem.tsx
index 5178d71e..f7f8e679 100644
--- a/web-app/src/containers/New/TutorialList/TutorialItem.tsx
+++ b/web-app/src/containers/SelectTutorial/TutorialItem.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
-import Card from '../../../components/Card'
-import Markdown from '../../../components/Markdown'
+import Card from '../../components/Card'
+import Markdown from '../../components/Markdown'
 
 const styles = {
   card: {
diff --git a/web-app/src/containers/New/index.tsx b/web-app/src/containers/SelectTutorial/index.tsx
similarity index 77%
rename from web-app/src/containers/New/index.tsx
rename to web-app/src/containers/SelectTutorial/index.tsx
index 89ec7e1b..9265d1c0 100644
--- a/web-app/src/containers/New/index.tsx
+++ b/web-app/src/containers/SelectTutorial/index.tsx
@@ -5,7 +5,7 @@ import * as G from 'typings/graphql'
 import ErrorView from '../../components/Error'
 import queryTutorials from '../../services/apollo/queries/tutorials'
 import LoadingPage from '../Loading'
-import NewPage from './NewPage'
+import SelectTutorial from './SelectTutorial'
 
 interface ContainerProps {
   send(action: T.Action): void
@@ -16,7 +16,7 @@ interface TutorialsData {
   tutorials: G.Tutorial[]
 }
 
-const NewPageContainer = (props: ContainerProps) => {
+const SelectPageContainer = (props: ContainerProps) => {
   const { data, loading, error } = useQuery<TutorialsData>(queryTutorials, {
     fetchPolicy: 'no-cache',
   })
@@ -33,7 +33,7 @@ const NewPageContainer = (props: ContainerProps) => {
     return null
   }
 
-  return <NewPage tutorialList={data.tutorials} send={props.send} />
+  return <SelectTutorial tutorialList={data.tutorials} send={props.send} />
 }
 
-export default NewPageContainer
+export default SelectPageContainer
diff --git a/web-app/stories/New.stories.tsx b/web-app/stories/SelectTutorial.stories.tsx
similarity index 67%
rename from web-app/stories/New.stories.tsx
rename to web-app/stories/SelectTutorial.stories.tsx
index 6cd3f587..23582c0d 100644
--- a/web-app/stories/New.stories.tsx
+++ b/web-app/stories/SelectTutorial.stories.tsx
@@ -1,9 +1,8 @@
 import { action } from '@storybook/addon-actions'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
-import NewPage from '../src/containers/New/NewPage'
-import TutorialList from '../src/containers/New/TutorialList'
-import TutorialItem from '../src/containers/New/TutorialList/TutorialItem'
+import SelectTutorial from '../src/containers/SelectTutorial/SelectTutorial'
+import TutorialItem from '../src/containers/SelectTutorial/TutorialItem'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 const tutorialList = [
@@ -25,11 +24,8 @@ const tutorialList = [
 
 storiesOf('Select Tutorial', module)
   .addDecorator(SideBarDecorator)
-  .add('New Page', () => {
-    return <NewPage tutorialList={tutorialList} />
-  })
-  .add('Tutorial List', () => {
-    return <TutorialList tutorialList={tutorialList} />
+  .add('Select Tutorial Page', () => {
+    return <SelectTutorial tutorialList={tutorialList} send={action('send')} />
   })
   .add('Tutorial Item', () => {
     const tutorial = tutorialList[0]

From 17703dcda6d13c2ceb7db0d56648b7d6c8b10586 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sat, 21 Mar 2020 14:37:45 -0700
Subject: [PATCH 2/3] update tutorial item styles

---
 web-app/src/components/Tag/index.tsx          | 17 +++++++
 .../SelectTutorial/TutorialItem.tsx           | 44 ++++++++++++++++---
 2 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 web-app/src/components/Tag/index.tsx

diff --git a/web-app/src/components/Tag/index.tsx b/web-app/src/components/Tag/index.tsx
new file mode 100644
index 00000000..bd2ab89d
--- /dev/null
+++ b/web-app/src/components/Tag/index.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react'
+
+const styles = {
+  tag: {
+    padding: '3px',
+    backgroundColor: 'rgb(225, 236, 244)',
+    color: 'rgb(57, 115, 157)',
+  },
+}
+
+type Props = {
+  children: string
+}
+
+const Tag = (props: Props) => <div css={styles.tag}>{props.children}</div>
+
+export default Tag
diff --git a/web-app/src/containers/SelectTutorial/TutorialItem.tsx b/web-app/src/containers/SelectTutorial/TutorialItem.tsx
index f7f8e679..ebbef0c7 100644
--- a/web-app/src/containers/SelectTutorial/TutorialItem.tsx
+++ b/web-app/src/containers/SelectTutorial/TutorialItem.tsx
@@ -1,11 +1,36 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
 import Card from '../../components/Card'
-import Markdown from '../../components/Markdown'
+import Tag from '../../components/Tag'
 
 const styles = {
   card: {
     cursor: 'pointer',
+    display: 'inline-flex' as 'inline-flex',
+    flexDirection: 'row' as 'row',
+    minWidth: 500,
+  },
+  left: {
+    width: 80,
+    display: 'flex' as 'flex',
+    alignItems: 'center' as 'center',
+  },
+  right: {
+    flex: '1',
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+  },
+  title: {
+    margin: 0,
+  },
+  author: {
+    margin: '0 0 2px 0',
+    color: 'grey',
+  },
+  tags: {
+    display: 'flex' as 'flex',
+    alignItems: 'center' as 'center',
+    padding: '2px',
   },
   languages: {
     display: 'flex' as 'flex',
@@ -38,11 +63,18 @@ const LanguageIcon = () => (
 )
 
 const TutorialItem = (props: Props) => (
-  <Card onClick={props.onSelect} style={styles.card}>
-    <h3>{props.title || 'Title'}</h3>
-    <Markdown minimal>{props.description || 'Description'}</Markdown>
-    <div css={styles.languages}>
-      <LanguageIcon />
+  <Card onClick={props.onSelect}>
+    <div style={styles.card}>
+      <div css={styles.left}>
+        <img src="https://via.placeholder.com/75/75" height="75px" width="75px" />
+      </div>
+      <div css={styles.right}>
+        <h2 css={styles.title}>{props.title || 'Title'}</h2>
+        <h3 css={styles.author}>Author Name</h3>
+        <div css={styles.tags}>
+          <Tag>javascript</Tag>
+        </div>
+      </div>
     </div>
   </Card>
 )

From 3828374502c9e632309f2d52f819a7165551c304 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sat, 21 Mar 2020 14:46:19 -0700
Subject: [PATCH 3/3] style select tutorial page

---
 web-app/src/components/Tag/index.tsx                     | 1 +
 web-app/src/containers/SelectTutorial/SelectTutorial.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/web-app/src/components/Tag/index.tsx b/web-app/src/components/Tag/index.tsx
index bd2ab89d..b9d05b48 100644
--- a/web-app/src/components/Tag/index.tsx
+++ b/web-app/src/components/Tag/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { css, jsx } from '@emotion/core'
 
 const styles = {
   tag: {
diff --git a/web-app/src/containers/SelectTutorial/SelectTutorial.tsx b/web-app/src/containers/SelectTutorial/SelectTutorial.tsx
index 5a744b41..d24435af 100644
--- a/web-app/src/containers/SelectTutorial/SelectTutorial.tsx
+++ b/web-app/src/containers/SelectTutorial/SelectTutorial.tsx
@@ -17,7 +17,7 @@ const styles = {
     padding: '10px 1rem',
   },
   banner: {
-    height: '3rem',
+    minHeight: '3rem',
     fontSize: '1rem',
     padding: '1rem',
   },