breadcrums

src/components/DeliveryOrderExpand/index.jsx

@@ -2,10 +2,8 @@ import PropTypes from 'prop-types'
 import {
   Accordion,
   AccordionContent, AccordionItem,
-  AccordionTrigger,
-  Paper
+  AccordionTrigger
 } from 'components'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 
 import ProductsOrderTable from './ProductsOrderTable'
 import DeliveryOrderExpandHeader from './DeliveryOrderExpandHeader'

src/components/Grid.jsx

@@ -62,7 +62,7 @@ const Grid = ({ children, className, item, md, xs, lg }) => {
   const type = item ? 'item' : 'container'
 
   return (
-    <div className={cn(gridVariants({ className, type, xs, md, lg }), 'grid-cols-2')}>
+    <div className={cn(gridVariants({ className, type, xs, md, lg }))}>
       {children}
     </div>
   )

src/components/Header/Header.jsx

@@ -1,14 +1,13 @@
-/* eslint-disable react/prop-types, no-shadow */
-
-import { Link as RouterLink } from 'react-router-dom'
 import PropTypes from 'prop-types'
-import {
-  Breadcrumbs, Link, SvgIcon, Typography, Box
-} from '@mui/material'
-import { ChevronRight } from 'lucide-react'
 import uniqId from 'uniqid'
-import { Button, Grid } from 'components'
-import { cn } from '../../utils/index.js'
+
+import {
+  Button, Grid, Typography, Breadcrumb,
+  BreadcrumbLink,
+  BreadcrumbPage
+} from 'components'
+
+import { cn } from 'utils'
 
 const Header = ({
   className, routes = [], title, description, buttons, buttonsSecondary, ...rest
@@ -21,16 +20,12 @@ const Header = ({
    * @private
    */
   const _itemNav = (link, title) => (
-    <Link
+    <BreadcrumbLink
       key={uniqId()}
-      variant='body1'
-      color='inherit'
       to={link}
-      component={RouterLink}
-      underline='none'
     >
       {title}
-    </Link>
+    </BreadcrumbLink>
   )
 
   /**
@@ -53,16 +48,8 @@ const Header = ({
       className='mb-2 ml-2'
       {...rest}
     >
-      {disableSvg
-        ? <Icon className='mr-1' />
-        : (
-          <SvgIcon
-            fontSize='small'
-            className='mr-1'
-          >
-            <Icon />
-          </SvgIcon>
-          )}
+      <Icon className='mr-1 text-sm' />
+
       {label}
     </Button>
   )
@@ -73,21 +60,14 @@ const Header = ({
       {...rest}
     >
       <Grid item>
-        <Breadcrumbs
-          separator={<ChevronRight size={18} />}
-          aria-label='breadcrumb'
-        >
+        <Breadcrumb>
           {_itemNav('/app', 'Inicio')}
           {
             routes.map(({ link, title }) => _itemNav(link, title))
           }
-          <Typography
-            variant='body1'
-            color='textPrimary'
-          >
-            {title}
-          </Typography>
-        </Breadcrumbs>
+
+          <BreadcrumbPage>{title}</BreadcrumbPage>
+        </Breadcrumb>
         <Typography
           variant='h3'
           color='textPrimary'
@@ -97,9 +77,9 @@ const Header = ({
         {
           buttonsSecondary &&
           (
-            <Box mt={2}>
+            <div className='mt-4'>
               {buttonsSecondary.map(_renderButton)}
-            </Box>
+            </div>
           )
         }
       </Grid>

src/components/ui/Alert.jsx

@@ -8,7 +8,7 @@ const alertVariants = cva(
   {
     variants: {
       severity: {
-        success: 'bg-success/10 dark:bg-success/20',
+        success: 'bg-success dark:bg-success/80 text-white',
         error: 'bg-destructive text-destructive-foreground'
       }
     },

src/components/ui/Breadcrumb.jsx

@@ -0,0 +1,78 @@
+import { ChevronRight } from 'lucide-react'
+import { Children } from 'react'
+import { Link } from 'react-router-dom'
+
+import { cn } from 'utils'
+import { Typography } from './index.js'
+
+const Breadcrumb = ({ className, children }) => (
+  <nav aria-label='breadcrumb'>
+    <ol
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+        className
+      )}
+    >
+      {Children.map(children, (child, index) => (
+        <>
+          {!!index && <BreadcrumbSeparator />}
+          {child}
+        </>
+      ))}
+    </ol>
+  </nav>
+)
+
+const BreadcrumbItem = ({ children }) => (
+  <li
+    className='inline-flex items-center gap-1.5'
+  >
+    {children}
+  </li>
+)
+
+const BreadcrumbLink = ({ children, to }) => (
+  <BreadcrumbItem>
+    <Link to={to}>
+      <Typography
+        variant='body1'
+        className='transition-colors text-muted-foreground hover:text-foreground'
+      >
+        {children}
+      </Typography>
+    </Link>
+  </BreadcrumbItem>
+)
+
+const BreadcrumbPage = ({ children }) => (
+  <BreadcrumbItem>
+
+    <Typography
+      role='link'
+      aria-disabled='true'
+      aria-current='page'
+      variant='body1'
+      className='font-normal text-foreground'
+    >
+      {children}
+    </Typography>
+  </BreadcrumbItem>
+)
+
+const BreadcrumbSeparator = () => (
+  <li
+    role='presentation'
+    aria-hidden='true'
+  >
+    <ChevronRight className='size-3.5' strokeWidth={3.5} />
+  </li>
+)
+
+export {
+  Breadcrumb,
+
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+}

src/components/ui/Button.jsx

@@ -17,7 +17,7 @@ export const buttonVariants = cva(
         outline:
           'border border-input bg-background hover:bg-accent text-secondary',
         outlined:
-          'border border-input bg-background hover:bg-accent text-secondary',
+          'border border-input bg-foreground/10 hover:bg-accent-foreground/20 text-secondary',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground text-default',

src/components/ui/TextField.jsx

@@ -13,7 +13,7 @@ const TextField = forwardRef(({ className, name, label, ...props }, ref) => (
     <input
       name={name}
       className={cn(
-        'flex h-12 w-full rounded-md border px-3 py-2 text-white ring-offset-background bg-transparent placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-12 w-full rounded-md border px-3 py-2 ring-offset-background bg-transparent placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       ref={ref}

src/components/ui/index.js

@@ -1,4 +1,5 @@
 export * from './Alert'
+export * from './Breadcrumb'
 export * from './Card'
 export * from './Checkbox'
 export * from './Container'

src/pages/Client/components/Header/Header.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
-import ExpandLessIcon from '@mui/icons-material/ExpandLess'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { ChevronDown, ChevronUp } from 'lucide-react'
 import PostAddIcon from '@mui/icons-material/PostAdd'
 import { useNavigate } from 'react-router'
 
@@ -31,8 +30,7 @@ const HeaderClient = ({
       buttonsSecondary={[{
         variant: 'text',
         onClick: onExpand,
-        Icon: expanded ? ExpandLessIcon : ExpandMoreIcon,
-        disableSvg: true,
+        Icon: expanded ? ChevronUp : ChevronDown,
         label: expanded ? 'Ocultar información' : 'Mostrar información'
       }]}
       buttons={[{

src/pages/ClientInvoice/components/Header/index.jsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
-import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined'
 import PropTypes from 'prop-types'
-import { PlusCircle as PlusCircleIcon, Trash2, ArrowDownToLine } from 'lucide-react'
+import { PlusCircle, Trash2, ArrowDownToLine, CircleCheck } from 'lucide-react'
 
 import { Header } from 'components'
 import { downloadFile } from 'utils'
@@ -57,16 +56,14 @@ const HeaderClientInvoice = ({
           variant: 'contained',
           color: 'secondary',
           onClick: () => setShowConfirmModal(true),
-          Icon: CheckCircleOutlinedIcon,
-          disableSvg: true,
+          Icon: CircleCheck,
           label: 'Confirmar',
           disabled: Boolean(nInvoice)
         }, {
           variant: 'contained',
           color: 'primary',
           onClick: _handleClickNewOrder,
-          Icon: PlusCircleIcon,
-          disableSvg: true,
+          Icon: PlusCircle,
           label: 'Nuevo albarán',
           disabled: Boolean(nInvoice)
         }]}

src/pages/Login/components/AuthLayout/TopBar/TopBar.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 
 const TopBar = () => {
   return (
-    <div className='bg-background min-h-16 flex items-center'>
+    <div className='bg-header min-h-16 flex items-center'>
       <nav className='px-6'>
         <img
           alt='Logo'

src/theme/global.css

@@ -10,6 +10,7 @@
         --card-foreground: 222.2 84% 4.9%;
         --popover: 0 0% 100%;
         --popover-foreground: 222.2 84% 4.9%;
+        --header: 231 50% 44%;
         --primary: 221.2 83.2% 53.3%;
         --primary-foreground: 210 40% 98%;
         --secondary: 262.1 83.3% 57.8%;
@@ -20,7 +21,7 @@
         --accent-foreground: 222.2 47.4% 11.2%;
         --destructive: 0 84.2% 60.2%;
         --destructive-foreground: 210 40% 98%;
-        --success: 123 46% 34%;
+        --success: 123 46% 33%;
         --warning: 27 98% 47%;
         --border: 0 0% 87%;
         --input: 214.3 31.8% 91.4%;
@@ -36,6 +37,7 @@
         --card-foreground: 210 40% 98%;
         --popover: 222.2 84% 4.9%;
         --popover-foreground: 210 40% 98%;
+        --header: 220 13% 18%;
         --primary: 217.2 91.2% 59.8%;
         --primary-foreground: 222.2 47.4% 11.2%;
         --secondary: 242 100% 76%;
@@ -46,7 +48,7 @@
         --accent-foreground: 210 40% 98%;
         --destructive: 0 65% 51%;
         --destructive-foreground: 240 9% 92%;
-        --success: 123 46% 34%;
+        --success: 123 46% 33%;
         --warning: 27 98% 47%;
         --border: 0 0% 32%;
         --input: 217.2 32.6% 17.5%;

tailwind.config.js

@@ -39,7 +39,7 @@ module.exports = {
           DEFAULT: 'hsl(var(--success))'
         },
         warning: {
-          DEFAULT: 'hsl(var(--warning))',
+          DEFAULT: 'hsl(var(--warning))'
         },
         muted: {
           DEFAULT: 'hsl(var(--muted))',
@@ -56,6 +56,9 @@ module.exports = {
         card: {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))'
+        },
+        header: {
+          DEFAULT: 'hsl(var(--header))'
         }
       },
       borderRadius: {