Rearranged Settings UI in prep for custom filter controls

src/devtools/views/Settings/Settings.css

@@ -13,48 +13,73 @@
 }
 
 .Section {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-right: 0.5rem;
-  margin-bottom: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0;
+  border-top: 1px solid var(--color-border);
+}
+.Section:first-of-type {
+  padding-top: 0;
+  border-top: none;
 }
 
 .Header {
-  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
   font-size: var(--font-size-sans-large);
 }
 
 .OptionGroup {
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
+  align-items: center;
   user-select: none;
+  margin: 0 1rem 0.5rem 0;
+}
+.OptionGroup:last-of-type {
+  margin-right: 0;
 }
 
-.Option {
+.OptionLabel {
+  margin-right: 0.5rem;
+  font-size: var(--font-size-sans-normal);
+}
+
+.RadioOption {
   cursor: pointer;
   padding: 0.5rem;
   border: 1px solid var(--color-border);
   border-right: none;
 }
 
-.Option:hover {
+.RadioOption:hover {
   background-color: var(--color-background-hover);
 }
 
-.Option:first-of-type {
+.RadioOption:first-of-type {
   border-top-left-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
 }
 
-.Option:last-of-type {
+.RadioOption:last-of-type {
   border-top-right-radius: 0.25rem;
   border-bottom-right-radius: 0.25rem;
   border-right: 1px solid var(--color-border);
 }
 
+.CheckboxOption {
+  display: block;
+  padding: 0.5rem 0;
+}
+
 .ScreenshotThrottling {
   background-color: var(--color-background-hover);
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
 }
+
+.HRule {
+  height: 1px;
+  background-color: var(--color-border);
+  width: 100%;
+  border: none;
+  margin: 0.5rem 0;
+}

src/devtools/views/Settings/Settings.js

@@ -73,9 +73,10 @@ function Settings(_: {||}) {
   return (
     <div className={styles.Settings}>
       <div className={styles.Section}>
-        <div className={styles.Header}>Theme</div>
+        <div className={styles.Header}>Display preferences</div>
         <div className={styles.OptionGroup}>
-          <label className={styles.Option}>
+          <div className={styles.OptionLabel}>Theme</div>
+          <label className={styles.RadioOption}>
             <input
               type="radio"
               name="Settings-theme"
@@ -85,7 +86,7 @@ function Settings(_: {||}) {
             />{' '}
             Auto
           </label>
-          <label className={styles.Option}>
+          <label className={styles.RadioOption}>
             <input
               type="radio"
               name="Settings-theme"
@@ -95,7 +96,7 @@ function Settings(_: {||}) {
             />{' '}
             Light
           </label>
-          <label className={styles.Option}>
+          <label className={styles.RadioOption}>
             <input
               type="radio"
               name="Settings-theme"
@@ -106,22 +107,9 @@ function Settings(_: {||}) {
             Dark
           </label>
         </div>
-      </div>
-      <div className={styles.Section}>
-        <div className={styles.Header}>Components tree</div>
-        <label>
-          <input
-            type="checkbox"
-            checked={collapseNodesByDefault}
-            onChange={updateCollapseNodesByDefault}
-          />{' '}
-          Collapse tree by default
-        </label>
-      </div>
-      <div className={styles.Section}>
-        <div className={styles.Header}>Display density</div>
         <div className={styles.OptionGroup}>
-          <label className={styles.Option}>
+          <div className={styles.OptionLabel}>Display density</div>
+          <label className={styles.RadioOption}>
             <input
               type="radio"
               name="Settings-displayDensity"
@@ -131,7 +119,7 @@ function Settings(_: {||}) {
             />{' '}
             Compact
           </label>
-          <label className={styles.Option}>
+          <label className={styles.RadioOption}>
             <input
               type="radio"
               name="Settings-displayDensity"
@@ -143,19 +131,30 @@ function Settings(_: {||}) {
           </label>
         </div>
       </div>
+
+      <div className={styles.Section}>
+        <div className={styles.Header}>Components tree</div>
+        <label className={styles.CheckboxOption}>
+          <input
+            type="checkbox"
+            checked={collapseNodesByDefault}
+            onChange={updateCollapseNodesByDefault}
+          />{' '}
+          Collapse newly added components by default
+        </label>
+      </div>
+
       {store.supportsCaptureScreenshots && (
-        <div>
-          <div className={styles.Section}>
-            <div className={styles.Header}>Profiler</div>
-            <label>
-              <input
-                type="checkbox"
-                checked={captureScreenshots}
-                onChange={updateCaptureScreenshotsWhileProfiling}
-              />{' '}
-              Capture screenshots while profiling
-            </label>
-          </div>
+        <div className={styles.Section}>
+          <div className={styles.Header}>Profiler</div>
+          <label className={styles.CheckboxOption}>
+            <input
+              type="checkbox"
+              checked={captureScreenshots}
+              onChange={updateCaptureScreenshotsWhileProfiling}
+            />{' '}
+            Capture screenshots while profiling
+          </label>
           {captureScreenshots && (
             <div className={styles.ScreenshotThrottling}>
               Screenshots will be throttled in order to reduce the negative