Replace the HOCs

.babelrc

@@ -1,5 +1,6 @@
 {
     "plugins": [
-        "@babel/plugin-transform-flow-strip-types"
+        "@babel/plugin-transform-flow-strip-types",
+        ["styled-jsx/babel"]
     ]
 }

.eslintrc

@@ -128,7 +128,15 @@
                 ]
             }
         ],
-        "import/extensions": ["error", "never"]
+        "import/extensions": ["error", "never"],
+        "react/no-unknown-property": [
+            2,
+            {
+                "ignore": [
+                "jsx"
+                ]
+            }
+        ]
     },
     "settings": {
         "import/resolver": {

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-08-10T10:42:21.141Z\n"
-"PO-Revision-Date: 2024-08-10T10:42:21.141Z\n"
+"POT-Creation-Date: 2024-09-30T22:05:59.193Z\n"
+"PO-Revision-Date: 2024-09-30T22:05:59.194Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -875,8 +875,8 @@ msgstr "Show all"
 msgid "Program"
 msgstr "Program"
 
-msgid "Organisation Unit"
-msgstr "Organisation Unit"
+msgid "Organisation Unittt"
+msgstr "Organisation Unittt"
 
 msgid "Registration"
 msgstr "Registration"
@@ -963,6 +963,9 @@ msgstr "Edit Event"
 msgid "View Event"
 msgstr "View Event"
 
+msgid "Organisation Unit"
+msgstr "Organisation Unit"
+
 msgid "Selected program"
 msgstr "Selected program"
 

package.json

@@ -10,14 +10,14 @@
         "packages/rules-engine"
     ],
     "dependencies": {
-        "@dhis2/rules-engine-javascript": "101.4.1",
         "@dhis2/app-runtime": "^3.9.3",
         "@dhis2/d2-i18n": "^1.1.0",
         "@dhis2/d2-icons": "^1.0.1",
         "@dhis2/d2-ui-app": "^2.0.0",
         "@dhis2/d2-ui-org-unit-tree": "^7.3.3",
         "@dhis2/d2-ui-rich-text": "^7.4.0",
         "@dhis2/d2-ui-sharing-dialog": "^7.3.3",
+        "@dhis2/rules-engine-javascript": "101.4.1",
         "@dhis2/ui": "^9.10.1",
         "@joakim_sm/react-infinite-calendar": "^2.4.2",
         "@material-ui/core": "3.9.4",
@@ -63,7 +63,6 @@
         "redux-observable": "^2.0.0",
         "reselect": "^4.1.7",
         "rxjs": "^7.5.5",
-        "styled-jsx": "^4",
         "typeface-roboto": "^0.0.75",
         "uuid": "^9.0.0"
     },
@@ -129,7 +128,8 @@
         "jsdoc-export-default-interop": "^0.3.1",
         "node-fetch": "2",
         "redux-devtools-extension": "^2.13.9",
-        "wait-on": "^7.2.0"
+        "wait-on": "^7.2.0",
+        "styled-jsx": "^4"
     },
     "resolutions": {
         "@dhis2/cli-app-scripts": "^10.4.0",

src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/DataEntry.component.js

@@ -77,7 +77,7 @@ const getStyles = theme => ({
         paddingBottom: theme.typography.pxToRem(15),
     },
     fieldLabelMediaBased: {
-        [theme.breakpoints.down(523)]: {
+        '@media (max-width: 523px)': {
             paddingTop: '0px !important',
         },
     },

src/core_modules/capture-core/components/FormFields/Generic/D2TrueOnly.component.js

@@ -2,9 +2,12 @@
 import React, { Component } from 'react';
 import { Checkbox, Switch, spacersNum, FieldSet, Label } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core/styles';
+import { theme } from '../../../../../styles/theme';
 
-const styles = theme => ({
-    label: theme.typography.formFieldTitle,
+const styles = () => ({
+    label: {
+        fontSize: theme.typography.pxToRem(12),
+    },
     checkbox: {
         marginTop: spacersNum.dp12,
         marginBottom: spacersNum.dp12,
@@ -73,7 +76,7 @@ class D2TrueOnlyPlain extends Component<Props> {
                             return (
                                 <Label
                                     required={!!required}
-                                    classes={this.labelClasses}
+                                    className={this.props.classes.label}
                                 >
                                     {label}
                                 </Label>

src/core_modules/capture-core/components/FormFields/Options/MultiSelectBoxes/MultiSelectBoxes.component.js

@@ -5,9 +5,12 @@ import { Checkbox, spacersNum, FieldSet, Label } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core/styles';
 import { multiOrientations } from './multiSelectBoxes.const';
 import { FormGroup } from '../FormGroup.component';
+import { theme } from '../../../../../../styles/theme';
 
-const styles = theme => ({
-    label: theme.typography.formFieldTitle,
+const styles = () => ({
+    label: {
+        size: theme.typography.pxToRem(12),
+    },
     checkbox: {
         marginTop: spacersNum.dp8,
         marginBottom: spacersNum.dp16,

src/core_modules/capture-core/components/Pages/New/NewPage.component.js

@@ -3,7 +3,8 @@ import React, { useEffect, useState } from 'react';
 import { compose } from 'redux';
 import { useSelector } from 'react-redux';
 import type { ComponentType } from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
+import cx from 'classnames';
+// import withStyles from '@material-ui/core/styles/withStyles';
 import { OrgUnitFetcher } from 'capture-core/components/OrgUnitFetcher';
 import i18n from '@dhis2/d2-i18n';
 import { Button } from '@dhis2/ui';
@@ -15,20 +16,22 @@ import { useScopeInfo } from '../../../hooks/useScopeInfo';
 import { RegistrationDataEntry } from './RegistrationDataEntry';
 import { NoWriteAccessMessage } from '../../NoWriteAccessMessage';
 import { IncompleteSelectionsMessage } from '../../IncompleteSelectionsMessage';
+import { theme } from '../../../../../styles/theme';
 
-const getStyles = () => ({
+/* const getStyles = () => ({
     container: {
         padding: '24px 24px 16px 24px',
+        backgroundColor: 'red',
     },
-});
+}); */
 
 const NewPagePlain = ({
     showMessageToSelectOrgUnitOnNewPage,
     showMessageToSelectProgramCategoryOnNewPage,
     showMessageThatCategoryOptionIsInvalidForOrgUnit,
     showDefaultViewOnNewPage,
     handleMainPageNavigation,
-    classes,
+    // classes,
     currentScopeId,
     newPageStatus,
     writeAccess,
@@ -82,7 +85,7 @@ const NewPagePlain = ({
             teiDisplayName={teiDisplayName}
             formIsOpen={newPageStatus === newPageStatuses.DEFAULT}
         />
-        <div data-test="registration-page-content" className={classes.container} >
+        <div data-test="registration-page-content" className={cx('container')} >
             {
                 !writeAccess ?
                     <NoWriteAccessMessage
@@ -154,12 +157,21 @@ const NewPagePlain = ({
                     </OrgUnitFetcher>
             }
         </div>
+        <style jsx>{`
+            .container {
+                padding: 24px 24px 16px 24px;
+                background-color: ${theme.palette.error.red200};
+            }
+            .no-write-access {
+                opacity: 0.5;
+            }
+        `}</style>
     </>);
 };
 
 export const NewPageComponent: ComponentType<ContainerProps> =
     compose(
         withLoadingIndicator(),
         withErrorMessageHandler(),
-        withStyles(getStyles),
+        // withStyles(getStyles),
     )(NewPagePlain);

src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/ProgramSelector/ProgramSelector.component.js

@@ -4,11 +4,11 @@ import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
 import { ComposedProgramSelector } from './ComposedProgramSelector.component';
 
-const getStyles = (theme: Theme) => ({
+const getStyles = () => ({
     programLabel: {
-        paddingTop: '10px',
-        [theme.breakpoints.down(523)]: {
-            paddingTop: '0px !important',
+        paddingTop: '100px',
+        '@media (max-width: 523px)': {
+            paddingTop: '600px !important',
         },
     },
 });

src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js

@@ -6,14 +6,13 @@ import { withStyles } from '@material-ui/core/styles';
 import { ComposedRegUnitSelector } from './ComposedRegUnitSelector.component';
 import { getProgramFromProgramIdThrowIfNotFound } from '../../../../../../metaData';
 
-const getStyles = (theme: Theme) => ({
+const getStyles = () => ({
     label: {
         paddingTop: '10px',
-        [theme.breakpoints.down(523)]: {
+        '@media (max-width: 523px)': {
             paddingTop: '0px !important',
         },
-    },
-});
+    } });
 
 type Props = {
     selectedProgramId: ?string,
@@ -56,7 +55,7 @@ class RegUnitSelectorPlain extends React.Component<Props> {
             // $FlowFixMe[cannot-spread-inexact] automated comment
             <ComposedRegUnitSelector
                 labelClass={classes.label}
-                label={i18n.t('Organisation Unit')}
+                label={i18n.t('Organisation Unittt')}
                 styles={RegUnitSelectorPlain.baseComponentStyles}
                 onUpdateSelectedOrgUnit={this.handleUpdateSelectedOrgUnit}
                 {...passOnProps}

src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/ProgramSelector.component.js

@@ -4,10 +4,10 @@ import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
 import { ComposedProgramSelector } from './ComposedProgramSelector.component';
 
-const getStyles = (theme: Theme) => ({
+const getStyles = () => ({
     programLabel: {
         paddingTop: '10px',
-        [theme.breakpoints.down(523)]: {
+        '@media (max-width: 523px)': {
             paddingTop: '0px !important',
         },
     },

src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js

@@ -6,10 +6,10 @@ import { withStyles } from '@material-ui/core/styles';
 import { ComposedRegUnitSelector } from './ComposedRegUnitSelector.component';
 import { getProgramFromProgramIdThrowIfNotFound } from '../../../../../../../metaData';
 
-const getStyles = (theme: Theme) => ({
+const getStyles = () => ({
     label: {
         paddingTop: '10px',
-        [theme.breakpoints.down(523)]: {
+        '@media (max-width: 523px)': {
             paddingTop: '0px !important',
         },
     },

src/core_modules/capture-core/components/WidgetEnrollmentEventNew/DataEntry/DataEntry.component.js

@@ -67,7 +67,7 @@ const getStyles = theme => ({
         paddingBottom: theme.typography.pxToRem(15),
     },
     fieldLabelMediaBased: {
-        [theme.breakpoints.down(523)]: {
+        '@media (max-width: 523px)': {
             paddingTop: '0px !important',
         },
     },

src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.component.js

@@ -54,11 +54,11 @@ const tabMode = Object.freeze({
     SCHEDULE: 'SCHEDULE',
 });
 
-const getStyles = (theme: Theme) => ({
+const getStyles = () => ({
     dataEntryContainer: {
     },
     fieldLabelMediaBased: {
-        [theme.breakpoints.down(523)]: {
+        '@media (max-width: 523px)': {
             paddingTop: '0px !important',
         },
     },

src/core_modules/capture-core/components/WidgetEventEdit/ViewEventDataEntry/ViewEventDataEntry.component.js

@@ -62,7 +62,7 @@ const getStyles = (theme: Theme) => ({
         whiteSpace: 'nowrap',
     },
     fieldLabelMediaBased: {
-        [theme.breakpoints.down(523)]: {
+        '@media (max-width: 523px)': {
             paddingTop: '0px !important',
         },
     },