When we decided to use Material-UI, I removed the previous CSS stylesheets, to avoid confusion and start from scratch. Material-UI has been added, but so far we are just using it to style the Login button.
We should probably create a simple responsive layout (what options does Material-UI come with?), and add back some basic styles. For example, previously the first page's content was centered and I think it may have had some default padding and spacing between elements, which looked nicer than it does now. (For reference, if necessary, the previous styling still exists in the "Master" branch, which was previously the default branch--or, if that gets removed, it should still be viewable under the initial commit.)
NOTE: When I added Material-UI to our project, I used the official example for nextjs-with-typescript (https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript). I did the following:
1) replaced our pages/_app.tsx with the one in the example repo, and
2) created pages/_documents.tsx, and copied the example version,
3) created src/createEmotionCache.tsx, and copied the example version, and
4) created src/theme.tsx, and copied the example version.
I'm not positive that the above process was entirely correct--it did work for styling the Login button, and also I noted that the default font changed to Roboto, so it's at least partially working. Anyway, whoever tackles this can change whatever is necessary.
Material-UI docs are here: https://mui.com/material-ui/getting-started/overview/
When we decided to use Material-UI, I removed the previous CSS stylesheets, to avoid confusion and start from scratch. Material-UI has been added, but so far we are just using it to style the Login button.
We should probably create a simple responsive layout (what options does Material-UI come with?), and add back some basic styles. For example, previously the first page's content was centered and I think it may have had some default padding and spacing between elements, which looked nicer than it does now. (For reference, if necessary, the previous styling still exists in the "Master" branch, which was previously the default branch--or, if that gets removed, it should still be viewable under the initial commit.)
NOTE: When I added Material-UI to our project, I used the official example for nextjs-with-typescript (https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript). I did the following: 1) replaced our pages/_app.tsx with the one in the example repo, and 2) created pages/_documents.tsx, and copied the example version, 3) created src/createEmotionCache.tsx, and copied the example version, and 4) created src/theme.tsx, and copied the example version.
I'm not positive that the above process was entirely correct--it did work for styling the Login button, and also I noted that the default font changed to Roboto, so it's at least partially working. Anyway, whoever tackles this can change whatever is necessary. Material-UI docs are here: https://mui.com/material-ui/getting-started/overview/