book page with new cards

src/components/ui/Card.jsx

@@ -4,7 +4,7 @@ import { forwardRef } from 'react'
 const Card = forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+    className={cn('rounded-lg border bg-card text-card-foreground shadow-sm pb-1.5', className)}
     {...props}
   />
 ))

src/pages/Book/components/InvoicesTable/InvoicesTable.jsx

@@ -14,7 +14,7 @@ const InvoicesTable = ({ invoices, count, setFilters }) => {
 
   return (
     <TableMaterial
-      className={classes.table}
+      className='mt-4'
       columns={[
         {
           title: 'Nº de Orden',

src/pages/Book/components/InvoicesTable/InvoicesTable.styles.js

@@ -1,9 +1,6 @@
 import makeStyles from '@mui/styles/makeStyles'
 
 export const useStyles = makeStyles(theme => ({
-  table: {
-    marginTop: theme.spacing(2)
-  },
   rowRed: {
     '& > *': {
       color: theme.palette.error.dark

src/pages/Book/components/SearchForm/SearchForm.jsx

@@ -2,27 +2,19 @@
 
 import PropTypes from 'prop-types'
 import {
-  Card,
-  CardContent,
   Grid,
   Divider,
   CardHeader
 } from '@mui/material'
 
-import {
-  DatePickerForm,
-  InputForm, SwitchForm
-} from 'components'
+import { DatePickerForm, InputForm, SwitchForm, Card, CardContent } from 'components'
 
-import { useStyles } from './SearchForm.styles'
 import { fields } from '../../constans'
 
 const SearchForm = ({
   filters,
   setFilters
 }) => {
-  const classes = useStyles()
-
   /**
    * Handle event onChange input
    * @param {String} name
@@ -75,7 +67,7 @@ const SearchForm = ({
   )
 
   return (
-    <Card className={classes.root}>
+    <Card className='mt-4'>
       <CardHeader
         title='Búsqueda'
       />

src/pages/Client/components/ClientExpandedInfo/ClientExpandedInfo.jsx

@@ -1,16 +1,13 @@
 import { useCallback, useState } from 'react'
 import PropTypes from 'prop-types'
 import {
-  Card,
-  CardContent,
-  CardHeader,
   Divider,
   IconButton,
   Tooltip
 } from '@mui/material'
 import EditIcon from '@mui/icons-material/Edit'
 
-import { ItemGroupsCard } from 'components'
+import { ItemGroupsCard, Card, CardContent, CardHeader } from 'components'
 import { adapterClientInfo } from '../../utils'
 import { EditClientModal } from '../../modals'
 import { useStyles } from './ClientExpandedInfo.styles'

src/pages/Product/components/ProductData/ProductData.jsx

@@ -1,11 +1,13 @@
 import { useCallback, useState } from 'react'
 import PropTypes from 'prop-types'
 import {
-  Card, CardContent, CardHeader, Divider, Grid, IconButton, Tooltip
+  Divider, Grid, IconButton, Tooltip
 } from '@mui/material'
 import EditIcon from '@mui/icons-material/Edit'
 import uniqId from 'uniqid'
 
+import { Card, CardContent, CardHeader } from 'components'
+
 import ProductItemCard from './ProductItemCard'
 import { generateLabels } from './utils'
 import EditProductModal from '../../modals/EditProductModal'