feat(Card): card footer actions.

src/components/Card.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export default function Card({ className, children }) {
-  return <CardRoot className={className}>{children}</CardRoot>;
-}
-
-const CardRoot = styled.div`
-  padding: 15px;
-  margin: 15px;
-  background: #fff;
-  border: 1px solid #d2dce2;
-`;

src/components/Card/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export function Card({ className, children }) {
+  return <CardRoot className={className}>{children}</CardRoot>;
+}
+
+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;
+    }
+  }
+`;

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

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

src/containers/InventoryAdjustments/InventoryAdjustmentList.js

@@ -26,8 +26,6 @@ function InventoryAdjustmentList({
         <DashboardContentTable>
           <InventoryAdjustmentTable />
         </DashboardContentTable>
-
-
       </DashboardPageContent>
     </InventoryAdjustmentsProvider>
   );

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() {
         )}
       </FastField>
 
-      <div className={'card__footer'}>
+      <CardFooterActions>
         <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
           <T id={'save'} />
         </Button>
         <Button disabled={isSubmitting} onClick={handleCloseClick}>
           <T id={'close'} />
         </Button>
-      </div>
+      </CardFooterActions>
     </Form>
   );
 }

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 }) {
         )}
       </FastField>
 
-      <div className={'card__footer'}>
+      <CardFooterActions>
         <Button loading={isSubmitting} intent={Intent.PRIMARY} type="submit">
           <T id={'save'} />
         </Button>
         <Button onClick={handleCloseClick}>
           <T id={'close'} />
         </Button>
-      </div>
+      </CardFooterActions>
     </Form>
   );
 }
+
+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;
+    }
+  }
+`;

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) => {

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() {
         )}
       </FastField>
 
-      <div className={'card__footer'}>
+      <CardFooterActions>
         <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
           <T id={'save'} />
         </Button>
         <Button onClick={handleCloseClick} disabled={isSubmitting}>
           <T id={'close'} />
         </Button>
-      </div>
+      </CardFooterActions>
     </Form>
   );
 }

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;