fix: allign breadcrumbs chevron

ONEARMY · Sep 6, 2024 · 4a14c7d · 4a14c7d
1 parent 39e0cd1
commit 4a14c7d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.tsx b/packages/components/src/Breadcrumbs/Breadcrumbs.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from 'theme-ui'
+import { Flex } from 'theme-ui'
 
 import { Icon } from '../Icon/Icon'
 import { BreadcrumbItem } from './BreadcrumbsItem'
@@ -22,7 +22,7 @@ export const Breadcrumbs = ({ steps }: BreadcrumbsProps) => {
       {steps.map((step, index) => {
         const isLast = index === steps.length - 1
         return (
-          <Box key={index}>
+          <Flex key={index} sx={{ alignItems: 'center' }}>
             <BreadcrumbItem text={step.text} link={step.link} isLast={isLast} />
             {!isLast && (
               <Icon
@@ -32,7 +32,7 @@ export const Breadcrumbs = ({ steps }: BreadcrumbsProps) => {
                 data-testid="breadcrumbsChevron"
               />
             )}
-          </Box>
+          </Flex>
         )
       })}
     </Flex>

diff --git a/packages/components/src/Breadcrumbs/BreadcrumbsItem.tsx b/packages/components/src/Breadcrumbs/BreadcrumbsItem.tsx
@@ -30,7 +30,7 @@ const BreadcrumbButton = ({ text, link }: BreadcrumbButtonProps) => {
 
 export const BreadcrumbItem = ({ text, link, isLast }: BreadcrumbItemProps) => (
   <Box
-    style={{ display: 'inline-flex', marginRight: '10px' }}
+    style={{ display: 'inline-flex', marginRight: '3px' }}
     data-testid="breadcrumbsItem"
     data-cy="breadcrumbsItem"
   >