refactor: remove css module

dhis2 · Feb 20, 2024 · 52d2608 · 52d2608
1 parent 3a6ab36
commit 52d2608
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 96 deletions.
diff --git a/src/components/DimensionsPanel/List/DimensionItem.js b/src/components/DimensionsPanel/List/DimensionItem.js
@@ -9,7 +9,7 @@ import {
 } from '../../../modules/predefinedDimensions.js'
 import OptionsButton from './OptionsButton.js'
 import RecommendedIcon from './RecommendedIcon.js'
-import style from './styles/DimensionItem.module.css'
+import styles from './styles/DimensionItem.style.js'
 
 class DimensionItem extends Component {
     state = { mouseOver: false }
@@ -28,7 +28,7 @@ class DimensionItem extends Component {
     getDimensionIcon = () => {
         const Icon = getPredefinedDimensionProp(this.props.id, 'icon')
         return Icon ? (
-            <Icon className={style.fixedDimensionIcon} />
+            <Icon className="fixedDimensionIcon" />
         ) : (
             <DynamicDimensionIcon className="dynamic-dimension-icon" />
         )
@@ -93,10 +93,10 @@ class DimensionItem extends Component {
                     onMouseLeave={this.onMouseExit}
                     ref={innerRef}
                     className={cx(
-                        style.item,
+                        'item',
                         {
-                            [style.deactivated]: isDeactivated,
-                            [style.selected]: isSelected && !isDeactivated,
+                            deactivated: isDeactivated,
+                            selected: isSelected && !isDeactivated,
                         },
                         className
                     )}
@@ -105,13 +105,13 @@ class DimensionItem extends Component {
                     {...rest}
                 >
                     <div
-                        className={style.label}
+                        className="label"
                         tabIndex={0}
                         data-test={`${dataTest}-button-${id}`}
                     >
-                        <div className={style.iconWrapper}>{Icon}</div>
-                        <div className={style.labelWrapper}>
-                            <span className={style.labelText}>{Label}</span>
+                        <div className="iconWrapper">{Icon}</div>
+                        <div className="labelWrapper">
+                            <span className="labelText">{Label}</span>
                             <RecommendedIcon
                                 isRecommended={isRecommended}
                                 dataTest={`${dataTest}-recommended-icon`}
@@ -120,7 +120,7 @@ class DimensionItem extends Component {
                     </div>
                     {onOptionsClick ? (
                         <div
-                            className={style.optionsWrapper}
+                            className="optionsWrapper"
                             ref={optionsRef}
                             data-test={`${dataTest}-menu-${id}`}
                         >
@@ -136,10 +136,9 @@ class DimensionItem extends Component {
                             ) : null}
                         </div>
                     ) : null}
-                    {isLocked && (
-                        <div className={style.lockWrapper}>{LockIcon}</div>
-                    )}
+                    {isLocked && <div className="lockWrapper">{LockIcon}</div>}
                 </li>
+                <style jsx>{styles}</style>
             </>
         )
     }

diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.module.css b/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
@@ -0,0 +1,88 @@
+import { colors } from '@dhis2/ui'
+import css from 'styled-jsx/css'
+
+export default css`
+    .item {
+        color: ${colors.grey900};
+        background-color: transparent;
+        fill: ${colors.grey800};
+        display: flex;
+        outline: none;
+        justify-content: space-between;
+        padding: 0 0 0 4px;
+        margin: 0;
+        border-radius: 2px;
+        cursor: pointer;
+        min-height: 22px;
+        border: 1px solid transparent;
+    }
+
+    .item:not(.deactivated):not(.dragging):hover {
+        background-color: ${colors.grey100};
+        border-color: ${colors.grey400};
+    }
+
+    .label {
+        display: flex;
+        align-items: center;
+    }
+    .labelWrapper {
+        display: flex;
+        align-items: center;
+    }
+    .labelText {
+        font-size: 13px;
+        line-height: 15px;
+        margin-top: 1px;
+    }
+
+    .iconWrapper {
+        width: 16px;
+        height: 16px;
+        margin: 2px 4px 0 0;
+        flex: 0 0 auto;
+        align-self: flex-start;
+    }
+
+    .item.deactivated {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    .item.selected {
+        background-color: ${colors.teal100};
+        border: 1px solid ${colors.teal200};
+        color: ${colors.teal900};
+        fill: ${colors.teal800};
+        font-weight: 400;
+    }
+    .item.selected:not(.deactivated):hover {
+        background: #cdeae8;
+        border-color: #93c4bf;
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    }
+
+    .optionsWrapper {
+        width: 20px;
+        height: 20px;
+    }
+
+    .lockWrapper svg path {
+        fill: ${colors.grey800};
+    }
+
+    .lockWrapper {
+        background: ${colors.grey300};
+        height: 20px;
+        padding: 0 1px 0 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .item.selected .lockWrapper {
+        background: #cbe7e5;
+    }
+    .item.selected .lockWrapper svg path {
+        fill: ${colors.teal900};
+    }
+`