Settings: Matched GitHub's settings layout and controls in every area

components/common/settings/blankslate.tmpl

@@ -0,0 +1,6 @@
+{{/* GitHub's empty state in settings: a bordered box with a centred semibold title and an optional muted line. Title
+	is text; Description may be rendered HTML. */}}
+<div class="theme-settings-blankslate">
+	<h3>{{.Title}}</h3>
+	{{if .Description}}<p>{{.Description}}</p>{{end}}
+</div>

components/common/settings/checkbox.tmpl

@@ -0,0 +1,9 @@
+{{/* GitHub's settings checkbox: the box beside a semibold title, with a muted note beneath the title. Name, ID, Checked,
+	Disabled and Value describe the input; Title and Note are text (Note may be rendered HTML); Tooltip explains a disabled
+	or risky choice; Extra is rendered HTML placed after the note, such as a hidden input or a warning. */}}
+<div class="theme-settings-checkbox"{{if .Tooltip}} data-tooltip-content="{{.Tooltip}}"{{end}}>
+	<input type="checkbox" id="{{.ID}}" name="{{.Name}}"{{if .Value}} value="{{.Value}}"{{end}}{{if .Checked}} checked{{end}}{{if .Disabled}} disabled{{end}}>
+	<label for="{{.ID}}">{{.Title}}</label>
+	{{if .Note}}<p class="theme-settings-checkbox-note">{{.Note}}</p>{{end}}
+	{{if .Extra}}{{.Extra}}{{end}}
+</div>

components/common/settings/context.tmpl

@@ -0,0 +1,10 @@
+{{/* GitHub's settings context: who or what these settings belong to, above the settings nav. Avatar is rendered HTML
+	(a user's avatar), Icon an octicon name when there is none. Link and LinkLabel add the button on the right. */}}
+<div class="theme-settings-context">
+	{{if .Avatar}}{{.Avatar}}{{else}}<span class="theme-settings-context-icon">{{svg .Icon 24}}</span>{{end}}
+	<div class="theme-settings-context-title">
+		<h1>{{.Title}}{{if .Login}} <span>({{.Login}})</span>{{end}}</h1>
+		<p>{{.Subtitle}}</p>
+	</div>
+	{{if .Link}}<a class="ui button theme-control" href="{{.Link}}">{{svg .LinkIcon 16}}{{.LinkLabel}}</a>{{end}}
+</div>