adding a raised background

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>