feat: optimize transactions locking style.

src/containers/TransactionsLocking/TransactionsLockingList.js

@@ -10,16 +10,21 @@ import { compose } from 'utils';
 
 const DataTest = [
   {
+    isEnabled: true,
     name: 'sales',
+    module: 'sales',
     description:
       'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
   },
   {
+    isEnabled: false,
     name: 'purchases',
+    module: 'purchases',
     description:
       'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
   },
   {
+    isEnabled: false,
     name: 'financial',
     description:
       'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
@@ -30,10 +35,20 @@ function Paragraph({ className, children }) {
   return <p className={clsx('paragraph', className)}>{children}</p>;
 }
 
+function TransactionsLockingList({ items }) {
+  return items.map(({ isEnabled, name, description }) => (
+    <TransactionLockingContent
+      name={name}
+      description={description}
+      isEnabled={isEnabled}
+    />
+  ));
+}
+
 /**
  * Transactions locking list.
  */
-function TransactionsLockingList({
+function TransactionsLockingListPage({
   // #withDialogActions
   openDialog,
 }) {
@@ -56,28 +71,22 @@ function TransactionsLockingList({
           <Link to={'/'}> {''}Lock All Transactions At Once →</Link>
         </TransactionsLockingParagraph>
 
-        {DataTest.map(({ name, description }) => (
+        <TransactionsLockingList items={DataTest} />
-          <TransactionLockingContent
-            name={name}
-            description={description}
-            onSwitch={handleSwitchTransactionsLocking}
-          />
-        ))}
       </TransactionsLocking>
     </TransactionsLockingProvider>
   );
 }
-export default compose(withDialogActions)(TransactionsLockingList);
+export default compose(withDialogActions)(TransactionsLockingListPage);
 
 const TransactionsLocking = styled.div`
   display: flex;
   flex-direction: column;
   padding: 32px;
-  max-width: 700px;
+  max-width: 800px;
 `;
 
 const TransactionsLockingParagraph = styled(Paragraph)`
-  margin-bottom: 30px;
+  margin-bottom: 25px;
 `;
 
 const TransLockingTitle = styled.h2`

src/containers/TransactionsLocking/components.js

@@ -1,57 +1,117 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Switch, FormGroup, Position } from '@blueprintjs/core';
+import {
-import { Hint, Icon, FormattedMessage as T } from 'components';
+  Button,
+  Position,
+  MenuItem,
+  Menu,
+  Intent,
+  Divider,
+} from '@blueprintjs/core';
+import { Hint, Icon, If, FormattedMessage as T } from 'components';
+import { Popover2 } from '@blueprintjs/popover2';
+import { safeInvoke } from 'utils';
 
-export const TransactionLockingContent = ({ name, description, onSwitch }) => (
+export const TransactionLockingContent = ({
-  <TransactionLockingWrapp>
+  name,
-    <TransactionsLockingcontent>
+  description,
-      <TransLockingIcon>
+  module,
-        <Icon icon="lock" iconSize={22} />
+  isEnabled,
-      </TransLockingIcon>
+  onLock,
+  onEditLock,
+  onUnlockFull,
+  onUnlockPartial,
+}) => {
+  const handleLockClick = (event) => {
+    safeInvoke(onLock, module, event);
+  };
+  const handleEditBtn = (event) => {
+    safeInvoke(onEditLock, module, event);
+  };
+  const handleUnlockPartial = (event) => {
+    safeInvoke(onUnlockPartial, module, event);
+  };
 
-      <div className="block">
+  const handleUnlockFull = (event) => {
-        <TransLockingItemTitle>
+    safeInvoke(onUnlockFull, module, event);
-          <T id={name} />{' '}
+  };
-          <Hint
+  return (
-            content={
+    <TransactionLockingWrapp>
-              'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do'
+      <TransLockingInner>
-            }
+        <TransLockingIcon>
-            position={Position.BOTTOM_LEFT}
+          <Icon icon="lock" iconSize={24} />
-          />
+        </TransLockingIcon>
-        </TransLockingItemTitle>
+
-        <TransLockingItemDesc>{description}</TransLockingItemDesc>
+        <TransLockingContent>
-      </div>
+          <TransLockingItemTitle>
-      <FormGroup>
+            <T id={name} />{' '}
-        <Switch
+            <Hint
-          large={true}
+              content={
-          defaultChecked={false}
+                'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do'
-          minimal={true}
+              }
-          className="ml2"
+              position={Position.BOTTOM_LEFT}
-          onChange={onSwitch}
+            />
-        />
+          </TransLockingItemTitle>
-      </FormGroup>
+          <TransLockingItemDesc>{description}</TransLockingItemDesc>
-    </TransactionsLockingcontent>
+        </TransLockingContent>
-  </TransactionLockingWrapp>
+
-);
+        <TransLockingActions>
+          <If condition={!isEnabled}>
+            <Button
+              small={true}
+              minimal={true}
+              intent={Intent.PRIMARY}
+              onClick={handleLockClick}
+            >
+              Lock
+            </Button>
+          </If>
+
+          <If condition={isEnabled}>
+            <Button
+              small={true}
+              minimal={true}
+              intent={Intent.PRIMARY}
+              onClick={handleEditBtn}
+            >
+              Edit
+            </Button>
+            <Divider />
+            <Popover2
+              content={
+                <Menu>
+                  <MenuItem text="Full unlock" onClick={handleUnlockFull} />
+                  <MenuItem
+                    text="Partial unlock"
+                    onClick={handleUnlockPartial}
+                  />
+                </Menu>
+              }
+              placement="bottom"
+            >
+              <Button small={true} minimal={true} intent={Intent.PRIMARY}>
+                Unlock
+              </Button>
+            </Popover2>
+          </If>
+        </TransLockingActions>
+      </TransLockingInner>
+    </TransactionLockingWrapp>
+  );
+};
 
 const TransactionLockingWrapp = styled.div`
   display: flex;
   align-items: center;
   border-radius: 6px;
   border: 1px solid #d1dee2;
-  padding: 14px 18px;
+  padding: 16px 18px;
-  margin-bottom: 25px;
+  margin-bottom: 22px;
   background: #fff;
-
+  box-shadow: 0 4px 20px -5px rgb(0 8 36 / 5%);
-  div.block {
-    flex: 1 1 0;
-    margin-left: 20px;
-    width: 100%;
-  }
 `;
 
-const TransactionsLockingcontent = styled.div`
+const TransLockingInner = styled.div`
   display: flex;
   align-items: center;
   flex: 1 1 0;
@@ -65,15 +125,34 @@ const TransLockingItemTitle = styled.h1`
 `;
 const TransLockingItemDesc = styled.p`
   margin-bottom: 0;
-  opacity: 0.8;
+  opacity: 0.9;
 `;
 
 const TransLockingIcon = styled.div`
   border: 1px solid #d2dde2;
-  height: 50px;
+  height: 45px;
-  width: 50px;
+  width: 45px;
   text-align: center;
-  line-height: 50px;
+  line-height: 45px;
-  border-radius: 5px;
+  border-radius: 8px;
-  color: #8190ac;
+  color: #93a1ba;
+
+  .bp3-icon {
+    position: relative;
+    top: 1px;
+  }
+`;
+
+export const TransLockingActions = styled.div`
+  display: flex;
+
+  .bp3-divider {
+    margin: 2px;
+  }
+`;
+
+export const TransLockingContent = styled.div`
+  flex: 1 1 0;
+  margin-left: 20px;
+  width: 100%;
 `;