From 236bb896db5dc5286005591ca3baa1fb191d95f8 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Tue, 23 Feb 2021 10:52:25 +0200 Subject: [PATCH] refactoring: invoice, receipt, payment receive, estimate and journal number dialogs. --- client/src/components/DialogsContainer.js | 11 +- .../MakeJournal/MakeJournalEntriesForm.js | 3 + .../MakeJournal/MakeJournalFormDialogs.js | 28 +++++ .../EstimateNumberDialogContent.js | 34 +++--- .../Dialogs/EstimateNumberDialog/index.js | 13 +- .../InvoiceNumberDialogContent.js | 15 ++- .../InvoiceNumberDialogProvider.js | 8 +- .../Dialogs/InvoiceNumberDialog/index.js | 14 ++- .../JournalNumberDialogContent.js | 30 ++--- .../Dialogs/JournalNumberDialog/index.js | 8 +- .../PaymentReceiveNumberDialogContent.js | 34 +++--- .../PaymentReceiveNumberDialog/index.js | 7 +- .../ReceiptNumberDialogContent.js | 37 +++--- .../Dialogs/ReceiptNumberDialog/index.js | 21 +++- .../src/containers/Homepage/ShortcutBoxes.js | 30 +++-- .../Items/ItemFormPrimarySection.js | 10 +- .../JournalNumber/ReferenceNumberForm.js | 10 +- .../Estimates/EstimateForm/EstimateForm.js | 8 +- .../EstimateForm/EstimateFormDialogs.js | 28 +++++ .../EstimateForm/EstimateFormHeaderFields.js | 4 +- .../EstimateForm/EstimateItemsEntriesField.js | 30 +++-- .../Sales/Invoices/InvoiceForm/InvoiceForm.js | 2 + .../InvoiceForm/InvoiceFormDialogs.js | 27 ++++ .../InvoiceForm/InvoiceFormProvider.js | 22 +++- .../PaymentReceiveForm/PaymentReceiveForm.js | 3 + .../PaymentReceiveFormDialogs.js | 27 ++++ .../PaymentReceiveHeaderFields.js | 18 ++- .../Sales/Receipts/ReceiptForm/ReceiptForm.js | 3 + .../ReceiptForm/ReceiptFormDialogs.js | 28 +++++ .../ReceiptForm/ReceiptFormProvider.js | 2 +- client/src/hooks/query/bills.js | 12 +- client/src/hooks/query/estimates.js | 1 + client/src/hooks/query/invite.js | 2 +- client/src/hooks/query/invoices.js | 11 +- client/src/hooks/query/settings.js | 115 +++++++++++++----- client/src/style/pages/HomePage/HomePage.scss | 13 +- client/src/style/variables.scss | 2 +- 37 files changed, 467 insertions(+), 204 deletions(-) create mode 100644 client/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.js create mode 100644 client/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.js create mode 100644 client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.js create mode 100644 client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.js create mode 100644 client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.js diff --git a/client/src/components/DialogsContainer.js b/client/src/components/DialogsContainer.js index 9d63f23b2..785fbd765 100644 --- a/client/src/components/DialogsContainer.js +++ b/client/src/components/DialogsContainer.js @@ -5,11 +5,7 @@ import InviteUserDialog from 'containers/Dialogs/InviteUserDialog'; import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog'; import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog'; import ExchangeRateFormDialog from 'containers/Dialogs/ExchangeRateFormDialog'; -import JournalNumberDialog from 'containers/Dialogs/JournalNumberDialog'; -import PaymentReceiveNumberDialog from 'containers/Dialogs/PaymentReceiveNumberDialog'; -import EstimateNumberDialog from 'containers/Dialogs/EstimateNumberDialog'; -import ReceiptNumberDialog from 'containers/Dialogs/ReceiptNumberDialog'; -import InvoiceNumberDialog from 'containers/Dialogs/InvoiceNumberDialog'; + import InventoryAdjustmentDialog from 'containers/Dialogs/InventoryAdjustmentFormDialog'; import PaymentViaVoucherDialog from 'containers/Dialogs/PaymentViaVoucherDialog'; @@ -20,11 +16,6 @@ export default function DialogsContainer() { return (
- - - - - diff --git a/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js b/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js index be6ef6452..ee941cae2 100644 --- a/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js +++ b/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js @@ -15,6 +15,7 @@ import MakeJournalEntriesHeader from './MakeJournalEntriesHeader'; import MakeJournalFormFloatingActions from './MakeJournalFormFloatingActions'; import MakeJournalEntriesField from './MakeJournalEntriesField'; import MakeJournalFormFooter from './MakeJournalFormFooter'; +import MakeJournalFormDialogs from './MakeJournalFormDialogs'; import withSettings from 'containers/Settings/withSettings'; @@ -167,6 +168,8 @@ function MakeJournalEntriesForm({ + +
diff --git a/client/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.js b/client/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.js new file mode 100644 index 000000000..d55e63ab5 --- /dev/null +++ b/client/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { useFormikContext } from 'formik'; +import JournalNumberDialog from 'containers/Dialogs/JournalNumberDialog'; +import { transactionNumber } from 'utils'; + +/** + * Make journal form dialogs. + */ +export default function MakeJournalFormDialogs() { + const { setFieldValue } = useFormikContext(); + + // Update the form once the journal number form submit confirm. + const handleConfirm = (values) => { + setFieldValue( + 'journal_number', + transactionNumber(values.number_prefix, values.next_number), + ); + }; + + return ( + <> + + + ); +} diff --git a/client/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js b/client/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js index 42a8267a0..100817443 100644 --- a/client/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js +++ b/client/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js @@ -1,13 +1,12 @@ import React, { useCallback } from 'react'; import { DialogContent } from 'components'; -import { useQuery, queryCache } from 'react-query'; +import { useSaveSettings, useSettingsEstimates } from 'hooks/query'; import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm'; import withDialogActions from 'containers/Dialog/withDialogActions'; import withSettings from 'containers/Settings/withSettings'; -import withSettingsActions from 'containers/Settings/withSettingsActions'; -import { compose, optionsMapToArray } from 'utils'; +import { compose, optionsMapToArray, saveInvoke } from 'utils'; /** * Estimate number dialog's content. @@ -18,28 +17,26 @@ function EstimateNumberDialogContent({ nextNumber, numberPrefix, - // #withSettingsActions - requestFetchOptions, - requestSubmitOptions, - // #withDialogActions closeDialog, + + // #ownProps + onConfirm, }) { - const fetchSettings = useQuery(['settings'], () => requestFetchOptions({})); + const { isLoading: isSettingsLoading } = useSettingsEstimates(); + const { mutateAsync: saveSettingsMutate } = useSaveSettings(); const handleSubmitForm = (values, { setSubmitting }) => { - const options = optionsMapToArray(values).map((option) => { - return { key: option.key, ...option, group: 'sales_estimates' }; - }); - requestSubmitOptions({ options }) + const options = optionsMapToArray(values).map((option) => ({ + key: option.key, + ...option, + group: 'sales_estimates', + })); + saveSettingsMutate({ options }) .then(() => { setSubmitting(false); closeDialog('estimate-number-form'); - - setTimeout(() => { - queryCache.invalidateQueries('settings'); - // setEstimateNumberChanged(true); - }, 250); + saveInvoke(onConfirm, values); }) .catch(() => { setSubmitting(false); @@ -51,7 +48,7 @@ function EstimateNumberDialogContent({ }, [closeDialog]); return ( - + ({ nextNumber: estimatesSettings?.nextNumber, numberPrefix: estimatesSettings?.numberPrefix, diff --git a/client/src/containers/Dialogs/EstimateNumberDialog/index.js b/client/src/containers/Dialogs/EstimateNumberDialog/index.js index 5d225c1e5..12a152ef8 100644 --- a/client/src/containers/Dialogs/EstimateNumberDialog/index.js +++ b/client/src/containers/Dialogs/EstimateNumberDialog/index.js @@ -2,13 +2,18 @@ import React, { lazy } from 'react'; import { FormattedMessage as T } from 'react-intl'; import { Dialog, DialogSuspense } from 'components'; import withDialogRedux from 'components/DialogReduxConnect'; -import { compose } from 'utils'; +import { saveInvoke, compose } from 'utils'; const EstimateNumberDialogContent = lazy(() => import('./EstimateNumberDialogContent'), ); -function EstimateNumberDialog({ dialogName, paylaod = { id: null }, isOpen }) { +function EstimateNumberDialog({ + dialogName, + paylaod = { id: null }, + isOpen, + onConfirm +}) { return ( - + saveInvoke(onConfirm, values)}/> ); diff --git a/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js b/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js index 56eecc70d..7c46d827f 100644 --- a/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js +++ b/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js @@ -16,24 +16,30 @@ import { compose, optionsMapToArray } from 'utils'; */ function InvoiceNumberDialogContent({ + // #ownProps + onConfirm, + // #withSettings nextNumber, numberPrefix, - + // #withDialogActions closeDialog, }) { const { mutateAsync: saveSettings } = useSaveSettings(); const handleSubmitForm = (values, { setSubmitting }) => { - const options = optionsMapToArray(values).map((option) => { - return { key: option.key, ...option, group: 'sales_invoices' }; - }); + const options = optionsMapToArray(values).map((option) => ({ + key: option.key, + ...option, + group: 'sales_invoices', + })); saveSettings({ options }) .then(() => { setSubmitting(false); closeDialog('invoice-number-form'); + onConfirm(values); }) .catch(() => { setSubmitting(false); @@ -64,5 +70,4 @@ export default compose( nextNumber: invoiceSettings?.nextNumber, numberPrefix: invoiceSettings?.numberPrefix, })), - // withInvoicesActions, )(InvoiceNumberDialogContent); diff --git a/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogProvider.js b/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogProvider.js index 0b966ac70..8badba723 100644 --- a/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogProvider.js +++ b/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogProvider.js @@ -1,6 +1,6 @@ import React, { createContext, useContext } from 'react'; import { DialogContent } from 'components'; -import { useSettings } from 'hooks/query'; +import { useSettingsInvoices } from 'hooks/query'; const InvoiceNumberDialogContext = createContext(); @@ -8,15 +8,15 @@ const InvoiceNumberDialogContext = createContext(); * Invoice number dialog provider. */ function InvoiceNumberDialogProvider({ query, ...props }) { - const { isLoading } = useSettings(); + const { isLoading: isSettingsLoading } = useSettingsInvoices(); // Provider payload. const provider = { - + isSettingsLoading, }; return ( - + ); diff --git a/client/src/containers/Dialogs/InvoiceNumberDialog/index.js b/client/src/containers/Dialogs/InvoiceNumberDialog/index.js index bac958bd3..9ac3cd3a0 100644 --- a/client/src/containers/Dialogs/InvoiceNumberDialog/index.js +++ b/client/src/containers/Dialogs/InvoiceNumberDialog/index.js @@ -2,13 +2,19 @@ import React, { lazy } from 'react'; import { FormattedMessage as T } from 'react-intl'; import { Dialog, DialogSuspense } from 'components'; import withDialogRedux from 'components/DialogReduxConnect'; -import { compose } from 'utils'; +import { compose, saveInvoke } from 'utils'; const InvoiceNumberDialogContent = lazy(() => import('./InvoiceNumberDialogContent'), ); -function InvoiceNumberDialog({ dialogName, payload = { id: null }, isOpen }) { +function InvoiceNumberDialog({ + dialogName, + payload = { id: null }, + isOpen, + onConfirm, +}) { + return ( } @@ -18,7 +24,9 @@ function InvoiceNumberDialog({ dialogName, payload = { id: null }, isOpen }) { isOpen={isOpen} > - + saveInvoke(onConfirm, values)} /> ); diff --git a/client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js b/client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js index 96b507e2e..f9630e44d 100644 --- a/client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js +++ b/client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js @@ -1,15 +1,12 @@ import React, { useCallback } from 'react'; import { DialogContent } from 'components'; -import { useQuery, queryCache } from 'react-query'; +import { useSaveSettings, useSettingsManualJournals } from 'hooks/query'; import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm'; import withDialogActions from 'containers/Dialog/withDialogActions'; -import withSettingsActions from 'containers/Settings/withSettingsActions'; import withSettings from 'containers/Settings/withSettings'; -// import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions'; - -import { compose, optionsMapToArray } from 'utils'; +import { saveInvoke, compose, optionsMapToArray } from 'utils'; import 'style/pages/ManualJournal/JournalNumberDialog.scss' @@ -21,28 +18,25 @@ function JournalNumberDialogContent({ nextNumber, numberPrefix, - // #withSettingsActions - requestFetchOptions, - requestSubmitOptions, - // #withDialogActions closeDialog, -}) { - const fetchSettings = useQuery( - ['settings'], - () => requestFetchOptions({}), - ); + // #ownProps + onConfirm +}) { + const { isLoading: isSettingsLoading } = useSettingsManualJournals(); + const { mutateAsync: saveSettingsMutate } = useSaveSettings(); + // Handle the form submit. const handleSubmitForm = (values, { setSubmitting }) => { const options = optionsMapToArray(values).map((option) => ({ key: option.key, ...option, group: 'manual_journals', })); - requestSubmitOptions({ options }).then(() => { + saveSettingsMutate({ options }).then(() => { setSubmitting(false); closeDialog('journal-number-form'); - + saveInvoke(onConfirm, values); }).catch(() => { setSubmitting(false); }); @@ -53,7 +47,7 @@ function JournalNumberDialogContent({ }, [closeDialog]); return ( - + ({ nextNumber: manualJournalsSettings?.nextNumber, numberPrefix: manualJournalsSettings?.numberPrefix, })), - // withManualJournalsActions, )(JournalNumberDialogContent); \ No newline at end of file diff --git a/client/src/containers/Dialogs/JournalNumberDialog/index.js b/client/src/containers/Dialogs/JournalNumberDialog/index.js index 2ab3db165..e229752ab 100644 --- a/client/src/containers/Dialogs/JournalNumberDialog/index.js +++ b/client/src/containers/Dialogs/JournalNumberDialog/index.js @@ -2,7 +2,7 @@ import React, { lazy } from 'react'; import { FormattedMessage as T } from 'react-intl'; import { Dialog, DialogSuspense } from 'components'; import withDialogRedux from 'components/DialogReduxConnect'; -import { compose } from 'utils'; +import { saveInvoke, compose } from 'utils'; const JournalNumberDialogContent = lazy(() => import('./JournalNumberDialogContent')); @@ -10,7 +10,12 @@ function JournalNumberDialog({ dialogName, payload = { id: null }, isOpen, + onConfirm }) { + + const handleConfirm = (values) => { + saveInvoke(onConfirm, values) + }; return ( diff --git a/client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js b/client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js index b0fa75c2e..70f3c0cfa 100644 --- a/client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js +++ b/client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js @@ -1,15 +1,14 @@ import React, { useCallback } from 'react'; import { DialogContent } from 'components'; -import { useQuery } from 'react-query'; +import { useSaveSettings, useSettingsPaymentReceives } from 'hooks/query'; import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm'; import withDialogActions from 'containers/Dialog/withDialogActions'; import withSettingsActions from 'containers/Settings/withSettingsActions'; import withSettings from 'containers/Settings/withSettings'; -// import withPaymentReceivesActions from 'containers/Sales/PaymentReceive/withPaymentReceivesActions'; -import { compose, optionsMapToArray } from 'utils'; +import { saveInvoke, compose, optionsMapToArray } from 'utils'; /** * payment receive number dialog's content. @@ -20,31 +19,28 @@ function PaymentNumberDialogContent({ nextNumber, numberPrefix, - // #withSettingsActions - requestFetchOptions, - requestSubmitOptions, - // #withDialogActions closeDialog, - // #withPaymentReceivesActions - // setPaymentReceiveNumberChanged, + // #ownProps + onConfirm, }) { - const fetchSettings = useQuery(['settings'], () => requestFetchOptions({})); + const { isLoading: isSettingsLoading } = useSettingsPaymentReceives(); + const { mutateAsync: saveSettingsMutate } = useSaveSettings(); const handleSubmitForm = (values, { setSubmitting }) => { - const options = optionsMapToArray(values).map((option) => { - return { key: option.key, ...option, group: 'payment_receives' }; - }); + const options = optionsMapToArray(values).map((option) => ({ + key: option.key, + ...option, + group: 'payment_receives', + })); - requestSubmitOptions({ options }) + saveSettingsMutate({ options }) .then(() => { setSubmitting(false); closeDialog('payment-receive-number-form'); - setTimeout(() => { - // setPaymentReceiveNumberChanged(true); - }, 250); + saveInvoke(onConfirm, values); }) .catch(() => { setSubmitting(false); @@ -55,9 +51,8 @@ function PaymentNumberDialogContent({ closeDialog('payment-receive-number-form'); }, [closeDialog]); - return ( - + import('./PaymentReceiveNumberDialogContent'), ); +/** + * Payment receive number dialog. + */ function PaymentReceiveNumberDialog({ dialogName, payload = { id: null }, isOpen, + onConfirm }) { return ( saveInvoke(onConfirm, values)} /> diff --git a/client/src/containers/Dialogs/ReceiptNumberDialog/ReceiptNumberDialogContent.js b/client/src/containers/Dialogs/ReceiptNumberDialog/ReceiptNumberDialogContent.js index 76c9100ce..caa6f7377 100644 --- a/client/src/containers/Dialogs/ReceiptNumberDialog/ReceiptNumberDialogContent.js +++ b/client/src/containers/Dialogs/ReceiptNumberDialog/ReceiptNumberDialogContent.js @@ -1,49 +1,45 @@ import React, { useCallback } from 'react'; import { DialogContent } from 'components'; -import { useQuery } from 'react-query'; +import { useSettingsReceipts, useSaveSettings } from 'hooks/query'; import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm'; import withDialogActions from 'containers/Dialog/withDialogActions'; import withSettings from 'containers/Settings/withSettings'; -import withSettingsActions from 'containers/Settings/withSettingsActions'; -import { compose, optionsMapToArray } from 'utils'; +import { compose, optionsMapToArray, saveInvoke } from 'utils'; /** * Receipt number dialog's content. */ function ReceiptNumberDialogContent({ + // #ownProps + receiptId, + onConfirm, + // #withSettings nextNumber, numberPrefix, - // #withSettingsActions - requestFetchOptions, - requestSubmitOptions, - // #withDialogActions closeDialog, - - // #withReceiptActions - setReceiptNumberChanged, }) { - const fetchSettings = useQuery(['settings'], () => requestFetchOptions({})); + const { isLoading: isSettingsLoading } = useSettingsReceipts(); + const { mutateAsync: saveSettingsMutate } = useSaveSettings(); const handleSubmitForm = (values, { setSubmitting }) => { - const options = optionsMapToArray(values).map((option) => { - return { key: option.key, ...option, group: 'sales_receipts' }; - }); + const options = optionsMapToArray(values).map((option) => ({ + key: option.key, + ...option, + group: 'sales_receipts', + })); - requestSubmitOptions({ options }) + saveSettingsMutate({ options }) .then(() => { setSubmitting(false); closeDialog('receipt-number-form'); - - setTimeout(() => { - setReceiptNumberChanged(true); - }, 250); + saveInvoke(onConfirm, values) }) .catch(() => { setSubmitting(false); @@ -55,7 +51,7 @@ function ReceiptNumberDialogContent({ }, [closeDialog]); return ( - + ({ nextNumber: receiptSettings?.nextNumber, numberPrefix: receiptSettings?.numberPrefix, diff --git a/client/src/containers/Dialogs/ReceiptNumberDialog/index.js b/client/src/containers/Dialogs/ReceiptNumberDialog/index.js index f4a3cf96b..eac8350ca 100644 --- a/client/src/containers/Dialogs/ReceiptNumberDialog/index.js +++ b/client/src/containers/Dialogs/ReceiptNumberDialog/index.js @@ -2,13 +2,25 @@ import React, { lazy } from 'react'; import { FormattedMessage as T } from 'react-intl'; import { Dialog, DialogSuspense } from 'components'; import withDialogRedux from 'components/DialogReduxConnect'; -import { compose } from 'utils'; +import { compose, saveInvoke } from 'utils'; const ReceiptNumberDialogContent = lazy(() => import('./ReceiptNumberDialogContent'), ); -function ReceiptNumberDialog({ dialogName, paylaod = { id: null }, isOpen }) { +/** + * Sale receipt number dialog. + */ +function ReceiptNumberDialog({ + dialogName, + paylaod = { id: null }, + isOpen, + onConfirm, +}) { + const handleConfirm = (values) => { + saveInvoke(onConfirm, values); + }; + return ( - + ); diff --git a/client/src/containers/Homepage/ShortcutBoxes.js b/client/src/containers/Homepage/ShortcutBoxes.js index fb19d9b16..3a3927ad2 100644 --- a/client/src/containers/Homepage/ShortcutBoxes.js +++ b/client/src/containers/Homepage/ShortcutBoxes.js @@ -1,27 +1,25 @@ import React from 'react'; -import { FormattedMessage as T, useIntl } from 'react-intl'; -import classNames from 'classnames'; import { shortcutBox } from 'common/homepageOptions'; import { Icon } from 'components'; function ShortcutBox({ title, iconColor, description }) { return (
-
- - - - - + + -
{title}
-
{description}
+ +
+
{title}
+
{description}
+
); } diff --git a/client/src/containers/Items/ItemFormPrimarySection.js b/client/src/containers/Items/ItemFormPrimarySection.js index 531683b7c..8c8ff9954 100644 --- a/client/src/containers/Items/ItemFormPrimarySection.js +++ b/client/src/containers/Items/ItemFormPrimarySection.js @@ -8,7 +8,7 @@ import { Position, } from '@blueprintjs/core'; import { FormattedMessage as T } from 'react-intl'; -import { ErrorMessage, FastField, useFormikContext } from 'formik'; +import { ErrorMessage, FastField } from 'formik'; import { CategoriesSelectList, Hint, @@ -26,13 +26,11 @@ import { handleStringChange, inputIntent } from 'utils'; * Item form primary section. */ export default function ItemFormPrimarySection() { - const { itemsCategories } = useItemFormContext(); + // Item form context. + const { isNewMode, item, itemsCategories } = useItemFormContext(); const nameFieldRef = useRef(null); - // Formik context. - const { values: { type } } = useFormikContext(); - useEffect(() => { // Auto focus item name field once component mount. if (nameFieldRef.current) { @@ -87,7 +85,7 @@ export default function ItemFormPrimarySection() { form.setFieldValue('type', _value); })} selectedValue={value} - disabled={type === 'inventory'} + disabled={!isNewMode && item.type === 'inventory'} > } value="service" /> } value="non-inventory" /> diff --git a/client/src/containers/JournalNumber/ReferenceNumberForm.js b/client/src/containers/JournalNumber/ReferenceNumberForm.js index 7249c62d9..91616a75d 100644 --- a/client/src/containers/JournalNumber/ReferenceNumberForm.js +++ b/client/src/containers/JournalNumber/ReferenceNumberForm.js @@ -58,9 +58,8 @@ export default function ReferenceNumberForm({ tincidunt porta quam,

- {/* prefix */} - - + {/* ------------- Prefix ------------- */} + } className={'form-group--'} @@ -75,8 +74,9 @@ export default function ReferenceNumberForm({ /> - {/* next_number */} - + + {/* ------------- Next number ------------- */} + } className={'form-group--'} diff --git a/client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js index a985ec1b8..3dffc5610 100644 --- a/client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js +++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js @@ -16,6 +16,7 @@ import EstimateFormHeader from './EstimateFormHeader'; import EstimateItemsEntriesField from './EstimateItemsEntriesField'; import EstimateFloatingActions from './EstimateFloatingActions'; import EstimateFormFooter from './EstimateFormFooter'; +import EstimateFormDialogs from './EstimateFormDialogs'; import withSettings from 'containers/Settings/withSettings'; @@ -158,12 +159,11 @@ function EstimateForm({ >
- -
- -
+ + + diff --git a/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.js new file mode 100644 index 000000000..03a6fbcf5 --- /dev/null +++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { useFormikContext } from 'formik'; +import EstimateNumberDialog from 'containers/Dialogs/EstimateNumberDialog'; +import { transactionNumber } from 'utils'; + +/** + * Estimate form dialogs. + */ +export default function EstimateFormDialogs() { + const { setFieldValue } = useFormikContext(); + + // Update the form once the invoice number form submit confirm. + const handleEstimateNumberFormConfirm = (values) => { + setFieldValue( + 'estimate_number', + transactionNumber(values.number_prefix, values.next_number), + ); + }; + + return ( + <> + + + ); +} diff --git a/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js index cf984d46c..cf5d01f1a 100644 --- a/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js +++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js @@ -32,7 +32,7 @@ function EstimateFormHeader({ }) { const { customers } = useEstimateFormContext(); - const handleEstimateNumberChange = () => { + const handleEstimateNumberBtnClick = () => { openDialog('estimate-number-form', {}); }; @@ -135,7 +135,7 @@ function EstimateFormHeader({ /> , }} tooltip={true} diff --git a/client/src/containers/Sales/Estimates/EstimateForm/EstimateItemsEntriesField.js b/client/src/containers/Sales/Estimates/EstimateForm/EstimateItemsEntriesField.js index 37d8cb154..52905a2b9 100644 --- a/client/src/containers/Sales/Estimates/EstimateForm/EstimateItemsEntriesField.js +++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateItemsEntriesField.js @@ -1,5 +1,7 @@ import React from 'react'; import { FastField } from 'formik'; +import classNames from 'classnames'; +import { CLASSES } from 'common/classes'; import ItemsEntriesTable from 'containers/Entries/ItemsEntriesTable'; import { useEstimateFormContext } from './EstimateFormProvider'; @@ -10,18 +12,20 @@ export default function EstimateFormItemsEntriesField() { const { items } = useEstimateFormContext(); return ( - - {({ form, field: { value }, meta: { error, touched } }) => ( - { - form.setFieldValue('entries', entries); - }} - items={items} - errors={error} - linesNumber={4} - /> - )} - +
+ + {({ form, field: { value }, meta: { error, touched } }) => ( + { + form.setFieldValue('entries', entries); + }} + items={items} + errors={error} + linesNumber={4} + /> + )} + +
); } diff --git a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js index 1f4eaca01..2d7548917 100644 --- a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js +++ b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js @@ -15,6 +15,7 @@ import InvoiceFormHeader from './InvoiceFormHeader'; import InvoiceItemsEntriesEditorField from './InvoiceItemsEntriesEditorField'; import InvoiceFloatingActions from './InvoiceFloatingActions'; import InvoiceFormFooter from './InvoiceFormFooter'; +import InvoiceFormDialogs from './InvoiceFormDialogs'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withMediaActions from 'containers/Media/withMediaActions'; @@ -159,6 +160,7 @@ function InvoiceForm({ + diff --git a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.js new file mode 100644 index 000000000..dc3f9ebaf --- /dev/null +++ b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.js @@ -0,0 +1,27 @@ +import React from 'react'; +import InvoiceNumberDialog from 'containers/Dialogs/InvoiceNumberDialog'; +import { useFormikContext } from 'formik'; +import { transactionNumber } from 'utils'; + +/** + * Invoice form dialogs. + */ +export default function InvoiceFormDialogs() { + const { setFieldValue } = useFormikContext(); + + // Update the form once the invoice number form submit confirm. + const handleInvoiceNumberFormConfirm = (values) => { + setFieldValue( + 'invoice_no', + transactionNumber(values.number_prefix, values.next_number), + ); + }; + return ( + <> + + + ); +} diff --git a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js index 06be7ed9a..4ac8e43b5 100644 --- a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js +++ b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js @@ -6,6 +6,7 @@ import { useCustomers, useCreateInvoice, useEditInvoice, + useSettingsInvoices, } from 'hooks/query'; const InvoiceFormContext = createContext(); @@ -14,7 +15,7 @@ const InvoiceFormContext = createContext(); * Accounts chart data provider. */ function InvoiceFormProvider({ invoiceId, ...props }) { - const { data: invoice, isFetching: isInvoiceLoading } = useInvoice( + const { data: invoice, isLoading: isInvoiceLoading } = useInvoice( invoiceId, { enabled: !!invoiceId, @@ -24,21 +25,24 @@ function InvoiceFormProvider({ invoiceId, ...props }) { // Handle fetching the items table based on the given query. const { data: { items }, - isFetching: isItemsLoading, + isLoading: isItemsLoading, } = useItems(); // Handle fetch customers data table or list const { data: { customers }, - isFetching: isCustomersLoading, + isLoading: isCustomersLoading, } = useCustomers(); + // Handle fetching settings. + const { isLoading: isSettingsLoading } = useSettingsInvoices(); + // Create and edit invoice mutations. const { mutateAsync: createInvoiceMutate } = useCreateInvoice(); const { mutateAsync: editInvoiceMutate } = useEditInvoice(); // Form submit payload. - const [submitPayload, setSubmitPayload] = useState({}); + const [submitPayload, setSubmitPayload] = useState(); // Detarmines whether the form in new mode. const isNewMode = !invoiceId; @@ -53,16 +57,22 @@ function InvoiceFormProvider({ invoiceId, ...props }) { isInvoiceLoading, isItemsLoading, isCustomersLoading, + isSettingsLoading, createInvoiceMutate, editInvoiceMutate, setSubmitPayload, - isNewMode + isNewMode, }; return ( diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js index 5a2341440..9098f7123 100644 --- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js +++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js @@ -12,6 +12,7 @@ import PaymentReceiveFormBody from './PaymentReceiveFormBody'; import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions'; import PaymentReceiveFormFooter from './PaymentReceiveFormFooter'; import PaymentReceiveFormAlerts from './PaymentReceiveFormAlerts'; +import PaymentReceiveFormDialogs from './PaymentReceiveFormDialogs'; import { PaymentReceiveInnerProvider } from './PaymentReceiveInnerProvider'; import withSettings from 'containers/Settings/withSettings'; @@ -164,7 +165,9 @@ function PaymentReceiveForm({ + {/* Alerts & Dialogs */} + diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.js new file mode 100644 index 000000000..6a4f24708 --- /dev/null +++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { useFormikContext } from 'formik'; +import PaymentReceiveNumberDialog from 'containers/Dialogs/PaymentReceiveNumberDialog'; +import { transactionNumber } from 'utils'; + +/** + * Payment receive form dialogs. + */ +export default function PaymentReceiveFormDialogs() { + const { setFieldValue } = useFormikContext(); + + const handleUpdatePaymentNumber = (values) => { + setFieldValue( + 'payment_receive_no', + transactionNumber(values.number_prefix, values.next_number), + ); + }; + + return ( + <> + + + ); +} diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js index a055f72c5..60d14dc05 100644 --- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js +++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js @@ -32,7 +32,7 @@ import { Money, } from 'components'; import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider'; - +import withDialogActions from 'containers/Dialog/withDialogActions'; import withSettings from 'containers/Settings/withSettings'; import { amountPaymentEntries, fullAmountPaymentEntries } from './utils'; @@ -41,7 +41,12 @@ import { toSafeInteger } from 'lodash'; /** * Payment receive header fields. */ -function PaymentReceiveHeaderFields({ baseCurrency }) { +function PaymentReceiveHeaderFields({ + baseCurrency, + + // #withDialogActions + openDialog, +}) { // Payment receive form context. const { customers, accounts, isNewMode } = usePaymentReceiveFormContext(); @@ -73,6 +78,12 @@ function PaymentReceiveHeaderFields({ baseCurrency }) { setFieldValue('entries', newEntries); }; + + // Handle click open payment receive number dialog. + const handleClickOpenDialog = () => { + openDialog('payment-receive-number-form') + }; + return (
{/* ------------- Customer name ------------- */} @@ -185,7 +196,7 @@ function PaymentReceiveHeaderFields({ baseCurrency }) { /> , }} tooltip={true} @@ -253,4 +264,5 @@ export default compose( withSettings(({ organizationSettings }) => ({ baseCurrency: organizationSettings?.baseCurrency, })), + withDialogActions )(PaymentReceiveHeaderFields); diff --git a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js index 12b892a79..d2dc8b8f1 100644 --- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js +++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js @@ -21,6 +21,7 @@ import ReceiptFromHeader from './ReceiptFormHeader'; import ReceiptItemsEntriesEditor from './ReceiptItemsEntriesEditor'; import ReceiptFormFloatingActions from './ReceiptFormFloatingActions'; import ReceiptFormFooter from './ReceiptFormFooter'; +import ReceiptFormDialogs from './ReceiptFormDialogs'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withSettings from 'containers/Settings/withSettings'; @@ -170,6 +171,8 @@ function ReceiptForm({ + +
diff --git a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.js new file mode 100644 index 000000000..839a753e4 --- /dev/null +++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { useFormikContext } from 'formik'; +import ReceiptNumberDialog from 'containers/Dialogs/ReceiptNumberDialog'; +import { transactionNumber } from 'utils'; + +/** + * Receipt form dialogs. + */ +export default function ReceiptFormDialogs() { + const { setFieldValue } = useFormikContext(); + + // Update the form once the receipt number form submit confirm. + const handleReceiptNumberFormConfirm = (values) => { + setFieldValue( + 'receipt_number', + transactionNumber(values.number_prefix, values.next_number), + ); + }; + + return ( + <> + + + ); +} diff --git a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js index 2afd043d0..fc050b123 100644 --- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js +++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js @@ -39,7 +39,7 @@ function ReceiptFormProvider({ receiptId, ...props }) { } = useItems(); // Fetch receipt settings. - const { isFetching: isSettingLoading } = useSettings(); + const { isLoading: isSettingLoading } = useSettings(); const { mutateAsync: createReceiptMutate } = useCreateReceipt(); const { mutateAsync: editReceiptMutate } = useEditReceipt(); diff --git a/client/src/hooks/query/bills.js b/client/src/hooks/query/bills.js index 809ffd285..34d762866 100644 --- a/client/src/hooks/query/bills.js +++ b/client/src/hooks/query/bills.js @@ -11,9 +11,11 @@ export function useCreateBill(props) { const apiRequest = useApiRequest(); return useMutation((values) => apiRequest.post('purchases/bills', values), { - onSuccess: () => { + onSuccess: (res, values) => { queryClient.invalidateQueries('BILLS'); queryClient.invalidateQueries('BILL'); + queryClient.invalidateQueries(['VENDORS']); + queryClient.invalidateQueries(['VENDOR', values.vendor_id]); }, ...props, }); @@ -29,9 +31,11 @@ export function useEditBill(props) { return useMutation( ([id, values]) => apiRequest.post(`purchases/bills/${id}`, values), { - onSuccess: () => { + onSuccess: (res, [id, values]) => { queryClient.invalidateQueries('BILLS'); queryClient.invalidateQueries('BILL'); + queryClient.invalidateQueries(['VENDORS']); + queryClient.invalidateQueries(['VENDOR', values.vendor_id]); }, ...props, }, @@ -46,9 +50,10 @@ export function useDeleteBill(props) { const apiRequest = useApiRequest(); return useMutation((id) => apiRequest.delete(`purchases/bills/${id}`), { - onSuccess: () => { + onSuccess: (res, id) => { queryClient.invalidateQueries('BILLS'); queryClient.invalidateQueries('BILL'); + queryClient.invalidateQueries(['VENDORS']); }, ...props, }); @@ -122,6 +127,7 @@ export function useOpenBill(props) { { onSuccess: () => { queryClient.invalidateQueries('BILLS'); + queryClient.invalidateQueries(['VENDORS']); }, ...props, }, diff --git a/client/src/hooks/query/estimates.js b/client/src/hooks/query/estimates.js index b35162687..7c833f55e 100644 --- a/client/src/hooks/query/estimates.js +++ b/client/src/hooks/query/estimates.js @@ -13,6 +13,7 @@ export function useCreateEstimate(props) { return useMutation((values) => apiRequest.post('sales/estimates', values), { onSuccess: () => { queryClient.invalidateQueries('SALE_ESTIMATES'); + queryClient.invalidateQueries(['SETTINGS', 'ESTIMATES']); }, ...props, }); diff --git a/client/src/hooks/query/invite.js b/client/src/hooks/query/invite.js index f547fff0c..0318c12d1 100644 --- a/client/src/hooks/query/invite.js +++ b/client/src/hooks/query/invite.js @@ -10,7 +10,7 @@ export const useAuthInviteAccept = (props) => { return useMutation( ([values, token]) => apiRequest.post(`invite/accept/${token}`, values), props, - ) + ); } /** diff --git a/client/src/hooks/query/invoices.js b/client/src/hooks/query/invoices.js index 0ab447626..d60ec0e71 100644 --- a/client/src/hooks/query/invoices.js +++ b/client/src/hooks/query/invoices.js @@ -11,8 +11,11 @@ export function useCreateInvoice(props) { const apiRequest = useApiRequest(); return useMutation((values) => apiRequest.post('sales/invoices', values), { - onSuccess: () => { + onSuccess: (values) => { queryClient.invalidateQueries('SALE_INVOICES'); + queryClient.invalidateQueries(['SETTINGS', 'INVOICES']); + queryClient.invalidateQueries('CUSTOMERS'); + queryClient.invalidateQueries(['CUSTOMER', values.customer_id]); }, ...props, }); @@ -28,9 +31,11 @@ export function useEditInvoice(props) { return useMutation( ([id, values]) => apiRequest.post(`sales/invoices/${id}`, values), { - onSuccess: (res, id) => { + onSuccess: (res, [id, values]) => { queryClient.invalidateQueries('SALE_INVOICES'); queryClient.invalidateQueries(['SALE_INVOICE', id]); + queryClient.invalidateQueries('CUSTOMERS'); + queryClient.invalidateQueries(['CUSTOMER', values.customer_id]); }, ...props, }, @@ -48,6 +53,7 @@ export function useDeleteInvoice(props) { onSuccess: (res, id) => { queryClient.invalidateQueries('SALE_INVOICES'); queryClient.invalidateQueries(['SALE_INVOICE', id]); + queryClient.invalidateQueries('CUSTOMERS'); }, ...props, }); @@ -97,6 +103,7 @@ export function useDeliverInvoice(props) { onSuccess: (res, id) => { queryClient.invalidateQueries('SALE_INVOICES'); queryClient.invalidateQueries(['SALE_INVOICE', id]); + queryClient.invalidateQueries('CUSTOMERS'); }, ...props, }); diff --git a/client/src/hooks/query/settings.js b/client/src/hooks/query/settings.js index 447c3f67f..00c1e5a1a 100644 --- a/client/src/hooks/query/settings.js +++ b/client/src/hooks/query/settings.js @@ -3,34 +3,6 @@ import { useDispatch } from 'react-redux'; import useApiRequest from '../useRequest'; import t from 'store/types'; -/** - * Retrieve settings. - */ -export function useSettings(query, props) { - const dispatch = useDispatch(); - const apiRequest = useApiRequest(); - - const settings = useQuery( - ['SETTINGS', query], - async () => { - const { - data: { settings }, - } = await apiRequest.get('settings', { params: query }); - - return settings; - }, - { - initialData: [], - ...props, - }, - ); - dispatch({ - type: t.SETTING_SET, - options: settings.data, - }); - return settings; -} - /** * Saves the settings. */ @@ -45,3 +17,90 @@ export function useSaveSettings(props) { ...props, }); } + +function useSettingsQuery(key, query, props) { + const dispatch = useDispatch(); + const apiRequest = useApiRequest(); + + return useQuery( + key, + () => apiRequest.get('settings', { params: query }), + { + select: (res) => res.data.settings, + initialDataUpdatedAt: 0, + initialData: { + data: { + settings: [], + }, + }, + onSuccess: (settings) => { + dispatch({ type: t.SETTING_SET, options: settings }); + }, + ...props, + }, + ); +} + +/** + * Retrieve the all settings of the organization. + */ +export function useSettings() { + return useSettingsQuery(['SETTINGS', 'ALL'], {}); +} + +/** + * Retrieve invoices settings. + */ +export function useSettingsInvoices(props) { + return useSettingsQuery( + ['SETTINGS', 'INVOICES'], + { group: 'sale_invoices' }, + props, + ); +} + +/** + * Retrieve invoices settings. + */ +export function useSettingsEstimates(props) { + return useSettingsQuery( + ['SETTINGS', 'ESTIMATES'], + { group: 'sale_estimates' }, + props, + ); +} + +/** + * Retrieve payment receives settings. + */ +export function useSettingsPaymentReceives(props) { + return useSettingsQuery( + ['SETTINGS', 'PAYMENT_RECEIVES'], + { group: 'payment_receives' }, + props, + ); +} + +/** + * Retrieve sale receipts settings. + * @param {*} props + */ +export function useSettingsReceipts(props) { + return useSettingsQuery( + ['SETTINGS', 'RECEIPTS'], + { group: 'sale_receipts' }, + props, + ); +} + +/** + * Retrieve sale receipts settings. + * @param {*} props + */ +export function useSettingsManualJournals(props) { + return useSettingsQuery( + ['SETTINGS', 'MANUAL_JOURNALS'], + { group: 'sale_receipts' }, + props, + ); +} \ No newline at end of file diff --git a/client/src/style/pages/HomePage/HomePage.scss b/client/src/style/pages/HomePage/HomePage.scss index d675a31fe..c58e93e38 100644 --- a/client/src/style/pages/HomePage/HomePage.scss +++ b/client/src/style/pages/HomePage/HomePage.scss @@ -1,9 +1,10 @@ .homepage { &__container { display: flex; - height: 100%; + margin: 22px 32px; background-color: transparent; + align-items: flex-start; .shortcut-boxes { flex: 2; @@ -12,23 +13,27 @@ background-color: #fff; border-bottom: 1px solid #d2dce2; border-right: 1px solid #d2dce2; + max-width: 800px; .shortcut-box { width: 50%; - // height: 174px; padding: 16px; border-left: 1px solid #d2dce2; border-top: 1px solid #d2dce2; background-color: transparent; transition: 0.2s; + a{ + text-decoration: none; + } + &__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; - span > a { + span { color: #d6d6e0; } .header--icon { @@ -62,7 +67,7 @@ display: flex; flex-direction: column; padding-bottom: 32px; - width: 100%; + max-width: 400px; &__title { font-size: 16px; diff --git a/client/src/style/variables.scss b/client/src/style/variables.scss index b9144e1d8..d9638acb9 100644 --- a/client/src/style/variables.scss +++ b/client/src/style/variables.scss @@ -34,7 +34,7 @@ $sidebar-width: 100%; $sidebar-menu-item-color: rgb(255, 255, 255); $sidebar-menu-item-color-active: rgb(255, 255, 255); $sidebar-popover-submenu-bg: rgb(1, 20, 62); -$sidebar-menu-label-color: rgba(255, 255, 255, 0.45); +$sidebar-menu-label-color: rgba(255, 255, 255, 0.5); $sidebar-submenu-item-color: rgba(255, 255, 255, 0.85); $sidebar-submenu-item-hover-color: rgb(255, 255, 255); $sidebar-logo-opacity: 0.5;