Update table actions column styles

beda-software · Dec 19, 2024 · 2586f8d · 2586f8d
1 parent e7191d4
commit 2586f8d
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 9 deletions.
diff --git a/src/containers/PatientResourceListExample/index.tsx b/src/containers/PatientResourceListExample/index.tsx
@@ -1,6 +1,5 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { t, Trans } from '@lingui/macro';
-import { Button } from 'antd';
 import { Patient } from 'fhir/r4b';
 
 import { SearchBarColumnType } from 'src/components/SearchBar/types';
@@ -11,6 +10,7 @@ import { renderHumanName } from 'src/utils/fhir';
 import { matchCurrentUserRole, Role } from 'src/utils/role';
 
 import { getPatientSearchParamsForPractitioner } from './utils';
+import { S } from './styles';
 
 export function PatientResourceListExample() {
     /*
@@ -72,7 +72,7 @@ export function PatientResourceListExample() {
             getRecordActions={(record) => [
                 navigationAction('Open', `/patients/${record.resource.id}`),
                 questionnaireAction('Edit', 'patient-edit'),
-                customAction(<Button type="link">Custom action</Button>),
+                customAction(<S.LinkButton type="link">Custom action</S.LinkButton>),
             ]}
             getHeaderActions={() => [
                 questionnaireAction(<Trans>Add patient</Trans>, 'patient-create', { icon: <PlusOutlined /> }),

diff --git a/src/containers/PatientResourceListExample/styles.ts b/src/containers/PatientResourceListExample/styles.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+import { Button } from 'antd';
+
+export const S = {
+    LinkButton: styled(Button)`
+        padding: 0;
+    `,
+};
diff --git a/src/uberComponents/ResourceListPage/actions.tsx b/src/uberComponents/ResourceListPage/actions.tsx
@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom';
 import { ModalTrigger } from 'src/components/ModalTrigger';
 import { QuestionnaireResponseForm, QRFProps } from 'src/components/QuestionnaireResponseForm';
 import { questionnaireIdLoader } from 'src/hooks/questionnaire-response-form-data';
+import { S } from './styles';
 
 export interface NavigationActionType {
     type: 'navigation';
@@ -77,7 +78,7 @@ export function RecordQuestionnaireAction<R extends Resource>({
     defaultLaunchContext: ParametersParameter[];
 }) {
     return (
-        <ModalTrigger title={action.title} trigger={<Button type="link">{action.title}</Button>}>
+        <ModalTrigger title={action.title} trigger={<S.LinkButton type="link">{action.title}</S.LinkButton>}>
             {({ closeModal }) => (
                 <QuestionnaireResponseForm
                     questionnaireLoader={questionnaireIdLoader(action.questionnaireId)}
@@ -189,8 +190,9 @@ export function NavigationAction<R extends Resource>({
     resource: R;
 }) {
     const navigate = useNavigate();
+
     return (
-        <Button
+        <S.LinkButton
             type="link"
             style={{ padding: 0 }}
             onClick={() =>
@@ -201,6 +203,6 @@ export function NavigationAction<R extends Resource>({
             icon={action.icon}
         >
             {action.title}
-        </Button>
+        </S.LinkButton>
     );
 }
diff --git a/src/uberComponents/ResourceListPage/index.tsx b/src/uberComponents/ResourceListPage/index.tsx
@@ -31,6 +31,8 @@ import {
 export { navigationAction, customAction, questionnaireAction } from './actions';
 import { useResourceListPage } from './hooks';
 import { SearchBarColumn } from '../../components/SearchBar/types';
+import { S } from './styles';
+import React from 'react';
 
 type RecordType<R extends Resource> = { resource: R; bundle: Bundle };
 
@@ -268,9 +270,9 @@ function getRecordActionsColumn<R extends Resource>({
         key: 'actions',
         render: (_text: any, record: { resource: R; bundle: Bundle }) => {
             return (
-                <Row wrap={false}>
+                <S.Actions>
                     {getRecordActions(record, { reload }).map((action, index) => (
-                        <Col key={index}>
+                        <React.Fragment key={index}>
                             {isQuestionnaireAction(action) ? (
                                 <RecordQuestionnaireAction
                                     action={action}
@@ -285,9 +287,9 @@ function getRecordActionsColumn<R extends Resource>({
                             ) : (
                                 <Text>Unsupported action</Text>
                             )}
-                        </Col>
+                        </React.Fragment>
                     ))}
-                </Row>
+                </S.Actions>
             );
         },
     };

diff --git a/src/uberComponents/ResourceListPage/styles.ts b/src/uberComponents/ResourceListPage/styles.ts
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import { Button } from 'antd';
+
+export const S = {
+    Actions: styled.div`
+        display: flex;
+        gap: 8px 16px;
+    `,
+    LinkButton: styled(Button)`
+        padding: 0;
+    `,
+};