fix(mrc): fix action-banner style and alignement

ref: #15742 Signed-off-by: LIDRISSI Hamid <[email protected]>
ovh · Mar 10, 2025 · 5feab2f · 5feab2f
1 parent 7c18c1c
commit 5feab2f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
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
@@ -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
@@ -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
@@ -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';