feat: optimize style of invoice details.

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

src/containers/Drawers/CreditNoteDetailDrawer/utils.js

@@ -7,11 +7,14 @@ import {
   Position,
   MenuItem,
   Menu,
+  Tag,
+  Intent,
 } from '@blueprintjs/core';
 import {
   Icon,
   FormattedMessage as T,
   FormatNumberCell,
+  Choose,
 } from '../../../components';
 
 export const useCreditNoteReadOnlyEntriesColumns = () =>
@@ -58,7 +61,11 @@ export const useCreditNoteReadOnlyEntriesColumns = () =>
     [],
   );
 
-export const CreditNoteMenuItem = ({ payload: { onReconcile } }) => {
+/**
+ * Credit note more actions mneu.
+ * @returns {React.JSX}
+ */
+export function CreditNoteMenuItem({ payload: { onReconcile } }) {
   return (
     <Popover
       minimal={true}
@@ -79,4 +86,32 @@ export const CreditNoteMenuItem = ({ payload: { onReconcile } }) => {
       <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
     </Popover>
   );
-};
+}
+
+/**
+ * Credit note details status.
+ * @returns {React.JSX}
+ */
+export function CreditNoteDetailsStatus({ creditNote }) {
+  return (
+    <Choose>
+      <Choose.When condition={creditNote.is_open}>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'open'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={creditNote.is_closed}>
+        <Tag intent={Intent.SUCCESS} round={true}>
+          <T id={'closed'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={creditNote.is_draft}>
+        <Tag intent={Intent.NONE} round={true} minimal={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.When>
+    </Choose>
+  );
+}