fix separator

deriv-com · Oct 3, 2024 · 95e05cc · 95e05cc
1 parent 1b6334b
commit 95e05cc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -5,6 +5,14 @@
     &__item {
         float: left;
         list-style-type: none;
+
+        &:not(:last-child) {
+            cursor: pointer;
+
+            .deriv-breadcrumbs__text:hover {
+                color: var(--du-text-general, #333333);
+            }
+        }
     }
 
     &__text {
@@ -13,14 +21,10 @@
         &--active {
             color: var(--du-text-prominent, #333333);
         }
+    }
 
-        &:not(:last-child) {
-            cursor: pointer;
-
-            &:hover {
-                color: var(--du-text-general, #333333);
-            }
-        }
+    &__separator-container {
+        cursor: default;
     }
 
     &__chevron-icon {

diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
@@ -43,13 +43,16 @@ export const Breadcrumbs = ({
                         >
                             {item.text}
                         </Text>
-                        {!isLastItem &&
-                            (separator ?? (
-                                <LegacyChevronRight1pxIcon
-                                    className="deriv-breadcrumbs__chevron-icon"
-                                    iconSize="xs"
-                                />
-                            ))}
+                        {!isLastItem && (
+                            <span className="deriv-breadcrumbs__separator-container">
+                                {separator || (
+                                    <LegacyChevronRight1pxIcon
+                                        className="deriv-breadcrumbs__chevron-icon"
+                                        iconSize="xs"
+                                    />
+                                )}
+                            </span>
+                        )}
                     </li>
                 );
             })}