feat: optimize transactions locking page style.

src/containers/TransactionsLocking/TransactionsLockingList.js

@@ -1,13 +1,35 @@
 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';
 
+const DataTest = [
+  {
+    name: 'sales',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
+  },
+  {
+    name: 'purchases',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
+  },
+  {
+    name: 'financial',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
+  },
+];
+
+function Paragraph({ className, children }) {
+  return <p className={clsx('paragraph', className)}>{children}</p>;
+}
+
 /**
  * Transactions locking list.
  */
@@ -20,35 +42,17 @@ function TransactionsLockingList({
     openDialog('transactions-locking', {});
   };
 
-  const DataTest = [
-    {
-      name: 'sales',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
-    },
-    {
-      name: 'purchases',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
-    },
-    {
-      name: 'financial',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
-    },
-  ];
-
   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';
+import { Icon, FormattedMessage as T } from 'components';
+
+
 
 export const TransactionLockingContent = ({ name, description, onSwitch }) => (
   <TransactionLockingWrapp>
     <TransactionsLockingcontent>
-      <Icon icon="info-circle" iconSize={22} />
+      <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;
+`;