From cda87dff574014a21567b9a3145c8e1564065521 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Tue, 5 Nov 2024 16:46:52 +0100 Subject: [PATCH 1/2] Fix 0.32 bis --- .../components/NavigationDrawerCollapseButton.tsx | 2 -- .../navigation-drawer/components/NavigationDrawerHeader.tsx | 2 +- packages/twenty-ui/src/input/button/components/IconButton.tsx | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx index 348a3d6c87d2..88bfd21ad7e1 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx @@ -13,10 +13,8 @@ const StyledCollapseButton = styled.div` color: ${({ theme }) => theme.font.color.light}; cursor: pointer; display: flex; - height: ${({ theme }) => theme.spacing(4)}; justify-content: center; user-select: none; - width: ${({ theme }) => theme.spacing(4)}; `; type NavigationDrawerCollapseButtonProps = { diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx index 5805576d5503..52477ff39f93 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx @@ -7,10 +7,10 @@ import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/consta import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; +import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { isNonEmptyString } from '@sniptt/guards'; import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton'; -import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper'; const StyledContainer = styled.div` align-items: center; diff --git a/packages/twenty-ui/src/input/button/components/IconButton.tsx b/packages/twenty-ui/src/input/button/components/IconButton.tsx index f10a748601ac..7b53ebb911bb 100644 --- a/packages/twenty-ui/src/input/button/components/IconButton.tsx +++ b/packages/twenty-ui/src/input/button/components/IconButton.tsx @@ -126,7 +126,7 @@ const StyledButton = styled.button< ? `0 0 0 3px ${theme.accent.tertiary}` : 'none'}; color: ${!disabled - ? theme.font.color.secondary + ? theme.font.color[variant] : theme.font.color.extraLight}; &:hover { background: ${!disabled From d353091c2a686d08f77defc06c54b829b41db714 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Tue, 5 Nov 2024 18:00:20 +0100 Subject: [PATCH 2/2] Fixes --- packages/twenty-front/src/index.css | 4 ++++ .../input/components/MultiItemFieldInput.tsx | 4 ++-- .../components/RecordIndexContainer.tsx | 1 + .../components/RecordTableCellEditMode.tsx | 8 +++++++- .../support/components/SupportButton.tsx | 17 ++++++++++++++--- .../ui/layout/page/components/PageHeader.tsx | 5 +++-- .../ui/layout/top-bar/components/TopBar.tsx | 2 +- .../NavigationDrawerCollapseButton.tsx | 6 +++--- .../components/ViewPickerListContent.tsx | 9 ++++++++- .../src/input/button/components/IconButton.tsx | 4 ++-- .../input/button/components/LightIconButton.tsx | 6 +++++- 11 files changed, 50 insertions(+), 16 deletions(-) diff --git a/packages/twenty-front/src/index.css b/packages/twenty-front/src/index.css index 30952751bd2e..22b25687aafd 100644 --- a/packages/twenty-front/src/index.css +++ b/packages/twenty-front/src/index.css @@ -9,6 +9,10 @@ html { font-size: 13px; } +button { + font-size: 13px; +} + /* https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge */ .grecaptcha-badge { visibility: hidden !important; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx index c23b31bc21ef..6934e915793c 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx @@ -20,8 +20,8 @@ import { toSpliced } from '~/utils/array/toSpliced'; import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly'; const StyledDropdownMenu = styled(DropdownMenu)` - left: -1px; - top: -1px; + margin-left: -1px; + margin-top: -1px; `; type MultiItemFieldInputProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx index a31e2597c7e5..14e1d9f729a0 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx @@ -51,6 +51,7 @@ const StyledContainer = styled.div` const StyledContainerWithPadding = styled.div` height: calc(100% - 40px); + margin-left: ${({ theme }) => theme.spacing(2)}; width: 100%; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx index 0e083492f095..305230b3f7da 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx @@ -34,7 +34,13 @@ export const RecordTableCellEditMode = ({ }: RecordTableCellEditModeProps) => { const { refs, floatingStyles } = useFloating({ placement: 'top-start', - middleware: [flip(), offset(-32)], + middleware: [ + flip(), + offset({ + mainAxis: -32, + crossAxis: 0, + }), + ], whileElementsMounted: autoUpdate, }); diff --git a/packages/twenty-front/src/modules/support/components/SupportButton.tsx b/packages/twenty-front/src/modules/support/components/SupportButton.tsx index 5634c842dfa5..2c38dccdcf3c 100644 --- a/packages/twenty-front/src/modules/support/components/SupportButton.tsx +++ b/packages/twenty-front/src/modules/support/components/SupportButton.tsx @@ -1,8 +1,10 @@ import styled from '@emotion/styled'; -import { Button, IconHelpCircle } from 'twenty-ui'; +import { Button, IconHelpCircle, LightIconButton } from 'twenty-ui'; import { SupportButtonSkeletonLoader } from '@/support/components/SupportButtonSkeletonLoader'; import { useSupportChat } from '@/support/hooks/useSupportChat'; +import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; +import { useRecoilValue } from 'recoil'; const StyledButtonContainer = styled.div` display: flex; @@ -11,11 +13,18 @@ const StyledButtonContainer = styled.div` export const SupportButton = () => { const { loading, isFrontChatLoaded } = useSupportChat(); + const isNavigationDrawerExpanded = useRecoilValue( + isNavigationDrawerExpandedState, + ); if (loading) { return ; } - return isFrontChatLoaded ? ( + if (!isFrontChatLoaded) { + return; + } + + return isNavigationDrawerExpanded ? (