From 6c5acbd1c118be16a0b575f5044eaad171401c67 Mon Sep 17 00:00:00 2001
From: vasileios <zigras00@gmail.com>
Date: Fri, 15 Sep 2023 10:45:39 +0200
Subject: [PATCH 1/2] [open-formulieren/open-forms#3414] Made co-sign section
 more clear

---
 .../LoginOptions/LoginOptionsDisplay.js        | 18 ++++++++++--------
 src/scss/components/_login-options.scss        |  5 +++++
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/LoginOptions/LoginOptionsDisplay.js b/src/components/LoginOptions/LoginOptionsDisplay.js
index be807b3bb..b2a169e73 100644
--- 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
index d7dc9e82c..764e0596a 100644
--- 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);
+}

From efb29948e0892713abf603938db3926342258faa Mon Sep 17 00:00:00 2001
From: vasileios <zigras00@gmail.com>
Date: Fri, 22 Sep 2023 15:31:06 +0200
Subject: [PATCH 2/2] [open-formulieren/open-forms#3414] Refactored css to use
 cosign design tokens

---
 .../LoginOptions/LoginOptionsDisplay.js       | 22 +++++++++----------
 src/scss/components/_login-options.scss       |  9 ++++----
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/LoginOptions/LoginOptionsDisplay.js b/src/components/LoginOptions/LoginOptionsDisplay.js
index b2a169e73..1e0ca45a9 100644
--- a/src/components/LoginOptions/LoginOptionsDisplay.js
+++ b/src/components/LoginOptions/LoginOptionsDisplay.js
@@ -37,18 +37,16 @@ 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"
-                defaultMessage="Log in to co-sign the form"
-              />
-            </h2>
-
-            <LoginButton key={cosignLoginInfo.identifier} option={cosignLoginInfo} />
-          </div>
-        </>
+        <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
index 764e0596a..8322918cc 100644
--- a/src/scss/components/_login-options.scss
+++ b/src/scss/components/_login-options.scss
@@ -15,9 +15,10 @@
     @include h2;
     @include margin(auto);
   }
-}
 
-.#{prefix(login-options__cosign)} {
-  padding: 0.6em;
-  background-color: var(--of-color-read-only-bg);
+  @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);
+  }
 }