From 5730c86177d6f3363b7f6e381478535c3396e75c Mon Sep 17 00:00:00 2001
From: Peter Shih <peteranny2@gmail.com>
Date: Wed, 3 May 2023 17:02:10 -0700
Subject: [PATCH] =?UTF-8?q?[=E8=96=AA=E8=B3=87=E8=A7=A3=E9=8E=96]=20?=
 =?UTF-8?q?=E6=A8=A3=E5=BC=8F=E6=9B=B4=E6=96=B0=20(#1091)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* One lock per row

* Update style

* Remove margin-right to the icon

* Fix padding on small devices

* Fix lint

* Add comments
---
 .../common/injectHideContentBlock.js          | 33 ++++++++++---------
 .../common/injectHideContentBlock.module.css  | 19 +++++++----
 .../PermissionBlock.module.css                | 18 ++++------
 3 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/components/TimeAndSalary/common/injectHideContentBlock.js b/src/components/TimeAndSalary/common/injectHideContentBlock.js
index 53c81c2b7..5975c5305 100644
--- a/src/components/TimeAndSalary/common/injectHideContentBlock.js
+++ b/src/components/TimeAndSalary/common/injectHideContentBlock.js
@@ -8,6 +8,9 @@ export default hideRange => rows => {
   const hideIndex = hideRange[0];
   const nHides = hideRange.length;
   const shareLink = useShareLink();
+
+  // Replace original cells with locked cells
+  // on small screens
   rows.forEach(row => {
     row.props.children.splice(
       hideIndex,
@@ -26,21 +29,21 @@ export default hideRange => rows => {
       }),
     );
   });
+
+  // Add locked cells on regular screens
+  // that spans multiple columns
   if (rows.length > 0) {
-    rows[0].props.children.splice(
-      hideIndex,
-      0,
-      <td
-        key="__hideContent"
-        colSpan={nHides}
-        rowSpan={rows.length}
-        className={styles.cell}
-      >
-        <BasicPermissionSimpleBlock
-          to={shareLink}
-          rootClassName={styles.hideContentBlock}
-        />
-      </td>,
-    );
+    for (let i = 0; i < rows.length; i++) {
+      rows[i].props.children.splice(
+        hideIndex,
+        0,
+        <td key="__hideContent" colSpan={nHides} className={styles.cell}>
+          <BasicPermissionSimpleBlock
+            to={shareLink}
+            rootClassName={styles.hideContentBlock}
+          />
+        </td>,
+      );
+    }
   }
 };
diff --git a/src/components/TimeAndSalary/common/injectHideContentBlock.module.css b/src/components/TimeAndSalary/common/injectHideContentBlock.module.css
index ec279f645..537379353 100644
--- a/src/components/TimeAndSalary/common/injectHideContentBlock.module.css
+++ b/src/components/TimeAndSalary/common/injectHideContentBlock.module.css
@@ -1,26 +1,31 @@
+@value below-small, above-small from "common/variables.module.css";
+
 td.cell {
   position: relative;
 
   .hideContentBlock {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: 13px;
+    left: 13px;
+    right: 13px;
+    bottom: 13px;
     display: flex;
-    @media (max-width: 850px) {
+    @media (max-width: below-small) {
+      top: 3px;
       left: 120px;
+      right: 3px;
+      bottom: 3px;
     }
   }
 
-  @media (max-width: 850px) {
+  @media (max-width: below-small) {
     display: none !important;
   }
 
   &.mobile {
     display: flex !important;
 
-    @media (min-width: 850px) {
+    @media (min-width: above-small) {
       display: none !important;
     }
   }
diff --git a/src/components/common/PermissionBlock/PermissionBlock.module.css b/src/components/common/PermissionBlock/PermissionBlock.module.css
index 57dea9963..41920b2ee 100644
--- a/src/components/common/PermissionBlock/PermissionBlock.module.css
+++ b/src/components/common/PermissionBlock/PermissionBlock.module.css
@@ -1,4 +1,4 @@
-@value above-small, below-small, link-blue from "common/variables.module.css";
+@value above-small, below-small, above-desktop, main-yellow, link-blue from "common/variables.module.css";
 
 .permissionBlock {
   display: inline-block;
@@ -15,9 +15,8 @@
 }
 
 .permissionSimpleBlock {
-  border: 1px solid #fcd406;
-  border-radius: 0px;
-  background-color: #fffbe8;
+  border: 1px solid main-yellow;
+  border-radius: 4px;
 
   .container {
     max-width: 500px;
@@ -28,7 +27,7 @@
 .simple {
   cursor: pointer;
 
-  @media (min-width: 1025px) {
+  @media (min-width: above-desktop) {
     &:hover {
       .headingIcon {
         color: link-blue;
@@ -67,12 +66,7 @@
 
 .headingIcon {
   display: inline;
-  font-size: 24px;
-  margin-right: 10px;
-
-  @media (max-width: 850px) {
-    font-size: 16px;
-  }
+  font-size: 16px;
 }
 
 .heading {
@@ -84,7 +78,7 @@
   justify-content: space-around;
   flex-wrap: nowrap;
 
-  @media (max-width: 850px) {
+  @media (max-width: above-small) {
     flex-direction: column;
     height: 8rem;
     align-items: center;