Merge pull request #325 from parallaxinc/quickfix1

Fixing button issue on touch screens

Author: monteslu

assets/theme/parallax.css

@@ -70,3 +70,31 @@
   background: rgba(155,157,162,0.37);
   z-index: 1;
 }
+
+.parallax-button{
+  background: white;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+  border: none;
+  border-radius: 2px;
+  color: #000;
+  position: relative;
+  height: 36px;
+  margin: 0 5px 0;
+  min-width: 80px;
+  padding: 0 16px;
+  display: inline-block;
+  font-family: "Roboto","Helvetica","Arial",sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  overflow: hidden;
+  will-change: box-shadow;
+  transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
+  outline: none;
+  cursor: pointer;
+  text-decoration: none;
+  text-align: center;
+  line-height: 36px;
+  vertical-align: middle;
+}

src/components/button.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const React = require('react');
+const ReactStyle = require('react-style');
+
+export default class Button extends React.Component {
+    render(){
+      const {
+        children,
+        onClick,
+      } = this.props
+
+      return(
+        <button onClick={onClick} className="parallax-button">{children}</button>
+      )
+    }
+}

src/components/file-list-item.js

@@ -1,7 +1,6 @@
 'use strict';
 
 const React = require('react');
-const ListItem = require('react-material/components/ListItem');
 
 const red = '#da2100';
 const green = '#159600';
@@ -27,15 +26,20 @@ class FileListItem extends React.Component {
       onClick
     } = this.props;
 
+    const liStyle = {
+      listStyleType: 'none',
+      padding: "14px 16px 15px"
+    }
+
     const tempStyles = [styles.fileTempIndicator];
     if(temp){
       tempStyles.push(styles.fileHasTemp);
     }
 
     return (
-      <ListItem onClick={onClick}>
+      <li styles={liStyle} onClick={onClick}>
         <span styles={tempStyles} /> {filename}
-      </ListItem>
+      </li>
     );
   }
 }

src/components/project-list-item.js

@@ -1,7 +1,6 @@
 'use strict';
 
 const React = require('react');
-const ListItem = require('react-material/components/ListItem');
 
 class Project extends React.Component {
   render(){
@@ -10,10 +9,15 @@ class Project extends React.Component {
       children
     } = this.props;
 
+    const liStyle = {
+      listStyleType: 'none',
+      padding: "14px 16px 15px"
+    }
+
     return (
-      <ListItem icon="folder" onClick={onClick}>
+      <li styles={liStyle} icon="folder" onClick={onClick}>
         {children}
-      </ListItem>
+      </li>
     );
   }
 }

src/views/delete-file-overlay.js

@@ -2,7 +2,7 @@
 
 const React = require('react');
 const { createContainer } = require('sovereign');
-const Button = require('react-material/components/Button');
+const Button = require('../components/button');
 
 const Overlay = require('../components/overlay');
 const OverlayTitle = require('../components/overlay-title');

src/views/delete-project-overlay.js

@@ -2,7 +2,7 @@
 
 const React = require('react');
 const { createContainer } = require('sovereign');
-const Button = require('react-material/components/Button');
+const Button = require('../components/button');
 
 const Overlay = require('../components/overlay');
 const OverlayTitle = require('../components/overlay-title');

src/views/download-overlay.js

@@ -2,7 +2,7 @@
 
 const _ = require('lodash');
 const React = require('react');
-const Button = require('react-material/components/Button');
+const Button = require('../components/button');
 const Loader = require('react-loader');
 const { createContainer } = require('sovereign');
 

src/views/help-overlay.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const React = require('react');
-const Button = require('react-material/components/Button');
+const Button = require('../components/button');
 
 const Overlay = require('../components/overlay');
 const OverlayTitle = require('../components/overlay-title');

src/views/new-version-overlay.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const React = require('react');
-const Button = require('react-material/components/Button');
+const Button = require('../components/button');
 
 const Overlay = require('../components/overlay');
 const OverlayTitle = require('../components/overlay-title');

src/views/overwrite-overlay.js

@@ -2,7 +2,7 @@
 
 const React = require('react');
 const { createContainer } = require('sovereign');
-const Button = require('react-material/components/Button');
+const Button = require('../components/button');
 
 const Overlay = require('../components/overlay');
 const OverlayTitle = require('../components/overlay-title');