diff --git a/src/common/TableStyle.js b/src/common/TableStyle.js new file mode 100644 index 000000000..d570a00fb --- /dev/null +++ b/src/common/TableStyle.js @@ -0,0 +1,6 @@ + + +export const TableStyle = { + Constrant: 'constrant', + Regular: 'regular' +} \ No newline at end of file diff --git a/src/common/index.js b/src/common/index.js new file mode 100644 index 000000000..25821fa35 --- /dev/null +++ b/src/common/index.js @@ -0,0 +1,4 @@ + + + +export * from './TableStyle'; \ No newline at end of file diff --git a/src/components/Button/ButtonLink.js b/src/components/Button/ButtonLink.js index 655cdc615..739f12ecc 100644 --- a/src/components/Button/ButtonLink.js +++ b/src/components/Button/ButtonLink.js @@ -5,6 +5,7 @@ export const ButtonLink = styled.button` border: 0; background: transparent; cursor: pointer; + text-align: inherit; &:hover, &:active { diff --git a/src/components/Card.js b/src/components/Card.js index 65dd41eed..8437e2e47 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,6 +1,11 @@ import React from 'react'; -import classNames from 'classnames'; - +import clsx from 'classnames'; +import styled from 'styled-components'; + export default function Card({ className, children }) { - return
{children}
; + return {children}; } + +const CardRoot = styled.div` + padding: 15px; +`; diff --git a/src/components/CommercialDoc/index.js b/src/components/CommercialDoc/index.js new file mode 100644 index 000000000..afa86e654 --- /dev/null +++ b/src/components/CommercialDoc/index.js @@ -0,0 +1,21 @@ +import styled from 'styled-components'; +import Card from '../Card'; +import DataTable from '../DataTable'; + +export const CommercialDocBox = styled(Card)` + padding: 22px 20px; +`; + +export const CommercialDocHeader = styled.div` + margin-bottom: 25px; +`; + +export const CommercialDocTopHeader = styled.div` + margin-bottom: 30px; +`; + +export const CommercialDocEntriesTable = styled(DataTable)` + .tbody .tr:last-child .td { + border-bottom: 1px solid #d2dce2; + } +`; diff --git a/src/components/Dashboard/DashboardActionsBar.js b/src/components/Dashboard/DashboardActionsBar.js index b0ed85942..5d1795d5d 100644 --- a/src/components/Dashboard/DashboardActionsBar.js +++ b/src/components/Dashboard/DashboardActionsBar.js @@ -1,16 +1,19 @@ import React from 'react'; -import classnames from 'classnames'; +import clsx from 'classnames'; import { Navbar } from '@blueprintjs/core'; -export default function DashboardActionsBar({ children, name }) { +export default function DashboardActionsBar({ className, children, name }) { return (
- {children} + {children}
); } diff --git a/src/components/Datatable/TableWrapper.js b/src/components/Datatable/TableWrapper.js index 78646ea03..d98fab9b0 100644 --- a/src/components/Datatable/TableWrapper.js +++ b/src/components/Datatable/TableWrapper.js @@ -16,6 +16,7 @@ export default function TableWrapper({ children }) { expandable, virtualizedRows, className, + styleName, size, }, } = useContext(TableContext); @@ -28,6 +29,7 @@ export default function TableWrapper({ children }) { 'is-expandable': expandable, 'is-loading': loading, 'has-virtualized-rows': virtualizedRows, + [`table--${styleName}`]: styleName, })} > diff --git a/src/components/Details/index.js b/src/components/Details/index.js index ef1690f3c..ef480e1f2 100644 --- a/src/components/Details/index.js +++ b/src/components/Details/index.js @@ -17,6 +17,7 @@ const useDetailsMenuContext = () => React.useContext(DetailsMenuContext); export function DetailsMenu({ children, direction = DIRECTION.VERTICAL, + textAlign, minLabelSize, className, }) { @@ -27,6 +28,7 @@ export function DetailsMenu({ { 'details-menu--vertical': direction === DIRECTION.VERTICAL, 'details-menu--horizantal': direction === DIRECTION.HORIZANTAL, + [`align-${textAlign}`]: textAlign, }, className, )} diff --git a/src/components/Drawer/DrawerActionsBar.js b/src/components/Drawer/DrawerActionsBar.js new file mode 100644 index 000000000..d79be8b16 --- /dev/null +++ b/src/components/Drawer/DrawerActionsBar.js @@ -0,0 +1,12 @@ +import React from 'react'; +import styled from 'styled-components'; + +import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; + +export function DrawerActionsBar({ ...props }) { + return ; +} + +const DrawerActionsBarRoot = styled(DashboardActionsBar)` + border-bottom: 1px solid #d9d9da; +`; diff --git a/src/components/Drawer/DrawerMainTabs.js b/src/components/Drawer/DrawerMainTabs.js index 89ab0a52c..d2052e1f2 100644 --- a/src/components/Drawer/DrawerMainTabs.js +++ b/src/components/Drawer/DrawerMainTabs.js @@ -1,15 +1,54 @@ import React from 'react'; import { Tabs } from '@blueprintjs/core'; +import styled from 'styled-components'; /** * Drawer main tabs. */ export function DrawerMainTabs({ children, ...restProps }) { return ( -
+ {children} -
+ ); } + +const DrawerMainTabsRoot = styled.div` + .bp3-tabs { + .bp3-tab-list { + position: relative; + background-color: #fff; + padding: 0 15px; + border-bottom: 2px solid #e1e2e8; + + > *:not(:last-child) { + margin-right: 25px; + } + + &.bp3-large > .bp3-tab { + font-size: 15px; + color: #7f8596; + margin: 0 1rem; + + &[aria-selected='true'], + &:not([aria-disabled='true']):hover { + color: #0052cc; + } + } + .bp3-tab-indicator-wrapper .bp3-tab-indicator { + height: 2px; + bottom: -2px; + } + } + + .bp3-tab-panel { + margin-top: 0; + + .card { + margin: 15px; + } + } + } +`; diff --git a/src/components/Drawer/index.js b/src/components/Drawer/index.js index 005735517..d39c1d758 100644 --- a/src/components/Drawer/index.js +++ b/src/components/Drawer/index.js @@ -13,3 +13,5 @@ export function DrawerLoading({ loading, mount = false, children }) { export function DrawerBody({ children }) { return
{children}
; } + +export * from './DrawerActionsBar'; \ No newline at end of file diff --git a/src/components/Tags/CurrencyTag.js b/src/components/Tags/CurrencyTag.js new file mode 100644 index 000000000..a427c0230 --- /dev/null +++ b/src/components/Tags/CurrencyTag.js @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +export const CurrencyTag = styled.span` + background: #3e9215; + color: #fff; + display: inline-block; + border-radius: 3px; + padding: 2px 4px; + line-height: 1; + margin-left: 4px; +`; diff --git a/src/components/Tags/index.js b/src/components/Tags/index.js new file mode 100644 index 000000000..7eca83954 --- /dev/null +++ b/src/components/Tags/index.js @@ -0,0 +1,3 @@ + + +export * from './CurrencyTag'; \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index c1c2b29db..ba9c0b162 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -90,6 +90,8 @@ export * from './Contacts'; export * from './Utils/Join'; export * from './Typo'; export * from './TextStatus'; +export * from './Tags'; +export * from './CommercialDoc'; const Hint = FieldHint; diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js index af4ad93aa..07118d8af 100644 --- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js +++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js @@ -1,38 +1,51 @@ import React from 'react'; import { Tab } from '@blueprintjs/core'; +import styled from 'styled-components'; import intl from 'react-intl-universal'; -import { DrawerMainTabs } from 'components'; +import { DrawerMainTabs } from 'components'; +import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar'; import CreditNoteDetailPanel from './CreditNoteDetailPanel'; import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable'; import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable'; -import clsx from 'classnames'; - -import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss'; /** * Credit Note view detail. + * @returns {React.JSX} */ export default function CreditNoteDetail() { return ( -
- - } - /> - } - /> - } - /> - -
+ + + + ); } + +/** + * Credit note details tabs. + * @returns {React.JSX} + */ +function CreditNoteDetailsTabs() { + return ( + + } + /> + } + /> + } + /> + + ); +} + +const CreditNoteRoot = styled.div``; diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js index 4d50f45c5..112a8f556 100644 --- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js +++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js @@ -1,6 +1,5 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; - import { Button, NavbarGroup, @@ -8,17 +7,17 @@ import { NavbarDivider, Intent, } from '@blueprintjs/core'; -import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; + import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider'; -import { CreditNoteMenuItem } from './utils'; import withDialogActions from 'containers/Dialog/withDialogActions'; import withAlertsActions from 'containers/Alert/withAlertActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; -import { Icon, FormattedMessage as T, If, Can } from 'components'; +import { DrawerActionsBar, Icon, FormattedMessage as T, If } from 'components'; import { compose } from 'utils'; +import { CreditNoteMenuItem } from './utils'; /** * Credit note detail actions bar. @@ -57,7 +56,7 @@ function CreditNoteDetailActionsBar({ }; return ( - +