Mantine Theme

app.tsx

import React from 'react';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { MantineProvider } from '@mantine/core';
import { generateColors } from '@mantine/colors-generator';
import {
  emotionTransform,
  MantineEmotionProvider,
} from '@mantine/emotion';

import ScrollToTop from './Components/ScrollToTop';
import TrackRedirectLinks from './Components/TrackRedirectLinks';
import AppRoutes from './Lib/Routes/AppRoutes';


import { createTheme } from '@mantine/core';

const theme = createTheme({
  fontFamily: 'Open Sans, sans-serif',
  autoContrast: true,
  // primaryColor: 'primary',
  colors: {
    'primary': generateColors('#ffd012'),
  },
});


console.log(theme);

function App() {
  return (
    <div className='App'>
      <ToastContainer />
      <MantineProvider theme={theme} stylesTransform={emotionTransform}>
        <MantineEmotionProvider>
        <ScrollToTop />
        <TrackRedirectLinks />
        <AppRoutes />
        </MantineEmotionProvider>
      </MantineProvider>
    </div>
  );
}

export default App;

profilepage.tsx

import React from 'react';
import { useAppSelector } from '../../Lib/Store/hooks';
import './Profile.scoped.scss';
import { Button } from '@mantine/core';
import { createStyles } from '@mantine/emotion';



export default function ProfilePage() {
  const user = useAppSelector((state) => state.user.currentUser);

  const useStyles = createStyles((theme) => ({
    button: {
      backgroundColor: theme.colors.primary[9],
      color: theme.colors.primary[0],
      border: `1px solid ${theme.colors.primary[9]}`,
  
      '&:hover': {
        backgroundColor: theme.colors.primary[8],
      },
  
    },
  }));
  const { classes } = useStyles();


 


  return (
    <section className='min-h-screen bg-gray-100 bg-opacity-50 pt-8'>
      <form className='container max-w-2xl mx-auto shadow-md md:w-3/4'>
        <div className='p-4 bg-gray-100 border-t-2 border-indigo-400 rounded-lg bg-opacity-5'>
          <div className='max-w-sm mx-auto md:w-full md:mx-0'>
            <div className='inline-flex items-center space-x-4'>
              <button
                type='button'
                className='block relative border-0'>
                <img
                  alt='profil'
                  src={user?.image}
                  className='mx-auto object-cover rounded-full h-16 w-16 '
                />
              </button>
              <h1 className='text-gray-600'>
                {user?.firstName} {user?.lastName}
              </h1>
            </div>
          </div>
        </div>
        <div className='space-y-6 bg-white'>
          <div className='items-center w-full p-4 space-y-4 text-gray-500 md:inline-flex md:space-y-0'>
            <h2 className='max-w-sm mx-auto md:w-1/3'>Account</h2>
            <div className='max-w-sm mx-auto md:w-2/3'>
              <div className=' relative '>
                <input
                  type='text'
                  id='user-info-email'
                  className=' rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent'
                  placeholder='Email'
                />
              </div>
            </div>
          </div>
          <hr />
          <div className='items-center w-full p-4 space-y-4 text-gray-500 md:inline-flex md:space-y-0'>
            <h2 className='max-w-sm mx-auto md:w-1/3'>Personal info</h2>
            <div className='max-w-sm mx-auto space-y-5 md:w-2/3'>
              <div>
                <div className=' relative '>
                  <input
                    type='text'
                    id='user-info-name'
                    className=' rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent'
                    placeholder='Name'
                  />
                </div>
              </div>
              <div>
                <div className=' relative '>
                  <input
                    type='text'
                    id='user-info-phone'
                    className=' rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent'
                    placeholder='Phone number'
                  />
                </div>
              </div>
            </div>
          </div>
          <hr />
          <div className='items-center w-full p-8 space-y-4 text-gray-500 md:inline-flex md:space-y-0'>
            <h2 className='max-w-sm mx-auto md:w-4/12'>Change password</h2>
            <div className='w-full max-w-sm pl-2 mx-auto space-y-5 md:w-5/12 md:pl-9 md:inline-flex'>
              <div className=' relative '>
                <input
                  type='text'
                  id='user-info-password'
                  className=' rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent'
                  placeholder='Password'
                />
              </div>
            </div>
            <div className='text-center md:w-3/12 md:pl-6'>
              <button
                type='button'
                className={`py-1 px-4 cursor-pointer  rounded-md ${classes.button}`}>
                Change
              </button>

            <Button variant="filled" color="primary.9" autoContrast>
              Change
            </Button>

            </div>
          </div>
          <hr />
          <div className='w-full px-4 pb-4 ml-auto text-gray-500 md:w-1/3'>
            <button
              type='submit'
              className='py-2 px-4  bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg '>
              Save
            </button>
          </div>
        </div>
      </form>
    </section>
  );
}