[FIX] Progress history layout

Align table cells correctly

src/History.js

@@ -225,11 +225,13 @@ export default class History extends Component {
 																<PeopleRoundedIcon />
 															}
 														</p>
-														<Button
+														<p>
-															className="button--no-background"
+															<Button
-															onClick={() => this.deleteProgress(progressItem.id)}
+																className="button--no-background"
-															icon={<DeleteRoundedIcon />}
+																onClick={() => this.deleteProgress(progressItem.id)}
-														></Button>
+																icon={<DeleteRoundedIcon />}
+															></Button>
+														</p>
 													</div>
 												)
 											}
@@ -261,13 +263,15 @@ export default class History extends Component {
 														<p>{progressItem.percentageProgress}%</p>
 														<p>{progressItem.correct}/{progressItem.progress}</p>
 														<p>{progressItem.grade}%</p>
-														{
+														<p>
-															progressItem.mode === "questions"
+															{
-															?
+																progressItem.mode === "questions"
-															<QuestionAnswerRoundedIcon />
+																?
-															:
+																<QuestionAnswerRoundedIcon />
-															<PeopleRoundedIcon />
+																:
-														}
+																<PeopleRoundedIcon />
+															}
+														</p>
 													</div>
 												)	
 											}

src/LoggedInHome.js

@@ -300,11 +300,13 @@ export default withRouter(class LoggedInHome extends React.Component {
 														<PeopleRoundedIcon />
 												}
 											</p>
-											<Button
+											<p>
-												className="button--no-background"
+												<Button
-												onClick={() => this.deleteProgress(progressItem.id)}
+													className="button--no-background"
-												icon={<DeleteRoundedIcon />}
+													onClick={() => this.deleteProgress(progressItem.id)}
-											></Button>
+													icon={<DeleteRoundedIcon />}
+												></Button>
+											</p>
 										</div>
 									)
 								}

src/css/App.css

@@ -347,11 +347,19 @@ label, p, input[type=text], main > span, main div > span {
 	text-decoration: none;
 	color: inherit;
   border-left: 8px solid transparent;
+  text-align: center;
+  vertical-align: top;
 }
 
 .progress-history-container > div > *:first-child {
   border-left: 0;
   word-break: break-all;
+  text-align: left;
+}
+
+.progress-history-container .button.button--no-background {
+  padding: 0;
+  margin: 0;
 }
 
 @media screen and (max-width: 420px) {