From ff95dede520ad1ac7b6ad7e7a1559ad7317e748a Mon Sep 17 00:00:00 2001
From: Ali Amori Kadhim <ali@frameless.io>
Date: Wed, 25 Sep 2024 13:14:35 +0200
Subject: [PATCH] fix: fix the formio-conten style

---
 .changeset/gorgeous-jokes-flow.md             |  5 +++
 apps/pdc-frontend/package.json                |  1 +
 .../OpenFormsEmbed/OpenFormsEmbed.scss        | 32 +++++++++++++++++++
 yarn.lock                                     |  5 +++
 4 files changed, 43 insertions(+)
 create mode 100644 .changeset/gorgeous-jokes-flow.md

diff --git a/.changeset/gorgeous-jokes-flow.md b/.changeset/gorgeous-jokes-flow.md
new file mode 100644
index 00000000..a80103f1
--- /dev/null
+++ b/.changeset/gorgeous-jokes-flow.md
@@ -0,0 +1,5 @@
+---
+"@frameless/pdc-frontend": patch
+---
+
+Los het stijlprobleem van het Vormgeving-informatietekstblok in OpenForms op ([GitHub Issue frameless/strapi#881](https://github.com/frameless/strapi/issues/881)).
diff --git a/apps/pdc-frontend/package.json b/apps/pdc-frontend/package.json
index 2f032ea4..a011d440 100644
--- a/apps/pdc-frontend/package.json
+++ b/apps/pdc-frontend/package.json
@@ -57,6 +57,7 @@
     "@types/lodash.mergewith": "4.6.9",
     "@utrecht/focus-ring-css": "1.1.0",
     "@utrecht/form-label-css": "1.1.0",
+    "@utrecht/alert-css": "2.0.0",
     "@utrecht/multiline-data-css": "1.1.0",
     "@utrecht/textbox-css": "1.2.0",
     "eslint-config-next": "13.2.4",
diff --git a/apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.scss b/apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.scss
index 12a13d17..cacb0004 100644
--- a/apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.scss
+++ b/apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.scss
@@ -1,6 +1,7 @@
 @import "~@utrecht/multiline-data-css/src/mixin";
 @import "~@utrecht/form-label-css/src/mixin";
 @import "~@utrecht/textbox-css/src/mixin";
+@import "~@utrecht/alert-css/src/mixin";
 
 :root {
   --of-progress-indicator-padding-block-end: 0;
@@ -66,3 +67,34 @@
 .utrecht-form-container--openforms {
   flex: 1 1;
 }
+
+.openforms-formio-content {
+  &--info {
+    --of-formio-content-info-border-inline-start-style: none;
+    @include utrecht-alert;
+    @include utrecht-alert-type("info");
+
+    flex-direction: column;
+  }
+  &--warning {
+    --of-formio-content-warning-border-inline-start-style: none;
+    @include utrecht-alert;
+    @include utrecht-alert-type("warning");
+
+    flex-direction: column;
+  }
+  &--error {
+    --of-formio-content-error-border-inline-start-style: none;
+    @include utrecht-alert;
+    @include utrecht-alert-type("error");
+
+    flex-direction: column;
+  }
+  &--success {
+    --of-formio-content-success-border-inline-start-style: none;
+    @include utrecht-alert;
+    @include utrecht-alert-type("ok");
+
+    flex-direction: column;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index af20220f..11df4e80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8006,6 +8006,11 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@utrecht/alert-css@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@utrecht/alert-css/-/alert-css-2.0.0.tgz#53903e9638dd20e381d348d34dace761a12651df"
+  integrity sha512-y1xJiJQcc41/w3lalY7PDR648/0937UAkzXeoZq2gNFy9nGetBMjMN+ViAajl8kaW/Np+cFKlKPiQ9KGS8WFUg==
+
 "@utrecht/backdrop-css@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@utrecht/backdrop-css/-/backdrop-css-1.1.0.tgz#08f8f9efbfdf87866216c03f17a74ac56d0a9bba"