turn styles into objects, fix action link

Author: ShMcK

lib/components/Page/Task/index.js

@@ -5,21 +5,23 @@ var taskCheckbox_1 = require('./taskCheckbox');
 var List_1 = require('material-ui/List');
 var colors_1 = require('material-ui/styles/colors');
 var styles = {
-    margin: '5px',
-    padding: '5px',
-    position: 'relative'
-};
-var indexStyles = {
-    position: 'absolute',
-    top: '20px',
-    left: '45px',
-};
-var 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(index, taskPosition, testRun) {
     return index < taskPosition ? colors_1.lightGreen200 : 'inherit';
@@ -28,7 +30,7 @@ var Task = function (_a) {
     var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, testRun = _a.testRun;
     var backgroundColor = getStatus(index, taskPosition, testRun);
     var isCurrentTask = taskPosition === index;
-    return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles, { backgroundColor: backgroundColor })}, taskCheckbox_1.default(isCurrentTask, testRun), React.createElement("span", {style: indexStyles}, index + 1, "."), React.createElement("div", {style: descriptionStyles}, React.createElement(index_1.Markdown, null, task.description))));
+    return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles.task, { backgroundColor: backgroundColor })}, taskCheckbox_1.default(isCurrentTask, testRun), React.createElement("span", {style: styles.index}, index + 1, "."), React.createElement("div", {style: styles.description}, React.createElement(index_1.Markdown, null, task.description))));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Task;

lib/components/Page/TasksComplete/index.js

@@ -4,19 +4,21 @@ var Card_1 = require('material-ui/Card');
 var index_1 = require('../../index');
 var colors_1 = require('material-ui/styles/colors');
 var styles = {
-    backgroundColor: colors_1.cyan500,
-    margin: '10px 5px',
-};
-var textStyles = {
-    color: colors_1.grey100,
-    fontSize: '1.1em'
+    card: {
+        backgroundColor: colors_1.cyan500,
+        margin: '10px 5px',
+    },
+    text: {
+        color: colors_1.grey100,
+        fontSize: '1.1em'
+    },
 };
 var TasksComplete = function (_a) {
     var page = _a.page, completed = _a.completed;
     if (!completed || !page.onPageComplete) {
         return null;
     }
-    return (React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, {style: textStyles}, page.onPageComplete))));
+    return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, {style: styles.text}, page.onPageComplete))));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = TasksComplete;

lib/components/Progress/index.js

@@ -20,11 +20,13 @@ var List_1 = require('material-ui/List');
 var Subheader_1 = require('material-ui/Subheader');
 var ProgressPage_1 = require('./ProgressPage');
 var actions_1 = require('../../modules/progress/actions');
-var pageStyle = {
-    width: '100%',
-};
-var listStyle = {
-    margin: '5px',
+var styles = {
+    page: {
+        width: '100%',
+    },
+    list: {
+        margin: '5px',
+    },
 };
 var Progress = (function (_super) {
     __extends(Progress, _super);
@@ -36,7 +38,7 @@ var Progress = (function (_super) {
     };
     Progress.prototype.render = function () {
         var _a = this.props, progress = _a.progress, pagePosition = _a.pagePosition, info = _a.info, tutorial = _a.tutorial;
-        return (React.createElement(Paper_1.default, {style: pageStyle}, React.createElement(List_1.List, {style: listStyle}, React.createElement(Subheader_1.default, null, info.name), tutorial.pages.map(function (page, index) { return (React.createElement(ProgressPage_1.default, {key: index, index: index, page: page, pagePosition: pagePosition, progress: progress})); }))));
+        return (React.createElement(Paper_1.default, {style: styles.page}, React.createElement(List_1.List, {style: styles.list}, React.createElement(Subheader_1.default, null, info.name), tutorial.pages.map(function (page, index) { return (React.createElement(ProgressPage_1.default, {key: index, index: index, page: page, pagePosition: pagePosition, progress: progress})); }))));
     };
     Progress = __decorate([
         react_redux_1.connect(null, function (dispatch) {

src/actions.ts

@@ -6,7 +6,6 @@ export {setupVerify, setupPackage} from './modules/setup/actions';
 export {tutorialSet} from './modules/tutorial';
 export {tutorialsFind, tutorialUpdate} from './modules/tutorials';
 
-
 export {alertOpen, alertClose, alertReplay} from 'core-coderoad/lib/alert';
 export {editorDevToolsToggle, editorOpen, editorInsert,
 editorSave, editorSet} from 'core-coderoad/lib/editor';

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/Progress/index.tsx

@@ -6,12 +6,13 @@ import Subheader from 'material-ui/Subheader';
 import ProgressPage from './ProgressPage';
 import {progressLoad} from '../../modules/progress/actions';
 
-const pageStyle = {
-  width: '100%',
-};
-
-const listStyle = {
-  margin: '5px',
+const styles = {
+  page: {
+    width: '100%',
+  },
+  list: {
+    margin: '5px',
+  },
 };
 
 @connect(null, dispatch => {
@@ -29,8 +30,8 @@ export default class Progress extends React.Component<{
   render() {
     const {progress, pagePosition, info, tutorial} = this.props;
     return (
-      <Paper style={pageStyle}>
-        <List style={listStyle}>
+      <Paper style={styles.page}>
+        <List style={styles.list}>
           <Subheader>{info.name}</Subheader>
           {tutorial.pages.map((page: CR.Page, index: number) => (
             <ProgressPage