Settings: fix styling and outline flickr issue

src/components/Settings.jsx

@@ -6,11 +6,7 @@ import { Divider } from './common';
 
 function CheckboxSetting({ label, onChange, pref }) {
 	return (
-		<Switch
-			checked={pref}
-			onChange={onChange}
-			class={`line ${showWhenExtension ? 'show-when-extension' : ''} `}
-		>
+		<Switch checked={pref} onChange={onChange}>
 			{label}
 		</Switch>
 	);
@@ -79,8 +75,8 @@ export default class Settings extends Component {
 						<p class="help-text">
 							Preview will refresh when you resize the preview pane
 						</p>
-						<Divider />
 						<div class="show-when-extension">
+							<Divider />
 							<CheckboxSetting
 								label="Replace new tab page"
 								pref={prefs.replaceNewTab}

src/style.css

@@ -260,6 +260,9 @@ a > svg {
 	display: block;
 	overflow: hidden;
 	position: relative;
+
+	/* breathing space for outline */
+	padding: 2px 0;
 }
 
 .check-switch:hover {
@@ -302,8 +305,6 @@ a > svg {
 }
 
 .check-switch input {
-	width: 100%;
-	height: 100%;
 	top: 0;
 	left: 0;
 	opacity: 0.0001;