diff --git a/src/components/preferences/PreferencesList.jsx b/src/components/preferences/PreferencesList.jsx index 4cef1465a5db52c1f309454ecb8be6c6369cc427..77293f3300efd39644fa886c583bf63e7dc4912f 100644 --- a/src/components/preferences/PreferencesList.jsx +++ b/src/components/preferences/PreferencesList.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {bindActionCreators} from 'redux'; import {connect} from 'react-redux'; -import {Button, Table} from 'semantic-ui-react'; +import {Button, Checkbox, Popup, Table} from 'semantic-ui-react'; import * as preferenceActions from 'actions/preferences'; import AddPreference from 'components/preferences/AddPreference'; @@ -69,21 +69,28 @@ function PreferencesList({ <Table.Cell>{preference.rangeEnd}</Table.Cell> <Table.Cell>{preference.type}</Table.Cell> <Table.Cell> - <Button.Group size="tiny"> - {global && allowToggleEnable && ( - <Button - icon="check" - content={isEnabled ? 'Disable' : 'Enable'} - onClick={() => - toggleGlobalPreferenceForChannel(preference.id, channel, !isEnabled) - } - color={isEnabled ? 'red' : 'green'} - /> - )} - {allowDelete && ( - <Button icon="trash" onClick={() => deletePreferenceById(preference.id)} /> - )} - </Button.Group> + {global && allowToggleEnable && ( + <Popup + trigger={ + <Checkbox + checked={isEnabled} + onChange={(_, {checked}) => + toggleGlobalPreferenceForChannel(preference.id, channel, checked) + } + toggle + /> + } + content="Toggle the global preference for this channel" + position="right center" + /> + )} + {allowDelete && ( + <Button + icon="trash" + onClick={() => deletePreferenceById(preference.id)} + size="mini" + /> + )} </Table.Cell> </Table.Row> );