feat: add lock all transactions at once callout.

src/components/Alert/index.js

@@ -1,17 +1,60 @@
 import React from 'react';
 import clsx from 'classnames';
+import styled from 'styled-components';
 
-import Style from './style.module.scss';
-
-export function Alert({ title, description, intent }) {
+export function Alert({ title, description, children, intent, className }) {
   return (
-    <div
-      className={clsx(Style.root, {
-        [`${Style['root_' + intent]}`]: intent,
-      })}
-    >
-      {title && <h3 className={clsx(Style.title)}>{title}</h3>}
-      {description && <p class={clsx(Style.description)}>{description}</p>}
-    </div>
+    <AlertRoot className={clsx(className)} intent={intent}>
+      {title && <AlertTitle>{title}</AlertTitle>}
+      {description && <AlertDesc>{description}</AlertDesc>}
+      {children && <AlertDesc>{children}</AlertDesc>}
+    </AlertRoot>
   );
 }
+
+const AlertRoot = styled.div`
+  border: 1px solid rgb(223, 227, 230);
+  padding: 12px;
+  border-radius: 6px;
+  margin-bottom: 20px;
+
+  ${(props) =>
+    props.intent === 'danger' &&
+    `
+    border-color: rgb(249, 198, 198);
+    background: rgb(255, 248, 248);
+
+    ${AlertDesc} {
+      color: #d95759;
+    }
+    ${AlertTitle} {
+      color: rgb(205, 43, 49);
+    }
+  `}
+
+  ${(props) =>
+    props.intent === 'primary' &&
+    `
+    background: #fff;
+    border-color: #98a8ee;
+
+    ${AlertTitle} {
+      color: #1a3bd4;
+    }
+    ${AlertDesc} {
+      color: #455883;
+    }
+  `}
+`;
+
+const AlertTitle = styled.h3`
+  color: rgb(17, 24, 28);
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 600;
+`;
+
+const AlertDesc = styled.p`
+  color: rgb(104, 112, 118);
+  margin: 0;
+`;

src/components/Alert/style.module.scss

@@ -1,32 +1,26 @@
 .root {
-  border: 1px solid rgb(223, 227, 230);
-  padding: 12px;
-  border-radius: 6px;
-  margin-bottom: 20px;
+  
 
   &_danger {
-    border-color: rgb(249, 198, 198);
-    background: rgb(255, 248, 248);
+    
 
-    .description {
-      color: #d95759;
-    }
+    
+  }
 
-    .title {
-      color: rgb(205, 43, 49);
+  &__primary{
+    
+
+    .title{
+      color: #1a3bd4;
     }
   }
 }
 
 
 .title {
-  color: rgb(17, 24, 28);
-  margin-bottom: 4px;
-  font-size: 14px;
-  font-weight: 600;
+
 }
 
 .description {
-  color: rgb(104, 112, 118);
-  margin: 0;
+
 }

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