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

ref: #15742 Signed-off-by: LIDRISSI Hamid <[email protected]>
ovh · Mar 3, 2025 · 15f80d8 · 15f80d8
1 parent ad7bd8d
commit 15f80d8
Show file tree

Hide file tree

Showing 2 changed files with 32 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
@@ -10,6 +10,8 @@ import {
   ODS_MESSAGE_VARIANT,
 } from '@ovhcloud/ods-components';
 
+import './index.css';
+
 export type ActionBannerProps = {
   message: string;
   cta: string;
@@ -35,11 +37,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 +50,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 +60,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/index.css b/packages/manager-react-components/src/components/action-banner/index.css
@@ -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);
+}