diff --git a/components/checkbox/index.js b/components/checkbox/index.js index f219dba..a2ce804 100644 --- a/components/checkbox/index.js +++ b/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', diff --git a/components/preferences/index.js b/components/preferences/index.js index bc19a4f..5ed0e2d 100644 --- a/components/preferences/index.js +++ b/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%' }, diff --git a/index.css b/index.css index 9d57166..8665fad 100644 --- a/index.css +++ b/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 {