feat: optimize style of invoice details.

feat: optimize style of credit note details.
feat: optimize global style checkbox  of the application.

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 {

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 <div className={classNames('card', className)}>{children}</div>;
+  return <CardRoot className={clsx('card', className)}>{children}</CardRoot>;
 }
+
+const CardRoot = styled.div`
+  padding: 15px;
+`;

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;
+  }
+`;

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 (
     <div
-      className={classnames({
-        'dashboard__actions-bar': true,
-        [`dashboard__actions-bar--${name}`]: !!name
-      })}
+      className={clsx(
+        {
+          'dashboard__actions-bar': true,
+          [`dashboard__actions-bar--${name}`]: !!name,
+        },
+        className,
+      )}
     >
-      <Navbar className='navbar--dashboard-actions-bar'>{children}</Navbar>
+      <Navbar className="navbar--dashboard-actions-bar">{children}</Navbar>
     </div>
   );
 }

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,
       })}
     >
       <ScrollSync>

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,
       )}

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 <DrawerActionsBarRoot {...props} />;
+}
+
+const DrawerActionsBarRoot = styled(DashboardActionsBar)`
+  border-bottom: 1px solid #d9d9da;
+`;

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 (
-    <div class="drawer__main-tabs">
+    <DrawerMainTabsRoot>
       <Tabs animate={true} large={true} {...restProps}>
         {children}
       </Tabs>
-    </div>
+    </DrawerMainTabsRoot>
   );
 }
+
+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;
+      }
+    }
+  }
+`;

src/components/Drawer/index.js

@@ -13,3 +13,5 @@ export function DrawerLoading({ loading, mount = false, children }) {
 export function DrawerBody({ children }) {
   return <div className={Classes.DRAWER_BODY}>{children}</div>;
 }
+
+export * from './DrawerActionsBar';

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;
+`;

src/components/Tags/index.js

@@ -0,0 +1,3 @@
+
+
+export * from './CurrencyTag';

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;