fix(nightmode): improved night mode for newly added pages/features

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/App.vue

@@ -482,7 +482,7 @@ h4.section-title {
 }
 
 .section-description {
-	font-size: 17px;
+	font-size: 16px;
 	margin-bottom: 5px;
 }
 </style>

frontend/src/components/Modal.vue

@@ -60,14 +60,17 @@ export default {
 
 	p,
 	label,
-	td,
+	td {
+		color: #ddd !important;
+	}
+
 	h1,
 	h2,
 	h3,
 	h4,
 	h5,
 	h6 {
-		color: #ddd !important;
+		color: #fff !important;
 	}
 }
 

frontend/src/pages/Home/index.vue

@@ -326,13 +326,18 @@ html {
 		background-color: $night-mode-secondary;
 	}
 
-	.card-content .icons i {
+	.card-content .icons i,
+	.group-title i {
 		color: #ddd;
 	}
 
 	.card-image .image {
 		background-color: #333;
 	}
+
+	.card-content .under-content .hostedBy {
+		color: #ddd;
+	}
 }
 
 @media only screen and (min-width: 1200px) {

frontend/src/pages/Settings/index.vue

@@ -116,6 +116,12 @@ export default {
 <style lang="scss" scoped>
 @import "../../styles/global.scss";
 
+.night-mode .content {
+	background-color: #222;
+	padding: 20px;
+	border-radius: 3px;
+}
+
 .container {
 	@media only screen and (min-width: 900px) {
 		width: 962px;
@@ -134,7 +140,6 @@ export default {
 	flex-direction: column;
 
 	.nav-links {
-		height: 100%;
 		width: 250px;
 		margin-right: 64px;
 
@@ -162,6 +167,7 @@ export default {
 
 	.content {
 		margin: 24px 0;
+		height: fit-content;
 
 		label {
 			font-size: 14px;
@@ -188,10 +194,4 @@ export default {
 		}
 	}
 }
-
-.night-mode {
-	label {
-		color: #ddd !important;
-	}
-}
 </style>

frontend/src/pages/Settings/tabs/Profile.vue

@@ -186,6 +186,10 @@ export default {
 <style lang="scss" scoped>
 @import "../../../styles/global.scss";
 
+.content .control {
+	margin-bottom: 15px;
+}
+
 .avatar-select {
 	display: flex;
 	flex-direction: column;

frontend/src/pages/Settings/tabs/Security.vue

@@ -265,4 +265,20 @@ export default {
 .section-description {
 	margin-bottom: 0 !important;
 }
+
+.night-mode {
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		color: #fff !important;
+	}
+
+	p,
+	label {
+		color: #ddd !important;
+	}
+}
 </style>