From 9dc3ef5af280a13ef51ecbcfe11a15e7e7e49329 Mon Sep 17 00:00:00 2001 From: henrikmv <110386561+henrikmv@users.noreply.github.com> Date: Tue, 20 Aug 2024 12:39:47 +0200 Subject: [PATCH 01/16] refactor: [DHIS2-17840]replace Material UI Grid (#3763) * feat: remove Grid * feat: remove grid from cardlistitem * feat: remove grid from incompleteselectionsmessage * feat: remove grid registration data entry form * fix: remove use of media for responsiveness * fix: revert code clean up --- .../CardList/CardListItem.component.js | 93 ++++++------ .../IncompleteSelectionsMessage/index.js | 24 +-- .../components/InfoIconText/InfoIconText.js | 21 ++- .../RegistrationDataEntry.component.js | 137 +++++++++--------- 4 files changed, 134 insertions(+), 141 deletions(-) diff --git a/src/core_modules/capture-core/components/CardList/CardListItem.component.js b/src/core_modules/capture-core/components/CardList/CardListItem.component.js index a1fe4bc5d1..d411d1a933 100644 --- a/src/core_modules/capture-core/components/CardList/CardListItem.component.js +++ b/src/core_modules/capture-core/components/CardList/CardListItem.component.js @@ -3,7 +3,7 @@ import i18n from '@dhis2/d2-i18n'; import React from 'react'; import moment from 'moment'; import type { ComponentType } from 'react'; -import { Grid, withStyles } from '@material-ui/core'; +import { withStyles } from '@material-ui/core'; import { colors, Tag, IconCheckmark16, Tooltip } from '@dhis2/ui'; import { useTimeZoneConversion } from '@dhis2/app-runtime'; import { CardImage } from '../../../capture-ui/CardImage/CardImage.component'; @@ -18,21 +18,20 @@ import { dataElementTypes, getTrackerProgramThrowIfNotFound } from '../../metaDa import { useOrgUnitName } from '../../metadataRetrieval/orgUnitName'; import type { ListItem, RenderCustomCardActions } from './CardList.types'; - type OwnProps = $ReadOnly<{| item: ListItem, - currentSearchScopeName?: string, - currentProgramId?: string, - currentSearchScopeType?: string, - renderCustomCardActions?: RenderCustomCardActions, - profileImageDataElement: ?CardProfileImageElementInformation, - dataElements: CardDataElementsInformation, + currentSearchScopeName ?: string, + currentProgramId ?: string, + currentSearchScopeType ?: string, + renderCustomCardActions ?: RenderCustomCardActions, + profileImageDataElement: ?CardProfileImageElementInformation, + dataElements: CardDataElementsInformation, |}>; type Props = $ReadOnly<{| ...OwnProps, ...CssClasses -|}>; + |}>; const getStyles = (theme: Theme) => ({ itemContainer: { @@ -44,6 +43,7 @@ const getStyles = (theme: Theme) => ({ borderRadius: theme.typography.pxToRem(5), border: `1px solid ${colors.grey400}`, backgroundColor: colors.grey050, + position: 'relative', }, itemDataContainer: { display: 'flex', @@ -52,6 +52,9 @@ const getStyles = (theme: Theme) => ({ fontSize: theme.typography.pxToRem(12), color: colors.grey700, paddingBottom: theme.typography.pxToRem(8), + position: 'absolute', + top: theme.typography.pxToRem(8), + right: theme.typography.pxToRem(8), }, enrolled: { display: 'flex', @@ -213,49 +216,39 @@ const CardListItemIndex = ({ return (