⚗ Update theme file extensio set-3

Navbar, Pagination, Popover, Preloader, Progressbar

Author: KRRISH96

lib/chip/index.js

@@ -5,14 +5,14 @@ import classnames from 'classnames';
 import { IoMdClose } from 'react-icons/io';
 import defaultTheme from './theme.module.scss';
 
-const DeleteIcon = ({ classes, handleClick }) => {
+const DeleteIcon = ({ classes, handleClick, theme }) => {
   function handleDeleteClick(e) {
     e.stopPropagation();
     return handleClick(e);
   }
   return (
     <button onClick={handleDeleteClick} className={classes}>
-      <IoMdClose className="icon-cross" />
+      <IoMdClose className={classnames(theme['icon-cross'], 'icon-cross')} />
     </button>
   );
 };
@@ -60,7 +60,7 @@ const Chip = ({
       theme[size && `${size}Delete`],
       theme[!outlined ? color : `${color}Outlined`],
     );
-    deleteIcon = <DeleteIcon classes={customClasses} handleClick={handleDelete} />;
+    deleteIcon = <DeleteIcon classes={customClasses} handleClick={handleDelete} theme={theme} />;
   }
 
   return (
@@ -88,10 +88,12 @@ Chip.propTypes = {
 DeleteIcon.propTypes = {
   classes: PropTypes.string,
   handleClick: PropTypes.func.isRequired,
+  theme: PropTypes.oneOfType([PropTypes.object]),
 };
 
 DeleteIcon.defaultProps = {
   classes: '',
+  theme: defaultTheme,
 };
 
 Chip.defaultProps = {

lib/navbar/index.js

@@ -6,7 +6,7 @@ import PropTyes from 'prop-types';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { FaBars } from 'react-icons/fa';
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 
 class Navbar extends React.Component {
   constructor(props) {
@@ -51,7 +51,7 @@ class Navbar extends React.Component {
         {this.renderDesktopView()}
         {this.renderMobileView()}
         { children ? <FaBars
-          className="icon-menu"
+          className={classnames(theme['icon-menu'], 'icon-menu')}
           tabIndex={0}
           onClick={this.toggleMenu}
           onBlur={this.hideMenu}
@@ -157,7 +157,7 @@ class Navbar extends React.Component {
             </div>)
           }
         </div>
-        <div className="clearfix" />
+        <div className={theme.clearfix} />
       </div>
     );
   }

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

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

lib/pagination/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTyes from 'prop-types';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 
 class Popover extends React.Component {
   state = {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 
 
 const Loader = ({ theme, classes }) => (

lib/popover/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 
 class ProgressBar extends React.Component {
   constructor(props) {
@@ -28,7 +28,7 @@ class ProgressBar extends React.Component {
     return (
       <div className={classes}>
         { showProgressText &&
-          <div className="text" aria-label="progress-text"><strong>{ `${this.state.progress}%` }</strong></div> }
+          <div className={theme.text} aria-label="progress-text"><strong>{ `${this.state.progress}%` }</strong></div> }
         <div
           aria-label="progress"
           className={progress}