feat: add lock all transactions at once callout.

src/containers/TransactionsLocking/TransactionsLockingList.js

@@ -2,6 +2,9 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import clsx from 'classnames';
+import { Intent } from '@blueprintjs/core';
+
+import { Alert } from 'components';
 import { TransactionsLockingProvider } from './TransactionsLockingProvider';
 import { TransactionLockingContent } from './components';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -67,8 +70,17 @@ function TransactionsLockingListPage({
             ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua.
           </TransLockingDesc>
-          Lock All Transactions At Once.{' '}
-          <Link to={'/'}> {''}Lock All Transactions At Once →</Link>
+
+          <LockAllAlert
+            title={'Lock All Transactions At Once.'}
+            intent={Intent.PRIMARY}
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+            <Link to={'/'}>Lock All Transactions At Once →</Link>
+          </LockAllAlert>
         </TransactionsLockingParagraph>
 
         <TransactionsLockingList items={DataTest} />
@@ -81,7 +93,7 @@ export default compose(withDialogActions)(TransactionsLockingListPage);
 const TransactionsLocking = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 32px;
+  padding: 32px 40px;
   max-width: 800px;
 `;
 
@@ -94,3 +106,9 @@ const TransLockingTitle = styled.h2`
 `;
 
 const TransLockingDesc = styled.p``;
+
+const LockAllAlert = styled(Alert)`
+  margin-bottom: 0;
+  margin-top: 20px;
+  background: transparent;
+`;