houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update settings page for mobile viewport (#18991)

Browse Source 
## Description

- This PR fixes
https://github.com/twentyhq/core-team-issues/issues/2313#issuecomment-4116380772
- Fixes Admin Panel Apps table, Data model table and Roles table
- made data model table scrollable for mobile viewport keeping name
column fixed.


## Visual Appearance

## Before

- Roles Table

<img width="636" height="1039" alt="Screenshot 2026-03-26 at 1 28 30 PM"
src="https://github.com/user-attachments/assets/fa7532bd-aeb0-4c8f-a40e-08cc976cd2c2"
/>



- Admin Apps table

<img width="610" height="998" alt="Screenshot 2026-03-26 at 1 28 12 PM"
src="https://github.com/user-attachments/assets/8712473c-350f-46f8-9e68-9cb0a5fa9d80"
/>





- Data Model table



https://github.com/user-attachments/assets/c48075c5-56dd-4b76-acd4-76330d6dab94






## After

- Roles Table

<img width="761" height="1045" alt="Screenshot 2026-03-26 at 1 23 19 PM"
src="https://github.com/user-attachments/assets/17099956-816a-4d41-b987-563f6931a995"
/>

- Admin Apps table

<img width="794" height="1044" alt="Screenshot 2026-03-26 at 1 23 34 PM"
src="https://github.com/user-attachments/assets/0463a087-2363-4192-9adb-7d27076f303a"
/>


- Data model Table


https://github.com/user-attachments/assets/fd44e353-cc7c-44cf-bda0-d2f3cd531f2e

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
This commit is contained in:
Harshit Singh
2026-03-26 21:17:40 +05:30
committed by GitHub
parent 7a341c6475
commit 34832815e6
13 changed files with 192 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx
+9 -12
View File
@@ -17,9 +17,8 @@ const StyledText = styled.div`
text-overflow: ellipsis; text-overflow: ellipsis;
`; `;
const StyledCloseButtonContainer = styled.div` const StyledInvertedIconButton = styled(IconButton)`
color: ${themeCssVariables.grayScale.gray1}; color: ${themeCssVariables.font.color.inverted} !important;
display: flex;
`; `;
const StyledContent = styled.div<{ hasCloseButton: boolean }>` const StyledContent = styled.div<{ hasCloseButton: boolean }>`
@@ -78,15 +77,13 @@ export const InformationBanner = ({
)} )}
</StyledContent> </StyledContent>
{onClose && ( {onClose && (
<StyledCloseButtonContainer> <StyledInvertedIconButton
<IconButton Icon={IconX}
Icon={IconX} size="small"
size="small" variant="tertiary"
variant="tertiary" onClick={onClose}
onClick={onClose} ariaLabel={t`Close banner`}
ariaLabel={t`Close banner`} />
/>
</StyledCloseButtonContainer>
)} )}
</Banner> </Banner>
)} )}
packages/twenty-front/src/modules/navigation/components/NavigationDrawerOtherSection.tsx
+4
View File
@@ -6,6 +6,7 @@ import { IconHelpCircle, IconSettings } from 'twenty-ui/display';
import { AnimatedExpandableContainer } from 'twenty-ui/layout'; import { AnimatedExpandableContainer } from 'twenty-ui/layout';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useOpenSettingsMenu } from '@/navigation/hooks/useOpenSettings';
import { getDocumentationUrl } from '@/support/utils/getDocumentationUrl'; import { getDocumentationUrl } from '@/support/utils/getDocumentationUrl';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState'; import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState';
@@ -36,6 +37,8 @@ export const NavigationDrawerOtherSection = () => {
navigationMemorizedUrlState, navigationMemorizedUrlState,
); );
const { openSettingsMenu } = useOpenSettingsMenu();
const { toggleNavigationSection } = useNavigationSection('Other'); const { toggleNavigationSection } = useNavigationSection('Other');
const isNavigationSectionOpen = useAtomFamilyStateValue( const isNavigationSectionOpen = useAtomFamilyStateValue(
isNavigationSectionOpenFamilyState, isNavigationSectionOpenFamilyState,
@@ -46,6 +49,7 @@ export const NavigationDrawerOtherSection = () => {
setNavigationDrawerExpandedMemorized(isNavigationDrawerExpanded); setNavigationDrawerExpandedMemorized(isNavigationDrawerExpanded);
setIsNavigationDrawerExpanded(true); setIsNavigationDrawerExpanded(true);
setNavigationMemorizedUrl(location.pathname + location.search); setNavigationMemorizedUrl(location.pathname + location.search);
openSettingsMenu();
navigate(getSettingsPath(SettingsPath.ProfilePage)); navigate(getSettingsPath(SettingsPath.ProfilePage));
}; };
packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx
+3 -1
View File
@@ -41,9 +41,11 @@ const StyledMainContainerLayoutForMobile = styled.div`
const StyledPageBodyForMobileContainer = styled.div` const StyledPageBodyForMobileContainer = styled.div`
display: flex; display: flex;
flex: 1; flex: 1 1 0;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
min-width: 0;
width: 0;
> * { > * {
padding-bottom: 0; padding-bottom: 0;
packages/twenty-front/src/modules/settings/admin-panel/apps/components/SettingsAdminApps.tsx
+11 -3
View File
@@ -28,6 +28,7 @@ const StyledTableHeaderRowContainer = styled.div`
`; `;
const TABLE_GRID = '1fr 1fr 100px 80px'; const TABLE_GRID = '1fr 1fr 100px 80px';
const TABLE_GRID_MOBILE = '3fr 3fr 1fr 70px';
export const SettingsAdminApps = () => { export const SettingsAdminApps = () => {
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
@@ -64,7 +65,10 @@ export const SettingsAdminApps = () => {
<StyledTableContainer> <StyledTableContainer>
<Table> <Table>
<StyledTableHeaderRowContainer> <StyledTableHeaderRowContainer>
<TableRow gridTemplateColumns={TABLE_GRID}> <TableRow
gridAutoColumns={TABLE_GRID}
mobileGridAutoColumns={TABLE_GRID_MOBILE}
>
<TableHeader>{t`Name`}</TableHeader> <TableHeader>{t`Name`}</TableHeader>
<TableHeader>{t`Source`}</TableHeader> <TableHeader>{t`Source`}</TableHeader>
<TableHeader>{t`Listed`}</TableHeader> <TableHeader>{t`Listed`}</TableHeader>
@@ -81,9 +85,13 @@ export const SettingsAdminApps = () => {
)} )}
fullWidth fullWidth
> >
<TableRow gridTemplateColumns={TABLE_GRID} isClickable> <TableRow
gridAutoColumns={TABLE_GRID}
mobileGridAutoColumns={TABLE_GRID_MOBILE}
isClickable
>
<TableCell>{registration.name}</TableCell> <TableCell>{registration.name}</TableCell>
<TableCell> <TableCell overflow="hidden">
{registration.sourcePackage ?? registration.sourceType} {registration.sourcePackage ?? registration.sourceType}
</TableCell> </TableCell>
<TableCell> <TableCell>
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
+21 -18
View File
@@ -11,6 +11,7 @@ import {
SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS, SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS,
StyledActionTableCell, StyledActionTableCell,
StyledNameTableCell, StyledNameTableCell,
StyledStickyFirstCell,
} from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents'; } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents';
import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableCell } from '@/ui/layout/table/components/TableCell';
import { useIcons } from 'twenty-ui/display'; import { useIcons } from 'twenty-ui/display';
@@ -70,25 +71,27 @@ export const SettingsObjectMetadataItemTableRow = ({
key={objectMetadataItem.namePlural} key={objectMetadataItem.namePlural}
to={link} to={link}
> >
<StyledNameTableCell> <StyledStickyFirstCell>
{isDefined(Icon) && ( <StyledNameTableCell>
<Icon {isDefined(Icon) && (
style={{ <Icon
minWidth: theme.icon.size.md, style={{
}} minWidth: theme.icon.size.md,
size={theme.icon.size.md} }}
stroke={theme.icon.stroke.sm} size={theme.icon.size.md}
/> stroke={theme.icon.stroke.sm}
)} />
<StyledNameContainer>
<StyledNameLabel title={objectMetadataItem.labelPlural}>
{objectMetadataItem.labelPlural}
</StyledNameLabel>
{!objectMetadataItem.isActive && (
<StyledInactiveLabel>{t`Deactivated`}</StyledInactiveLabel>
)} )}
</StyledNameContainer> <StyledNameContainer>
</StyledNameTableCell> <StyledNameLabel title={objectMetadataItem.labelPlural}>
{objectMetadataItem.labelPlural}
</StyledNameLabel>
{!objectMetadataItem.isActive && (
<StyledInactiveLabel>{t`Deactivated`}</StyledInactiveLabel>
)}
</StyledNameContainer>
</StyledNameTableCell>
</StyledStickyFirstCell>
<TableCell> <TableCell>
<SettingsItemTypeTag item={objectMetadataItem} /> <SettingsItemTypeTag item={objectMetadataItem} />
</TableCell> </TableCell>
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.tsx
+13 -1
View File
@@ -1,11 +1,23 @@
import { TableCell } from '@/ui/layout/table/components/TableCell'; 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'; import React from 'react';
export const SETTINGS_OBJECT_TABLE_COLUMN_WIDTH = '98.7px'; 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_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 = ( export const StyledNameTableCell = (
props: React.ComponentProps<typeof TableCell>, props: React.ComponentProps<typeof TableCell>,
) => ( ) => (
packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableHeader.tsx
+5 -1
View File
@@ -6,7 +6,10 @@ import { Trans } from '@lingui/react/macro';
export const SettingsRolesTableHeader = () => { export const SettingsRolesTableHeader = () => {
return ( return (
<Table> <Table>
<TableRow gridAutoColumns="332px 3fr 2fr 1fr"> <TableRow
mobileGridAutoColumns="5fr 1fr 1fr 35px"
gridAutoColumns="332px 3fr 2fr 1fr"
>
<TableHeader> <TableHeader>
<Trans>Name</Trans> <Trans>Name</Trans>
</TableHeader> </TableHeader>
@@ -14,6 +17,7 @@ export const SettingsRolesTableHeader = () => {
<Trans>Assigned to</Trans> <Trans>Assigned to</Trans>
</TableHeader> </TableHeader>
<TableHeader></TableHeader> <TableHeader></TableHeader>
<TableHeader></TableHeader>
</TableRow> </TableRow>
</Table> </Table>
); );
packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx
+1
View File
@@ -83,6 +83,7 @@ export const SettingsRolesTableRow = ({ role }: SettingsRolesTableRowProps) => {
<TableRow <TableRow
key={role.id} key={role.id}
gridAutoColumns="332px 3fr 2fr 1fr" gridAutoColumns="332px 3fr 2fr 1fr"
mobileGridAutoColumns="5fr 1fr 1fr 35px"
to={getSettingsPath(SettingsPath.RoleDetail, { roleId: role.id })} to={getSettingsPath(SettingsPath.RoleDetail, { roleId: role.id })}
> >
<TableCell> <TableCell>
packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx
+1
View File
@@ -36,6 +36,7 @@ const StyledLinkContainer = styled.div`
const StyledText = styled.span` const StyledText = styled.span`
color: inherit; color: inherit;
cursor: pointer;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
+1 -1
View File
@@ -129,7 +129,7 @@ export const NavigationDrawer = ({
isExpanded={isNavigationDrawerExpanded} isExpanded={isNavigationDrawerExpanded}
> >
{isSettingsDrawer && title ? ( {isSettingsDrawer && title ? (
!isMobile && <NavigationDrawerBackButton title={title} /> <NavigationDrawerBackButton title={title} />
) : ( ) : (
<NavigationDrawerHeader showCollapseButton /> <NavigationDrawerHeader showCollapseButton />
)} )}
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
+8 -3
View File
@@ -1,5 +1,6 @@
import { styled } from '@linaria/react'; import { styled } from '@linaria/react';
import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState'; import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
@@ -53,6 +54,9 @@ export const NavigationDrawerBackButton = ({
const setIsNavigationDrawerExpanded = useSetAtomState( const setIsNavigationDrawerExpanded = useSetAtomState(
isNavigationDrawerExpandedState, isNavigationDrawerExpandedState,
); );
const setCurrentMobileNavigationDrawer = useSetAtomState(
currentMobileNavigationDrawerState,
);
const navigationDrawerExpandedMemorized = useAtomStateValue( const navigationDrawerExpandedMemorized = useAtomStateValue(
navigationDrawerExpandedMemorizedState, navigationDrawerExpandedMemorizedState,
); );
@@ -70,9 +74,10 @@ export const NavigationDrawerBackButton = ({
<UndecoratedLink <UndecoratedLink
to={navigationMemorizedUrl} to={navigationMemorizedUrl}
replace replace
onClick={() => onClick={() => {
setIsNavigationDrawerExpanded(navigationDrawerExpandedMemorized) setIsNavigationDrawerExpanded(navigationDrawerExpandedMemorized);
} setCurrentMobileNavigationDrawer('main');
}}
> >
<StyledIconAndButtonContainer> <StyledIconAndButtonContainer>
<IconX <IconX
packages/twenty-front/src/pages/settings/data-model/SettingsObjectTable.tsx
+114 -69
View File
@@ -6,7 +6,11 @@ import { isHiddenSystemField } from '@/object-metadata/utils/isHiddenSystemField
import { useCombinedGetTotalCount } from '@/object-record/multiple-objects/hooks/useCombinedGetTotalCount'; import { useCombinedGetTotalCount } from '@/object-record/multiple-objects/hooks/useCombinedGetTotalCount';
import { SettingsObjectMetadataItemTableRow } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRow'; import { SettingsObjectMetadataItemTableRow } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRow';
import { TableRow } from '@/ui/layout/table/components/TableRow'; import { TableRow } from '@/ui/layout/table/components/TableRow';
import { SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents'; import {
SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS,
SETTINGS_OBJECT_TABLE_ROW_MOBILE_MIN_WIDTH,
StyledStickyFirstCell,
} from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents';
import { SettingsObjectInactiveMenuDropDown } from '@/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown'; import { SettingsObjectInactiveMenuDropDown } from '@/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown';
import { getItemTagInfo } from '@/settings/data-model/utils/getItemTagInfo'; import { getItemTagInfo } from '@/settings/data-model/utils/getItemTagInfo';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -26,7 +30,11 @@ import { getSettingsPath } from 'twenty-shared/utils';
import { IconArchive, IconChevronRight, IconSettings } from 'twenty-ui/display'; import { IconArchive, IconChevronRight, IconSettings } from 'twenty-ui/display';
import { SearchInput } from 'twenty-ui/input'; import { SearchInput } from 'twenty-ui/input';
import { MenuItemToggle } from 'twenty-ui/navigation'; import { MenuItemToggle } from 'twenty-ui/navigation';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import {
MOBILE_VIEWPORT,
ThemeContext,
themeCssVariables,
} from 'twenty-ui/theme-constants';
import { GET_SETTINGS_OBJECT_TABLE_METADATA } from '~/pages/settings/data-model/constants/SettingsObjectTableMetadata'; import { GET_SETTINGS_OBJECT_TABLE_METADATA } from '~/pages/settings/data-model/constants/SettingsObjectTableMetadata';
import type { SettingsObjectTableItem } from '~/pages/settings/data-model/types/SettingsObjectTableItem'; import type { SettingsObjectTableItem } from '~/pages/settings/data-model/types/SettingsObjectTableItem';
import { normalizeSearchText } from '~/utils/normalizeSearchText'; import { normalizeSearchText } from '~/utils/normalizeSearchText';
@@ -39,6 +47,19 @@ const StyledSearchInputContainer = styled.div`
padding-bottom: ${themeCssVariables.spacing[2]}; padding-bottom: ${themeCssVariables.spacing[2]};
`; `;
const StyledScrollWrapper = styled.div`
@media (max-width: ${MOBILE_VIEWPORT}px) {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
`;
const StyledScrollableContent = styled.div`
@media (max-width: ${MOBILE_VIEWPORT}px) {
min-width: ${SETTINGS_OBJECT_TABLE_ROW_MOBILE_MIN_WIDTH};
}
`;
export const SettingsObjectTable = ({ export const SettingsObjectTable = ({
objectMetadataItems, objectMetadataItems,
withSearchBar = true, withSearchBar = true,
@@ -170,74 +191,98 @@ export const SettingsObjectTable = ({
</StyledSearchInputContainer> </StyledSearchInputContainer>
)} )}
<Table> <StyledScrollWrapper>
<TableRow <StyledScrollableContent>
gridTemplateColumns={SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS} <Table>
> <TableRow
{GET_SETTINGS_OBJECT_TABLE_METADATA.fields.map( gridTemplateColumns={
(settingsObjectsTableMetadataField) => ( SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS
<SortableTableHeader }
key={settingsObjectsTableMetadataField.fieldName} >
fieldName={settingsObjectsTableMetadataField.fieldName} {GET_SETTINGS_OBJECT_TABLE_METADATA.fields.map(
label={t(settingsObjectsTableMetadataField.fieldLabel)} (settingsObjectsTableMetadataField, index) =>
tableId={GET_SETTINGS_OBJECT_TABLE_METADATA.tableId} index === 0 ? (
align={settingsObjectsTableMetadataField.align} <StyledStickyFirstCell
initialSort={GET_SETTINGS_OBJECT_TABLE_METADATA.initialSort} key={settingsObjectsTableMetadataField.fieldName}
/> >
), <SortableTableHeader
)} fieldName={settingsObjectsTableMetadataField.fieldName}
<TableHeader></TableHeader> label={t(settingsObjectsTableMetadataField.fieldLabel)}
</TableRow> tableId={GET_SETTINGS_OBJECT_TABLE_METADATA.tableId}
{filteredObjectSettingsItems.map((objectSettingsItem) => { align={settingsObjectsTableMetadataField.align}
const isActive = objectSettingsItem.objectMetadataItem.isActive; initialSort={
GET_SETTINGS_OBJECT_TABLE_METADATA.initialSort
return ( }
<SettingsObjectMetadataItemTableRow />
key={objectSettingsItem.objectMetadataItem.namePlural} </StyledStickyFirstCell>
objectMetadataItem={objectSettingsItem.objectMetadataItem} ) : (
totalObjectCount={objectSettingsItem.totalObjectCount} <SortableTableHeader
action={ key={settingsObjectsTableMetadataField.fieldName}
isActive ? ( fieldName={settingsObjectsTableMetadataField.fieldName}
<StyledIconChevronRightContainer> label={t(settingsObjectsTableMetadataField.fieldLabel)}
<IconChevronRight tableId={GET_SETTINGS_OBJECT_TABLE_METADATA.tableId}
size={theme.icon.size.md} align={settingsObjectsTableMetadataField.align}
stroke={theme.icon.stroke.sm} initialSort={
GET_SETTINGS_OBJECT_TABLE_METADATA.initialSort
}
/> />
</StyledIconChevronRightContainer> ),
) : ( )}
<SettingsObjectInactiveMenuDropDown <TableHeader></TableHeader>
isCustomObject={ </TableRow>
objectSettingsItem.objectMetadataItem.isCustom {filteredObjectSettingsItems.map((objectSettingsItem) => {
} const isActive = objectSettingsItem.objectMetadataItem.isActive;
objectMetadataItemNamePlural={
objectSettingsItem.objectMetadataItem.namePlural return (
} <SettingsObjectMetadataItemTableRow
onActivate={() => key={objectSettingsItem.objectMetadataItem.namePlural}
updateOneObjectMetadataItem({ objectMetadataItem={objectSettingsItem.objectMetadataItem}
idToUpdate: objectSettingsItem.objectMetadataItem.id, totalObjectCount={objectSettingsItem.totalObjectCount}
updatePayload: { isActive: true }, action={
}) isActive ? (
} <StyledIconChevronRightContainer>
onDelete={() => <IconChevronRight
deleteOneObjectMetadataItem( size={theme.icon.size.md}
objectSettingsItem.objectMetadataItem.id, stroke={theme.icon.stroke.sm}
) />
} </StyledIconChevronRightContainer>
/> ) : (
) <SettingsObjectInactiveMenuDropDown
} isCustomObject={
link={ objectSettingsItem.objectMetadataItem.isCustom
isActive }
? getSettingsPath(SettingsPath.ObjectDetail, { objectMetadataItemNamePlural={
objectNamePlural: objectSettingsItem.objectMetadataItem.namePlural
objectSettingsItem.objectMetadataItem.namePlural, }
}) onActivate={() =>
: undefined updateOneObjectMetadataItem({
} idToUpdate:
/> objectSettingsItem.objectMetadataItem.id,
); updatePayload: { isActive: true },
})} })
</Table> }
onDelete={() =>
deleteOneObjectMetadataItem(
objectSettingsItem.objectMetadataItem.id,
)
}
/>
)
}
link={
isActive
? getSettingsPath(SettingsPath.ObjectDetail, {
objectNamePlural:
objectSettingsItem.objectMetadataItem.namePlural,
})
: undefined
}
/>
);
})}
</Table>
</StyledScrollableContent>
</StyledScrollWrapper>
</> </>
); );
}; };
packages/twenty-ui/src/display/banner/components/Banner.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ const StyledBanner = styled.div<{ variant?: BannerVariant }>`
: themeCssVariables.color.blue}; : themeCssVariables.color.blue};
display: flex; display: flex;
gap: ${themeCssVariables.spacing[3]}; gap: ${themeCssVariables.spacing[3]};
height: 40px; min-height: 40px;
justify-content: center; justify-content: center;
padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[3]}; padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[3]};
width: 100%; width: 100%;