Files
twenty/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableHeader.tsx
Weiko c3a9c85265 Update 'Settings Permissions' Layout (#10997)
Fixes https://github.com/twentyhq/core-team-issues/issues/566

## Before
<img width="712" alt="Screenshot 2025-03-18 at 17 17 38"
src="https://github.com/user-attachments/assets/5c2dd8c6-e0cc-4610-b858-071d50de692c"
/>
<img width="775" alt="Screenshot 2025-03-18 at 17 17 30"
src="https://github.com/user-attachments/assets/52bdde22-f26d-4698-8138-5f2af28ddd50"
/>


## After
<img width="949" alt="Screenshot 2025-03-18 at 16 58 31"
src="https://github.com/user-attachments/assets/71b77032-0f5d-452b-b088-7af7e306d0a6"
/>
<img width="946" alt="Screenshot 2025-03-18 at 16 58 38"
src="https://github.com/user-attachments/assets/dc2ddf95-1622-419a-a35b-3037da7bdd4d"
/>
2025-03-18 17:48:35 +01:00

38 lines
1.1 KiB
TypeScript

import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import styled from '@emotion/styled';
import { t } from '@lingui/core/macro';
import { Checkbox } from 'twenty-ui';
const StyledNameHeader = styled(TableHeader)`
flex: 1;
padding-left: ${({ theme }) => theme.spacing(2)};
`;
const StyledActionsHeader = styled(TableHeader)`
align-items: center;
display: flex;
justify-content: flex-end;
padding-right: ${({ theme }) => theme.spacing(4)};
`;
const StyledTypeHeader = styled(TableHeader)`
flex: 1;
`;
type RolePermissionsSettingsTableHeaderProps = {
allPermissions: boolean;
};
export const RolePermissionsSettingsTableHeader = ({
allPermissions,
}: RolePermissionsSettingsTableHeaderProps) => (
<TableRow gridAutoColumns="3fr 4fr 24px">
<StyledNameHeader>{t`Name`}</StyledNameHeader>
<StyledTypeHeader>{t`Description`}</StyledTypeHeader>
<StyledActionsHeader aria-label={t`Actions`}>
<Checkbox checked={allPermissions} disabled />
</StyledActionsHeader>
</TableRow>
);