Fix default color for separator component (#3137)

* Fix default color for separator component

* fix test

Author: tom2drum

toolkit/theme/recipes/index.ts

@@ -20,6 +20,7 @@ import { recipe as radioGroup } from './radio-group.recipe';
 import { recipe as radiomark } from './radiomark.recipe';
 import { recipe as ratingGroup } from './rating-group.recipe';
 import { recipe as select } from './select.recipe';
+import { recipe as separator } from './separator.recipe';
 import { recipe as skeleton } from './skeleton.recipe';
 import { recipe as spinner } from './spinner.recipe';
 import { recipe as stat } from './stat.recipe';
@@ -41,6 +42,7 @@ export const recipes = {
   radiomark,
   skeleton,
   spinner,
+  separator,
   textarea,
 };
 

toolkit/theme/recipes/separator.recipe.ts

@@ -0,0 +1,9 @@
+import { defineRecipe } from '@chakra-ui/react';
+
+export const recipe = defineRecipe({
+  className: 'chakra-separator',
+  base: {
+    display: 'block',
+    borderColor: 'border.divider',
+  },
+});

ui/block/details/BlockDetailsZilliqaQuorumCertificate.tsx

@@ -63,7 +63,7 @@ const BlockDetailsZilliqaQuorumCertificate = ({ data }: Props) => {
         </Grid>
         { data.nested_quorum_certificates && data.nested_quorum_certificates.length > 0 && (
           <>
-            <Separator mt={ 2 } w="100%" borderColor="border.divider"/>
+            <Separator mt={ 2 } w="100%"/>
             <AccordionRoot
               multiple
               w="100%"

ui/marketplace/essentialDapps/revoke/components/Content.tsx

@@ -181,7 +181,6 @@ const Content = ({
           </Flex>
           <Separator
             orientation="vertical"
-            borderColor="border.divider"
             mx={{ base: 4, md: 8 }}
           />
           <Flex

ui/rewards/dashboard/streakModal/RewardsStreakModal.tsx

@@ -77,7 +77,6 @@ const RewardsStreakModal = ({ open, onOpenChange, currentStreak, badges = EMPTY_
                       <Separator
                         display={{ base: 'none', lg: 'block' }}
                         orientation="vertical"
-                        borderColor="border.divider"
                       />
                     ) }
                   </>

ui/snippets/navigation/horizontal/NavLinkGroup.tsx

@@ -22,7 +22,7 @@ const NavLinkGroup = ({ item }: Props) => {
   const hasGroups = item.subItems.some((subItem) => Array.isArray(subItem));
 
   const content = hasGroups ? (
-    <HStack separator={ <Separator/> } alignItems="flex-start">
+    <HStack separator={ <Separator/> } alignItems="stretch">
       { item.subItems.map((subItem, index) => {
         if (!Array.isArray(subItem)) {
           return <NavLink key={ subItem.text } item={ subItem }/>;

ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png

@@ -53,7 +53,7 @@ const TopBar = () => {
         </HStack>
         <HStack
           alignItems="center"
-          separator={ <Separator mx={{ base: 2, lg: 3 }} height={ 4 } orientation="vertical" borderColor="border.divider"/> }
+          separator={ <Separator mx={{ base: 2, lg: 3 }} height={ 4 }/> }
         >
           { (hasAddChainButton || hasDeFiDropdown) && (
             <HStack>