[frontend] Create Theme

[Allicce]

• [ ] Create colour palette
• [ ] override typography

Docs: https://mui.com/material-ui/customization/theming/ https://mui.com/material-ui/react-typography/

  const theme = createTheme({
  palette: {
    primary: {
      main: '#0D3B66',
    },
    success: {
      main: '#2C6B2F', 
   },
   error: {
      main: '#E53935',
   },
   text: {
      primary: "#323232"
  },
});

const theme = createTheme({
  components: {
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          h1: 'h1',
          h2: 'h2',
          h3: 'h3',
          h4: 'h4',
          h5: 'h5',
          h6: 'h6',
          subtitle1: 'h3',
          subtitle2: 'h3',
          body1: 'p',
          body2: 'p',
        },
      },
    },
  },
}); 

const theme = createTheme({
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
    h1: {
      fontSize: '3rem',
      fontWeight: 700,
    },
   h2: {
      fontSize: '2rem',
      fontWeight: 700,
    },
    h4: {
      fontSize: '1.8rem',
      fontWeight: 700,
    },
    body1: {
      fontSize: '1rem',
      lineHeight: 1.5,
    },
     body2: {
      fontSize: '1rem',
      lineHeight: 1.5,
      color: '#545E6D',
    },
  },
});

Typography settings and rules:

For H1 title use: variant="h1" H1 title rules

• screen title
• greetings sentence

For H2 title use: variant="h2" H2 title rules

• form title

For H4 title use: variant="h4" H4 title rules

• graphs titles
• dashboard section titles

For basic texts use: variant="body1" basic text rules:

• all texts

For gray texts use: variant="body2" basic text rules:

• gray text
• less important texts