Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Complete Gatsby MaterialUI installation plus 'Add Feeds' page wireframing #735

Merged
merged 3 commits into from
Feb 21, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/frontend/gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,5 +48,6 @@ module.exports = {
icon: `src/images/logo.svg`, // This path is relative to the root of the site.
},
},
`gatsby-theme-material-ui`,
],
};
1 change: 1 addition & 0 deletions src/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"gatsby-plugin-react-helmet": "^3.1.16",
"gatsby-plugin-sharp": "^2.3.5",
"gatsby-source-filesystem": "^2.1.40",
"gatsby-theme-material-ui": "^1.0.8",
"gatsby-transformer-sharp": "^2.3.7",
"prop-types": "^15.7.2",
"react": "^16.12.0",
Expand Down
64 changes: 64 additions & 0 deletions src/frontend/src/pages/myfeeds.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React from 'react';
import { Container, Box, Typography, TextField, Grid, Card, IconButton } from '@material-ui/core';
import { AccountCircle, RssFeed, HelpOutline, Add } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to keep styles located in the react component? Is there a way to store this in the css file that should be located with the page to keep with the current format of the front end?

Copy link
Contributor Author

@Silvyre Silvyre Feb 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it is technically possible to replace this instance of makeStyles with pure CSS, i.e.

.MuiContainer-root {
  position: relative;
  top: 16px;
}

.MuiIconButton-root {
  padding: 3px 0 3px 0;
}

Relying more on MaterialUI's styling solutions may become more useful in the future if/when we want to incorporate more MUI functionalities, such as customized theming.

However, since I'm still pretty new to MUI, I'd like to defer to @miggs125 and @humphd regarding whether it would be better, in this case, to embrace or move away from MUI styling solutions.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree - not sure if having each react component contain our materialUI solutions or if we should grab it from a separate page that would house all the material UI.

I do think we should keep anything CSS related outside of the functionality part. Perhaps we could import it and have a different file such as myFeedsCss.js? (or materials not sure what to call this file)

This would allow the CSS developers to quickly locate where the CSS is that would need to be changed, and not get them stuck in reading everything within a component?

Thoughts @humphd ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Depending on the outcome of #730, it looks like we might use MUI as a base. If we do, then I think moving toward the MUI style approach is nice, because it takes less work to translate what their examples in the docs to to what we'll have. Doing CSS-in-JS this way is kind of nice.

I think do whatever you want in this PR, and we'll change it to match #730. I'll add a note about this topic there.

margin: {
margin: theme.spacing(2),
},
button: {
padding: '3px 0 3px 0',
},
}));

export default function MyFeeds() {
const classes = useStyles();
return (
<div className={classes.margin}>
<Container maxWidth="xs" bgcolor="aliceblue">
<Card>
<Box px={2} py={1}>
<Typography variant="h3" component="h3" align="center">
My Feeds
</Typography>
<Grid container spacing={5}>
<Grid item>
<Grid container spacing={1} alignItems="flex-end">
<Grid item>
<AccountCircle />
</Grid>
<Grid item>
<TextField id="author" label="John Doe" disabled />
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container spacing={1} alignItems="flex-end">
<Grid item>
<RssFeed />
</Grid>
<Grid item>
<TextField id="url" label="Blog feed URL" />
</Grid>
<Grid item>
<IconButton color="primary" classes={{ root: classes.button }}>
<HelpOutline />
</IconButton>
</Grid>
</Grid>
<Grid container spacing={2}>
<Grid item>
<IconButton classes={{ root: classes.button }}>
<Add />
</IconButton>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</Card>
</Container>
</div>
);
}