Replace the HOCs

[alaa-yahia]

Material UI withStyles to styled-jsx (Not finished)

This PR replaces Material UI's withStyles HOC with styled-jsx for component styling, creating a theme file instead of accessing theme via props while also adopting kebab-case for CSS class names throughout the codebase.

Key Changes

• Removed withStyles HOC wrappers and replaced with styled-jsx
• Replaced camelCase CSS class names with kebab-case (e.g., buttonContainer → button-container)
• Directly imported theme files instead of accessing via props

Challenges Encountered

Flow Type Errors: Migrating away from withStyles revealed previously masked Flow type issues, particularly with nullable properties. This required updating type definitions to be more explicit about nullable values.
Component Styling Scope: styled-jsx only applies styles to the component where they're defined, which presented challenges with conditionally rendered content. Solved by either:

• Creating smaller styled components
• Using styled-jsx's :global() selector when necessary
• Wrapping dynamic content in properly styled containers

[sonarqubecloud]

Quality Gate failed

Failed conditions
36 New issues
C Reliability Rating on New Code (required ≥ A)
35 New Code Smells (required ≤ 0)
1 New Bugs (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE