feat: optimize transactions locking page style.

src/containers/TransactionsLocking/TransactionsLockingList.js

@@ -1,25 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-
+import clsx from 'classnames';
 import { TransactionsLockingProvider } from './TransactionsLockingProvider';
 import { TransactionLockingContent } from './components';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { compose } from 'utils';
 
-/**
- * Transactions locking list.
- */
-function TransactionsLockingList({
-  // #withDialogActions
-  openDialog,
-}) {
-  // Handle switch transactions locking.
-  const handleSwitchTransactionsLocking = () => {
-    openDialog('transactions-locking', {});
-  };
-
 const DataTest = [
   {
     name: 'sales',
@@ -38,17 +26,33 @@ function TransactionsLockingList({
   },
 ];
 
+function Paragraph({ className, children }) {
+  return <p className={clsx('paragraph', className)}>{children}</p>;
+}
+
+/**
+ * Transactions locking list.
+ */
+function TransactionsLockingList({
+  // #withDialogActions
+  openDialog,
+}) {
+  // Handle switch transactions locking.
+  const handleSwitchTransactionsLocking = () => {
+    openDialog('transactions-locking', {});
+  };
+
   return (
     <TransactionsLockingProvider>
       <TransactionsLocking>
         <TransactionsLockingParagraph>
-          <h2>Transaction Locking</h2>
+          <TransLockingDesc>
-          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br />
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
+          </TransLockingDesc>
-          Lock All Transactions At Once.
+          Lock All Transactions At Once. {' '}
-          <Link to={'/'}> {''}Lock All Transactions At Once. </Link>
+          <Link to={'/'}> {''}Lock All Transactions At Once →</Link>
         </TransactionsLockingParagraph>
 
         {DataTest.map(({ name, description }) => (
@@ -67,13 +71,16 @@ export default compose(withDialogActions)(TransactionsLockingList);
 const TransactionsLocking = styled.div`
   display: flex;
   flex-direction: column;
-  margin: 22px 32px;
+  padding: 32px;
+  max-width: 700px;
 `;
 
-const TransactionsLockingParagraph = styled.div`
+const TransactionsLockingParagraph = styled(Paragraph)`
-  line-height: 1.5rem;
+  margin-bottom: 30px;
-  font-size: 16px;
-  h2 {
-    margin-bottom: 12px;
-  }
 `;
+
+const TransLockingTitle = styled.h2`
+  margin-bottom: 12px;
+`;
+
+const TransLockingDesc = styled.p``;

src/containers/TransactionsLocking/components.js

@@ -1,19 +1,22 @@
 import React from 'react';
 import styled from 'styled-components';
-import {  Switch, FormGroup, Intent } from '@blueprintjs/core';
+import { Switch, FormGroup } from '@blueprintjs/core';
 import { Icon, FormattedMessage as T } from 'components';
 
+
+
 export const TransactionLockingContent = ({ name, description, onSwitch }) => (
   <TransactionLockingWrapp>
     <TransactionsLockingcontent>
+      <TransLockingIcon>
         <Icon icon="info-circle" iconSize={22} />
+      </TransLockingIcon>
 
       <div className="block">
-        <h3>
+        <TransLockingItemTitle>
           <T id={name} />
-        </h3>
+        </TransLockingItemTitle>
-
+        <TransLockingItemDesc>{description}</TransLockingItemDesc>
-        <p>{description}</p>
       </div>
       <FormGroup>
         <Switch
@@ -32,10 +35,10 @@ const TransactionLockingWrapp = styled.div`
   display: flex;
   align-items: center;
   border-radius: 6px;
-  border: 1px solid #d2dce2;
+  border: 1px solid #d1dee2;
-  max-width: 610px;
+  padding: 14px 18px;
-  padding: 22px 15px;
+  margin-bottom: 25px;
-  margin-top: 25px;
+  background: #fff;
 
   div.block {
     flex: 1 1 0;
@@ -49,3 +52,24 @@ const TransactionsLockingcontent = styled.div`
   align-items: center;
   flex: 1 1 0;
 `;
+
+const TransLockingItemTitle = styled.h1`
+  font-size: 18px;
+  margin: 0 0 8px;
+  line-height: 1;
+  font-weight: 600;
+`;
+const TransLockingItemDesc = styled.p`
+  margin-bottom: 0;
+  opacity: 0.8;
+`;
+
+const TransLockingIcon = styled.div`
+  border: 1px solid #d2dde2;
+  height: 50px;
+  width: 50px;
+  text-align: center;
+  line-height: 50px;
+  border-radius: 5px;
+  color: #8190ac;
+`;