feat(Card): card footer actions.

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