diff --git a/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx b/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx index d4ced55118..8c720608a1 100644 --- a/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx +++ b/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx @@ -17,9 +17,8 @@ const StyledText = styled.div` text-overflow: ellipsis; `; -const StyledCloseButtonContainer = styled.div` - color: ${themeCssVariables.grayScale.gray1}; - display: flex; +const StyledInvertedIconButton = styled(IconButton)` + color: ${themeCssVariables.font.color.inverted} !important; `; const StyledContent = styled.div<{ hasCloseButton: boolean }>` @@ -78,15 +77,13 @@ export const InformationBanner = ({ )} {onClose && ( - - - + )} )} diff --git a/packages/twenty-front/src/modules/navigation/components/NavigationDrawerOtherSection.tsx b/packages/twenty-front/src/modules/navigation/components/NavigationDrawerOtherSection.tsx index 3f0169fc51..6ed5ca9402 100644 --- a/packages/twenty-front/src/modules/navigation/components/NavigationDrawerOtherSection.tsx +++ b/packages/twenty-front/src/modules/navigation/components/NavigationDrawerOtherSection.tsx @@ -6,6 +6,7 @@ import { IconHelpCircle, IconSettings } from 'twenty-ui/display'; import { AnimatedExpandableContainer } from 'twenty-ui/layout'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; +import { useOpenSettingsMenu } from '@/navigation/hooks/useOpenSettings'; import { getDocumentationUrl } from '@/support/utils/getDocumentationUrl'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState'; @@ -36,6 +37,8 @@ export const NavigationDrawerOtherSection = () => { navigationMemorizedUrlState, ); + const { openSettingsMenu } = useOpenSettingsMenu(); + const { toggleNavigationSection } = useNavigationSection('Other'); const isNavigationSectionOpen = useAtomFamilyStateValue( isNavigationSectionOpenFamilyState, @@ -46,6 +49,7 @@ export const NavigationDrawerOtherSection = () => { setNavigationDrawerExpandedMemorized(isNavigationDrawerExpanded); setIsNavigationDrawerExpanded(true); setNavigationMemorizedUrl(location.pathname + location.search); + openSettingsMenu(); navigate(getSettingsPath(SettingsPath.ProfilePage)); }; diff --git a/packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx b/packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx index 22724a092b..53427ad1f9 100644 --- a/packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx +++ b/packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx @@ -41,9 +41,11 @@ const StyledMainContainerLayoutForMobile = styled.div` const StyledPageBodyForMobileContainer = styled.div` display: flex; - flex: 1; + flex: 1 1 0; flex-direction: column; min-height: 0; + min-width: 0; + width: 0; > * { padding-bottom: 0; diff --git a/packages/twenty-front/src/modules/settings/admin-panel/apps/components/SettingsAdminApps.tsx b/packages/twenty-front/src/modules/settings/admin-panel/apps/components/SettingsAdminApps.tsx index 13452ffdd5..f1c89a7daa 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/apps/components/SettingsAdminApps.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/apps/components/SettingsAdminApps.tsx @@ -28,6 +28,7 @@ const StyledTableHeaderRowContainer = styled.div` `; const TABLE_GRID = '1fr 1fr 100px 80px'; +const TABLE_GRID_MOBILE = '3fr 3fr 1fr 70px'; export const SettingsAdminApps = () => { const [searchQuery, setSearchQuery] = useState(''); @@ -64,7 +65,10 @@ export const SettingsAdminApps = () => { - + {t`Name`} {t`Source`} {t`Listed`} @@ -81,9 +85,13 @@ export const SettingsAdminApps = () => { )} fullWidth > - + {registration.name} - + {registration.sourcePackage ?? registration.sourceType} diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx index 28ffa956a5..fbcbdeeb4c 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx @@ -11,6 +11,7 @@ import { SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS, StyledActionTableCell, StyledNameTableCell, + StyledStickyFirstCell, } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { useIcons } from 'twenty-ui/display'; @@ -70,25 +71,27 @@ export const SettingsObjectMetadataItemTableRow = ({ key={objectMetadataItem.namePlural} to={link} > - - {isDefined(Icon) && ( - - )} - - - {objectMetadataItem.labelPlural} - - {!objectMetadataItem.isActive && ( - {t`Deactivated`} + + + {isDefined(Icon) && ( + )} - - + + + {objectMetadataItem.labelPlural} + + {!objectMetadataItem.isActive && ( + {t`Deactivated`} + )} + + + diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.tsx index cdbae5b0ea..56cb0acecf 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.tsx @@ -1,11 +1,23 @@ import { TableCell } from '@/ui/layout/table/components/TableCell'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { styled } from '@linaria/react'; +import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; import React from 'react'; export const SETTINGS_OBJECT_TABLE_COLUMN_WIDTH = '98.7px'; export const SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS = `180px ${SETTINGS_OBJECT_TABLE_COLUMN_WIDTH} ${SETTINGS_OBJECT_TABLE_COLUMN_WIDTH} ${SETTINGS_OBJECT_TABLE_COLUMN_WIDTH} 36px`; +export const SETTINGS_OBJECT_TABLE_ROW_MOBILE_MIN_WIDTH = '520px'; + +export const StyledStickyFirstCell = styled.div` + @media (max-width: ${MOBILE_VIEWPORT}px) { + background: ${themeCssVariables.background.primary}; + left: 0; + position: sticky; + z-index: 1; + } +`; + export const StyledNameTableCell = ( props: React.ComponentProps, ) => ( diff --git a/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableHeader.tsx b/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableHeader.tsx index f7f7a6487c..7b7f0ee275 100644 --- a/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableHeader.tsx +++ b/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableHeader.tsx @@ -6,7 +6,10 @@ import { Trans } from '@lingui/react/macro'; export const SettingsRolesTableHeader = () => { return (
- + Name @@ -14,6 +17,7 @@ export const SettingsRolesTableHeader = () => { Assigned to +
); diff --git a/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx index 2263cb3b96..93d7ec4e18 100644 --- a/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx @@ -83,6 +83,7 @@ export const SettingsRolesTableRow = ({ role }: SettingsRolesTableRowProps) => { diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx index f3ef082c24..e68e0eef8d 100644 --- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx @@ -36,6 +36,7 @@ const StyledLinkContainer = styled.div` const StyledText = styled.span` color: inherit; + cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx index cdb1a51f11..20a10907ad 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx @@ -129,7 +129,7 @@ export const NavigationDrawer = ({ isExpanded={isNavigationDrawerExpanded} > {isSettingsDrawer && title ? ( - !isMobile && + ) : ( )} diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx index 69da653341..4fb9e3db6c 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx @@ -1,5 +1,6 @@ import { styled } from '@linaria/react'; +import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState'; import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; @@ -53,6 +54,9 @@ export const NavigationDrawerBackButton = ({ const setIsNavigationDrawerExpanded = useSetAtomState( isNavigationDrawerExpandedState, ); + const setCurrentMobileNavigationDrawer = useSetAtomState( + currentMobileNavigationDrawerState, + ); const navigationDrawerExpandedMemorized = useAtomStateValue( navigationDrawerExpandedMemorizedState, ); @@ -70,9 +74,10 @@ export const NavigationDrawerBackButton = ({ - setIsNavigationDrawerExpanded(navigationDrawerExpandedMemorized) - } + onClick={() => { + setIsNavigationDrawerExpanded(navigationDrawerExpandedMemorized); + setCurrentMobileNavigationDrawer('main'); + }} > )} - - - {GET_SETTINGS_OBJECT_TABLE_METADATA.fields.map( - (settingsObjectsTableMetadataField) => ( - - ), - )} - - - {filteredObjectSettingsItems.map((objectSettingsItem) => { - const isActive = objectSettingsItem.objectMetadataItem.isActive; - - return ( - - + +
+ + {GET_SETTINGS_OBJECT_TABLE_METADATA.fields.map( + (settingsObjectsTableMetadataField, index) => + index === 0 ? ( + + + + ) : ( + - - ) : ( - - updateOneObjectMetadataItem({ - idToUpdate: objectSettingsItem.objectMetadataItem.id, - updatePayload: { isActive: true }, - }) - } - onDelete={() => - deleteOneObjectMetadataItem( - objectSettingsItem.objectMetadataItem.id, - ) - } - /> - ) - } - link={ - isActive - ? getSettingsPath(SettingsPath.ObjectDetail, { - objectNamePlural: - objectSettingsItem.objectMetadataItem.namePlural, - }) - : undefined - } - /> - ); - })} -
+ ), + )} + + + {filteredObjectSettingsItems.map((objectSettingsItem) => { + const isActive = objectSettingsItem.objectMetadataItem.isActive; + + return ( + + + + ) : ( + + updateOneObjectMetadataItem({ + idToUpdate: + objectSettingsItem.objectMetadataItem.id, + updatePayload: { isActive: true }, + }) + } + onDelete={() => + deleteOneObjectMetadataItem( + objectSettingsItem.objectMetadataItem.id, + ) + } + /> + ) + } + link={ + isActive + ? getSettingsPath(SettingsPath.ObjectDetail, { + objectNamePlural: + objectSettingsItem.objectMetadataItem.namePlural, + }) + : undefined + } + /> + ); + })} + + + ); }; diff --git a/packages/twenty-ui/src/display/banner/components/Banner.tsx b/packages/twenty-ui/src/display/banner/components/Banner.tsx index 240e19d672..28e1cba14c 100644 --- a/packages/twenty-ui/src/display/banner/components/Banner.tsx +++ b/packages/twenty-ui/src/display/banner/components/Banner.tsx @@ -10,7 +10,7 @@ const StyledBanner = styled.div<{ variant?: BannerVariant }>` : themeCssVariables.color.blue}; display: flex; gap: ${themeCssVariables.spacing[3]}; - height: 40px; + min-height: 40px; justify-content: center; padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[3]}; width: 100%;