diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissions.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissions.tsx index 10c63a14e..41fe16b48 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissions.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissions.tsx @@ -11,12 +11,12 @@ import { IconEye, IconHierarchy, IconKey, - IconLock, + IconLockOpen, IconPencil, + IconServer, IconSettings, IconTrash, IconTrashX, - IconUserCog, IconUsers, Section, } from 'twenty-ui'; @@ -82,50 +82,50 @@ export const RolePermissions = ({ role }: RolePermissionsProps) => { const settingsPermissionsConfig: RolePermissionsSettingPermission[] = [ { key: SettingsPermissions.API_KEYS_AND_WEBHOOKS, - label: 'Manage API Keys & Webhooks', - type: 'Developer', + name: 'API Keys & Webhooks', + description: 'Manage API keys and webhooks', value: role.canUpdateAllSettings, Icon: IconCode, }, { key: SettingsPermissions.WORKSPACE, - label: 'Manage Workspace Settings', - type: 'General', + name: 'Workspace', + description: 'Set global workspace preferences', value: role.canUpdateAllSettings, Icon: IconSettings, }, { key: SettingsPermissions.WORKSPACE_MEMBERS, - label: 'Manage Members', - type: 'Members', + name: 'Users', + description: 'Add or remove users', value: role.canUpdateAllSettings, Icon: IconUsers, }, { key: SettingsPermissions.ROLES, - label: 'Manage Roles', - type: 'Members', + name: 'Roles', + description: 'Define user roles and access levels', value: role.canUpdateAllSettings, - Icon: IconLock, + Icon: IconLockOpen, }, { key: SettingsPermissions.DATA_MODEL, - label: 'Manage Data Model', - type: 'Data Model', + name: 'Data Model', + description: 'Edit CRM data structure and fields', value: role.canUpdateAllSettings, Icon: IconHierarchy, }, { key: SettingsPermissions.ADMIN_PANEL, - label: 'Manage Admin Panel', - type: 'Admin Panel', + name: 'Admin Panel', + description: 'Admin settings and system tools', value: role.canUpdateAllSettings, - Icon: IconUserCog, + Icon: IconServer, }, { key: SettingsPermissions.SECURITY, - label: 'Manage Security Settings', - type: 'Security', + name: 'Security', + description: 'Manage security policies', value: role.canUpdateAllSettings, Icon: IconKey, }, @@ -139,7 +139,11 @@ export const RolePermissions = ({ role }: RolePermissionsProps) => { description={t`Ability to interact with each object`} /> - + permission.value, + )} + /> {objectPermissionsConfig.map((permission) => ( ( - + {t`Name`} - + - + ); diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableHeader.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableHeader.tsx index a72f378cb..d8ead638f 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableHeader.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableHeader.tsx @@ -4,12 +4,6 @@ import styled from '@emotion/styled'; import { t } from '@lingui/core/macro'; import { Checkbox } from 'twenty-ui'; -const StyledTableHeaderRow = styled(TableRow)` - align-items: center; - display: flex; - height: ${({ theme }) => theme.spacing(8)}; -`; - const StyledNameHeader = styled(TableHeader)` flex: 1; padding-left: ${({ theme }) => theme.spacing(2)}; @@ -33,11 +27,11 @@ type RolePermissionsSettingsTableHeaderProps = { export const RolePermissionsSettingsTableHeader = ({ allPermissions, }: RolePermissionsSettingsTableHeaderProps) => ( - + {t`Name`} - {t`Type`} + {t`Description`} - + ); diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableRow.tsx index 3aae9ff04..9c11cf106 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableRow.tsx @@ -1,14 +1,15 @@ import { RolePermissionsSettingPermission } from '@/settings/roles/types/RolePermissionsSettingPermission'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; +import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { Checkbox } from 'twenty-ui'; -const StyledLabel = styled.span` +const StyledName = styled.span` color: ${({ theme }) => theme.font.color.primary}; `; -const StyledType = styled(StyledLabel)` +const StyledDescription = styled(StyledName)` color: ${({ theme }) => theme.font.color.secondary}; `; @@ -17,7 +18,6 @@ const StyledPermissionCell = styled(TableCell)` display: flex; flex: 1; gap: ${({ theme }) => theme.spacing(2)}; - padding-left: ${({ theme }) => theme.spacing(2)}; `; const StyledCheckboxCell = styled(TableCell)` @@ -27,11 +27,6 @@ const StyledCheckboxCell = styled(TableCell)` padding-right: ${({ theme }) => theme.spacing(4)}; `; -const StyledTableRow = styled(TableRow)` - align-items: center; - display: flex; -`; - const StyledIconContainer = styled.div` display: flex; align-items: center; @@ -45,20 +40,26 @@ type RolePermissionsSettingsTableRowProps = { export const RolePermissionsSettingsTableRow = ({ permission, }: RolePermissionsSettingsTableRowProps) => { + const theme = useTheme(); + return ( - - - {permission.label} - + - + - {permission.type} + {permission.name} + + + {permission.description} - + ); }; diff --git a/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsSettingPermission.ts b/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsSettingPermission.ts index d1ad40cb8..50a44e914 100644 --- a/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsSettingPermission.ts +++ b/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsSettingPermission.ts @@ -2,8 +2,8 @@ import { IconComponent } from 'twenty-ui'; export type RolePermissionsSettingPermission = { key: string; - label: string; - type: string; + name: string; + description: string; value: boolean; Icon: IconComponent; }; diff --git a/packages/twenty-ui/src/input/components/Checkbox.tsx b/packages/twenty-ui/src/input/components/Checkbox.tsx index f48725e93..41d0a50cd 100644 --- a/packages/twenty-ui/src/input/components/Checkbox.tsx +++ b/packages/twenty-ui/src/input/components/Checkbox.tsx @@ -104,7 +104,7 @@ const StyledInput = styled.input` disabled && isChecked ? theme.adaptiveColors.blue3 : indeterminate || isChecked - ? theme.color.blue + ? theme.adaptiveColors.blue3 : 'transparent'}; border-color: ${({ theme, @@ -114,12 +114,10 @@ const StyledInput = styled.input` disabled, }) => { switch (true) { - case isChecked: + case indeterminate || isChecked: return disabled ? theme.adaptiveColors.blue3 : theme.color.blue; case disabled: return theme.border.color.strong; - case indeterminate || isChecked: - return theme.color.blue; case variant === CheckboxVariant.Primary: return theme.border.color.inverted; case variant === CheckboxVariant.Tertiary: