Style pages

src/css/ConfirmationDialog.css

@@ -0,0 +1,14 @@
+.confirmation-dialog {
+	width: 60%;
+	max-width: 290px;
+	height: 80%;
+	max-height: 130px;
+}
+
+.confirmation-dialog > h3 {
+	margin: 0 0 16px 0;
+}
+
+.confirmation-dialog > .button-container {
+	justify-content: flex-end;
+}

src/css/Form.css

@@ -0,0 +1,62 @@
+.form {
+	display: flex;
+	column-gap: 64px;
+	flex-direction: row;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+}
+
+.form.create-set-vocab-list {
+	flex-direction: column;
+}
+
+.create-set-header, .form .create-set-input-row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.create-set-header > * {
+	margin-top: 24px;
+	margin-bottom: 4px;
+}
+
+.create-set-header > *, .form .create-set-input-row > * {
+	flex: 1;
+	flex-basis: 0;
+}
+
+.form .checkbox-list-container {
+	flex: 1;
+}
+
+.form .checkbox-list {
+	display: grid;
+	grid-column-gap: 40px;
+	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+}
+
+.form .checkbox-list-container > a {
+	color: inherit;
+	text-decoration: none;
+}
+
+.form h3 {
+	display: flex;
+	column-gap: 4px;
+	flex-direction: row;
+	align-content: center;
+}
+
+.create-set-input-row > input[type=text]:first-child, .create-set-header > *:first-child {
+	margin-right: 4px;
+}
+
+.create-set-input-row > input[type=text]:last-child, .create-set-header > *:last-child {
+	margin-left: 4px;
+}
+
+input[type=text].set-title-input {
+	flex: 1;
+	width: 0;
+}

src/css/GroupPage.css

@@ -0,0 +1,80 @@
+.group-edit-icon {
+	margin-left: 12px;
+	cursor: pointer;
+}
+
+.group-name-header-input-container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	flex: 1;
+}
+
+.group-name-header-input-container > input {
+	margin-right: 8px;
+	padding-left: 0px;
+	flex: 1;
+	width: 0;
+}
+
+.group-name-header-input-container > input, .group-name-header-input-container > .button {
+	margin-top: -1px;
+	margin-bottom: -3px;
+}
+
+.group-role-header {
+	margin-bottom: 8px;
+}
+
+.group-links-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	column-gap: 42px;
+}
+
+.group-set-link > a {
+	text-decoration: none;
+	color: inherit;
+}
+
+.group-set-link {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+.group-set-link--enabled {
+	cursor: pointer;
+}
+
+.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/History.css

@@ -0,0 +1,21 @@
+.progress-history-container {
+	display: table;
+	table-layout: auto;
+	column-gap: 10px;
+	width: 100%;
+	margin-top: 24px;
+	row-gap: 8px;
+}
+
+.progress-history-container > div {
+	display: table-row;
+}
+
+.progress-history-container > div > * {
+	display: table-cell;
+	word-wrap: break-word;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	text-decoration: none;
+	color: inherit;
+}

src/css/LoggedInHome.css

@@ -0,0 +1,14 @@
+.progress-history-container--home {
+	margin-top: 0;
+	margin-bottom: 18px;
+}
+
+.progress-history-container--home > h2 {
+	margin-top: 0;
+}
+
+.page-intro {
+	margin-top: 18px;
+	width: fit-content;
+	padding-right: 8px;
+}

src/css/Login.css

@@ -0,0 +1,142 @@
+.login-overlay-content {
+	width: 40%;
+	max-width: 500px;
+	height: 60%;
+	max-height: 500px;
+}
+
+.firebaseui-container form button.mdl-button, .firebaseui-container form .firebaseui-idp-button, .firebaseui-button.mdl-button {
+	border-radius: 30px;
+}
+
+.firebaseui-card-actions {
+	padding-bottom: 0 !important;
+}
+
+.firebaseui-button {
+	margin-left: 0 !important;
+}
+
+.firebaseui-form-actions > *:first-child {
+	margin-right: 2px !important;
+}
+
+.firebaseui-form-actions > *:last-child {
+	margin-left: 2px !important;
+}
+
+.firebaseui-form-actions {
+	display: flex !important;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+#firebaseui_container .mdl-card.mdl-shadow--2dp {
+	box-shadow: none;
+}
+
+.firebaseui-container, .mdl-card, .firebaseui-input, .firebaseui-subtitle, .firebaseui-title, .firebaseui-text, .firebaseui-input-invalid {
+	color: var(--text-color) !important;
+}
+
+.firebaseui-label {
+	color: var(--text-color-tinted) !important;
+}
+
+.firebaseui-textfield.mdl-textfield .firebaseui-input {
+	border-color: var(--text-color-tinted) !important;
+}
+
+.firebaseui-container {
+	background-color: var(--background-color) !important;
+}
+
+.mdl-button--raised.mdl-button--colored:hover {
+	background-color: var(--primary-color-tinted) !important;
+}
+
+.mdl-button--raised.mdl-button--colored, .firebaseui-textfield.mdl-textfield .firebaseui-label::after, .mdl-progress.mdl-progress--indeterminate > .bar1, .mdl-progress.mdl-progress__indeterminate > .bar1 {
+	background-color: var(--primary-color) !important;
+}
+
+.firebaseui-info-bar {
+	background-color: var(--overlay-color) !important;
+	border: none !important;
+}
+
+.firebaseui-link, .mdl-button--primary.mdl-button--primary {
+	color: var(--primary-color) !important;
+}
+
+.firebaseui-input-toggle-on {
+    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/visibility_white_24dp.png) !important;
+}
+
+.firebaseui-input-toggle-off {
+    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/visibility_off_white_24dp.png) !important;
+}
+
+.firebaseui-title {
+	text-align: center !important;
+}
+
+@media screen and (max-width: 1080px) {
+	.login-overlay-content {
+		width: 50%;
+	}
+}
+@media screen and (max-width: 860px) {
+	.login-overlay-content {
+		width: 80%;
+	}
+}
+@media screen and (max-width: 680px) {
+	.login-overlay-content {
+		width: 70%;
+	}
+}
+@media screen and (max-width: 420px) {
+	.firebaseui-card-content, .firebaseui-card-actions {
+		padding-left: 8px !important;
+		padding-right: 8px !important;
+	}
+}
+@media screen and (max-width: 300px) {
+	.firebaseui-card-content, .firebaseui-card-actions {
+		padding-left: 0 !important;
+		padding-right: 0 !important;
+	}
+}
+
+@media screen and (max-height: 800px) {
+	.login-overlay-content {
+		height: 70%;
+	}
+}
+@media screen and (max-height: 700px) {
+	.login-overlay-content {
+		height: 80%;
+	}
+}
+@media screen and (max-height: 570px) {
+	.login-overlay-content {
+		display: block;
+		width: 70%;
+	}
+}
+@media screen and (max-height: 420px) {
+	.login-overlay-content {
+		height: 70%;
+	}
+}
+@media screen and (max-height: 300px) {
+	.login-overlay-content {
+		height: 60%;
+	}
+}
+@media screen and (max-height: 200px) {
+	.login-overlay-content {
+		height: 50%;
+	}
+}

src/css/NavBar.css

@@ -0,0 +1,34 @@
+#banner-logo {
+	width: 200px;
+	display: initial;
+}
+
+#small-logo {
+	width: 55px;
+	display: none;
+}
+
+nav {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: space-between;
+	align-items: center;
+	margin: 24px;
+}
+
+.navbar-items, nav > a {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+}
+
+@media screen and (max-width: 660px) {
+	#banner-logo {
+		display: none;
+	}
+	#small-logo {
+		display: initial;
+	}
+}

src/css/PopUp.css

@@ -0,0 +1,45 @@
+.overlay {
+	width: 100vw;
+	height: 100vh;
+	position: fixed;
+	left: 0;
+	top: 0;
+	z-index: 10;
+	background-color: var(--overlay-color);
+	opacity: 0.65;
+	cursor: default;
+}
+
+.popup-close-button {
+	position: absolute;
+	top: 24px;
+	right: 24px;
+}
+
+.popup-close-button > svg.MuiSvgIcon-root {
+	font-size: 32px;
+	color: var(--text-color-tinted);
+}
+
+.overlay-content {
+	position: absolute;
+	margin: auto;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 20;
+	background: var(--background-color);
+	border-radius: 12px;
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+	text-align: center;
+	flex-wrap: nowrap;
+	justify-content: center;
+	padding: 32px;
+}
+
+.overlay-content > h1 {
+	margin-top: 0;
+}

src/css/Progress.css

@@ -0,0 +1,113 @@
+.answer-input-container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+.answer-input-container > input {
+	max-width: 500px;
+	flex-grow: 1;
+	margin-right: 8px;
+}
+
+.answer-input-container.answer-input-container--answer-entered > input {
+	caret-color: transparent;
+}
+
+input.answer-input--correct {
+	color: #3ac535;
+}
+
+input.answer-input--incorrect {
+	color: #ff5252;
+}
+
+.progress-end-incorrect-answers {
+	display: table;
+	table-layout: fixed;
+	column-gap: 10px;
+	width: 100%;
+	margin-top: 24px;
+	row-gap: 8px;
+}
+
+.progress-end-incorrect-answers > div {
+	display: table-row;
+}
+
+.progress-end-incorrect-answers > div > * {
+	display: table-cell;
+	word-wrap: break-word;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+
+.progress-end-button-container {
+	position: fixed;
+	left: 0;
+	right: 0;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 1080px;
+	bottom: 0;
+	width: 100%;
+	height: 0;
+}
+
+.progress-end-button-container > .button {
+	margin: 48px;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+}
+
+.progress-settings-overlay-content {
+	width: 80%;
+	max-width: 700px;
+	height: 70%;
+	max-height: 500px;
+	align-items: center;
+}
+
+.progress-settings-overlay-content > .settings-themes-container {
+	justify-content: center;
+	width: 75%;
+}
+
+.form-submit {
+	display: none;
+}
+
+@media screen and (max-width: 720px) {
+	.progress-end-button-container > .button {
+		margin: 24px;
+	}
+}
+
+@media screen and (max-width: 660px) {
+	.progress-settings-overlay-content > .settings-themes-container {
+		width: 100%;
+	}
+}
+
+@media screen and (max-width: 500px) {
+	.progress-settings-overlay-content {
+		width: 75%;
+	}
+}
+
+@media screen and (max-height: 700px) {
+	.progress-settings-overlay-content {
+		height: 75%;
+	}
+}
+
+@media screen and (max-height: 600px) {
+	.progress-end-button-container > .button {
+		margin: 24px;
+	}
+	.progress-settings-overlay-content {
+		justify-content: flex-start;
+	}
+}

src/css/SetPage.css

@@ -0,0 +1,62 @@
+.set-cloud-icon {
+	color: var(--text-color-tinted);
+	margin-left: 12px;
+}
+
+.vocab-list {
+	display: table;
+	table-layout: fixed;
+	column-gap: 10px;
+	width: 100%;
+	margin-top: 24px;
+	row-gap: 8px;
+}
+
+.vocab-list > div {
+	display: table-row;
+}
+
+.vocab-list > div > * {
+	display: table-cell;
+	word-wrap: break-word;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+
+.vocab-list > div.vocab-list-header > * {
+	padding-bottom: 8px;
+}
+
+.vocab-list > div > *:first-child {
+	border-right: 8px solid transparent;
+}
+
+.set-page-group-overlay-content {
+	width: 70%;
+	max-width: 800px;
+	height: 70%;
+	max-height: 600px;
+	align-items: center;
+}
+
+.set-page-overlay-group-container {
+	width: 80%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+	column-gap: 24px;
+	row-gap: 8px;
+}
+
+@media screen and (max-width: 860px) {
+	.set-page-group-overlay-content {
+		width: 75%;
+	}
+}
+@media screen and (max-height: 700px) {
+	.set-page-group-overlay-content {
+		height: 75%;
+	}
+}

src/css/SettingsContent.css

@@ -0,0 +1,24 @@
+.settings-themes-container {
+	display: flex;
+	flex-direction: row;
+	column-gap: 16px;
+	row-gap: 16px;
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+.settings-header, .settings-sound-container, .settings-themes-container {
+	margin-bottom: 36px;
+	margin-top: 0;
+}
+
+.settings-theme-header {
+	margin-top: 0;
+}
+
+.settings-save-container {
+	display: flex;
+	flex-direction: row;
+	column-gap: 8px;
+	row-gap: 4px;
+}

src/css/UserGroups.css

@@ -0,0 +1,89 @@
+.user-groups-overlay-content {
+	width: 40%;
+	max-width: 500px;
+	height: 50%;
+	max-height: 400px;
+	align-items: center;
+}
+
+.user-groups-overlay-input-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	width: 80%;
+}
+
+.user-groups-overlay-input-container > *:first-child {
+	margin-right: 4px;
+}
+
+.user-groups-overlay-input-container > *:last-child {
+	margin-left: 4px;
+}
+
+.user-groups-overlay-input-container > input {
+	flex: 1;
+}
+
+.user-group-role-icon {
+	color: var(--text-color-tinted);
+	margin-left: 12px;
+	display: flex;
+	align-items: center;
+}
+
+.user-group-role-icon > svg {
+	height: 20px;
+}
+
+.user-groups-list {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	column-gap: 64px;
+	row-gap: 24px;
+}
+
+.user-groups-list > a {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.user-groups-list > a {
+	color: inherit;
+	text-decoration: none;
+}
+
+@media screen and (max-width: 1080px) {
+	.user-groups-overlay-content {
+		width: 50%;
+	}
+}
+@media screen and (max-width: 860px) {
+	.user-groups-overlay-content {
+		width: 70%;
+	}
+}
+@media screen and (max-width: 560px) {
+	.user-groups-overlay-input-container {
+		width: 90%;
+	}
+	.user-groups-overlay-input-container > .button {
+		margin-top: 4px;
+	}
+	.user-groups-overlay-input-container > input {
+		width: 100%;
+	}
+}
+@media screen and (max-width: 420px) {
+	.user-groups-overlay-input-container {
+		width: 100%;
+	}
+}
+@media screen and (max-width: 360px) {
+	.user-groups-overlay-input-container {
+		flex-direction: column;
+	}
+}

src/css/UserSets.css

@@ -0,0 +1,22 @@
+.user-sets-list {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	column-gap: 64px;
+	row-gap: 24px;
+}
+
+.user-sets-row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.user-sets-row > * {
+	color: inherit;
+	text-decoration: none;
+}
+
+.user-sets-row > *:first-child {
+	padding: 0 12px 0 0;
+}