Removed react-css-modules

src/components/ConfigurationItem/ConfigurationItem.css

@@ -3,7 +3,7 @@
   padding: 0;
 }
 
-input.Input {
+input.ConfigurationItemInput {
   display: block;
   margin: 0;
   padding: 2px;
@@ -16,7 +16,7 @@ input.Input {
   box-sizing: border-box;
 }
 
-.Select {
+.ConfigurationItemSelect {
   display: block;
   margin: 0;
   padding: 2px;
@@ -29,7 +29,7 @@ input.Input {
   box-sizing: border-box;
 }
 
-.Option {
+.ConfigurationItemOption {
   background: rgba(10, 10, 15, 0.8);
   border-color: rgba(10, 10, 20, 0.9);
   color: var(--text_color);

src/components/ConfigurationItem/ConfigurationItem.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './ConfigurationItem.css';
+import './ConfigurationItem.css';
 
-export default CSSModules((props) => {
+export default props => {
   const handleChanged = (e) => {
     const target = e.target;
     if (target.type === 'checkbox') {
@@ -23,7 +22,7 @@ export default CSSModules((props) => {
       data = <input min={0.0}
                     onChange={e=>handleChanged(e)}
                     step={"0.01"}
-                    styleName='Input'
+                    className={'ConfigurationItemInput'}
                     type={'number'}
                     value={parseFloat(props.value).toFixed(2)}/>;
     break;
@@ -31,13 +30,13 @@ export default CSSModules((props) => {
     case "list":
       const options = props.items.map((s, i) => {
         return (
-          <option styleName='Option' key={i} value={s}>{s}</option>
+          <option className={'ConfigurationItemOption'} key={i} value={s}>{s}</option>
         );
       });
 
       data = (
         <select onChange={e=>handleChanged(e)}
-                styleName='Select'
+                className={'ConfigurationItemSelect'}
                 value={props.value}>
           {options}
         </select>
@@ -46,7 +45,7 @@ export default CSSModules((props) => {
 
     case "string":
       data = <input onChange={e=>handleChanged(e)}
-                    styleName='Input'
+                    className={'ConfigurationItemInput'}
                     type={'text'}
                     value={props.value}/>;
     break;
@@ -55,7 +54,7 @@ export default CSSModules((props) => {
       data = <input max={255}
                     min={0}
                     onChange={e=>handleChanged(e)}
-                    styleName='Input'
+                    className={'ConfigurationItemInput'}
                     type={'number'}
                     value={props.value}/>;
     break;
@@ -64,7 +63,7 @@ export default CSSModules((props) => {
       data = <input max={65535}
                     min={0}
                     onChange={e=>handleChanged(e)}
-                    styleName='Input'
+                    className={'ConfigurationItemInput'}
                     type={'number'}
                     value={props.value}/>;
     break;
@@ -73,7 +72,7 @@ export default CSSModules((props) => {
       data = <input max={4294967295}
                     min={0}
                     onChange={e=>handleChanged(e)}
-                    styleName='Input'
+                    className={'ConfigurationItemInput'}
                     type={'number'}
                     value={props.value}/>;
     break;
@@ -82,7 +81,7 @@ export default CSSModules((props) => {
       data = <input max={18446744073709551615}
                     min={0}
                     onChange={e=>handleChanged(e)}
-                    styleName='Input'
+                    className={'ConfigurationItemInput'}
                     type={'number'}
                     value={props.value}/>;
     break;
@@ -92,7 +91,7 @@ export default CSSModules((props) => {
   }
 
   return (
-    <div styleName='ConfigurationItem'>
+    <div className={'ConfigurationItem'}>
       <table cellPadding='2'
              width='100%'>
         <tbody>
@@ -104,4 +103,4 @@ export default CSSModules((props) => {
       </table>
     </div>
   );
-}, styles, {allowMultiple: true});
+};

src/components/DependencyList/Dependency/Dependency.css

@@ -4,6 +4,6 @@
   width: 100%;
 }
 
-.Link {
+.DependencyLink {
   cursor: pointer;
 }

src/components/DependencyList/Dependency/Dependency.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './Dependency.css';
+import './Dependency.css';
 
-export default CSSModules((props) => {
+export default props => {
   return (
-    <div styleName='Dependency'>
+    <div className={'Dependency'}>
       <table width="100%">
         <tbody>
           <tr>
@@ -13,7 +12,7 @@ export default CSSModules((props) => {
             </td>
             <td>
               {props.allowDownload ?
-                <a styleName='Link' href={void(0)} onClick={()=>{props.onDownload(props.download); return false;}}><u>Install</u></a> :
+                <a href={void(0)} className={'DependencyLink'} onClick={()=>{props.onDownload(props.download); return false;}}><u>Install</u></a> :
                 'Installing...'}
             </td>
           </tr>
@@ -21,5 +20,4 @@ export default CSSModules((props) => {
       </table>
     </div>
   );
-
-}, styles, {allowMultiple: true});
+};

src/components/DependencyList/DependencyList.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './DependencyList.css';
+import './DependencyList.css';
 import Dependency from './Dependency/Dependency';
 import Box from '../UI/Box/Box';
 
-export default CSSModules((props) => {
+export default props => {
   const items = props.dependencies.map((k, i)=> {
     return (
       <Dependency allowDownload={props.allowDownload}
@@ -24,4 +23,4 @@ export default CSSModules((props) => {
     </Box>
   );
 
-}, styles, {allowMultiple: true});
+};

src/components/DownloadProgress/DownloadProgress.js

@@ -1,9 +1,8 @@
 import Box from '../UI/Box/Box';
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './DownloadProgress.css';
+import './DownloadProgress.css';
 
-export default CSSModules((props) => {
+export default props => {
 
   return (
     <Box dxStyle={{width: '380px', height: 'auto', padding: '5px'}}>
@@ -14,4 +13,4 @@ export default CSSModules((props) => {
                 style={{width: '100%'}}
                 value={props.progress}/>
     </Box>);
-}, styles, {allowMultiple: true});
+};

src/components/ErrorDetails/ErrorDetails.css

@@ -1,10 +1,10 @@
-.Heading {
+.ErrorDetailsHeading {
   color: var(--text_color_error);
   text-align: center;
   margin-bottom: 4px;
 }
 
-.Content {
+.ErrorDetailsContent {
   max-height: 60vh;
   overflow-y: auto;
   margin-bottom: 8px;

src/components/ErrorDetails/ErrorDetails.js

@@ -1,18 +1,16 @@
 import React from 'react';
 import Box from '../UI/Box/Box';
 import Button from '../UI/Button/Button';
-import CSSModules from 'react-css-modules';
-import styles from './ErrorDetails.css';
+import './ErrorDetails.css';
 
-export default CSSModules((props) => {
+export default props => {
   return (
     <Box dxStyle={{padding: '8px'}}>
-      <h1 styleName='Heading'>Application Error</h1>
-      <div styleName='Content'>
+      <h1 className={'ErrorDetailsHeading'}>Application Error</h1>
+      <div className={'ErrorDetailsContent'}>
         <p>{props.error.toString()}</p>
       </div>
       <Button clicked={props.closed}>Dismiss</Button>
     </Box>
   );
-
-}, styles, {allowMultiple: true});
+};

src/components/MountItem/MountItem.css

@@ -1,4 +1,4 @@
-input.Input {
+input.MountItemInput {
   margin: 0;
   padding: 3px;
   border-radius: var(--border_radius);

src/components/MountItem/MountItem.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './MountItem.css';
+import './MountItem.css';
 import DropDown from '../UI/DropDown/DropDown';
 import Button from '../UI/Button/Button';
 import Loader from 'react-loader-spinner';
@@ -9,7 +8,7 @@ import Grid from '../UI/Grid/Grid';
 import configureImage from '../../assets/images/configure.png';
 import RootElem from '../../hoc/RootElem/RootElem';
 
-export default CSSModules((props) => {
+export default props => {
   let configButton = null;
   let secondRow = 6;
   if (props.allowConfig) {
@@ -51,7 +50,7 @@ export default CSSModules((props) => {
                maxLength={4096}
                onChange={props.changed}
                size={4096}
-               styleName={'Input'}
+               className={'MountItemInput'}
                type={'text'}
                value={props.location}/>
       </RootElem>
@@ -122,4 +121,4 @@ export default CSSModules((props) => {
       {autoRestartControl}
     </Grid>
   );
-}, styles, {allowMultiple: true});
+};

src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import styles from './ReleaseVersionDisplay.css';
-import CSSModules from 'react-css-modules';
+import './ReleaseVersionDisplay.css';
 import DropDown from '../UI/DropDown/DropDown';
 import Grid from '../UI/Grid/Grid';
 import Text from '../UI/Text/Text';
 import Button from '../UI/Button/Button';
 import UpgradeIcon from '../UpgradeIcon/UpgradeIcon';
 
-export default CSSModules((props) => {
+export default props => {
   let optionsDisplay = [];
   let key = 0;
   if (props.releaseExtracting) {
@@ -97,4 +96,4 @@ export default CSSModules((props) => {
       {optionsDisplay}
     </Grid>
   );
-}, styles, {allowMultiple: true});
+};

src/components/UI/Box/Box.css

@@ -15,12 +15,12 @@
 }
 
 .Box.SlideOut {
-  animation: slide-out 0.5s forwards;
+  animation: box-slide-out 0.5s forwards;
   transform: translateX(-100%);
 }
 
 .Box.SlideOutTop {
-  animation: slide-out-top 0.5s forwards;
+  animation: box-slide-out-top 0.5s forwards;
   transform: translateY(-100%);
 }
 
@@ -28,13 +28,13 @@
   transition: 0.3s;
 }
 
-@keyframes slide-out {
+@keyframes box-slide-out {
   100% {
     transform: translateX(0%);
   }
 }
 
-@keyframes slide-out-top {
+@keyframes box-slide-out-top {
   100% {
     transform: translateY(0%);
   }

src/components/UI/Box/Box.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './Box.css';
+import './Box.css';
 
-export default CSSModules((props) => {
+export default props => {
   const styleList = [];
   styleList.push('Box');
   if (props.dxDark) {
@@ -20,10 +19,10 @@ export default CSSModules((props) => {
   return (
     <div
       onClick={props.clicked}
-      styleName={styleList.join(' ')}
+      className={styleList.join(' ')}
       style={{...props.dxStyle}}>
       {props.children}
     </div>
   );
 
-}, styles, {allowMultiple: true});
+};

src/components/UI/Button/Button.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './Button.css';
+import './Button.css';
 
-export default CSSModules((props) => {
+export default props => {
   return (
     <button disabled={props.disabled}
-            styleName={'Button'}
+            className={'Button'}
             style={props.buttonStyles}
             onClick={props.clicked}>{props.children}</button>
   );
-}, styles, {allowMultiple: true});
+};
 

src/components/UI/DropDown/DropDown.css

@@ -6,7 +6,7 @@
   padding: 0;
 }
 
-.Select {
+.DropDownSelect {
   width: 100%;
   height: 100%;
   display: block;
@@ -19,21 +19,21 @@
   box-sizing: border-box;
 }
 
-.Option {
+.DropDownOption {
   background: rgba(10, 10, 15, 0.8);
   border-color: rgba(10, 10, 20, 0.9);
   color: var(--text_color);
 }
 
-.Select:hover:enabled {
+.DropDownSelect:hover:enabled {
   cursor: pointer;
 }
 
-.Select:hover:disabled {
+.DropDownSelect:hover:disabled {
   cursor: no-drop;
 }
 
-.Select:active,
-.Select.active {
+.DropDownSelect:active,
+.DropDownSelect.active {
   cursor: pointer;
 }

src/components/UI/DropDown/DropDown.js

@@ -1,20 +1,19 @@
 import React from 'react';
-import styles from './DropDown.css';
-import CSSModules from 'react-css-modules';
+import './DropDown.css';
 
-export default CSSModules((props) => {
+export default props => {
   const options = props.items.map((s, i) => {
     return (
-      <option styleName='Option' key={i} value={i}>{s}</option>
+      <option className={'DropDownOption'} key={i} value={i}>{s}</option>
     );
   });
 
   return (
-    <div styleName='DropDown'>
-      <select styleName='Select' disabled={props.disabled} onChange={props.changed} value={props.selected}>
+    <div className={'DropDown'}>
+      <select className={'DropDownSelect'} disabled={props.disabled} onChange={props.changed} value={props.selected}>
         {options}
       </select>
     </div>
   );
 
-}, styles, {allowMultiple: true});
+};

src/components/UI/Grid/Grid.js

@@ -1,9 +1,8 @@
 import React, {Component} from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './Grid.css';
+import './Grid.css';
 import GridComponent from './GridComponent/GridComponent';
 
-export default CSSModules(class extends Component {
+export default class extends Component {
   constructor(props) {
     super(props);
     window.addEventListener("resize", this.updateSizeAsync);
@@ -58,11 +57,11 @@ export default CSSModules(class extends Component {
     });
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     this.updateSizeAsync();
-  };
+  }
 
-  componentWillUnmount = () => {
+  componentWillUnmount() {
     window.removeEventListener("resize", this.updateSizeAsync);
     clearInterval(this.checkSizeInterval);
   };
@@ -121,12 +120,11 @@ export default CSSModules(class extends Component {
     return (
       <div
         ref='GridOwner'
-        styleName='GridOwner'>
-        <div styleName='Grid' {...style}>
+        className={'GridOwner'}>
+        <div className={'Grid'} {...style}>
           {children}
         </div>
       </div>
     )
   };
-
-}, styles, {allowMultiple: true});
+};

src/components/UI/Grid/GridComponent/GridComponent.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './GridComponent.css';
+import './GridComponent.css';
 
-export default CSSModules((props) => {
+export default props => {
   const style = {
     style: {
       gridRowStart: Math.floor(props.row + 1),
@@ -13,9 +12,9 @@ export default CSSModules((props) => {
   };
 
   return (
-    <div styleName='GridComponent' {...style}>
+    <div className={'GridComponent'} {...style}>
       {props.children}
     </div>
   );
 
-}, styles, {allowMultiple: true});
+};

src/components/UI/Loading/Loading.css

@@ -6,7 +6,7 @@
   box-sizing: border-box;
 }
 
-.Content {
+.LoadingContent {
   margin: 0;
   padding: 0;
   position: relative;

src/components/UI/Loading/Loading.js

@@ -1,17 +1,16 @@
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './Loading.css'
+import './Loading.css'
 import Loader from 'react-loader-spinner';
 
-export default CSSModules((props) => {
+export default props => {
   return (
     <div
-      styleName='Loading'>
-      <div styleName='Content'>
+      className={'Loading'}>
+      <div className={'LoadingContent'}>
         <Loader color={'var(--heading_text_color)'}
                 height='28px'
                 width='28px'
                 type='ThreeDots'/>
       </div>
     </div>);
-}, styles, {allowMultiple: true});
+};

src/components/UI/Modal/Modal.css

@@ -8,7 +8,7 @@
   z-index: 2000;
 }
 
-.Content {
+.ModalContent {
   position: fixed;
   width: auto;
   height: auto;
@@ -22,6 +22,6 @@
   z-index: 2100;
 }
 
-.Content.Critical {
+.ModalContent.Critical {
   z-index: 2101;
 }

src/components/UI/Modal/Modal.js

@@ -1,23 +1,22 @@
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './Modal.css'
+import './Modal.css'
 
-export default CSSModules((props) => {
+export default props => {
   let modalStyles = [];
   let contentStyles = [];
   modalStyles.push('Modal');
-  contentStyles.push('Content');
+  contentStyles.push('ModalContent');
   if (props.critical) {
-    modalStyles.push('Critical');
-    contentStyles.push('Critical');
+    modalStyles.push('ModalCritical');
+    contentStyles.push('ModalCritical');
   }
 
   return (
     <div
-      styleName={modalStyles.join(' ')}
+      className={modalStyles.join(' ')}
       onClick={props.clicked}>
-      <div styleName={contentStyles.join(' ')}>
+      <div className={contentStyles.join(' ')}>
         {props.children}
       </div>
     </div>);
-}, styles, {allowMultiple: true});
+};

src/components/UI/Text/Text.css

@@ -19,21 +19,21 @@
   color: var(--text_color);
 }
 
-.Heading1 {
+.TextHeading1 {
   font-weight: bold;
   color: var(--heading_text_color);
 }
 
-.Heading2 {
+.TextHeading2 {
   font-weight: bold;
   color: var(--heading_other_text_color);
 }
 
-.Heading3 {
+.TextHeading3 {
   font-weight: bold;
   color: var(--heading_other_text_color);
 }
 
-.AltTextColor {
+.TextAltTextColor {
   color: var(--heading_other_text_color);
 }

src/components/UI/Text/Text.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './Text.css';
+import './Text.css';
 
-export default CSSModules((props) => {
+export default props => {
   const styleList = [];
   styleList.push('Text');
   if (props.type) {
-    styleList.push(props.type);
+    styleList.push('Text' + props.type);
   }
 
   let style = {...props.style};
@@ -16,13 +15,12 @@ export default CSSModules((props) => {
 
   const text = (
     <div
-      styleName={styleList.join(' ')}
+      className={styleList.join(' ')}
       style={style}>{props.text}
     </div>);
 
   return props.noOwner ? text : (
-    <div styleName={'TextOwner'}>
+    <div className={'TextOwner'}>
       {text}
     </div>);
-
-}, styles, {allowMultiple: true});
+};

src/components/UpgradeIcon/UpgradeIcon.css

@@ -1,4 +1,4 @@
-.Owner {
+.UpgradeIconOwner {
   padding: 0;
   margin: 0;
   width: 100%;

src/components/UpgradeIcon/UpgradeIcon.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './UpgradeIcon.css';
+import './UpgradeIcon.css';
 import availableImage from '../../assets/images/release_available.png';
 import ReactTooltip from 'react-tooltip';
 
-export default CSSModules((props) => {
+export default props => {
   let placement = 'left';
   let toolTipText = 'UI Upgrade Available';
   if (props.release) {
@@ -15,15 +14,15 @@ export default CSSModules((props) => {
   return props
     .available ?
     (
-      <div styleName='Owner'>
+      <div className={'UpgradeIconOwner'}>
         <p data-tip='' data-for={placement}>
           <img alt=''
                onClick={props.clicked}
                src={availableImage}
-               styleName='UpgradeIcon'/>
+               className={'UpgradeIcon'}/>
         </p>
         <ReactTooltip id={placement} place={placement}>{toolTipText}</ReactTooltip>
       </div>
     )
     : null;
-}, styles, {allowMultiple: true});
+};

src/components/UpgradeUI/UpgradeUI.js

@@ -1,10 +1,9 @@
 import Button from '../UI/Button/Button';
 import Box from '../UI/Box/Box';
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './UpgradeUI.css';
+import './UpgradeUI.css';
 
-export default CSSModules((props) => {
+export default props => {
   return (
     <Box dxStyle={{width: '180px', height: 'auto', padding: '5px'}}>
       <div style={{width: '100%', height: 'auto'}}>
@@ -25,4 +24,4 @@ export default CSSModules((props) => {
         </tbody>
       </table>
     </Box>);
-}, styles, {allowMultiple: true});
+};