feat: change to dhis2 ui chip

dhis2 · Aug 2, 2024 · 560fef3 · 560fef3
1 parent 26494d4
commit 560fef3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/i18n/en.pot b/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-06-28T11:23:02.970Z\n"
-"PO-Revision-Date: 2024-06-28T11:23:02.970Z\n"
+"POT-Creation-Date: 2024-08-02T09:44:11.640Z\n"
+"PO-Revision-Date: 2024-08-02T09:44:11.640Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."

diff --git a/...dules/capture-core/components/Pages/ViewEvent/Section/ViewEventSectionHeader.component.js b/...dules/capture-core/components/Pages/ViewEvent/Section/ViewEventSectionHeader.component.js
@@ -2,8 +2,8 @@
 // @flow
 import * as React from 'react';
 import classNames from 'classnames';
-
-import { Chip, withStyles } from '@material-ui/core';
+import { Chip, colors } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core';
 
 
 const getStyles = (theme: Theme) => ({
@@ -17,9 +17,10 @@ const getStyles = (theme: Theme) => ({
         paddingLeft: theme.typography.pxToRem(5),
     },
     badge: {
-        height: theme.typography.pxToRem(20),
-        width: theme.typography.pxToRem(20),
-        fontWeight: 700,
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'default !important',
+        backgroundColor: `${colors.grey300} !important`,
     },
 });
 
@@ -45,7 +46,9 @@ class ViewEventSectionHeaderPlain extends React.Component<Props> {
                 </div>
                 {shouldRenderBadge &&
                     <div className={classes.headerItemContainer}>
-                        <Chip className={classNames(classes.badge, badgeClass)} label={badgeCount} />
+                        <Chip dense className={classNames(classes.badge), badgeClass}>
+                            {badgeCount}
+                        </Chip>
                     </div>
                 }
             </div>