Fix spacing of Advanced section

desktop · Jan 10, 2020 · 5bbc79d · 5bbc79d
1 parent 7e50c7d
commit 5bbc79d
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 58 deletions.
diff --git a/app/src/ui/preferences/advanced.tsx b/app/src/ui/preferences/advanced.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 import { DialogContent } from '../dialog'
 import { Checkbox, CheckboxValue } from '../lib/checkbox'
 import { LinkButton } from '../lib/link-button'
-import { Row } from '../../ui/lib/row'
 import { SamplesURL } from '../../lib/stats'
 import { UncommittedChangesStrategyKind } from '../../models/uncommitted-changes-strategy'
 
@@ -102,55 +101,58 @@ export class Advanced extends React.Component<
   public render() {
     return (
       <DialogContent>
-        <h2>If I have changes and I switch branches...</h2>
-        <Row>
-          <input
-            type="radio"
-            id={UncommittedChangesStrategyKind.AskForConfirmation}
-            value={UncommittedChangesStrategyKind.AskForConfirmation}
-            checked={
-              this.state.uncommittedChangesStrategyKind ===
-              UncommittedChangesStrategyKind.AskForConfirmation
-            }
-            onChange={this.onUncommittedChangesStrategyKindChanged}
-          />
-          <label htmlFor={UncommittedChangesStrategyKind.AskForConfirmation}>
-            Ask me where I want the changes to go
-          </label>
-        </Row>
-        <Row>
-          <input
-            type="radio"
-            id={UncommittedChangesStrategyKind.MoveToNewBranch}
-            value={UncommittedChangesStrategyKind.MoveToNewBranch}
-            checked={
-              this.state.uncommittedChangesStrategyKind ===
-              UncommittedChangesStrategyKind.MoveToNewBranch
-            }
-            onChange={this.onUncommittedChangesStrategyKindChanged}
-          />
-          <label htmlFor={UncommittedChangesStrategyKind.MoveToNewBranch}>
-            Always bring my changes to my new branch
-          </label>
-        </Row>
-        <Row>
-          <input
-            type="radio"
-            id={UncommittedChangesStrategyKind.StashOnCurrentBranch}
-            value={UncommittedChangesStrategyKind.StashOnCurrentBranch}
-            checked={
-              this.state.uncommittedChangesStrategyKind ===
-              UncommittedChangesStrategyKind.StashOnCurrentBranch
-            }
-            onChange={this.onUncommittedChangesStrategyKindChanged}
-          />
-          <label htmlFor={UncommittedChangesStrategyKind.StashOnCurrentBranch}>
-            Always stash and leave my changes on the current branch
-          </label>
-        </Row>
-
-        <h2>Show a confimration dialog before...</h2>
-        <Row>
+        <div className="advanced-section">
+          <h2>If I have changes and I switch branches...</h2>
+          <div className="radio-component">
+            <input
+              type="radio"
+              id={UncommittedChangesStrategyKind.AskForConfirmation}
+              value={UncommittedChangesStrategyKind.AskForConfirmation}
+              checked={
+                this.state.uncommittedChangesStrategyKind ===
+                UncommittedChangesStrategyKind.AskForConfirmation
+              }
+              onChange={this.onUncommittedChangesStrategyKindChanged}
+            />
+            <label htmlFor={UncommittedChangesStrategyKind.AskForConfirmation}>
+              Ask me where I want the changes to go
+            </label>
+          </div>
+          <div className="radio-component">
+            <input
+              type="radio"
+              id={UncommittedChangesStrategyKind.MoveToNewBranch}
+              value={UncommittedChangesStrategyKind.MoveToNewBranch}
+              checked={
+                this.state.uncommittedChangesStrategyKind ===
+                UncommittedChangesStrategyKind.MoveToNewBranch
+              }
+              onChange={this.onUncommittedChangesStrategyKindChanged}
+            />
+            <label htmlFor={UncommittedChangesStrategyKind.MoveToNewBranch}>
+              Always bring my changes to my new branch
+            </label>
+          </div>
+          <div className="radio-component">
+            <input
+              type="radio"
+              id={UncommittedChangesStrategyKind.StashOnCurrentBranch}
+              value={UncommittedChangesStrategyKind.StashOnCurrentBranch}
+              checked={
+                this.state.uncommittedChangesStrategyKind ===
+                UncommittedChangesStrategyKind.StashOnCurrentBranch
+              }
+              onChange={this.onUncommittedChangesStrategyKindChanged}
+            />
+            <label
+              htmlFor={UncommittedChangesStrategyKind.StashOnCurrentBranch}
+            >
+              Always stash and leave my changes on the current branch
+            </label>
+          </div>
+        </div>
+        <div className="advanced-section">
+          <h2>Show a confirmation dialog before...</h2>
           <Checkbox
             label="Removing repositories"
             value={
@@ -160,8 +162,6 @@ export class Advanced extends React.Component<
             }
             onChange={this.onConfirmRepositoryRemovalChanged}
           />
-        </Row>
-        <Row>
           <Checkbox
             label="Discarding changes"
             value={
@@ -171,18 +171,16 @@ export class Advanced extends React.Component<
             }
             onChange={this.onConfirmDiscardChangesChanged}
           />
-        </Row>
-        <Row>
           <Checkbox
             label="Force pushing"
             value={
               this.state.confirmForcePush ? CheckboxValue.On : CheckboxValue.Off
             }
             onChange={this.onConfirmForcePushChanged}
           />
-        </Row>
-        <h2>Usage</h2>
-        <Row>
+        </div>
+        <div className="advanced-section">
+          <h2>Usage</h2>
           <Checkbox
             label={this.reportDesktopUsageLabel()}
             value={
@@ -192,7 +190,7 @@ export class Advanced extends React.Component<
             }
             onChange={this.onReportingOptOutChanged}
           />
-        </Row>
+        </div>
       </DialogContent>
     )
   }

diff --git a/app/styles/ui/_preferences.scss b/app/styles/ui/_preferences.scss
@@ -5,6 +5,31 @@
       border-left: var(--base-border);
       flex: 1;
     }
+
+    .advanced-section {
+      &:not(:last-child) {
+        margin-bottom: var(--spacing-double);
+      }
+
+      .checkbox-component:not(:last-child) {
+        margin-bottom: var(--spacing-half);
+      }
+
+      .radio-component {
+        &:not(:last-child) {
+          margin-bottom: var(--spacing-half);
+        }
+
+        input {
+          margin: 0;
+
+          // Only add a right margin if there's a label attached to it
+          &:not(:last-child) {
+            margin-right: var(--spacing-half);
+          }
+        }
+      }
+    }
   }
 
   .tab-bar {