Merge pull request #549 from open-formulieren/of-task/3414-change-but…

…ton-style-for-cosigning [OF#3414] Change co-sign section concerning styling
open-formulieren · Sep 25, 2023 · ed50f27 · ed50f27
2 parents 8e268a1 + efb2994
commit ed50f27
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/LoginOptions/LoginOptionsDisplay.js b/src/components/LoginOptions/LoginOptionsDisplay.js
@@ -37,7 +37,7 @@ const LoginOptionsDisplay = ({
       )}
 
       {cosignLoginInfo && (
-        <>
+        <div className={getBEMClassName('login-options__cosign')}>
           <h2 className={getBEMClassName('login-options__caption')}>
             <FormattedMessage
               description="Log in to co-sign the form title"
@@ -46,7 +46,7 @@ const LoginOptionsDisplay = ({
           </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
@@ -15,4 +15,10 @@
     @include h2;
     @include margin(auto);
   }
+
+  @include bem.element('cosign') {
+    padding-block: var(--of-login-options-cosign-padding-block);
+    padding-inline: var(--of-login-options-cosign-padding-inline);
+    background-color: var(--of-login-options-cosign-background-color);
+  }
 }