App.tsx

import { Button, createTheme, MantineProvider } from '@mantine/core'
import { Notifications } from '@mantine/notifications'
import '../../public/favicon.svg'
import AuthenticationProvider from '../providers/AuthenticationContext/AuthenticationProvider'
import AppRoutes from './Routes'

import '@mantine/core/styles.layer.css'
import '@mantine/dates/styles.layer.css'
import '@mantine/dropzone/styles.css'
import '@mantine/notifications/styles.css'
import '@mantine/tiptap/styles.css'
import 'mantine-datatable/styles.layer.css'

import * as buttonClasses from './styles/Buttons.module.css'

const theme = createTheme({
  respectReducedMotion: false,
  colors: {
    primary: [
      '#f2f0ff',
      '#e0dff2',
      '#bfbdde',
      '#9b98ca',
      '#7d79ba',
      '#6a65b0',
      '#605bac',
      '#504c97',
      '#464388',
      '#3b3979',
    ],
  },
  primaryColor: 'primary',
  primaryShade: 7,
  components: {
    Button: Button.extend({
      classNames: buttonClasses,
    }),
  },
})

const App = () => {
  return (
    <MantineProvider defaultColorScheme='auto' theme={theme}>
      <AuthenticationProvider>
        <AppRoutes />
        <Notifications limit={5} position='top-right' />
      </AuthenticationProvider>
    </MantineProvider>
  )
}

export default App