change inline styles into objects

Author: ShMcK

src/components/Page/Task/index.tsx

@@ -5,23 +5,23 @@ import {ListItem} from 'material-ui/List';
 import {lightGreen200, orange200} from 'material-ui/styles/colors';
 
 const styles = {
-  margin: '5px',
-  padding: '5px',
-  position: 'relative'
-};
-
-const indexStyles = {
-  position: 'absolute',
-  top: '20px',
-  left: '45px',
-};
-
-const descriptionStyles = {
-  backgroundColor: 'inherit',
-  paddingTop: '-10px',
-  paddingLeft: '55px',
-  fontSize: '14px',
-  lineHeight: '1.6',
+  task: {
+    margin: '5px',
+    padding: '5px',
+    position: 'relative'
+  },
+  index: {
+    position: 'absolute',
+    top: '20px',
+    left: '45px',
+  },
+  description: {
+    backgroundColor: 'inherit',
+    paddingTop: '-10px',
+    paddingLeft: '55px',
+    fontSize: '14px',
+    lineHeight: '1.6',
+  },
 };
 
 function getStatus(
@@ -38,11 +38,11 @@ const Task: React.StatelessComponent<{
   return (
     <ListItem
       key={index}
-      style={Object.assign({}, styles, {backgroundColor})}
+      style={Object.assign({}, styles.task, {backgroundColor})}
     >
       {taskCheckbox(isCurrentTask, testRun)}
-      <span style={indexStyles}>{index + 1}.</span>
-      <div style={descriptionStyles}>
+      <span style={styles.index}>{index + 1}.</span>
+      <div style={styles.description}>
         <Markdown >{task.description}</Markdown>
       </div>
     </ListItem>

src/components/Page/TasksComplete/index.tsx

@@ -4,23 +4,24 @@ import {Markdown} from '../../index';
 import {cyan500, grey100} from 'material-ui/styles/colors';
 
 const styles = {
-  backgroundColor: cyan500,
-  margin: '10px 5px',
-};
-
-const textStyles = {
-  color: grey100,
-  fontSize: '1.1em'
+  card: {
+    backgroundColor: cyan500,
+    margin: '10px 5px',
+  },
+  text: {
+    color: grey100,
+    fontSize: '1.1em'
+  },
 };
 
 const TasksComplete: React.StatelessComponent<{
   page: CR.Page, completed: boolean
 }> = ({page, completed}) => {
   if (!completed || !page.onPageComplete) { return null; }
   return (
-    <Card style={styles}>
+    <Card style={styles.card}>
       <CardText>
-        <Markdown style={textStyles}>{page.onPageComplete}</Markdown>
+        <Markdown style={styles.text}>{page.onPageComplete}</Markdown>
       </CardText>
     </Card>
   );

src/components/Routes/index.tsx

@@ -17,6 +17,11 @@ export default class Routes extends React.Component<{
         return <TutorialConfig {...this.props} />;
       case 'tutorialInfo':
         return <TutorialInfo {...this.props} />;
+
+      // TODO
+      // case 'tutorialPublish':
+      //   return <TutorialPublish {...props} />;
+
       default:
         throw 'Error: Route not found.';
     }