feat: remove icon button

dhis2 · Sep 9, 2024 · b559b08 · b559b08
1 parent 437a378
commit b559b08
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/...ore_modules/capture-core/components/Pages/ViewEvent/Section/ViewEventSection.component.js b/...ore_modules/capture-core/components/Pages/ViewEvent/Section/ViewEventSection.component.js
@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import { withStyles, IconButton } from '@material-ui/core';
-import { IconChevronDown24, IconChevronUp24, colors } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core';
+import { IconChevronDown24, IconChevronUp24, colors, Button } from '@dhis2/ui';
 
 const getStyles = (theme: Theme) => ({
     container: {
@@ -21,6 +21,10 @@ const getStyles = (theme: Theme) => ({
     },
     toggleCollapseButton: {
         padding: 4,
+        border: 'none !important',
+        borderRadius: '50% !important',
+        width: theme.typography.pxToRem(28),
+        marginLeft: theme.typography.pxToRem(2),
     },
     contentContainer: {
         padding: theme.typography.pxToRem(10),
@@ -64,15 +68,16 @@ class ViewEventSectionPlain extends React.Component<Props, State> {
 
     renderCollapsable = () => {
         const classes = this.props.classes;
+        const icon = this.state.collapsed ? <IconChevronDown24 /> : <IconChevronUp24 />;
 
         return (
-            <IconButton className={classes.toggleCollapseButton} onClick={this.toggleCollapse}>
-                {this.state.collapsed ?
-                    <IconChevronDown24 /> :
-                    <IconChevronUp24 />
-                }
-            </IconButton>
-
+            <Button
+                icon={icon}
+                onClick={this.toggleCollapse}
+                className={classes.toggleCollapseButton}
+                small
+                secondary
+            />
         );
     }
 

diff --git a/src/core_modules/capture-core/components/Relationships/Relationships.component.js b/src/core_modules/capture-core/components/Relationships/Relationships.component.js
@@ -3,8 +3,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import i18n from '@dhis2/d2-i18n';
-import { IconButton, withStyles } from '@material-ui/core';
-import { IconArrowRight16, IconCross24, Button } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core';
+import { IconArrowRight16, IconCross24, Button, colors } from '@dhis2/ui';
 import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import type { RelationshipType } from '../../metaData';
 import type { Relationship, Entity } from './relationships.types';
@@ -23,7 +23,7 @@ const getStyles = (theme: Theme) => ({
     relationshipTypeName: {
         fontSize: 14,
         fontWeight: 600,
-        color: 'rgba(0,0,0,0.7)',
+        color: colors.grey700,
     },
     relationshipsContainer: {
     },
@@ -45,6 +45,10 @@ const getStyles = (theme: Theme) => ({
     relationshipActions: {
         padding: 7,
     },
+    deleteButton: {
+        border: 'none !important',
+        borderRadius: '50% !important',
+    },
     addButtonContainer: {
         display: 'inline-block',
     },
@@ -84,6 +88,7 @@ type Props = {
         relationshipActions: string,
         relationshipHighlight: string,
         tooltip: string,
+        deleteButton: string,
         addButtonContainer: string,
     },
     relationships: Array<Relationship>,
@@ -144,13 +149,14 @@ class RelationshipsPlain extends React.Component<Props> {
                         enabled={!canDelete}
                         wrapperClassName={classes.tooltip}
                     >
-                        <IconButton
+                        <Button
                             data-test="delete-relationship-button"
                             onClick={() => { onRemoveRelationship(relationship.clientId); }}
                             disabled={!canDelete}
-                        >
-                            <IconCross24 />
-                        </IconButton>
+                            icon={<IconCross24 />}
+                            secondary
+                            className={classes.deleteButton}
+                        />
                     </ConditionalTooltip>
                 </div>
             </div>
@@ -203,6 +209,7 @@ class RelationshipsPlain extends React.Component<Props> {
                                 disabled={!canCreate}
                                 small={smallMainButton}
                                 dataTest="add-relationship-button"
+                                secondary
                             >
                                 {i18n.t('Add relationship')}
                             </Button>