Add custom card component

src/components/Cards/ItemCard/ItemCard.stories.jsx

@@ -1,4 +1,4 @@
-import { Card, CardContent } from '@mui/material'
+import { Card, CardContent } from '../../'
 import { story as ItemCard } from './ItemCard'
 import { ThemeWrapper } from '../../../story'
 

src/components/Cards/ItemGroupsCard/ItemGroupsCard.stories.js

@@ -1,5 +1,5 @@
 import { number } from '@storybook/addon-knobs'
-import { Card, CardContent } from '@mui/material'
+import { Card, CardContent } from '../../'
 import { story as ItemGroupsCard } from './ItemGroupsCard'
 
 export default {

src/components/HashTabs/HashTabs.jsx

@@ -1,14 +1,13 @@
 import PropTypes from 'prop-types'
-import { Card, Tab, Tabs } from '@mui/material'
+import { Tab, Tabs } from '@mui/material'
 import { useNavigate } from 'react-router'
 
-import { useStyles } from './HashTabs.styles'
+import { Card } from 'components'
 
 const HashTabs = ({
   currentTab,
   tabs
 }) => {
-  const classes = useStyles()
   const navigate = useNavigate()
 
   /**
@@ -22,7 +21,7 @@ const HashTabs = ({
   }
 
   return (
-    <Card className={classes.tabs}>
+    <Card>
       <Tabs
         onChange={_handleTabsChange}
         scrollButtons='auto'

src/components/ListActions/ListActions.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import PropTypes from 'prop-types'
 import {
-  Card,
   IconButton,
   List,
   ListItem,
@@ -13,10 +12,10 @@ import {
 } from '@mui/material'
 import { ChevronRight } from 'lucide-react'
 
+import { Card, Typography } from 'components'
 import { cn } from 'utils'
 
 import { InputForm } from '../Forms'
-import { Typography } from '../ui'
 
 const ListActions = ({
   className,

src/components/Modals/ModalGrid/ModalGrid.jsx

@@ -1,22 +1,17 @@
 import PropTypes from 'prop-types'
 import {
   Modal,
-  Card,
-  CardHeader,
-  CardContent,
-  CardActions,
   Grid,
   Divider
 } from '@mui/material'
-import { Button } from 'components'
-
-import { useStyles } from './ModalGrid.styles'
+import { Button, Card, CardHeader, CardContent, CardActions } from 'components'
+import useSettings from 'hooks/useSettings'
 
 const ModalGrid = ({
   show, close, title, children, action, actions, setShow
 }) => {
-  const classes = useStyles()
-
+  const { settings } = useSettings()
+  const themeMode = settings.theme === 'LIGHT' ? 'light' : 'dark'
   /**
    * Close Modal
    */
@@ -61,9 +56,10 @@ const ModalGrid = ({
     <Modal
       onClose={close || onClose}
       open={show}
+      className={themeMode}
     >
       <Card
-        className={classes.root}
+        className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 outline-none shadow-sm lg:shadow-lg w-[700px] max-h-full overflow-y-auto max-w-full'
       >
         <form>
           <CardHeader title={title} />
@@ -77,7 +73,7 @@ const ModalGrid = ({
             </Grid>
           </CardContent>
           <Divider />
-          <CardActions className={classes.actions}>
+          <CardActions className='justify-end'>
             {actions?.map(_renderButton) || _renderButtons()}
           </CardActions>
         </form>

src/components/PricesChart/PricesChart.jsx

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types'
 import PerfectScrollbar from 'react-perfect-scrollbar'
 import {
-  Box, Card, CardContent, CardHeader, Divider
+  Box, Divider
 } from '@mui/material'
+
+import { Card, CardContent, CardHeader } from 'components'
 import { format } from 'utils'
 import Chart from './Chart'
 import { useStyles } from './PricesChart.styles'

src/components/ProviderExpandedInfo/components/ProviderBilling/ProviderBilling.jsx

@@ -1,51 +1,44 @@
 import PropTypes from 'prop-types'
 import {
-  Card, CardContent, CardHeader, Divider, Grid, List
+  Divider, Grid, List
 } from '@mui/material'
 import uniqId from 'uniqid'
 
-import { ItemCard } from 'components'
-import { useStyles } from './ProviderBilling.styles'
+import { Card, CardContent, CardHeader, ItemCard } from 'components'
 
 const ProviderBilling = (
   {
     year, trimesters, annual
   }
-) => {
-  const classes = useStyles()
-
-  return (
-    <Grid
-      item
-      md={6}
-      xs={12}
-    >
-      <Card
-        className={classes.root}
-      >
-        <CardHeader title={`Facturación ${year}`} />
-        <Divider />
-        <CardContent className={classes.content}>
-          <List>
-            {trimesters.map((value, index) => (
-              <ItemCard
-                label={`${index + 1}º trimestre`}
-                value={value}
-                variant='euro'
-                key={uniqId()}
-              />
-            ))}
+) => (
+  <Grid
+    item
+    md={6}
+    xs={12}
+  >
+    <Card>
+      <CardHeader title={`Facturación ${year}`} />
+      <Divider />
+      <CardContent className='pt-0'>
+        <List>
+          {trimesters.map((value, index) => (
             <ItemCard
-              label='Anual'
-              value={annual}
+              label={`${index + 1}º trimestre`}
+              value={value}
               variant='euro'
+              key={uniqId()}
             />
-          </List>
-        </CardContent>
-      </Card>
-    </Grid>
-  )
-}
+          ))}
+          <ItemCard
+            label='Anual'
+            value={annual}
+            variant='euro'
+          />
+        </List>
+      </CardContent>
+    </Card>
+  </Grid>
+)
 
 ProviderBilling.propTypes = {
   trimesters: PropTypes.array,

src/components/ProviderExpandedInfo/components/ProviderInfo/ProviderInfo.jsx

@@ -1,16 +1,13 @@
 import { useCallback, useState } from 'react'
 import {
-  Card,
-  CardContent,
-  CardHeader,
   Divider,
   Grid,
   IconButton,
   Tooltip
 } from '@mui/material'
 import EditIcon from '@mui/icons-material/Edit'
 
-import { ItemGroupsCard } from 'components'
+import { ItemGroupsCard, Card, CardContent, CardHeader } from 'components'
 import { useStyles } from './ProviderInfo.styles'
 import { adapterProviderInfo } from './adapterProviderInfo'
 import EditProviderModal from '../../modals/EditProviderModal'

src/components/TotalsReportBoxes/components/TotalsReportBox.jsx

@@ -1,65 +1,48 @@
 import PropTypes from 'prop-types'
 import {
-  Avatar, Box, Card, Grid, Typography
+  Avatar, Box, Grid
 } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
+
 import EuroIcon from '@mui/icons-material/Euro'
 
+import { Card, Typography } from 'components'
 import { format } from 'utils'
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    padding: theme.spacing(3),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  },
-  avatar: {
-    backgroundColor: theme.palette.secondary.main,
-    color: theme.palette.secondary.contrastText,
-    height: 48,
-    width: 48
-  }
-}))
-
 const TotalsReportBox = ({
   title,
   value,
   size
 }) => {
-  const classes = useStyles()
-
   return (
     <Grid
       item
       lg={size ?? 2}
       sm={4}
       xs={12}
     >
-      <Card className={classes.root}>
+      <Card className='p-6 flex items-center justify-between'>
         <Box flexGrow={1}>
           <Typography
             component='h3'
-            gutterBottom
             variant='overline'
-            color='textSecondary'
+            className='text-muted-foreground font-bold'
           >
             {title}
           </Typography>
           <Box
             display='flex'
             alignItems='center'
             flexWrap='wrap'
+            className='mt-2'
           >
             <Typography
               variant='h3'
-              color='textPrimary'
             >
               {format.number(value)}
             </Typography>
           </Box>
         </Box>
-        <Avatar className={classes.avatar}>
+        <Avatar className='bg-secondary text-secondary-foreground h-12 w-12'>
           <EuroIcon />
         </Avatar>
       </Card>

src/components/ui/Card.jsx

@@ -0,0 +1,57 @@
+import { cn } from 'utils'
+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)}
+    {...props}
+  />
+))
+Card.displayName = 'Card'
+
+const CardHeader = forwardRef(({ className, title, action, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-row p-2 px-4 items-center', className)}
+    {...props}
+  >
+    {title && <CardTitle className='py-2'>{title}</CardTitle>}
+    {action && <div className='ml-auto py-1'>{action}</div>}
+  </div>
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = forwardRef(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn('font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = forwardRef(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-4 pt-4', className)} {...props} />
+))
+CardContent.displayName = 'CardContent'
+
+const CardActions = forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-2', className)}
+    {...props}
+  />
+))
+CardActions.displayName = 'CardActions'
+
+export { Card, CardHeader, CardActions, CardTitle, CardDescription, CardContent }