projectPart2/Problem2: Styled it a bit better

projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.css

@@ -9,25 +9,54 @@
 
 #divImageList > .divImageItem {
     width: 49%;
+    min-width: 450px;
     height: auto;
-    display: flex;
+    display: inline-flex;
     flex-flow: column nowrap;
-    justify-content: flex-start;
-    /*background-color: blue; */
+    background-color: #FAFAFA;
+    border: solid #DBDBDB;
 }
 
 #divImageList > .divImageItem > .divImage {
     max-height: 300px;
+    text-align: left;
 }
 
 #divImageList > .divImageItem > .divImage img {
     display: block;
+    margin: auto;
     max-height: 100%;
     max-width: 100%;
     height: auto;
     width: auto;
 }
 
+#divImageList > .divImageItem > .divImage span {
+    position: center;
+}
+
 #divImageList > .divImageItem > .divPhotoInfo {
-    margin-top: 5px;
+    margin: 5px;
+}
+
+.text-link {
+    color: inherit;
+    text-decoration: inherit;
+    font-weight: bold;
+}
+
+.text-link:hover {
+    text-decoration: underline;
+}
+
+.comment {
+    margin-bottom: 8px;
 }
+
+.comment-date {
+    color: #8E8E8E;
+    font-weight: lighter;
+    text-transform: uppercase;
+    font-size: smaller;
+}
+

projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx

@@ -34,7 +34,7 @@ class UserPhotos extends React.Component {
 
 	getAuthor = (user) => {
 		if (user) {
-			return <Link to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>;
+			return <Link className="text-link" to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>;
 		}
 		return '';
 	};
@@ -46,16 +46,16 @@ class UserPhotos extends React.Component {
 				<>
 					{image.comments.map((comment) => {
 						return (
-							<div key={comment._id}>
-								{comment.comment} <br/>
-								Created on {comment.date_time} by {this.getAuthor(comment.user)}<br/><br/>
+							<div className="comment" key={comment._id}>
+								{this.getAuthor(comment.user)} {comment.comment} <br/>
+								<span className="comment-date">Commented {comment.date_time}</span>
 							</div>
 						);
 					})}
 				</>
 			);
 		}
-		return <>No Comments!</>;
+		return <></>;
 	};
 
 	render() {
@@ -68,9 +68,8 @@ class UserPhotos extends React.Component {
 							<img src={path.join(__dirname, 'images', image.file_name)}/>
 						</div>
 						<div className="divPhotoInfo">
-							<span>Creation date: {image.date_time}</span> <br/>
-							<span>Comments: </span><br/>
 							{this.generateComments(image)}
+							<span>Created {image.date_time}</span>
 						</div>
 					</div>
 				))}