tweak design for security level selection (#11600)

Altinn · Nov 16, 2023 · 3b6eb97 · 3b6eb97
1 parent c5be695
commit 3b6eb97
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -620,7 +620,7 @@
   "policy_editor.rules": "Regler for tilgang til applikasjonen",
   "policy_editor.security_level_description": "Sikkerhetsnivået du setter her blir minstekrav for innloggingsmetoden til bruker. Sikkerhetsnivå 1 og 2 er kun tilgjengelig via API. Skal bruker logge seg inn via ID-porten blir minstekrav sikkerhetsnivå 3.",
   "policy_editor.security_level_label": "Sikkerhetsnivå",
-  "policy_editor.select_auth_level_help_text_content": "Ler mer om sikkerhetsnivå og innlogging for sluttbruker.",
+  "policy_editor.select_auth_level_help_text_content": "Les mer om sikkerhetsnivå og innlogging for sluttbruker.",
   "policy_editor.select_auth_level_label": "Velg minimum påkrevd sikkerhetsnivå for bruker",
   "policy_editor.verification_modal_action_button": "Ja, slett regel",
   "policy_editor.verification_modal_close_button": "Nei, gå tilbake",

diff --git a/frontend/packages/policy-editor/src/PolicyEditor.module.css b/frontend/packages/policy-editor/src/PolicyEditor.module.css
@@ -1,5 +1,6 @@
 .alertWrapper {
   margin-bottom: 20px;
+  max-width: 650px;
 }
 
 .alert {

diff --git a/.../packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.module.css b/.../packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.module.css
@@ -15,4 +15,9 @@
 
 .link {
   display: inline;
+  font: var(--fds-typography-paragraph-small);
+}
+
+.securityLevelContainer {
+  max-width: 650px;
 }
diff --git a/frontend/packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.tsx b/frontend/packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.tsx
@@ -44,7 +44,7 @@ export const SecurityLevelSelect = ({
   }, [t]);
 
   return (
-    <div>
+    <div className={classes.securityLevelContainer}>
       <Heading level={2} size='xxsmall' spacing>
         {t('policy_editor.security_level_label')}
       </Heading>
@@ -57,7 +57,7 @@ export const SecurityLevelSelect = ({
           <Label size='small' htmlFor={SELECT_AUTH_LEVEL_ID}>
             {t('policy_editor.select_auth_level_label')}
           </Label>
-          <HelpText title={t('policy_editor.select_auth_level_help_text')}>
+          <HelpText size='small' title={t('policy_editor.select_auth_level_help_text')}>
             <Link
               href={URL_TO_SECURITY_LEVEL_PAGE}
               target='_newTab'