From 097acc743a7721cce440a81a861942b2594bd58e Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Tue, 13 Nov 2018 11:19:35 +0530
Subject: [PATCH] Settings: fix styling and outline flickr issue

---
 src/components/Settings.jsx | 8 ++------
 src/style.css               | 5 +++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
index 5c918a8..e95bf4f 100644
--- a/src/components/Settings.jsx
+++ b/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}
diff --git a/src/style.css b/src/style.css
index 8c4333e..fc7b3c5 100644
--- a/src/style.css
+++ b/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;