Remove inline styles from the table footer

beda-software · Oct 12, 2023 · b33a776 · b33a776
1 parent 2440b43
commit b33a776
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/containers/InvoiceDetails/InvoiceDetails.styles.ts b/src/containers/InvoiceDetails/InvoiceDetails.styles.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components/macro';
+
+export const S = {
+    InvoiceTableFooterContainer: styled.div`
+        display: flex;
+        justify-content: space-between;
+        font-weight: bold;
+    `,
+};
diff --git a/src/containers/InvoiceDetails/index.tsx b/src/containers/InvoiceDetails/index.tsx
@@ -10,6 +10,7 @@ import { getFHIRReferenceResourceId } from 'src/utils/reference';
 
 import { InvoiceDetailsHeader } from './components/InvoiceDetailsHeader';
 import { useInvoiceDetails, useInvoiceLineItems } from './hooks';
+import { S } from './InvoiceDetails.styles';
 import { InvoiceDetailsLineItemsProps } from './types';
 import { formatMoney } from '../InvoiceList/utils';
 
@@ -110,9 +111,9 @@ function LineItemsTable(props: InvoiceDetailsLineItemsProps) {
 
 function InvoiceTableFooter({ totalAmount }: { totalAmount: number }) {
     return (
-        <div style={{ display: 'flex', fontWeight: 'bold', justifyContent: 'space-between' }}>
+        <S.InvoiceTableFooterContainer>
             <div>Total</div>
             <div>{formatMoney(totalAmount)}</div>
-        </div>
+        </S.InvoiceTableFooterContainer>
     );
 }