From b4915895feba5822341c5a0c1ad38b2d98d8af6f Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 17:20:18 +0200
Subject: [PATCH] feature: display a border when hovering the component

---
 front/src/components/table/ClickableCell.tsx | 18 ++++++++++++++++++
 front/src/layout/styles/themes.ts            |  6 +++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/front/src/components/table/ClickableCell.tsx b/front/src/components/table/ClickableCell.tsx
index 7f1e9a4cb..f4738ed66 100644
--- a/front/src/components/table/ClickableCell.tsx
+++ b/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`
diff --git a/front/src/layout/styles/themes.ts b/front/src/layout/styles/themes.ts
index 2a14bdc9b..fd8f3fba8 100644
--- a/front/src/layout/styles/themes.ts
+++ b/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',