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 = ({ } dropdownComponents={ - + {views.map((view) => (