Merge pull request #10 from Schwartz10/UI

adds some design on the home screen
reard96 · Jan 20, 2018 · 0568920 · 0568920
2 parents 59306d8 + 3e04188
commit 0568920
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 39 deletions.
diff --git a/src/App.css b/src/App.css
@@ -66,3 +66,25 @@ code {
   height: 16px;
   margin-right: 10px;
 }
+
+#navigation {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-left: 10em;
+  margin-right: 10em;
+  margin-top: 3em;
+}
+
+#main-header {
+  font-size: 3em;
+}
+
+#post-container {
+  display: flex;
+  justify-content: center;
+}
+
+.single-view-header {
+  text-align: center;
+}
diff --git a/src/components/Drawer.js b/src/components/Drawer.js
@@ -4,6 +4,14 @@ import MenuItem from 'material-ui/MenuItem';
 import RaisedButton from 'material-ui/RaisedButton';
 import { Link } from 'react-router-dom'
 
+const styles = {
+  button: {
+    width: "7em",
+    height: "3em",
+  },
+};
+
+
 export default class DrawerNav extends React.Component {
 
   constructor(props) {
@@ -19,6 +27,8 @@ export default class DrawerNav extends React.Component {
     return (
       <div>
         <RaisedButton
+          buttonStyle={styles.button}
+          primary={true}
           label="Menu"
           onClick={this.handleToggle}
         />

diff --git a/src/components/Explore.js b/src/components/Explore.js
@@ -19,20 +19,19 @@ class Explore extends Component {
   render(){
     return(
       <div>
-        <h1>Explore</h1>
-        {this.props.posts.length > 0 &&
-          this.props.posts.map(post =>
-            <div key={post.username}>
-              <Post
-                username={post.username}
-                tokenPot={post.tokenPot}
-                postUrl={post.postUrl}
-                address={post.address}
-                isPreview={false}
-              />
-              <br />
-            </div>
-        )}
+          <h1 className="single-view-header">Explore</h1>
+          {this.props.posts.length > 0 &&
+            this.props.posts.map(post =>
+              <div id="post-container" key={post.username}>
+                  <Post
+                    username={post.username}
+                    tokenPot={post.tokenPot}
+                    postUrl={post.postUrl}
+                    address={post.address}
+                    isPreview={false}
+                  />
+              </div>
+          )}
       </div>
     )
   }

diff --git a/src/components/LikePhoto.js b/src/components/LikePhoto.js
@@ -11,7 +11,7 @@ class LikePhoto extends Component {
   render(){
     return(
       <div>
-      <RaisedButton label="like" onClick={e => this.props.like(e, this.props.postUrl, this.props.postAddress, this.props.contract.likePost, this.props.accounts[0])}/>
+      <RaisedButton primary={true} label="like" onClick={e => this.props.like(e, this.props.postUrl, this.props.postAddress, this.props.contract.likePost, this.props.accounts[0])}/>
       </div>
     )
   }

diff --git a/src/components/Post.js b/src/components/Post.js
@@ -3,31 +3,34 @@ import {Card, CardActions, CardHeader, CardMedia, CardTitle } from 'material-ui/
 import LikePhoto from './LikePhoto';
 
 const cardStyle = {
-  width: '30vw'
+  width: '40vw'
 }
 
 const Post = props => (
-  <Card style={cardStyle}>
-    <CardHeader
-      title={props.username}
-    />
-    <CardMedia
-      overlay={<CardTitle title={'Total InstaCoins: ' + props.tokenPot} />}
-    >
-      <img src={props.postUrl} alt="" />
-    </CardMedia>
-    {!props.isPreview &&
-      <div>
-        <CardTitle title="Like this pic?"/>
-        <CardActions>
-          <LikePhoto
-            postUrl={props.postUrl}
-            postAddress={props.address}
-          />
-        </CardActions>
-      </div>
-    }
-  </Card>
+  <div>
+    <Card style={cardStyle}>
+      <CardHeader
+        title={props.username}
+      />
+      <CardMedia
+        overlay={<CardTitle title={'Total InstaCoins: ' + props.tokenPot} />}
+      >
+        <img src={props.postUrl} alt="" />
+      </CardMedia>
+      {!props.isPreview &&
+        <div>
+          <CardTitle title="Like this pic?"/>
+          <CardActions>
+            <LikePhoto
+              postUrl={props.postUrl}
+              postAddress={props.address}
+            />
+          </CardActions>
+        </div>
+      }
+    </Card>
+    <br /><br />
+  </div>
 )
 
 export default Post;
diff --git a/src/components/Routes.js b/src/components/Routes.js
@@ -9,6 +9,13 @@ import CreatePost from './CreatePost';
 import RaisedButton from 'material-ui/RaisedButton';
 import { Link } from 'react-router-dom';
 
+const styles = {
+  button: {
+    width: "7em",
+    height: "3em",
+  },
+};
+
 export default class Routes extends Component {
   componentDidMount () {}
 
@@ -17,8 +24,14 @@ export default class Routes extends Component {
       <Router history={history}>
           <div>
             <span>
-            <Drawer />
-            <Link to="/" ><RaisedButton label="home" /> </Link>
+            <div id="navigation">
+              <Drawer />
+              <h1 id="main-header">InstaCoin</h1>
+              <Link to="/" >
+                <RaisedButton buttonStyle={styles.button}
+                primary={true} label="home" />
+              </Link>
+            </div>
             </span>
             <Switch>
               <Route exact path='/profile' component={Account} />
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ class LikePhoto extends Component { @@
       render(){
         return(
           <div>
-          <RaisedButton label="like" onClick={e => this.props.like(e, this.props.postUrl, this.props.postAddress, this.props.contract.likePost, this.props.accounts[0])}/>
+          <RaisedButton primary={true} label="like" onClick={e => this.props.like(e, this.props.postUrl, this.props.postAddress, this.props.contract.likePost, this.props.accounts[0])}/>
           </div>
         )
       }
@@ Expand Down @@