fix button styles for [email protected]

Author: ShMcK

lib/components/Common/RouteButton.js

@@ -16,15 +16,15 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 var React = require('react');
 var react_redux_1 = require('react-redux');
 var actions_1 = require('../../actions');
-var FlatButton_1 = require('material-ui/FlatButton');
+var RaisedButton_1 = require('material-ui/RaisedButton');
 var RouteButton = (function (_super) {
     __extends(RouteButton, _super);
     function RouteButton() {
         _super.apply(this, arguments);
     }
     RouteButton.prototype.render = function () {
         var _a = this.props, label = _a.label, route = _a.route, style = _a.style, routeTo = _a.routeTo;
-        return (React.createElement(FlatButton_1.default, {label: label, style: style || {}, onTouchTap: routeTo.bind(this, route), secondary: true}));
+        return (React.createElement(RaisedButton_1.default, {label: label, style: style || {}, onTouchTap: routeTo.bind(this, route), secondary: true}));
     };
     RouteButton = __decorate([
         react_redux_1.connect(null, function (dispatch) {

lib/components/Page/PageToolbar/Continue/index.js

@@ -15,18 +15,23 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 var React = require('react');
 var react_redux_1 = require('react-redux');
-var FlatButton_1 = require('material-ui/FlatButton');
+var RaisedButton_1 = require('material-ui/RaisedButton');
 var actions_1 = require('../../../../actions');
 var styles = {
     zIndex: '10000',
+    border: '0',
+    boxShadow: 'none',
+    backgroundColor: 'inherit',
+    position: 'relative',
+    top: '10px',
 };
 var Continue = (function (_super) {
     __extends(Continue, _super);
     function Continue() {
         _super.apply(this, arguments);
     }
     Continue.prototype.render = function () {
-        return (React.createElement(FlatButton_1.default, {style: styles, label: 'Continue', secondary: true, onTouchTap: this.props.callNextPage}));
+        return (React.createElement(RaisedButton_1.default, {style: styles, label: 'Continue', primary: true, onTouchTap: this.props.callNextPage}));
     };
     Continue = __decorate([
         react_redux_1.connect(null, function (dispatch, state) {

lib/components/Page/PageToolbar/Save/index.js

@@ -15,15 +15,22 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 var React = require('react');
 var react_redux_1 = require('react-redux');
-var FlatButton_1 = require('material-ui/FlatButton');
+var RaisedButton_1 = require('material-ui/RaisedButton');
 var actions_1 = require('../../../../actions');
+var styles = {
+    border: '0',
+    boxShadow: 'none',
+    backgroundColor: 'inherit',
+    position: 'relative',
+    top: '10px',
+};
 var Save = (function (_super) {
     __extends(Save, _super);
     function Save() {
         _super.apply(this, arguments);
     }
     Save.prototype.render = function () {
-        return (React.createElement(FlatButton_1.default, {label: 'Save', secondary: true, onTouchTap: this.props.save}));
+        return (React.createElement(RaisedButton_1.default, {label: 'Save', style: styles, secondary: true, onTouchTap: this.props.save}));
     };
     Save = __decorate([
         react_redux_1.connect(null, function (dispatch, state) {

lib/components/Page/PageToolbar/ToggleLog/index.js

@@ -18,13 +18,17 @@ var code_1 = require('material-ui/svg-icons/action/code');
 var react_redux_1 = require('react-redux');
 var actions_1 = require('../../../../actions');
 var FlatButton_1 = require('material-ui/FlatButton');
+var styles = {
+    position: 'relative',
+    top: '10px',
+};
 var ToggleLog = (function (_super) {
     __extends(ToggleLog, _super);
     function ToggleLog() {
         _super.apply(this, arguments);
     }
     ToggleLog.prototype.render = function () {
-        return (React.createElement(FlatButton_1.default, {icon: React.createElement(code_1.default, null), onTouchTap: this.props.toggleDevTools}));
+        return (React.createElement(FlatButton_1.default, {style: styles, icon: React.createElement(code_1.default, null), onTouchTap: this.props.toggleDevTools}));
     };
     ;
     ToggleLog = __decorate([

lib/components/Start/Welcome/index.js

@@ -22,7 +22,7 @@ var taglineStyles = {
 };
 var buttonStyles = {
     fontSize: '1.4em',
-    padding: '5px 2px',
+    boxShadow: '2px 2px 1px #888888',
     textShadow: '1px 1px 0px #000',
 };
 var Welcome = function () { return (React.createElement("div", {style: styles, className: 'cr-bg'}, React.createElement("div", {style: titleStyles}, "CodeRoad"), React.createElement("div", {style: taglineStyles}, "Tutorials in your Editor"), React.createElement("br", null), React.createElement("br", null), React.createElement(index_1.RouteButton, {label: 'Start', route: 'tutorials', style: buttonStyles}))); };

src/components/Common/RouteButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
 import {routeSet} from '../../actions';
-import FlatButton from 'material-ui/FlatButton';
+import RaisedButton from 'material-ui/RaisedButton';
 
 @connect(null, (dispatch) => {
   return {
@@ -14,7 +14,7 @@ export default class RouteButton extends React.Component<{
   render() {
     const {label, route, style, routeTo} = this.props;
     return (
-        <FlatButton
+        <RaisedButton
           label={label}
           style={style || {}}
           onTouchTap={routeTo.bind(this, route)}

src/components/Page/PageToolbar/Continue/index.tsx

@@ -1,10 +1,15 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
-import FlatButton from 'material-ui/FlatButton';
+import RaisedButton from 'material-ui/RaisedButton';
 import {pageNext} from '../../../../actions';
 
 const styles = {
   zIndex: '10000',
+  border: '0',
+  boxShadow: 'none',
+  backgroundColor: 'inherit',
+  position: 'relative',
+  top: '10px',
 };
 
 @connect(null, (dispatch, state) => {
@@ -19,10 +24,10 @@ export default class Continue extends React.Component<{
 }, {}> {
   render() {
     return (
-      <FlatButton
+      <RaisedButton
         style={styles}
         label='Continue'
-        secondary={true}
+        primary={true}
         onTouchTap={this.props.callNextPage}
       />
     );

src/components/Page/PageToolbar/Save/index.tsx

@@ -1,8 +1,16 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
-import FlatButton from 'material-ui/FlatButton';
+import RaisedButton from 'material-ui/RaisedButton';
 import {testSave} from '../../../../actions';
 
+const styles = {
+  border: '0',
+  boxShadow: 'none',
+  backgroundColor: 'inherit',
+  position: 'relative',
+  top: '10px',
+};
+
 @connect(null, (dispatch, state) => {
   return {
     save: () => {
@@ -15,8 +23,9 @@ export default class Save extends React.Component<{
 }, {}> {
   render() {
     return (
-      <FlatButton
+      <RaisedButton
         label='Save'
+        style={styles}
         secondary={true}
         onTouchTap={this.props.save}
       />

src/components/Page/PageToolbar/ToggleLog/index.tsx

@@ -4,6 +4,11 @@ import {connect} from 'react-redux';
 import {devToolsToggle} from '../../../../actions';
 import FlatButton from 'material-ui/FlatButton';
 
+const styles = {
+  position: 'relative',
+  top: '10px',
+};
+
 @connect(null, (dispatch, state) => {
   return {
     toggleDevTools: () => {
@@ -17,6 +22,7 @@ export default class ToggleLog extends React.Component<{
   render() {
     return (
       <FlatButton
+        style={styles}
         icon={
           <Code />
         }

src/components/Start/Welcome/index.tsx

@@ -28,7 +28,7 @@ const taglineStyles = {
 
 const buttonStyles = {
   fontSize: '1.4em',
-  padding: '5px 2px',
+  boxShadow: '2px 2px 1px #888888',
   textShadow: '1px 1px 0px #000',
 };