diff --git a/src/components/TotalLines/TotalLines.module.scss b/src/components/TotalLines/TotalLines.module.scss deleted file mode 100644 index 5c92246b5..000000000 --- a/src/components/TotalLines/TotalLines.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -.total_lines {} - - -.total_line { - display: flex; - border-bottom: 1px solid #d2dde2; - - :global .amount, - :global .title{ - padding: 8px; - } -} \ No newline at end of file diff --git a/src/components/TotalLines/index.js b/src/components/TotalLines/index.js index 793f70c0d..1b2d88fc6 100644 --- a/src/components/TotalLines/index.js +++ b/src/components/TotalLines/index.js @@ -1,23 +1,93 @@ import React from 'react'; -import clsx from 'classnames'; +import styled from 'styled-components'; -import TotalLinesCls from './TotalLines.module.scss'; +export const TotalLineBorderStyle = { + SingleDark: 'SingleDark', + DoubleDark: 'DoubleDark', +}; -export function TotalLines({ children, className }) { +export const TotalLineTextStyle = { + Regular: 'Regular', + Bold: 'Bold', +}; + +export function TotalLines({ + children, + amountColWidth, + labelColWidth, + className, +}) { return ( -
+ {children} -
+ ); } -export function TotalLine({ title, value, className }) { +export function TotalLine({ title, value, borderStyle, textStyle, className }) { return ( -
{title}
{value}
-
+ ); } + +export const TotalLinesRoot = styled.div` + display: table; + + ${(props) => + props.amountColWidth && + ` + .amount{ + width: ${props.amountColWidth} + } + `} + + ${(props) => + props.labelColWidth && + ` + .title{ + width: ${props.labelColWidth} + } + `} +`; + +export const TotalLineRoot = styled.div` + display: table-row; + + .amount, + .title { + display: table-cell; + padding: 8px; + border-bottom: 1px solid #d2dde2; + + ${(props) => + props.borderStyle === TotalLineBorderStyle.DoubleDark && + ` + border-bottom: 3px double #000; + `} + ${(props) => + props.borderStyle === TotalLineBorderStyle.SingleDark && + ` + border-bottom: 1px double #000; + `} + ${(props) => + props.textStyle === TotalLineTextStyle.Bold && + ` + font-weight: 600; + `} + } + + .amount { + text-align: right; + } +`; diff --git a/src/containers/Drawers/BillDrawer/BillDetailFooter.js b/src/containers/Drawers/BillDrawer/BillDetailFooter.js index 8bc47089f..43b7bebde 100644 --- a/src/containers/Drawers/BillDrawer/BillDetailFooter.js +++ b/src/containers/Drawers/BillDrawer/BillDetailFooter.js @@ -1,11 +1,16 @@ import React from 'react'; -import clsx from 'classnames'; +import styled from 'styled-components'; -import { FormatNumber, T, TotalLines, TotalLine } from '../../../components'; +import { + TotalLineBorderStyle, + TotalLineTextStyle, + FormatNumber, + T, + TotalLines, + TotalLine, +} from '../../../components'; import { useBillDrawerContext } from './BillDrawerProvider'; -import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss'; - /** * Bill read-only details footer. */ @@ -13,29 +18,34 @@ export function BillDetailFooter() { const { bill } = useBillDrawerContext(); return ( -
- + + } - value={} - className={BillDrawerCls.total_line_subtotal} + value={} + borderStyle={TotalLineBorderStyle.SingleDark} /> } value={bill.formatted_amount} - className={BillDrawerCls.total_line_total} + borderStyle={TotalLineBorderStyle.DoubleDark} + textStyle={TotalLineTextStyle.Bold} /> } value={bill.formatted_payment_amount} - className={BillDrawerCls.total_line_payment} /> } value={bill.formatted_due_amount} - className={BillDrawerCls.total_line_dueAmount} /> - -
+ + ); } + +export const BillDetailsFooterRoot = styled.div``; + +export const BillTotalLines = styled(TotalLines)` + margin-left: auto; +`; diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js index a843373c3..9331ca5f8 100644 --- a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js +++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js @@ -1,9 +1,8 @@ import React from 'react'; import Icon from 'components/Icon'; import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core'; -import { Can, FormattedMessage as T } from 'components'; -import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; +import { Can, FormattedMessage as T, DrawerActionsBar } from 'components'; import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider'; import withAlertsActions from 'containers/Alert/withAlertActions'; import { AbilitySubject, CashflowAction } from '../../../common/abilityOption'; @@ -25,7 +24,7 @@ function CashflowTransactionDrawerActionBar({ return ( - +