[open-formulieren/open-forms#3414] Made co-sign section more clear

open-formulieren · Sep 22, 2023 · 6c5acbd · 6c5acbd
1 parent 8e268a1
commit 6c5acbd
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/components/LoginOptions/LoginOptionsDisplay.js b/src/components/LoginOptions/LoginOptionsDisplay.js
@@ -38,14 +38,16 @@ const LoginOptionsDisplay = ({
 
       {cosignLoginInfo && (
         <>
-          <h2 className={getBEMClassName('login-options__caption')}>
-            <FormattedMessage
-              description="Log in to co-sign the form title"
-              defaultMessage="Log in to co-sign the form"
-            />
-          </h2>
-
-          <LoginButton key={cosignLoginInfo.identifier} option={cosignLoginInfo} />
+          <div className={getBEMClassName('login-options__cosign')}>
+            <h2 className={getBEMClassName('login-options__caption')}>
+              <FormattedMessage
+                description="Log in to co-sign the form title"
+                defaultMessage="Log in to co-sign the form"
+              />
+            </h2>
+
+            <LoginButton key={cosignLoginInfo.identifier} option={cosignLoginInfo} />
+          </div>
         </>
       )}
     </div>

diff --git a/src/scss/components/_login-options.scss b/src/scss/components/_login-options.scss
@@ -16,3 +16,8 @@
     @include margin(auto);
   }
 }
+
+.#{prefix(login-options__cosign)} {
+  padding: 0.6em;
+  background-color: var(--of-color-read-only-bg);
+}