Update styling and add styling for new mode

src/GroupPage.js

@@ -7,6 +7,7 @@ import Footer from "./Footer";
 
 import "./css/GroupPage.css";
 import "./css/ConfirmationDialog.css";
+import "./css/OptionsListOverlay.css";
 
 import Loader from "./puff-loader.svg"
 
@@ -530,7 +531,7 @@ export default withRouter(class GroupPage extends Component {
 										this.state.editingUser &&
 										<>
 											<div className="overlay" onClick={this.hideEditUserRole}></div>
-											<div className="overlay-content group-page-overlay-content">
+											<div className="overlay-content options-list-overlay-content">
 												{
 													["Owner", "Contributor", "Member", "Remove"].map((role) =>
 														<h3

src/History.js

@@ -192,90 +192,93 @@ export default class History extends Component {
 								<div>
 									{
 										this.state.progressHistoryIncomplete.length > 0 &&
-										<div className="progress-history-container">
+										<>
 											<h2>Incomplete</h2>
-											<div>
-												<h3>Set</h3>
-												<h3>Progress</h3>
-												<h3>Mark</h3>
-												<h3>Grade</h3>
-												<h3>Mode</h3>
+											<div className="progress-history-container progress-history-container--incomplete">
+												<div>
+													<h3>Set</h3>
+													<h3>Progress</h3>
+													<h3>Mark</h3>
+													<h3>Grade</h3>
+													<h3>Mode</h3>
+													<span></span>
+												</div>
+												{
+													this.state.progressHistoryIncomplete.map((progressItem) =>
+														<div key={progressItem.id}>
+															<Link
+																to={`/progress/${progressItem.id}`}
+															>
+																{progressItem.setTitle}
+																{
+																	progressItem.switchLanguage &&
+																	<SwapHorizRoundedIcon />
+																}
+															</Link>
+															<p>{progressItem.percentageProgress}%</p>
+															<p>{progressItem.correct}/{progressItem.progress}</p>
+															<p>{progressItem.grade}%</p>
+															<p>
+																{
+																	progressItem.mode === "questions"
+																	?
+																	<QuestionAnswerRoundedIcon />
+																	:
+																	<PeopleRoundedIcon />
+																}
+															</p>
+															<p>
+																<Button
+																	className="button--no-background"
+																	onClick={() => this.deleteProgress(progressItem.id)}
+																	icon={<DeleteRoundedIcon />}
+																></Button>
+															</p>
+														</div>
+													)
+												}
 											</div>
-											{
-												this.state.progressHistoryIncomplete.map((progressItem) =>
-													<div key={progressItem.id}>
-														<Link
-															to={`/progress/${progressItem.id}`}
-														>
-															{progressItem.setTitle}
-															{
-																progressItem.switchLanguage &&
-																<SwapHorizRoundedIcon />
-															}
-														</Link>
-														<p>{progressItem.percentageProgress}%</p>
-														<p>{progressItem.correct}/{progressItem.progress}</p>
-														<p>{progressItem.grade}%</p>
-														<p>
-															{
-																progressItem.mode === "questions"
-																?
-																<QuestionAnswerRoundedIcon />
-																:
-																<PeopleRoundedIcon />
-															}
-														</p>
-														<p>
-															<Button
-																className="button--no-background"
-																onClick={() => this.deleteProgress(progressItem.id)}
-																icon={<DeleteRoundedIcon />}
-															></Button>
-														</p>
-													</div>
-												)
-											}
-										</div>
+										</>
 									}
 									{
 										this.state.progressHistoryComplete.length > 0 &&
-										<div className="progress-history-container">
+										<>
 											<h2>Completed</h2>
-											<div>
-												<h3>Set</h3>
-												<h3>Progress</h3>
-												<h3>Mark</h3>
-												<h3>Grade</h3>
-												<h3>Mode</h3>
+											<div className="progress-history-container progress-history-container--complete">
+												<div>
+													<h3>Set</h3>
+													<h3>Mark</h3>
+													<h3>Grade</h3>
+													<h3>Mode</h3>
+												</div>
+												{
+													this.state.progressHistoryComplete.map((progressItem) =>
+														<div key={progressItem.id}>
+															<Link
+																to={`/progress/${progressItem.id}`}
+															>
+																{progressItem.setTitle}
+																{
+																	progressItem.switchLanguage &&
+																	<SwapHorizRoundedIcon />
+																}
+															</Link>
+															<p>{progressItem.correct}/{progressItem.progress}</p>
+															<p>{progressItem.grade}%</p>
+															<p>
+																{
+																	progressItem.mode === "questions"
+																	?
+																	<QuestionAnswerRoundedIcon />
+																	:
+																	<PeopleRoundedIcon />
+																}
+															</p>
+														</div>
+													)	
+												}
 											</div>
-											{
-												this.state.progressHistoryComplete.map((progressItem) =>
-													<div key={progressItem.id}>
-														<Link
-															to={`/progress/${progressItem.id}`}
-														>
-															{progressItem.setTitle}
-															{
-																progressItem.switchLanguage &&
-																<SwapHorizRoundedIcon />
-															}
-														</Link>
-														<p>{progressItem.percentageProgress}%</p>
-														<p>{progressItem.correct}/{progressItem.progress}</p>
-														<p>{progressItem.grade}%</p>
-														<p>
-															{
-																progressItem.mode === "questions"
-																?
-																<QuestionAnswerRoundedIcon />
-																:
-																<PeopleRoundedIcon />
-															}
-														</p>
-													</div>
-												)	
-											}
-										</div>
+										</>
 									}
 								</div>
 								:

src/css/App.css

@@ -168,7 +168,7 @@ button:focus-visible, a:focus-visible {
   outline: 1px solid var(--text-color-tinted);
 }
 
-input[type=text] {
+input {
 	border-top: none;
 	border-right: none;
 	border-left: none;
@@ -179,10 +179,20 @@ input[type=text] {
   min-width: 100px;
 }
 
-input[type=text]:focus {
+input:focus {
   outline: none;
 }
 
+input[type="number"] {
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+}
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+  -webkit-appearance: none;
+}
+
 .page-header {
   display: flex;
   flex-direction: row;
@@ -256,6 +266,10 @@ label, p, input[type=text], main > span, main div > span {
   margin-bottom: 8px;
 }
 
+label .MuiIconButton-label > input {
+  z-index: -1;
+}
+
 .stat-row {
 	display: flex;
 	flex-direction: row;
@@ -342,8 +356,8 @@ label, p, input[type=text], main > span, main div > span {
 .progress-history-container > div > * {
 	display: table-cell;
 	word-wrap: break-word;
-	padding-top: 2px;
-	padding-bottom: 2px;
+	padding-top: 6px;
+	padding-bottom: 6px;
 	text-decoration: none;
 	color: inherit;
   border-left: 8px solid transparent;
@@ -357,13 +371,27 @@ label, p, input[type=text], main > span, main div > span {
   text-align: left;
 }
 
+.progress-history-container > div:first-child > * {
+	padding-top: 0;
+}
+
+.progress-history-container > div > *:first-child > svg {
+  vertical-align: top;
+  margin-left: 4px;
+}
+
 .progress-history-container .button.button--no-background {
   padding: 0;
   margin: 0;
 }
 
+.title-icon {
+	color: var(--text-color-tinted);
+	margin-left: 12px;
+}
+
 @media screen and (max-width: 420px) {
-  .progress-history-container > div > *:nth-child(2), .progress-history-container > div > *:nth-last-child(3) {
+  .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) {
     display: none;
   }
 }

src/css/GroupPage.css

@@ -52,29 +52,3 @@
 .group-set-link--enabled > svg {
 	margin-left: 8px;
 }
-
-.group-page-overlay-content {
-	width: fit-content;
-	height: fit-content;
-	padding: 0;
-}
-
-.group-page-overlay-content > * {
-	border-bottom: 1px solid var(--overlay-color);
-	cursor: pointer;
-	margin: 0;
-}
-
-.group-page-overlay-content > *:not(:last-child) {
-	padding: 30px 48px;
-}
-
-.group-page-overlay-content > *:last-child {
-	border: none;
-	padding: 18px 48px;
-}
-
-.no-groups-message-list {
-	padding: 0 18px;
-	margin: 4px 0;
-}

src/css/OptionsListOverlay.css

@@ -0,0 +1,20 @@
+.options-list-overlay-content {
+	width: fit-content;
+	height: fit-content;
+	padding: 0;
+}
+
+.options-list-overlay-content > * {
+	border-bottom: 1px solid var(--overlay-color);
+	cursor: pointer;
+	margin: 0;
+}
+
+.options-list-overlay-content > *:not(:last-child) {
+	padding: 30px 48px;
+}
+
+.options-list-overlay-content > *:last-child {
+	border: none;
+	padding: 18px 48px;
+}

src/css/SetPage.css

@@ -1,8 +1,3 @@
-.set-cloud-icon {
-	color: var(--text-color-tinted);
-	margin-left: 12px;
-}
-
 .vocab-list {
 	display: table;
 	table-layout: fixed;
@@ -50,6 +45,11 @@
 	row-gap: 8px;
 }
 
+.no-groups-message-list {
+	padding: 0 18px;
+	margin: 4px 0;
+}
+
 @media screen and (max-width: 860px) {
 	.set-page-group-overlay-content {
 		width: 75%;

src/css/SliderOverlay.css

@@ -0,0 +1,43 @@
+.slider-overlay-content {
+	width: 80%;
+	max-width: 700px;
+	height: 40%;
+	max-height: 500px;
+	align-items: center;
+}
+
+.slider-overlay-content label {
+	margin: 16px 0 0 0;
+}
+
+.slider-overlay-content .continue-button {
+	margin: 24px 0 0 0;
+}
+
+.slider-overlay-content > .slider-container {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	column-gap: 12px;
+	justify-content: center;
+	align-items: center;
+}
+
+.slider-overlay-content > .slider-container input {
+	min-width: 0;
+	min-width: 26px;
+	width: 26px;
+}
+
+
+@media screen and (max-width: 500px) {
+	.slider-overlay-content {
+		width: 75%;
+	}
+}
+
+@media screen and (max-height: 700px) {
+	.slider-overlay-content {
+		height: 60%;
+	}
+}