diff --git a/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.module.css b/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.module.css index a21b976bd23..6d35050a332 100644 --- a/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.module.css +++ b/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.module.css @@ -6,7 +6,3 @@ .header { background-color: var(--fds-colors-grey-100); } - -.checkboxContent { - width: 3rem; -} diff --git a/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.tsx b/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.tsx index a169a474cd5..4800cb26b1f 100644 --- a/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.tsx +++ b/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/SelectAllowedPartyTypes/SelectAllowedPartyTypes.tsx @@ -1,5 +1,4 @@ -import React, { useRef } from 'react'; -import { Table, Checkbox } from '@digdir/designsystemet-react'; +import React, { type ReactElement, useRef } from 'react'; import type { ApplicationMetadata, PartyTypesAllowed } from 'app-shared/types/ApplicationMetadata'; import classes from './SelectAllowedPartyTypes.module.css'; import { useTranslation } from 'react-i18next'; @@ -7,12 +6,15 @@ import { getPartyTypesAllowedOptions } from '../../../../utils/tabUtils/accessCo import { useAppMetadataMutation } from 'app-development/hooks/mutations'; import { AccessControlWarningModal } from '../AccessControWarningModal'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; +import { StudioCheckboxTable } from '@studio/components'; -export interface SelectAllowedPartyTypesProps { +export type SelectAllowedPartyTypesProps = { appMetadata: ApplicationMetadata; -} +}; -export const SelectAllowedPartyTypes = ({ appMetadata }: SelectAllowedPartyTypesProps) => { +export const SelectAllowedPartyTypes = ({ + appMetadata, +}: SelectAllowedPartyTypesProps): ReactElement => { const { t } = useTranslation(); const { org, app } = useStudioEnvironmentParams(); @@ -59,45 +61,27 @@ export const SelectAllowedPartyTypes = ({ appMetadata }: SelectAllowedPartyTypes return ( <> - - - - - - - - {t('settings_modal.access_control_tab_option_all_types')} - - - - - {getPartyTypesAllowedOptions().map((mappedOption, key) => ( - - - - handleAllowedPartyTypeChange(partyTypesAllowed, mappedOption.value) - } - size='small' - value={mappedOption.value} - checked={partyTypesAllowed[mappedOption.value] || isNoCheckboxesChecked} - /> - - {t(mappedOption.label)} - + + + + {getPartyTypesAllowedOptions().map((mappedOption) => ( + handleAllowedPartyTypeChange(partyTypesAllowed, mappedOption.value)} + /> ))} - -
+ + ); diff --git a/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.module.css b/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.module.css index b622b9c5f9e..47482c8e3a5 100644 --- a/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.module.css +++ b/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.module.css @@ -5,3 +5,7 @@ .descriptionText { color: var(--fds-semantic-text-neutral-subtle); } + +.chexboxTextContent { + width: 100%; +} diff --git a/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.tsx b/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.tsx index 36f3f1df02a..4081a658947 100644 --- a/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.tsx +++ b/frontend/libs/studio-components/src/components/StudioCheckboxTable/StudioCheckboxTableRow/StudioCheckboxTableRow.tsx @@ -27,7 +27,7 @@ export const StudioCheckboxTableRow = ({ checked={checked} /> - + {label} {description && (