Merge pull request #300 from parallaxinc/card-component

Card component

Author: urbantumbleweed

src/components/card.js

@@ -0,0 +1,30 @@
+'use strict';
+
+const _ = require('lodash');
+const React = require('react');
+
+const defaultStyle = {
+  boxShadow: '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)',
+  backgroundColor: 'white',
+  padding: '16px',
+  borderRadius: '2px'
+};
+
+class Card extends React.Component {
+  render(){
+    const {
+      style = {},
+      children
+    } = this.props;
+
+    const styles = _.assign({}, defaultStyle, style);
+
+    return (
+      <div style={styles}>
+        {children}
+      </div>
+    );
+  }
+}
+
+module.exports = Card;

src/components/overlay.js

@@ -2,7 +2,8 @@
 
 const _ = require('lodash');
 const React = require('react');
-const Card = require('react-material/components/Card');
+
+const Card = require('./card');
 
 const styles = {
   overlay: {
@@ -31,7 +32,7 @@ class Overlay extends React.Component {
     }
 
     return (
-      <Card styles={cardStyle}>
+      <Card style={cardStyle}>
         {children}
       </Card>
     );

src/components/projects-button.js

@@ -6,10 +6,9 @@ const { MainButton } = require('react-mfb-iceddev');
 const styles = {
   changeFolderButton: {
     position: 'absolute',
-    top: -28,
+    top: 28,
     margin: 0,
-    right: 19,
-    left: 'auto',
+    left: 140,
     transform: 'none'
   }
 };

src/components/sidebar.js

@@ -1,7 +1,8 @@
 'use strict';
 
 const React = require('react');
-const Card = require('react-material/components/Card');
+
+const Card = require('./card');
 
 const styles = {
   card: {
@@ -20,7 +21,7 @@ class Sidebar extends React.Component {
     } = this.props;
 
     return (
-      <Card styles={styles.card}>
+      <Card style={styles.card}>
         {children}
       </Card>
     );

src/views/download-overlay.js

@@ -14,7 +14,9 @@ const ProgressBar = require('../components/progress-bar');
 const styles = {
   overlay: {
     paddingBottom: 40,
-    width: 600
+    width: 600,
+    // keep the download progress pinned to the bottom
+    position: 'relative'
   },
   overlayFooter: {
     marginLeft: 0,