styles.ts

import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import { themeColors } from 'styles/global-styles';

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    main: {
      // height: '84vh',
      textAlign: 'left'
    },
    comment: {
      padding: '0 2rem 0 2rem',
      background: themeColors.greyBg,
    },
    back: {
      fontFamily: 'Poppins',
      fontStyle: 'normal',
      textAlign: 'left',
      marginTop: 20,
      marginBottom: 15,
    },
    title: {
      fontFamily: 'Poppins',
      fontStyle: 'normal',
      textAlign: 'center',
      marginTop: 10,
      marginBottom: 15,
    },
    subTitle: {
      fontFamily: 'Poppins',
      fontStyle: 'italic',
      textAlign: 'center',
      marginTop: 20,
      marginBottom: 15,
    },
    label: {
      fontFamily: 'Poppins',
      fontStyle: 'normal',
      fontHeight: 600,
      fontSize: 20,
      color: themeColors.main,
      marginTop: 20,
      marginBottom: 15,
    },
    label2: {
      fontFamily: 'Poppins',
      fontStyle: 'normal',
      fontWeight: 500,
      fontSize: 11,
      color: themeColors.grey,
    },
    textfieldComment: {
      '& .MuiOutlinedInput-root': {
        borderRadius: 15,
        background: 'transparent',
      },
    },
    cameraBtn: {
      borderRadius: 25,
      background: themeColors.mainOpacity,
      color: themeColors.main,
      textTransform: 'none',
      width: '70%',
      padding: 10,
      marginTop: 5,
      marginBottom: 5,
    },
    btnContainer: {
      padding: '0 15px 15px 15px',
    },
    buttons: {
      marginTop: '40px',
      padding: 4,
      background: themeColors.main,
      borderRadius: 24,
      color: themeColors.white,
      fontFamily: 'Poppins',
      fontWeight: 500,
      fontSize: 15,
      height: '35px',
      width: '120px',
      textAlign: 'center',
      letterSpacing: 0.2,
      textTransform: 'capitalize',
    },
    uploadContainer: {
      '& .fileContainer': {
        background: '#E8E9EB',
        boxShadow: 'none',
        '& .chooseFileButton': {
          alignSelf: 'flex-start',
          background: '#c8d4e2',
          color: '#4682C3',
          fontSize: '1rem',
          fontWeight: '500',
          fontFamily: 'Poppins',
          height: '55px',
          width: '250px',
          '&:hover': {
            background: '#d4d5d7',
          },
        },
        '& .deleteImage': {
          background: '#c8d4e2',
          fontSize: '12px',
          fontWeight: 'normal',
          width: '20px',
          height: '20px',
          lineHeight: 'unset',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        },
      },
    },
  }),
);