[Feature]: Integrate MUI and Replace CSS

[anantmittal]

Pre-flight checklist

• I have searched the existing issues

Problem to solve

Currently, all the client code has hard-coded CSS classes, without any reusable abstractions.

Proposed solution or API

We could move to a modern UI library like https://mui.com/material-ui/.

The components need to be responsible for tablets.

Alternatives considered

No response

Additional context

No response

[weknowthecalmat]

Hi @anantmittal , I would like to work on this issue.

I did look at some other modern UI libraries, mainly the one that was mentioned in the issue - https://mui.com/material-ui/ and I also looked at https://chakra-ui.com/. There are some subtle differences between the two, however Material UI wins here because: 1) It follows Google's Material Design, 2) Has better support as compared to Chakra UI, 3) Has more pre-built components than Chakra UI.

I was thinking to start with only changing Login Component -

Approach: Replace HTML elements with Material-UI components while keeping the exact same functionality and visual appearance.

Changes:
input → TextField
button → Button
div containers → Box and Paper
h2, p → Typography
Remove login.css file

Files that would be changed:
package.json - Add MUI dependencies
App.tsx - Add Theme wrapper
Login.tsx - Replace HTML with MUI components
theme/muiTheme.ts - New theme configuration
styles/login.css - Delete this file

Nothing else changes

Please let me know if this looks good, so that I can implement it - @anantmittal

[anantmittal]

@weknowthecalmat: That sounds good.

[weknowthecalmat]

Hi @anantmittal , thanks for merging https://github.com/uw-ssec/respondent-driven-sampling/pull/95 ! I was thinking to now change the "Header" and "Sign Up" components to MUI and take dashboard later. Does it sound good to you?

[weknowthecalmat]

Hi @anantmittal , I have added next set of changes for Header, Sign-up and Referral form. PR - #100