Change the typography styles for react

[SAUMILDHANKAR]

Description

We had added some typography in issue #76 but since we are moving to react, we will update/verify styles in this issue. Update the default typography styles across the React app using Material UI’s theme customization. This includes setting the correct font family, font sizes, weights, margins, and colors for headers, paragraphs, input labels, and links to match the design prototype.

Goals

1. Typography Base

• Font family: "Roboto", "Helvetica", "Arial", sans-serif
• Load full font family via Google Fonts or local assets to ensure fallback support
• Default text color: #212121 (grey-darken-4)

2. Header Text Styles

Apply these styles via theme.typography overrides or styled components:

• H1: fontSize: "48px", marginBottom: "24px"
• H2: fontSize: "36px", fontWeight: 700, marginBottom: "16px"
• H3: fontSize: "26px", fontWeight: 300, marginBottom: "12px"
• H4: fontSize: "22px", fontWeight: 700, marginBottom: "12px"
• H5: fontSize: "18px", marginBottom: "8px"
• H6: fontSize: "16px", fontWeight: 300, marginBottom: "8px"

3. Paragraph Text Styles

Define variants or styled components for:

• p: fontSize: "16px"
• p-small: fontSize: "14px"
• p-xsmall: fontSize: "12px"

4. Input Label Text

• Use default paragraph style (fontSize: "16px")
• Text color: #757575 (grey-darken-1)
• Apply via MuiInputLabel theme override or sx prop

5. Link Text

• Use default paragraph style (fontSize: "16px")
• Link color: #01579B (light-blue-darken-4)
• Add hover state (e.g., underline or color change for accessibility)

Material UI Replacement Table

Vuetify Reference	Material UI Replacement
Change the default Vuetify typography styles…	Override Material UI typography styles using createTheme and ThemeProvider…
Font family: Roboto	Font family: "Roboto", "Helvetica", "Arial", sans-serif
Text color: grey-darken-4 #212121	theme.typography.color = "#212121" or use sx={{ color: "#212121" }}
H1: size = 48, bottom-margin = 24px	theme.typography.h1 = { fontSize: "48px", marginBottom: "24px" }
H2: size = 36, weight = bold, bottom-margin = 16px	theme.typography.h2 = { fontSize: "36px", fontWeight: 700, marginBottom: "16px" }
H3: size = 26, weight = light, bottom-margin = 12px	theme.typography.h3 = { fontSize: "26px", fontWeight: 300, marginBottom: "12px" }
H4: size = 22, weight = bold, bottom-margin = 12px	theme.typography.h4 = { fontSize: "22px", fontWeight: 700, marginBottom: "12px" }
H5: size = 18, bottom-margin = 8px	theme.typography.h5 = { fontSize: "18px", marginBottom: "8px" }
H6: size = 16, weight = light, bottom-margin = 8px	theme.typography.h6 = { fontSize: "16px", fontWeight: 300, marginBottom: "8px" }
p: size = 16	theme.typography.body1 = { fontSize: "16px" }
p-small: size = 14	theme.typography.body2 = { fontSize: "14px" }
p-xsmall: size = 12	Custom variant or styled component with fontSize: "12px"
Input label text: Use default paragraph style	theme.components.MuiInputLabel = { styleOverrides: { root: { fontSize: "16px", color: "#757575" } } }
Link text: Use default paragraph style	theme.components.MuiLink = { styleOverrides: { root: { fontSize: "16px", color: "#01579B" } } }
Vuetify color library	Material UI color palette: https://mui.com/material-ui/customization/color/
Vuetify Navigation Menu Bar Component	Use MUI AppBar: https://mui.com/material-ui/react-app-bar/

Theme Configuration Snippet

// theme.ts
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    color: '#212121',

    h1: { fontSize: '48px', marginBottom: '24px' },
    h2: { fontSize: '36px', fontWeight: 700, marginBottom: '16px' },
    h3: { fontSize: '26px', fontWeight: 300, marginBottom: '12px' },
    h4: { fontSize: '22px', fontWeight: 700, marginBottom: '12px' },
    h5: { fontSize: '18px', marginBottom: '8px' },
    h6: { fontSize: '16px', fontWeight: 300, marginBottom: '8px' },

    body1: { fontSize: '16px' },
    body2: { fontSize: '14px' },
  },
  components: {
    MuiInputLabel: {
      styleOverrides: {
        root: {
          fontSize: '16px',
          color: '#757575',
        },
      },
    },
    MuiLink: {
      styleOverrides: {
        root: {
          fontSize: '16px',
          color: '#01579B',
          textDecoration: 'none',
          '&:hover': {
            textDecoration: 'underline',
          },
        },
      },
    },
  },
});

export default theme;

To apply the theme globally:

// App.tsx
import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* Your app components */}
    </ThemeProvider>
  );
}

Implementation Instructions

• Use Material UI’s createTheme() to define custom typography styles
• Wrap the app in ThemeProvider to apply global overrides
• Use MUI components (Typography, InputLabel, Link) consistently across the app
• Validate font loading and fallback behavior across browsers
• Test accessibility contrast ratios for all text colors
• Compare implementation against the Figma design prototype

Acceptance Criteria

• All text elements match the design prototype in size, weight, margin, and color
• Font family is correctly loaded and applied globally
• Input labels and links use correct styles and colors
• Typography is responsive and accessible
• Verified against Figma design and spacing specs

Resources

1. [Design prototype file](https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/Map-Dashboard---Astar?node-id=5156-542&t=kxeLlb2zAzy2N3Hx-1)
2. [Material UI Typography Docs](https://mui.com/material-ui/customization/typography/)
3. [Material UI Theme Customization](https://mui.com/material-ui/customization/theming/)
4. [Google Fonts - Roboto](https://fonts.google.com/specimen/Roboto)

---