From 4e3acf21d24d91ee30bfa99d25acaaedffa47355 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Mon, 24 Apr 2023 15:29:24 +0200
Subject: [PATCH] feature: set the right border radius for dropdown items

---
 .../table/table-header/DropdownButton.tsx     | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/front/src/components/table/table-header/DropdownButton.tsx b/front/src/components/table/table-header/DropdownButton.tsx
index 1ee49c484..900e473bf 100644
--- a/front/src/components/table/table-header/DropdownButton.tsx
+++ b/front/src/components/table/table-header/DropdownButton.tsx
@@ -37,17 +37,33 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
 `;
 
 const StyledDropdown = styled.ul`
+  --wraper-border: 1px;
+  --wraper-border-radius: 8px;
+  --outer-border-radius: calc(var(--wraper-border-radius) - 2px);
+
   display: flex;
   flex-direction: column;
   position: absolute;
   top: 14px;
   right: 0;
-  border: 1px solid ${(props) => props.theme.primaryBorder};
+  border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder};
   box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
-  border-radius: 8px;
+  border-radius: var(--wraper-border-radius);
   padding: 0px;
   min-width: 160px;
   ${modalBackground}
+  li {
+    border-radius: 2px;
+
+    &:first-child {
+      border-top-left-radius: var(--outer-border-radius);
+      border-top-right-radius: var(--outer-border-radius);
+    }
+    &:last-child {
+      border-bottom-left-radius: var(--outer-border-radius);
+      border-bottom-right-radius: var(--outer-border-radius);
+    }
+  }
 `;
 
 const StyledDropdownItem = styled.li`
@@ -57,7 +73,6 @@ const StyledDropdownItem = styled.li`
   margin: 2px;
   background: ${(props) => props.theme.primaryBackground};
   cursor: pointer;
-  border-radius: 4px;
   color: ${(props) => props.theme.text60};
 
   &:hover {