Skip to content

Instantly share code, notes, and snippets.

@adrianhajdin
Created January 12, 2021 23:35
  • Star 33 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
MERN Auth Materials
import { makeStyles } from '@material-ui/core/styles';
export default makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: theme.spacing(2),
},
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
},
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(3),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
googleButton: {
marginBottom: theme.spacing(2),
},
}));
import React from 'react';
const icon = () => (
<svg style={{ width: '20px', height: '20px' }} viewBox="0 0 24 24">
<path
fill="currentColor"
d="M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z"
/>
</svg>
);
export default icon;
const Likes = () => {
if (post.likes.length > 0) {
return post.likes.find((like) => like === (user?.result?.googleId || user?.result?._id))
? (
<><ThumbUpAltIcon fontSize="small" />&nbsp;{post.likes.length > 2 ? `You and ${post.likes.length - 1} others` : `${post.likes.length} like${post.likes.length > 1 ? 's' : ''}` }</>
) : (
<><ThumbUpAltOutlined fontSize="small" />&nbsp;{post.likes.length} {post.likes.length === 1 ? 'Like' : 'Likes'}</>
);
}
return <><ThumbUpAltOutlined fontSize="small" />&nbsp;Like</>;
};
import { makeStyles } from '@material-ui/core/styles';
import { deepPurple } from '@material-ui/core/colors';
export default makeStyles((theme) => ({
appBar: {
borderRadius: 15,
margin: '30px 0',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: '10px 50px',
},
heading: {
color: 'rgba(0,183,255, 1)',
textDecoration: 'none',
},
image: {
marginLeft: '15px',
},
toolbar: {
display: 'flex',
justifyContent: 'flex-end',
width: '400px',
},
profile: {
display: 'flex',
justifyContent: 'space-between',
width: '400px',
},
userName: {
display: 'flex',
alignItems: 'center',
},
brandContainer: {
display: 'flex',
alignItems: 'center',
},
purple: {
color: theme.palette.getContrastText(deepPurple[500]),
backgroundColor: deepPurple[500],
},
}));
@til2to
Copy link

til2to commented May 8, 2023

Good job. This is so helpful

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment