import React , { useContext } from 'react' ; import { Row , Col } from 'react-flexbox-grid' ; import { Icon , Text } from '@blueprintjs/core' ; import { createStyles , makeStyles } from '@material-ui/core/styles' ; import { SettingsContext } from '../../containers/SettingsProvider' ; const useStylesWithTheme = ( isDarkTheme ) => makeStyles ( ( ) => createStyles ( { oneSettingRow : { color : isDarkTheme ? '#CED9E0 !important' : '#5C7080 !important' , fontSize : '18px' , fontWeight : 900 , } , settingRowIcon : { margin : '10px' , color : isDarkTheme ? '#BFCCD6' : '#8A9BA8' , } , } ) ) ; interface SettingRowLabelAndInput { icon : string ; label : string ; input : React . ReactNode ; } export default function SettingRowLabelAndInput ( props ) { const { icon , label , input } = props ; const { isDarkTheme } = useContext ( SettingsContext ) ; const getClassesCallback = useStylesWithTheme ( isDarkTheme ) ; return ( < Row middle = "xs" between = "xs" > < Col xs = { 6 } > < Row middle = "xs" className = { getClassesCallback ( ) . oneSettingRow } > < Col > < Icon icon = { icon } iconSize = { 25 } className = { getClassesCallback ( ) . settingRowIcon } / > < /Col> < Col > < Text > { label } < /Text> < /Col> < /Row> < /Col> < Col xs = { 6 } > < Row > { input } < /Row> < /Col> < /Row>); }