[ENH] Add changelog to home page

src/Home.js

@@ -1,10 +1,12 @@
 import React, { useEffect } from "react";
 import "@material-ui/core";
-import { AccountCircleRounded as AccountCircleIcon } from "@material-ui/icons";
+import { AccountCircleRounded as AccountCircleIcon, ArrowDropDownRounded as ArrowDropDownRoundedIcon } from "@material-ui/icons";
 import "./css/Home.css";
 import NavBar from './NavBar';
 import Footer from "./Footer";
 
+import Collapsible from "react-collapsible";
+
 export default function Home(props) {
 	const navbarItems = [
 		{
@@ -41,6 +43,63 @@ export default function Home(props) {
 					<p>To get started, click login 👆</p>
 					<br/>
 					<p>If you have any feedback, please feel free to email us at <a href="mailto:contact@parandum.mgrove.uk">contact@parandum.mgrove.uk</a>.</p>
+					<br/>
+					<div className="whats-new">
+						<h2>What's New?</h2>
+						<Collapsible open={true} transitionTime={500} easing="ease" trigger={<>v2.3.0<ArrowDropDownRoundedIcon /></>}>
+							<ul>
+								<li>Add option to ignore accents during tests</li>
+								<li>Update cookie notice</li>
+								<li>Update contact email address</li>
+								<li>Add ability to bulk-create sets and bulk-add vocabulary</li>
+								<li>Bug fixes:</li>
+								<ul>
+									<li>Minor styling improvements</li>
+									<li>Efficiency improvements</li>
+									<li>When a set is in a group and the group is deleted, navigating to the home screen no longer throws an error</li>
+								</ul>
+							</ul>
+						</Collapsible>
+						<Collapsible transitionTime={500} easing="ease" trigger={<>v2.2.0<ArrowDropDownRoundedIcon /></>} >
+							<ul>
+								<li>Allow saving a set with no changes</li>
+								<li>Bug fixes:</li>
+								<ul>
+									<li>Minor styling improvements</li>
+									<li>Efficiency improvements</li>
+									<li>Users are now correctly removed from groups</li>
+								</ul>
+							</ul>
+						</Collapsible>
+						<Collapsible transitionTime={500} easing="ease" trigger={<>v2.1.9<ArrowDropDownRoundedIcon /></>}>
+							<ul>
+								<li>Add an optional on-screen configurable keyboard during tests for easier access to accented characters</li>
+							</ul>
+						</Collapsible>
+						<Collapsible transitionTime={500} easing="ease" trigger={<>v2.1.8<ArrowDropDownRoundedIcon /></>}>
+							<ul>
+								<li>Bug fixes:</li>
+								<ul>
+									<li>Test options are now set correctly when starting tests</li>
+								</ul>
+							</ul>
+						</Collapsible>
+						<Collapsible transitionTime={500} easing="ease" trigger={<>v2.1.7<ArrowDropDownRoundedIcon /></>}>
+							<ul>
+								<li>Bug fixes:</li>
+								<ul>
+									<li>Ensure backwards-compatibility with old versions of Parandum</li>
+								</ul>
+							</ul>
+						</Collapsible>
+						<Collapsible transitionTime={500} easing="ease" trigger={<>v2.1.6<ArrowDropDownRoundedIcon /></>}>
+							<ul>
+								<li>Add option to show number of answers for each prompt</li>
+								<li>Ensure test options are carried over to new tests that are made from pre-existing ones (i.e. with the restart test buttons)</li>
+							</ul>
+							{/* TODO: style */}
+						</Collapsible>
+					</div>
 				</div>
 			</main>
 			<Footer />

src/css/App.css

@@ -427,6 +427,16 @@ label .MuiIconButton-label > input {
   opacity: 0.7;
 }
 
+.Collapsible > span {
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+}
+
+.Collapsible .Collapsible__contentInner > ul {
+  margin: 0;
+}
+
 
 @media screen and (max-width: 420px) {
   .progress-history-container > div > *:nth-child(2), .progress-history-container--complete > div > *:nth-last-child(3), .progress-history-container--incomplete > div > *:nth-last-child(4) {