⚗ Update theem component to file.module.scss set-2

Checkbox, CheckboxGroup, Chip, Drawer, Menu, Modal, Multiselect

Author: KRRISH96

lib/checkbox/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { themr } from 'react-css-themr';
 import PropTypes from 'prop-types';
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 
 const Checkbox = ({
   label,
@@ -27,7 +27,7 @@ const Checkbox = ({
           type="checkbox"
           {...props}
         />
-        <span className={`${cx({ [theme['check-item-inverted']]: inverted && checked })} check-item`} />
+        <span className={cx({ [theme['check-item-inverted']]: inverted && checked }, theme['check-item'])} />
       </span>
       {label && <span className={theme.label}>{label}</span>}
     </span>

lib/checkbox/theme.scss renamed to lib/checkbox/theme.module.scss

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Checkbox from '../checkbox';
 
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 
 class CheckboxGroup extends React.Component {
   constructor(props) {
@@ -35,7 +35,7 @@ class CheckboxGroup extends React.Component {
       theme,
     } = this.props;
 
-    const classNames = cx(theme['checkbox-group'], { inline });
+    const classNames = cx(theme['checkbox-group'], { [theme.inline]: inline });
     return (
       <div className={classNames}>
         {options.map(option => (

lib/checkboxGroup/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
 import { IoMdClose } from 'react-icons/io';
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 
 const DeleteIcon = ({ classes, handleClick }) => {
   function handleDeleteClick(e) {
@@ -35,7 +35,7 @@ const Chip = ({
     theme.chip,
     theme[size],
     theme[outlined ? `${color}Outlined` : color],
-    avatarElement && 'avatarMarginLeft',
+    avatarElement && theme.avatarMarginLeft,
     { [theme.clickable]: Element === 'a' },
     className,
   );

lib/checkboxGroup/theme.scss renamed to lib/checkboxGroup/theme.module.scss

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { themr } from 'react-css-themr';
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 
 class Drawer extends Component {
   constructor(props) {

lib/chip/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { themr } from 'react-css-themr';
 import cx from 'classnames';
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 
 class Menu extends Component {
   constructor(props) {