adding a raised background

index.html

@@ -68,8 +68,24 @@
           <h2>Day 2</h2>
           Setup, HTML, CSS, Javascript and Intro to React
         </li>
-        <li class="Tile"><a target="_blank" href="/step2-01/" class="Tile-link">Step 1</a></li>
-        <li class="Tile"><a target="_blank" href="/step2-02/" class="Tile-link">Step 2</a></li>
+        <li class="Tile">
+          <a target="_blank" href="/step2-01/" class="Tile-link">
+            Step 1<br />
+            Typescript Basics
+          </a>
+        </li>
+        <li class="Tile">
+          <a target="_blank" href="/step2-02/" class="Tile-link">
+            Step 2<br />
+            UI Fabric
+          </a>
+        </li>
+        <li class="Tile">
+          <a target="_blank" href="/step2-03/" class="Tile-link">
+            Step 3<br />
+            UI Fabric: Theming and Styling
+          </a>
+        </li>
       </ul>
     </div>
     <div class="Container">

step2-02/src/components/TodoHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from '@uifabric/experiments';
 import { Stack } from 'office-ui-fabric-react';
-import { Pivot, PivotItem, TextField, DefaultButton } from 'office-ui-fabric-react';
+import { Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';
 import { FilterTypes } from '../store';
 
 interface TodoHeaderProps {
@@ -31,7 +31,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
           <Stack.Item grow>
             <TextField placeholder="What needs to be done?" value={this.state.labelInput} onChange={this.onChange} />
           </Stack.Item>
-          <DefaultButton onClick={this.onAdd}>Add</DefaultButton>
+          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>
         </Stack>
 
         <Pivot onLinkClick={this.onFilter}>

step2-03/src/components/TodoApp.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
-import { Stack } from 'office-ui-fabric-react';
+import { Stack, Customizer, mergeStyles, getTheme } from 'office-ui-fabric-react';
 import { TodoFooter } from './TodoFooter';
 import { TodoHeader } from './TodoHeader';
 import { TodoList } from './TodoList';
 import { Store } from '../store';
+import { FluentCustomizations } from '@uifabric/fluent-theme';
 
 let index = 0;
 
+const className = mergeStyles({
+  padding: 25,
+  ...getTheme().effects.elevation4
+});
+
 export class TodoApp extends React.Component<any, Store> {
   constructor(props) {
     super(props);
@@ -18,13 +24,15 @@ export class TodoApp extends React.Component<any, Store> {
   render() {
     const { filter, todos } = this.state;
     return (
-      <Stack horizontalAlign="center">
-        <Stack style={{ width: 400 }} gap={25}>
-          <TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />
-          <TodoList complete={this._complete} todos={todos} filter={filter} remove={this._remove} edit={this._edit} />
-          <TodoFooter clear={this._clear} todos={todos} />
+      <Customizer {...FluentCustomizations}>
+        <Stack horizontalAlign="center">
+          <Stack style={{ width: 400 }} gap={25} className={className}>
+            <TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />
+            <TodoList complete={this._complete} todos={todos} filter={filter} remove={this._remove} edit={this._edit} />
+            <TodoFooter clear={this._clear} todos={todos} />
+          </Stack>
         </Stack>
-      </Stack>
+      </Customizer>
     );
   }
 

step2-03/src/components/TodoHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from '@uifabric/experiments';
 import { Stack } from 'office-ui-fabric-react';
-import { Pivot, PivotItem, TextField, DefaultButton } from 'office-ui-fabric-react';
+import { Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';
 import { FilterTypes } from '../store';
 
 interface TodoHeaderProps {
@@ -22,16 +22,16 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
 
   render() {
     return (
-      <Stack>
+      <Stack gap={10}>
         <Stack horizontal horizontalAlign="center">
           <Text variant="xxLarge">todos</Text>
         </Stack>
 
-        <Stack horizontal>
+        <Stack horizontal gap={10}>
           <Stack.Item grow>
             <TextField placeholder="What needs to be done?" value={this.state.labelInput} onChange={this.onChange} />
           </Stack.Item>
-          <DefaultButton onClick={this.onAdd}>Add</DefaultButton>
+          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>
         </Stack>
 
         <Pivot onLinkClick={this.onFilter}>

step2-03/src/components/TodoListItem.tsx

@@ -31,15 +31,15 @@ export class TodoListItem extends React.Component<TodoListItemProps, TodoListIte
           <>
             <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
             <div>
-              <IconButton iconProps={{ iconName: 'Edit' }} className="clearButton" onClick={this.onEdit} />
-              <IconButton iconProps={{ iconName: 'Cancel' }} className="clearButton" onClick={() => remove(id)} />
+              <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />
+              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />
             </div>
           </>
         )}
 
         {this.state.editing && (
           <Stack.Item grow>
-            <Stack horizontal>
+            <Stack horizontal gap={10}>
               <Stack.Item grow>
                 <TextField value={this.state.editLabel} onChange={this.onChange} />
               </Stack.Item>

webpack.config.js

@@ -1,18 +1,31 @@
 // @ts-check
 
 const path = require('path');
+const fs = require('fs');
+
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
-const entries = {
-  'step1-04': './step1-04/src/index',
-  'step1-05': './step1-05/src/index',
-  'step1-06': './step1-06/src/index',
-  'step1-07': './step1-07/src/index',
-  'step2-01': './step2-01/src/index',
-  'step2-02': './step2-02/src/index',
-  playground: './playground/src/index'
-};
+const entries = {};
+
+function getEntryPoint(entry) {
+  if (entry.includes('step') || entry.includes('playground')) {
+    for (let suffix of ['.js', '.jsx', '.ts', '.tsx']) {
+      if (fs.existsSync(`./${entry}/src/index${suffix}`)) {
+        return `./${entry}/src/index${suffix}`;
+      }
+    }
+  }
+  return false;
+}
+
+fs.readdirSync('./').filter(entry => {
+  const entryPoint = getEntryPoint(entry);
+
+  if (entryPoint) {
+    entries[entry] = entryPoint;
+  }
+});
 
 module.exports = function() {
   return {