feature: display a border when hovering the component

front/src/components/table/ClickableCell.tsx

@@ -10,6 +10,24 @@ type OwnProps = {
 
 const TD = styled.td`
   position: relative;
+  box-sizing: border-box;
+
+  ::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+    border: 1px solid ${(props) => props.theme.text20};
+    box-sizing: border-box;
+    border-radius: 4px;
+    display: none;
+  }
+
+  :hover::before {
+    display: block;
+  }
 `;
 
 const Container = styled.span`

front/src/layout/styles/themes.ts

@@ -32,7 +32,7 @@ const lightThemeSpecific = {
   text60: '#666',
   text40: '#999999',
   text30: '#b3b3b3',
-  text20: '#ccc',
+  text20: '#cccccc',
   text0: '#fff',
 
   blue: '#1961ed',
@@ -58,11 +58,11 @@ const darkThemeSpecific = {
   primaryBorder: 'rgba(255, 255, 255, 0.08)',
 
   text100: '#ffffff',
-  text80: '#ccc',
+  text80: '#cccccc',
   text60: '#999',
   text40: '#666',
   text30: '#4c4c4c',
-  text20: '#333',
+  text20: '#333333',
   text0: '#000',
 
   blue: '#6895ec',