style the breadcrumbs

kadena-community · Nov 4, 2024 · 6186111 · 6186111
1 parent 6d650b7
commit 6186111
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 33 deletions.
diff --git a/.changeset/polite-mugs-shout.md b/.changeset/polite-mugs-shout.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx b/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx
@@ -12,10 +12,8 @@ export const BreadCrumbs: FC = () => {
     <BreadcrumbsUI icon={breadCrumbs[0].visual}>
       <>
         {breadCrumbs.map((crumb) => (
-          <BreadcrumbsItem href={crumb.url}>
-            <Link key={crumb.label} to={crumb.url}>
-              {crumb.label}
-            </Link>
+          <BreadcrumbsItem key={crumb.url} component={Link} href={crumb.url}>
+            {crumb.label}
           </BreadcrumbsItem>
         ))}
       </>

diff --git a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts
@@ -1,34 +1,42 @@
-import { style, token } from '../../styles';
+import { atoms, style, token } from '../../styles';
 
-export const containerClass = style({
-  display: 'flex',
-  padding: 0,
-  flexFlow: 'wrap',
-  listStyle: 'none',
-});
+export const containerClass = style([
+  atoms({
+    display: 'flex',
+    padding: 'no',
+  }),
+  {
+    listStyle: 'none',
+    flexFlow: 'wrap',
+  },
+]);
 
-export const itemClass = style({
-  display: 'flex',
-  padding: 0,
-  whiteSpace: 'nowrap',
-  selectors: {
-    '&:not(:first-child):not(:last-child)::before': {
-      content: '/',
-      marginInline: token('spacing.sm'),
-    },
-    '&:last-child::before': {
-      content: '∙',
-      marginInline: token('spacing.sm'),
-    },
-    '&:first-child': {
-      fontWeight: token('typography.weight.primaryFont.bold'),
+export const itemClass = style([
+  atoms({
+    fontSize: 'xxs',
+  }),
+  {
+    display: 'flex',
+    padding: 0,
+    whiteSpace: 'nowrap',
+    selectors: {
+      '&:not(:first-child):not(:last-child)::before': {
+        content: '/',
+        color: token('color.text.gray.default'),
+        marginInline: token('spacing.sm'),
+      },
+      '&:not(:first-child):last-child::before': {
+        content: '∙',
+        color: token('color.text.gray.default'),
+        marginInline: token('spacing.sm'),
+      },
     },
   },
-});
+]);
 
 export const linkClass = style({
   display: 'flex',
-  color: token('color.text.base.default'),
+  color: token('color.text.gray.default'),
   textDecoration: 'none',
   selectors: {
     '&:hover': {

diff --git a/packages/libs/kode-ui/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/libs/kode-ui/src/components/Breadcrumbs/BreadcrumbsItem.tsx
@@ -1,21 +1,27 @@
 import { mergeRefs } from '@react-aria/utils';
 import cn from 'classnames';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { AriaBreadcrumbItemProps } from 'react-aria';
 import { useBreadcrumbItem } from 'react-aria';
+import { Anchor } from '../Link/Link';
 import { itemClass, linkClass } from './Breadcrumbs.css';
 
 export interface IBreadcrumbItemProps extends AriaBreadcrumbItemProps {
   href?: string;
   asChild?: boolean;
+  component?: any;
 }
 
 export const BreadcrumbsItem: FC<IBreadcrumbItemProps> = (props) => {
   const { href, isCurrent, isDisabled, asChild, children } = props;
   const ref = React.useRef(null);
   const { itemProps } = useBreadcrumbItem(props, ref);
 
+  const LinkWrapper = useMemo(() => {
+    return props.component ?? Anchor;
+  }, [props.component]);
+
   if (asChild && React.isValidElement(children)) {
     return (
       <li className={itemClass}>
@@ -35,16 +41,17 @@ export const BreadcrumbsItem: FC<IBreadcrumbItemProps> = (props) => {
 
   return (
     <li className={itemClass}>
-      <a
+      <LinkWrapper
         {...itemProps}
         className={linkClass}
         ref={ref}
+        to={href}
         href={href}
         data-current={isCurrent}
         data-disabled={isDisabled}
       >
         {children}
-      </a>
+      </LinkWrapper>
     </li>
   );
 };
diff --git a/packages/libs/kode-ui/src/components/Link/Link.tsx b/packages/libs/kode-ui/src/components/Link/Link.tsx
@@ -53,7 +53,7 @@ export type ILinkProps = Omit<AriaFocusRingProps, 'isTextInput'> &
  * @param title - title to be shown as HTML tooltip
  */
 
-const Anchor = forwardRef<HTMLAnchorElement, ILinkProps>(
+export const Anchor = forwardRef<HTMLAnchorElement, ILinkProps>(
   ({ children, ...props }, ref) => (
     <a {...props} ref={ref}>
       {children}

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
@@ -77,6 +77,7 @@ export const menuWrapperClass = recipe({
         display: 'flex',
         width: '45px',
         padding: token('spacing.md'),
+        paddingBlockStart: token('spacing.sm'),
         paddingInline: token('spacing.xs'),
         gridArea: 'sidebarlayout-sidebar',
         transform: 'translateX(0%)',
@@ -220,7 +221,7 @@ export const headerClass = style([
     },
     md: {
       gridTemplateColumns: '1fr',
-      gridTemplateRows: 'auto',
+      gridTemplateRows: '1fr',
       gridTemplateAreas: `
     "header-crumbs"
   `,