Merge pull request #261 from heorhi-deriv/fix-colors-in-breadcrumbs

fix: 🚑 fix colors in Breadcrumbs
deriv-com · Oct 11, 2024 · 78ed22d · 78ed22d
2 parents 5fa835d + f57237b
commit 78ed22d
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 13 deletions.
diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -20,14 +20,6 @@
         }
     }
 
-    &__text {
-        color: var(--du-text-less-prominent, #999999);
-
-        &--active {
-            color: var(--du-text-prominent, #333333);
-        }
-    }
-
     &__separator-container {
         cursor: default;
     }

diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
@@ -35,11 +35,10 @@ export const Breadcrumbs = ({
                         className="deriv-breadcrumbs__item"
                     >
                         <Text
-                            className={clsx("deriv-breadcrumbs__text", {
-                                "deriv-breadcrumbs__text--active": isLastItem,
-                            })}
-                            size={textSize}
+                            className="deriv-breadcrumbs__text"
+                            color={isLastItem ? 'prominent' : 'less-prominent'}
                             onClick={() => handleOnClick(item)}
+                            size={textSize}
                         >
                             {item.text}
                         </Text>

diff --git a/src/components/Text/Text.scss b/src/components/Text/Text.scss
@@ -1,6 +1,6 @@
 // TODO: Refactor this file to use css variables
 $color-map: (
-    "prominent": var(--du-text-prominent),
+    "prominent": var(--du-text-prominent, #333333),
     "less-prominent": var(--du-text-less-prominent, #999999),
     "general": var(--du-text-general, #333333),
     "primary": var(--du-text-primary, #999999),