From 3f600146b18fa458ebe0953004405a7451b60aac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Wed, 20 Sep 2023 05:01:01 +0200
Subject: [PATCH] fix: fix some views dropdown design issues (#1648)

* fix: fix some views dropdown design issues

Closes #1610, Closes #1601

* Handle max-width on view picker

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../ui/button/components/FloatingIconButton.tsx        |  3 ++-
 .../ui/button/components/FloatingIconButtonGroup.tsx   |  1 +
 front/src/modules/ui/menu-item/components/MenuItem.tsx | 10 ++++++++--
 .../ui/view-bar/components/ViewsDropdownButton.tsx     |  4 ++--
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/front/src/modules/ui/button/components/FloatingIconButton.tsx b/front/src/modules/ui/button/components/FloatingIconButton.tsx
index e0f76edf7..33e623b87 100644
--- a/front/src/modules/ui/button/components/FloatingIconButton.tsx
+++ b/front/src/modules/ui/button/components/FloatingIconButton.tsx
@@ -72,7 +72,8 @@ const StyledButton = styled.button<
   justify-content: center;
   padding: 0;
   position: relative;
-  transition: background 0.1s ease;
+  transition: background ${({ theme }) => theme.animation.duration.instant}s
+    ease;
   white-space: nowrap;
 
   ${({ position, size }) => {
diff --git a/front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx b/front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx
index 95edb5446..f59d4db15 100644
--- a/front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx
+++ b/front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx
@@ -11,6 +11,7 @@ import {
 
 const StyledFloatingIconButtonGroupContainer = styled.div`
   backdrop-filter: blur(20px);
+  background-color: ${({ theme }) => theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   box-shadow: ${({ theme }) =>
     `0px 2px 4px 0px ${theme.background.transparent.light}, 0px 0px 4px 0px ${theme.background.transparent.medium}`};
diff --git a/front/src/modules/ui/menu-item/components/MenuItem.tsx b/front/src/modules/ui/menu-item/components/MenuItem.tsx
index d23c05950..3be668814 100644
--- a/front/src/modules/ui/menu-item/components/MenuItem.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItem.tsx
@@ -26,11 +26,17 @@ export type MenuItemProps = {
 
 const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)`
   & .hoverable-buttons {
-    display: none;
+    opacity: 0;
+    pointer-events: none;
+    position: fixed;
+    right: ${({ theme }) => theme.spacing(2)};
+    transition: opacity ${({ theme }) => theme.animation.duration.instant}s ease;
   }
+
   &:hover {
     & .hoverable-buttons {
-      display: block;
+      opacity: 1;
+      pointer-events: auto;
     }
   }
 `;
diff --git a/front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx b/front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx
index a0f066f54..84fb041b4 100644
--- a/front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx
+++ b/front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx
@@ -56,7 +56,7 @@ const StyledViewIcon = styled(IconList)`
 
 const StyledViewName = styled.span`
   display: inline-block;
-  max-width: 200px;
+  max-width: 130px;
   @media (max-width: 375px) {
     max-width: 90px;
   }
@@ -172,7 +172,7 @@ export const ViewsDropdownButton = ({
         </StyledDropdownButtonContainer>
       }
       dropdownComponents={
-        <StyledDropdownMenu>
+        <StyledDropdownMenu width={200}>
           <StyledDropdownMenuItemsContainer>
             {views.map((view) => (
               <MenuItem