Style fixes

webclient/src/App.js

@@ -178,7 +178,9 @@ function App() {
 	return (
 		<div className={theme}>
 			{settingsOpen &&
-				<div className="modal-overlay" onClick={() => setSettingsOpen(false)}>
+				<>
+					<div className="modal-overlay" onClick={() => setSettingsOpen(false)}></div>
+
 					<div className="modal-content" onClick={e => e.stopPropagation()}>
 						<button className="close-modal-button" onClick={() => setSettingsOpen(false)}>&times;</button>
 						<h3>Settings</h3>
@@ -202,11 +204,10 @@ function App() {
 
 						<div className="setting-group">
 							<h4>Feed</h4>
-							<div className="font-option">
+							<div className="font-option gap">
 								<input className="checkbox" type="checkbox" id="filter-smallweb" checked={filterSmallweb} onChange={handleFilterChange} />
 								<label htmlFor="filter-smallweb">Small websites only</label>
 							</div>
-							<br/>
 							<div className="font-option">
 								<input className="checkbox" type="checkbox" id="filter-hackernews" name="feed-source" checked={feedSources.hackernews} onChange={() => handleFeedSourceChange('hackernews')} />
 								<label htmlFor="filter-hackernews">Hacker News</label>
@@ -265,7 +266,7 @@ function App() {
 							</div>
 						</div>
 					</div>
-				</div>
+				</>
 			}
 
 			{waitingWorker &&

webclient/src/Style-black.css

@@ -13,7 +13,7 @@
 
 .black .menu button,
 .black .story-text button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
@@ -82,7 +82,7 @@
 }
 
 .black .update-banner button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
@@ -94,7 +94,7 @@
 }
 
 .black .modal-content button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 }
 

webclient/src/Style-dark.css

@@ -13,7 +13,7 @@
 
 .dark .menu button,
 .dark .story-text button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
@@ -78,19 +78,19 @@
 }
 
 .dark .update-banner button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
 
 .dark .modal-content {
-	background: #333;
+	background: #222;
 	border-color: #828282;
 	color: #ddd;
 }
 
 .dark .modal-content button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 }
 

webclient/src/Style-light.css

@@ -86,6 +86,7 @@ pre {
 
 .slogan {
 	color: #828282;
+	margin-bottom: 0.5rem;
 }
 
 .theme {
@@ -485,6 +486,10 @@ button.comment {
 	margin-bottom: 0.25rem;
 }
 
+.modal-content .gap {
+	margin-bottom: 0.75rem;
+}
+
 .close-modal-button {
 	position: absolute;
 	top: 0.5rem;

webclient/src/Style-red.css

@@ -22,7 +22,7 @@
 
 .red .menu button,
 .red .story-text button {
-	background-color: #440000;
+	background-color: #220000;
 	border-color: #b00;
 	color: #b00;
 }
@@ -100,19 +100,19 @@
 }
 
 .red .update-banner button {
-	background-color: #440000;
+	background-color: #220000;
 	border-color: #b00;
 	color: #d00;
 }
 
 .red .modal-content {
-	background: #300;
+	background: #100;
 	border-color: #690000;
 	color: #b00;
 }
 
 .red .modal-content button {
-	background-color: #440000;
+	background-color: #220000;
 	border-color: #b00;
 }