Removed react-css-modules

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});
+};