Merge pull request #999 from tblivet/feat/badge_color

[NEW UI] Update badge color based on BO version
PrestaShop · Nov 12, 2024 · 30454ee · 30454ee
2 parents e9229c2 + d5c9e5b
commit 30454ee
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/_dev/src/scss/components/_radio-card.scss b/_dev/src/scss/components/_radio-card.scss
@@ -151,7 +151,6 @@ $e: ".radio-card";
       padding: 0.125rem 0.5rem;
       background-color: var(--#{$ua-prefix}radio-card-badge-background-color);
       border-color: var(--#{$ua-prefix}radio-card-badge-border-color);
-      border-radius: var(--#{$ua-prefix}border-radius);
       font-size: 0.75rem;
       font-weight: 600;
       line-height: 1.5;
@@ -235,4 +234,16 @@ $e: ".radio-card";
       }
     }
   }
+
+  &.v1-7-8-0,
+  &.v1-7-3-0 {
+    #{$e} {
+      --#{$ua-prefix}radio-card-badge-background-color: var(--#{$ua-prefix}blue-50);
+      --#{$ua-prefix}radio-card-badge-border-color: var(--#{$ua-prefix}blue-50);
+
+      &__badge {
+        border-radius: 1rem;
+      }
+    }
+  }
 }
diff --git a/storybook/.storybook/preview.ts b/storybook/.storybook/preview.ts
@@ -86,8 +86,8 @@ const preview: Preview = {
       const calledStory = story();
       calledStory.template = twig(`
         <div id="main">
-          <div id="content" class="bootstrap update-assistant ${selectedThemeClass}">
-            <div id="update_assistant">
+          <div id="content" class="bootstrap update-assistant">
+            <div id="update_assistant" class="${selectedThemeClass}">
               ${calledStory.template.getSource()}
               ${cssContents.map((cssFile) => `<link rel="stylesheet" type="text/css" href="${cssFile}" />`)}
             </div>