From 5feab2f2d428bebff34ac96e7ac64ea52b9ecef7 Mon Sep 17 00:00:00 2001
From: LIDRISSI Hamid <lidrissi.hamid@gmail.com>
Date: Mon, 3 Mar 2025 11:27:14 +0100
Subject: [PATCH] fix(mrc): fix action-banner style and alignement

ref: https://github.com/ovh/manager/issues/15742
Signed-off-by: LIDRISSI Hamid <lidrissi.hamid@gmail.com>
---
 .../action-banner/action-banner.component.tsx | 15 ++++++------
 .../action-banner/action-banner.scss          | 23 +++++++++++++++++++
 .../manager-react-components/src/lib.scss     |  1 +
 3 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 packages/manager-react-components/src/components/action-banner/action-banner.scss

diff --git a/packages/manager-react-components/src/components/action-banner/action-banner.component.tsx b/packages/manager-react-components/src/components/action-banner/action-banner.component.tsx
index 724c637b9065..935b7d97c643 100644
--- a/packages/manager-react-components/src/components/action-banner/action-banner.component.tsx
+++ b/packages/manager-react-components/src/components/action-banner/action-banner.component.tsx
@@ -35,11 +35,11 @@ export function ActionBanner({
       isDismissible={isDismissible}
       color={color}
       variant={variant}
-      className="mt-3 flex-row"
+      className={`mt-3 action-banner action-banner—-${color}`}
       data-testid="actionBanner-message_container"
     >
-      <div className="sm:flex sm:flex-row sm:justify-between sm:items-center">
-        <OdsText>
+      <div className="w-full">
+        <OdsText className="action-banner__text block">
           <span
             dangerouslySetInnerHTML={{
               __html: message,
@@ -48,7 +48,7 @@ export function ActionBanner({
         </OdsText>
         {onClick && (
           <OdsButton
-            className="sm:mt-0 mt-4 sm:ml-4 ml-0"
+            className="sm:mt-0 mt-4 ml-0"
             data-testid="actionBanner-button"
             onClick={onClick}
             label={cta}
@@ -58,13 +58,12 @@ export function ActionBanner({
           <OdsLink
             data-testid="action-banner-link"
             id="action-banner-link"
-            className="sm:mt-0 mt-4 sm:ml-4 ml-0"
+            className="sm:mt-0 mt-4 ml-0"
             onClick={onClick}
             href={href}
             target="_blank"
-          >
-            {cta}
-          </OdsLink>
+            label={cta}
+          ></OdsLink>
         )}
       </div>
     </OdsMessage>
diff --git a/packages/manager-react-components/src/components/action-banner/action-banner.scss b/packages/manager-react-components/src/components/action-banner/action-banner.scss
new file mode 100644
index 000000000000..86849bf529a5
--- /dev/null
+++ b/packages/manager-react-components/src/components/action-banner/action-banner.scss
@@ -0,0 +1,23 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.action-banner.action-banner—-success .action-banner__text::part(text) {
+  color: var(--ods-color-success-700);
+}
+
+.action-banner.action-banner—-warning .action-banner__text::part(text) {
+  color: var(--ods-color-warning-700);
+}
+
+.action-banner.action-banner—-information .action-banner__text::part(text) {
+  color: var(--ods-color-information-700);
+}
+
+.action-banner.action-banner—-danger .action-banner__text::part(text) {
+  color: var(--ods-color-critical-700);
+}
+
+.action-banner.action-banner—-critical .action-banner__text::part(text) {
+  color: var(--ods-color-critical-700);
+}
diff --git a/packages/manager-react-components/src/lib.scss b/packages/manager-react-components/src/lib.scss
index eea62d87d1be..d3ca6573a77d 100644
--- a/packages/manager-react-components/src/lib.scss
+++ b/packages/manager-react-components/src/lib.scss
@@ -2,3 +2,4 @@
 @import './components/templates/update-name-modal/update-name-modal.scss';
 @import './components/filters/filters.scss';
 @import './components/navigation/menus/action/action.scss';
+@import './components/action-banner/action-banner.scss';