adjust tab styles

Author: ShMcK

lib/components/Page/Hints/index.js

@@ -1,9 +1,14 @@
 "use strict";
 var React = require('react');
 var List_1 = require('material-ui/List');
+var styles = {
+    add: {
+        textAlign: 'center',
+    },
+};
 var Hints = function (_a) {
     var hints = _a.hints;
-    return (React.createElement(List_1.List, null, hints.map(function (hint, index) { return React.createElement(List_1.ListItem, {secondaryText: React.createElement("p", null, index + 1, ". ", hint)}); })));
+    return (React.createElement(List_1.List, null, hints.map(function (hint, index) { return React.createElement(List_1.ListItem, {secondaryText: React.createElement("p", null, index + 1, ". ", hint)}); }), React.createElement(List_1.ListItem, {secondaryText: React.createElement("p", {style: styles.add}, "+")})));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Hints;

lib/components/Page/Task/index.js

@@ -4,7 +4,7 @@ var index_1 = require('../../index');
 var colors_1 = require('material-ui/styles/colors');
 var styles = {
     margin: '5px',
-    padding: '10px 5px',
+    padding: '10px 10px',
 };
 function getStatus(index, taskPosition, testRun) {
     return index < taskPosition ? colors_1.lightGreen200 : 'inherit';

lib/components/Page/TaskActions/index.js

@@ -30,7 +30,7 @@ var TaskActions = (function (_super) {
             return obj;
         });
         return (React.createElement(Stepper_1.Stepper, {activeStep: stepIndex, linear: false, orientation: 'vertical'}, actionList.map(function (a, index) { return (React.createElement(Stepper_1.Step, null, React.createElement(Stepper_1.StepButton, {onClick: function () { return _this.setState({ stepIndex: index }); }}, a.action + (a.singleLine ? ' ' + a.content : '')), React.createElement(Stepper_1.StepContent, null, a.singleLine ? ''
-            : React.createElement(index_1.Markdown, null, a.content)))); })));
+            : React.createElement(index_1.Markdown, null, '```js\n' + a.content + '\n```')))); })));
     };
     return TaskActions;
 }(React.Component));

lib/components/TopPanel/TopPanel.js

@@ -16,11 +16,20 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 var React = require('react');
 var react_redux_1 = require('react-redux');
 var Tabs_1 = require('material-ui/Tabs');
-var add_1 = require('material-ui/svg-icons/content/add');
 var actions_1 = require('../../actions');
 var styles = {
-    tabs: {
+    all: {
         marginRight: '400px',
+        height: '33px',
+        top: '-15px',
+        position: 'relative',
+    },
+    tabs: {
+        height: '33px',
+        backgroundColor: 'black',
+    },
+    tab: {
+        fontSize: '12px',
     },
 };
 var TopPanel = (function (_super) {
@@ -34,9 +43,9 @@ var TopPanel = (function (_super) {
         if (!tutorial || !tutorial.pages) {
             return null;
         }
-        return (React.createElement(Tabs_1.Tabs, {style: styles.tabs}, tutorial.pages.map(function (page, index) {
-            return (React.createElement(Tabs_1.Tab, {key: index.toString(), label: page.title.substring(0, 10), onClick: pageSet.bind(_this, index)}));
-        }), React.createElement(Tabs_1.Tab, {icon: React.createElement(add_1.default, {onClick: pageAdd})})));
+        return (React.createElement(Tabs_1.Tabs, {tabItemContainerStyle: styles.tabs, style: styles.all}, tutorial.pages.map(function (page, index) {
+            return (React.createElement(Tabs_1.Tab, {style: styles.tab, key: index.toString(), label: page.title.substring(0, 10), onClick: pageSet.bind(_this, index)}));
+        }), React.createElement(Tabs_1.Tab, {style: styles.tab, label: '+'})));
     };
     TopPanel = __decorate([
         react_redux_1.connect(null, function (dispatch) {

src/components/Page/Hints/index.tsx

@@ -2,13 +2,22 @@ import * as React from 'react';
 import {List, ListItem} from 'material-ui/List';
 import FontIcon from 'material-ui/FontIcon';
 
+const styles = {
+  add: {
+    textAlign: 'center',
+  },
+};
+
 const Hints: React.StatelessComponent<{
   hints: string[]
 }> = ({hints}) => (
   <List>
     {hints.map((hint, index) => <ListItem secondaryText={
       <p>{index + 1}. {hint}</p>
     } />)}
+    <ListItem secondaryText={
+      <p style={styles.add}>+</p>
+    } />
   </List>
 );
 export default Hints;

src/components/Page/Task/index.tsx

@@ -6,7 +6,7 @@ import {lightGreen200, orange200} from 'material-ui/styles/colors';
 
 const styles = {
   margin: '5px',
-  padding: '10px 5px',
+  padding: '10px 10px',
 };
 
 function getStatus(

src/components/Page/TaskActions/index.tsx

@@ -42,7 +42,7 @@ export default class TaskActions extends React.Component<{
             </StepButton>
             <StepContent>
               {a.singleLine ? ''
-                : <Markdown>{a.content}</Markdown>
+                : <Markdown>{'```js\n' + a.content + '\n```'}</Markdown>
               }
             </StepContent>
           </Step>

src/components/TopPanel/TopPanel.tsx

@@ -5,8 +5,18 @@ import Add from 'material-ui/svg-icons/content/add';
 import {pageSet, tutorialPageAdd} from '../../actions';
 
 const styles = {
-  tabs: {
+  all: {
     marginRight: '400px',
+    height: '33px',
+    top: '-15px',
+    position: 'relative',
+  },
+  tabs: {
+    height: '33px',
+    backgroundColor: 'black',
+  },
+  tab: {
+    fontSize: '12px',
   },
 };
 
@@ -27,17 +37,21 @@ export default class TopPanel extends React.Component<{
     if (!tutorial || !tutorial.pages) { return null; }
 
     return (
-      <Tabs style={styles.tabs}>
+      <Tabs tabItemContainerStyle={styles.tabs} style={styles.all}>
          {tutorial.pages.map((page: CR.Page, index) => {
            return (
               <Tab
+                style={styles.tab}
                 key={index.toString()}
                 label={page.title.substring(0, 10)}
                 onClick={pageSet.bind(this, index)}
               />
            );
          })}
-       <Tab icon={<Add onClick={pageAdd}/>} />
+       <Tab
+        style={styles.tab}
+        label='+'
+      />
      </Tabs>
    );
   }