Appearance tweaks

components/checkbox/index.js

@@ -1,9 +1,9 @@
 
 const r = require('r-dom');
 
-const Checkbox = props => r.label({
-	classSet: { checkbox: true },
-}, [
+const Label = require('../label');
+
+const Checkbox = props => r(Label, [
 	r.input({
 		...props,
 		type: 'checkbox',

components/preferences/index.js

@@ -37,6 +37,8 @@ const Preferences = withStateHandlers(
 		}, 'Close'),
 	]),
 
+	r.hr(),
+
 	r.div([
 		r(Checkbox, {
 			checked: props.preferences.hideDisconnectedClients,
@@ -65,6 +67,8 @@ const Preferences = withStateHandlers(
 		}, 'Hide disconnected sinks'),
 	]),
 
+	r.hr(),
+
 	r.div([
 		r(Checkbox, {
 			checked: props.preferences.hideMonitors,
@@ -79,6 +83,8 @@ const Preferences = withStateHandlers(
 		}, 'Hide pulseaudio applications'),
 	]),
 
+	r.hr(),
+
 	r.div([
 		r(Checkbox, {
 			checked: props.preferences.hideVolumeThumbnails,
@@ -104,6 +110,8 @@ const Preferences = withStateHandlers(
 		}, 'Maximum volume: '),
 	]),
 
+	r.hr(),
+
 	r.div([
 		r(Checkbox, {
 			checked: props.preferences.showDebugInfo,
@@ -111,6 +119,8 @@ const Preferences = withStateHandlers(
 		}, 'Show debug info'),
 	]),
 
+	r.hr(),
+
 	r.div([
 		r(Button, {
 			style: { width: '100%' },

index.css

@@ -35,12 +35,14 @@ button:active {
 
 .label {
 	user-select: none;
+
+	cursor: pointer;
+
+	display: block;
+	padding: 0.5rem 0;
 }
 
 .checkbox {
-	user-select: none;
-
-	padding: 8px;
 }
 
 .input {
@@ -49,6 +51,9 @@ button:active {
 	border: 1px solid var(--borders);
 	padding: 4px;
 }
+.input:hover {
+	border-color: var(--themeSelectedBgColor);
+}
 .input:focus {
 	outline: none;
 	border-color: var(--themeSelectedBgColor);
@@ -154,8 +159,9 @@ button:active {
 	background: var(--themeBgColor);
 }
 
-.preferences > div {
-	margin-bottom: 1rem;
+.preferences > hr {
+	border: none;
+	border-top: 1px solid var(--borders);
 }
 
 .view-wrapper .graph .edge-mouse-handler {