Improve settings spacing

Author: marvinhagemeister

src/view/components/RadioBar.tsx

@@ -9,7 +9,7 @@ export interface RadioBarProps {
 
 export function RadioBar(props: RadioBarProps) {
 	return (
-		<div class="radio-bar">
+		<span class="radio-bar">
 			{props.items.map(x => {
 				return (
 					<label key={x.value}>
@@ -25,6 +25,6 @@ export function RadioBar(props: RadioBarProps) {
 					</label>
 				);
 			})}
-		</div>
+		</span>
 	);
 }

src/view/components/devtools.css

@@ -87,6 +87,7 @@
 .checkbox-root {
 	display: flex;
 	font-size: 1rem;
+	padding-bottom: 0.25rem;
 }
 
 .checkbox-wrapper {
@@ -97,10 +98,6 @@
 	align-items: center;
 }
 
-.checkbox-wrapper svg {
-	width: 1.25rem;
-}
-
 .checkbox-wrapper input {
 	opacity: 0;
 	position: absolute;
@@ -1081,24 +1078,19 @@
  * Settings tab
  */
 .settings-tab {
-	padding: 1rem;
-}
-
-.settings-tab-label {
-	display: block;
-	margin-bottom: 0.75rem;
-	font-size: 0.9rem;
+	padding: 1rem 0.8rem;
 }
 
 .settings-tab h2 {
-	margin-top: 3rem;
-	font-size: 2rem;
+	margin-top: 1.4rem;
+	margin-bottom: 1rem;
+	font-size: 1rem;
 	font-weight: lighter;
 }
 
 .settings-tab-message {
 	margin-left: 1.25rem;
-	margin-top: 0.5rem;
+	margin-top: 0.25rem;
 	margin-bottom: 2rem;
 }
 
@@ -1108,7 +1100,17 @@
 
 .settings-tab-description {
 	margin-left: 1.25rem;
-	margin-top: 0.25rem !important;
-	margin-bottom: 2rem;
-	font-size: 0.9rem;
+	margin-top: 0.25rem;
+	font-size: var(--font-xnormal);
+}
+
+.settings-checkbox-setting {
+	margin-bottom: 1rem;
+}
+
+.settings-tab-label {
+	display: inline-block;
+	margin-bottom: 0.75rem;
+	font-size: var(--font-xnormal);
+	margin-right: 0.6rem;
 }

src/view/components/settings/Settings.tsx

@@ -20,41 +20,46 @@ export function Settings() {
 		<PageLayout>
 			<div class="settings-tab">
 				<form>
-					<Checkbox
-						checked={highlightUpdates}
-						onChange={() => {
-							const value = !store.profiler.highlightUpdates.value;
-							store.profiler.highlightUpdates.value = value;
-							store.notify(
-								value ? "start-highlight-updates" : "stop-highlight-updates",
-								null,
-							);
-						}}
-						testId="toggle-highlight-updates"
-					>
-						Highlight updates
-					</Checkbox>
-					<div>
-						<p class="settings-tab-description">
-							Visualize updates by highlighting each component that updated in
-							the page.
-						</p>
+					<div class="settings-checkbox-setting">
+						<Checkbox
+							checked={highlightUpdates}
+							onChange={() => {
+								const value = !store.profiler.highlightUpdates.value;
+								store.profiler.highlightUpdates.value = value;
+								store.notify(
+									value ? "start-highlight-updates" : "stop-highlight-updates",
+									null,
+								);
+							}}
+							testId="toggle-highlight-updates"
+						>
+							Highlight updates
+						</Checkbox>
+						<div>
+							<p class="settings-tab-description">
+								Visualize updates by highlighting each component that updated in
+								the page.
+							</p>
+						</div>
 					</div>
-					<Checkbox
-						checked={renderReasons}
-						onChange={() =>
-							store.profiler.setRenderReasonCapture(!renderReasons)
-						}
-						testId="toggle-render-reason"
-					>
-						Capture render reasons
-					</Checkbox>
-					<div class="settings-tab-message">
-						<Message type="info">
-							All props, state, and hooks of the current node will be compared
-							to the previous node to determine what changed between renders.
-							Timings may be less accurate because of that.
-						</Message>
+					<div class="settings-checkbox-setting">
+						<Checkbox
+							checked={renderReasons}
+							onChange={() =>
+								store.profiler.setRenderReasonCapture(!renderReasons)
+							}
+							testId="toggle-render-reason"
+						>
+							Capture render reasons
+						</Checkbox>
+
+						<div class="settings-tab-message">
+							<Message type="info">
+								All props, state, and hooks of the current node will be compared
+								to the previous node to determine what changed between renders.
+								Timings may be less accurate because of that.
+							</Message>
+						</div>
 					</div>
 
 					<label class="settings-tab-label">Theme:</label>