From 93bd2af1d72a13e0c89076f3d6b5b5bd7ca88798 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Mon, 27 Dec 2021 18:29:52 +0200 Subject: [PATCH] feat(Card): card footer actions. --- src/components/Card.js | 13 --------- src/components/Card/index.js | 27 +++++++++++++++++++ src/components/CommercialDoc/index.js | 4 +-- src/components/index.js | 3 +-- .../InventoryAdjustmentList.js | 2 -- .../Preferences/Accountant/AccountantForm.js | 5 ++-- .../Preferences/General/GeneralForm.js | 19 +++++++++++-- .../Preferences/General/GeneralFormPage.js | 2 +- .../Preferences/Item/ItemPreferencesForm.js | 5 ++-- src/style/pages/Preferences/GeneralForm.scss | 17 ------------ 10 files changed, 54 insertions(+), 43 deletions(-) delete mode 100644 src/components/Card.js create mode 100644 src/components/Card/index.js diff --git a/src/components/Card.js b/src/components/Card.js deleted file mode 100644 index 2374c2cb1..000000000 --- a/src/components/Card.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -export default function Card({ className, children }) { - return {children}; -} - -const CardRoot = styled.div` - padding: 15px; - margin: 15px; - background: #fff; - border: 1px solid #d2dce2; -`; diff --git a/src/components/Card/index.js b/src/components/Card/index.js new file mode 100644 index 000000000..598085686 --- /dev/null +++ b/src/components/Card/index.js @@ -0,0 +1,27 @@ +import React from 'react'; +import styled from 'styled-components'; + +export function Card({ className, children }) { + return {children}; +} + +const CardRoot = styled.div` + padding: 15px; + margin: 15px; + background: #fff; + border: 1px solid #d2dce2; +`; + +export const CardFooterActions = styled.div` + padding-top: 16px; + border-top: 1px solid #e0e7ea; + margin-top: 30px; + + .bp3-button { + min-width: 70px; + + + .bp3-button { + margin-left: 10px; + } + } +`; diff --git a/src/components/CommercialDoc/index.js b/src/components/CommercialDoc/index.js index fc2d191c4..c8e2c593b 100644 --- a/src/components/CommercialDoc/index.js +++ b/src/components/CommercialDoc/index.js @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import Card from '../Card'; +import { Card } from '../Card'; import DataTable from '../DataTable'; export const CommercialDocBox = styled(Card)` @@ -22,4 +22,4 @@ export const CommercialDocEntriesTable = styled(DataTable)` export const CommercialDocFooter = styled.div` margin-top: 25px; -` \ No newline at end of file +`; diff --git a/src/components/index.js b/src/components/index.js index ba9c0b162..feb3f934c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -54,7 +54,6 @@ import Postbox from './Postbox'; import AccountsSuggestField from './AccountsSuggestField'; import MaterialProgressBar from './MaterialProgressBar'; import { MoneyFieldCell } from './DataTableCells'; -import Card from './Card'; import AvaterCell from './AvaterCell'; import { ItemsMultiSelect } from './Items'; @@ -92,6 +91,7 @@ export * from './Typo'; export * from './TextStatus'; export * from './Tags'; export * from './CommercialDoc'; +export * from './Card'; const Hint = FieldHint; @@ -158,7 +158,6 @@ export { MaterialProgressBar, MoneyFieldCell, ItemsMultiSelect, - Card, AvaterCell, MoreMenuItems, }; diff --git a/src/containers/InventoryAdjustments/InventoryAdjustmentList.js b/src/containers/InventoryAdjustments/InventoryAdjustmentList.js index dddb4e756..99ba1c7d8 100644 --- a/src/containers/InventoryAdjustments/InventoryAdjustmentList.js +++ b/src/containers/InventoryAdjustments/InventoryAdjustmentList.js @@ -26,8 +26,6 @@ function InventoryAdjustmentList({ - - ); diff --git a/src/containers/Preferences/Accountant/AccountantForm.js b/src/containers/Preferences/Accountant/AccountantForm.js index 474ac29b0..fc5e1c233 100644 --- a/src/containers/Preferences/Accountant/AccountantForm.js +++ b/src/containers/Preferences/Accountant/AccountantForm.js @@ -15,6 +15,7 @@ import { FormattedMessage as T, AccountsSelectList, FieldRequiredHint, + CardFooterActions, } from 'components'; import { handleStringChange, inputIntent } from 'utils'; import { ACCOUNT_TYPE } from 'common/accountTypes'; @@ -229,14 +230,14 @@ export default function AccountantForm() { )} -
+ -
+ ); } diff --git a/src/containers/Preferences/General/GeneralForm.js b/src/containers/Preferences/General/GeneralForm.js index 2fc72621d..7925d5279 100644 --- a/src/containers/Preferences/General/GeneralForm.js +++ b/src/containers/Preferences/General/GeneralForm.js @@ -5,6 +5,7 @@ import classNames from 'classnames'; import { TimezonePicker } from '@blueprintjs/timezone'; import { ErrorMessage, FastField } from 'formik'; import { useHistory } from 'react-router-dom'; +import styled from 'styled-components'; import { FormattedMessage as T } from 'components'; import { ListSelect, FieldRequiredHint } from 'components'; @@ -242,14 +243,28 @@ export default function PreferencesGeneralForm({ isSubmitting }) { )} -
+ -
+ ); } + +const CardFooterActions = styled.div` + padding-top: 16px; + border-top: 1px solid #e0e7ea; + margin-top: 30px; + + .bp3-button { + min-width: 70px; + + + .bp3-button{ + margin-left: 10px; + } + } +`; \ No newline at end of file diff --git a/src/containers/Preferences/General/GeneralFormPage.js b/src/containers/Preferences/General/GeneralFormPage.js index ae0bdf605..190a55215 100644 --- a/src/containers/Preferences/General/GeneralFormPage.js +++ b/src/containers/Preferences/General/GeneralFormPage.js @@ -42,7 +42,7 @@ function GeneralFormPage({ const initialValues = { ...transformToForm(organization.metadata, defaultValues), }; - + // Handle the form submit. const handleFormSubmit = (values, { setSubmitting, resetForm }) => { // Handle request success. const onSuccess = (response) => { diff --git a/src/containers/Preferences/Item/ItemPreferencesForm.js b/src/containers/Preferences/Item/ItemPreferencesForm.js index 4f82fcf95..1dc6f0415 100644 --- a/src/containers/Preferences/Item/ItemPreferencesForm.js +++ b/src/containers/Preferences/Item/ItemPreferencesForm.js @@ -6,6 +6,7 @@ import { AccountsSelectList, FieldRequiredHint, FormattedMessage as T, + CardFooterActions } from 'components'; import { inputIntent } from 'utils'; import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from 'common/accountTypes'; @@ -135,14 +136,14 @@ export default function ItemForm() { )} -
+ -
+ ); } diff --git a/src/style/pages/Preferences/GeneralForm.scss b/src/style/pages/Preferences/GeneralForm.scss index 2a5bec102..283ea9fae 100644 --- a/src/style/pages/Preferences/GeneralForm.scss +++ b/src/style/pages/Preferences/GeneralForm.scss @@ -3,23 +3,6 @@ // General page //--------------------------------- .preferences-page__inside-content--general { - .card { - padding: 25px; - - .card__footer { - padding-top: 16px; - border-top: 1px solid #e0e7ea; - margin-top: 30px; - - .bp3-button { - min-width: 70px; - - + .bp3-button{ - margin-left: 10px; - } - } - } - } .bp3-form-group { max-width: 650px;