-
Notifications
You must be signed in to change notification settings - Fork 167
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
New login and signup #1117
base: master
Are you sure you want to change the base?
New login and signup #1117
Changes from all commits
79c5fc2
c2dfd2b
641c54a
7eff628
735a817
195c8a4
0bc115e
6416e8a
f9cabf3
4e216d5
22701ce
5710c09
40bb395
5e5e48a
60aa73b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,127 +1,188 @@ | ||
import { fade } from '@mui/material/styles'; | ||
|
||
const styles = theme => ({ | ||
root: { | ||
paddingTop: '2em', | ||
paddingBottom: '2em', | ||
flex: '1 0 auto', | ||
// background: 'var(--primary-color2)', | ||
// background: | ||
// 'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)', | ||
}, | ||
containerStyle: { | ||
maxWidth: '600px', | ||
[theme.breakpoints.up('1600')]: { | ||
maxWidth: '950px', | ||
export const mainStyles = theme => ({ | ||
wrapper: { | ||
marginTop: theme.spacing(10), | ||
[theme.breakpoints.down('lg')]: { | ||
marginTop: theme.spacing(10), | ||
}, | ||
[theme.breakpoints.down('400')]: { | ||
marginTop:'30px', | ||
[theme.breakpoints.down('md')]: { | ||
marginTop: theme.spacing(5), | ||
}, | ||
}, | ||
cardStyle: { | ||
border: 0, | ||
borderRadius: 15, | ||
boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .12)', | ||
color: 'white', | ||
padding: '0 30px', | ||
}, | ||
titleStyle: { | ||
fontWeight: 'bold', | ||
fontSize: '1.7rem', | ||
[theme.breakpoints.up('1600')]: { | ||
fontSize: '2.5rem', | ||
}, | ||
gridContainer: { | ||
alignItems: 'center', | ||
borderRadius: theme.spacing(1), | ||
}, | ||
descStyle: { | ||
[theme.breakpoints.up('1600')]: { | ||
fontSize: '1.7rem', | ||
header: { | ||
color: theme.palette.text.primary, | ||
fontSize: theme.spacing(5), | ||
fontWeight: 800, | ||
lineHeight: '50px', | ||
[theme.breakpoints.down('sm')]: { | ||
lineHeight: 'unset', | ||
fontSize: '15px', | ||
}, | ||
}, | ||
customLabelStyle: { | ||
'&.MuiFormLabel-root.Mui-focused': { | ||
color: 'var(--primary-color3)', | ||
subHeader: { | ||
color: theme.palette.text.primary, | ||
fontSize: theme.spacing(3), | ||
fontWeight: 800, | ||
lineHeight: 'normal', | ||
[theme.breakpoints.down('sm')]: { | ||
fontSize: '18px', | ||
fontWeight: 700, | ||
}, | ||
[theme.breakpoints.up('1600')]: { | ||
fontSize: '1.7rem', | ||
}, | ||
text: { | ||
fontSize: theme.spacing(2), | ||
fontWeight: 400, | ||
lineHeight: '32px', | ||
color: theme.palette.text.secondary, | ||
[theme.breakpoints.down('sm')]: { | ||
fontSize: '12px', | ||
lineHeight: 'unset', | ||
}, | ||
}, | ||
customInputStyle: { | ||
borderRadius: 15, | ||
'&.MuiOutlinedInput-notchedOutline': { | ||
border: '2px solid var(--primary-color3)', | ||
boxShadow: `rgba(var(--primary-color3), 0.2rem) 0 0 0 0.2rem`, | ||
header2: { | ||
color: theme.palette.text.primary, | ||
fontSize: '30px', | ||
fontWeight: 700, | ||
lineHeight: '50px', | ||
}, | ||
subHeader2: { | ||
color: theme.palette.text.primary, | ||
fontSize: '18px', | ||
fontWeight: 600, | ||
lineHeight: '24px', | ||
}, | ||
text2: { | ||
marginBottom: '40px' | ||
}, | ||
wizard: { | ||
width: '100%', | ||
}, | ||
outlinedInput: { | ||
borderRadius: theme.spacing(1), | ||
paddingInline: theme.spacing(3), | ||
gap: theme.spacing(3), | ||
'& .MuiOutlinedInput-input': { | ||
padding: '20px 0', | ||
}, | ||
'&.MuiOutlinedInput-root': { | ||
'&:hover fieldset': { | ||
border: '2px solid var(--primary-color3)', | ||
boxShadow: `rgba(var(--primary-color3), 0.2rem) 0 0 0 0.2rem`, | ||
border: `1px solid ${theme.palette.primary.light}`, | ||
}, | ||
'&.Mui-focused fieldset': { | ||
border: '2px solid var(--primary-color3)', | ||
boxShadow: `rgba(var(--primary-color3), 0.2rem) 0 0 0 0.2rem`, | ||
}, | ||
[theme.breakpoints.up('1600')]: { | ||
fontSize: '1.7rem', | ||
border: `2px solid ${theme.palette.primary.light}`, | ||
}, | ||
}, | ||
}, | ||
secondaryLink: { | ||
color: 'var(--primary-color3)', | ||
'&:hover': { | ||
color: 'var(--secondary-color6)', | ||
formControl: { | ||
gap: theme.spacing(3), | ||
[theme.breakpoints.down('md')]: { | ||
gap: theme.spacing(2), | ||
}, | ||
[theme.breakpoints.up('1600')]: { | ||
fontSize: '1.2rem', | ||
[theme.breakpoints.down('sm')]: { | ||
gap: theme.spacing(1), | ||
}, | ||
}, | ||
center: { | ||
display: 'flex', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
inputIcon: { | ||
fontSize: theme.spacing(3), | ||
fill: theme.palette.grey[400], | ||
}, | ||
dividerText: { | ||
whiteSpace: 'nowrap', | ||
[theme.breakpoints.up('1600')]: { | ||
fontSize: '1.2rem', | ||
button: { | ||
fontSize: '18px', | ||
fontWeight: 600, | ||
paddingBlock: '20px', | ||
[theme.breakpoints.down('sm')]: { | ||
fontSize: '12px', | ||
padding: '5px 16px', | ||
}, | ||
}, | ||
divider: { | ||
width: '30%', | ||
marginRight: '1em', | ||
marginLeft: '1em', | ||
[theme.breakpoints.up('1600')]: { | ||
height: '0.1em', | ||
spaceBackground: { | ||
width: '100%', | ||
height: '100%', | ||
}, | ||
backContainer: { | ||
borderRadius: '50%', | ||
background: theme.palette.background.default, | ||
padding: '10px', | ||
}, | ||
backIcon: { | ||
fontSize: theme.spacing(3), | ||
}, | ||
gridControl: { | ||
background: theme.palette.background.default, | ||
padding: '0 40px', | ||
boxShadow: '2px 4px 5px 0px rgba(0, 184, 196, 0.05)', | ||
}, | ||
}); | ||
|
||
export const step1Styles = theme => ({ | ||
paper: { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. step1Styles, step2Styles, step3Styles, step4Styles, step5Styles, should all be inside the styles. These are just form fields and they are to be in the same place |
||
cursor: 'pointer', | ||
width: '350px', | ||
height: '300px', | ||
borderRadius: theme.spacing(1), | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
gap: theme.spacing(2), | ||
justifyContent: 'center', | ||
[theme.breakpoints.down('sm')]: { | ||
padding: theme.spacing(2, 3), | ||
width: '342px', | ||
height: '124px', | ||
alignItems: 'unset', | ||
}, | ||
[theme.breakpoints.down('510')]: { | ||
width: '20%', | ||
'&.selected': { | ||
border: '3px solid var(--primary-color3)', | ||
}, | ||
[theme.breakpoints.down('381')]: { | ||
marginLeft: '0.5em', | ||
marginRight: '0.5em', | ||
}, | ||
icon: { | ||
fill: '#00B8C4', | ||
fontSize: '64px', | ||
[theme.breakpoints.down('sm')]: { | ||
fontSize: 'unset', | ||
height: '32px', | ||
width: '32px', | ||
}, | ||
}, | ||
textDecorationNone: { | ||
textDecoration: 'none', | ||
}); | ||
|
||
export const step2Styles = theme => ({ | ||
container: { | ||
background: theme.palette.background.paper, | ||
borderRadius: theme.spacing(1), | ||
padding: theme.spacing(8, 5), | ||
boxShadow: '2px 4px 5px 0px rgba(0, 184, 196, 0.05)', | ||
}, | ||
errorBox: { | ||
width: '100%', | ||
padding: '1em', | ||
borderRadius: 6, | ||
borderWidth: '1px', | ||
borderColor: 'var(--primary-color2)', | ||
backgroundColor: 'var(--secondary-color1)', | ||
[theme.breakpoints.up('1600')]: { | ||
fontSize: '1.5rem', | ||
}, | ||
}); | ||
|
||
export const step3Styles = theme => ({}); | ||
|
||
export const step4Styles = theme => ({}); | ||
export const step5Styles = theme => ({ | ||
label: { | ||
gap: theme.spacing(3), | ||
}, | ||
error: { | ||
color: 'var(--primary-color2)', | ||
formControl: { | ||
display: 'flex', | ||
flexDirection: 'column', | ||
gap: theme.spacing(5), | ||
alignItems: 'left', | ||
}, | ||
fieldHelperTextStyle: { | ||
[theme.breakpoints.up('1600')]: { | ||
fontSize: '1.2rem', | ||
fieldSet: { | ||
padding: `20px ${theme.spacing(3)}`, | ||
borderWidth: '1px', | ||
borderColor: theme.palette.grey[300], | ||
borderStyle: 'solid', | ||
borderRadius: theme.spacing(1), | ||
'&:hover': { | ||
borderColor: theme.palette.primary.light, | ||
}, | ||
'&.selected': { | ||
borderWidth: '3px', | ||
borderColor: theme.palette.primary.light, | ||
}, | ||
}, | ||
}); | ||
|
||
export default styles; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -76,6 +76,8 @@ function NavBar(props) { | |
const [searchType, setSearchType] = useState(getQueryParams(window.location.href).get('type') || SearchType.PROJECTS); | ||
const formRef = useRef(); | ||
const token = useSelector(state => state.auth.token); | ||
const pathname = props.location?.pathname | ||
const hideSearchAndActions = pathname === '/signup' || pathname === '/login'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @coderatomy is this part of the requirements? I think a user should be allowed access to the search box even in the signup page (since are user can search for things while not logged in) |
||
|
||
const [state, setState] = React.useState({ | ||
username: null, | ||
|
@@ -215,11 +217,14 @@ function NavBar(props) { | |
<AppBar className={classes.navBarStyle}> | ||
<Container id="navbar-root" className={classes.mainContainerStyle}> | ||
<Toolbar className={classes.toolBarStyle}> | ||
<Hidden mdUp> | ||
<Box style={{ marginRight: 10 }} onClick={toggleDrawer}> | ||
<MenuIcon /> | ||
</Box> | ||
</Hidden> | ||
{!hideSearchAndActions && ( | ||
<Hidden mdUp> | ||
<Box style={{ marginRight: 10 }} onClick={toggleDrawer}> | ||
<MenuIcon /> | ||
</Box> | ||
</Hidden> | ||
)} | ||
|
||
<Box className={classes.logoStyle}> | ||
<Link to="/"> | ||
<img src={zubhub?.header_logo_url ? zubhub.header_logo_url : logo} alt="logo" /> | ||
|
@@ -268,6 +273,8 @@ function NavBar(props) { | |
))} | ||
</Select> | ||
</Box> | ||
{ | ||
!hideSearchAndActions && ( | ||
<form | ||
action="/search" | ||
className={clsx(classes.searchFormStyle, classes.removeOn894)} | ||
|
@@ -334,25 +341,28 @@ function NavBar(props) { | |
</FormGroup> | ||
</FormControl> | ||
</form> | ||
) | ||
} | ||
</Box> | ||
<div className={classes.navActionStyle}> | ||
<SearchOutlined onClick={toggleSearchBar} className={classes.addOn894} /> | ||
|
||
<NotificationButton /> | ||
<Hidden smDown> | ||
{props.auth.username && ( | ||
<Box> | ||
<Typography className={clsx(common_classes.title2, classes.username)}> | ||
{props.auth.username} | ||
</Typography> | ||
{/* Todo: Change this subheading based on current role of user */} | ||
<Typography className="">Creator</Typography> | ||
</Box> | ||
)} | ||
</Hidden> | ||
|
||
{!hideSearchAndActions && ( | ||
<div className={classes.navActionStyle}> | ||
<SearchOutlined onClick={toggleSearchBar} className={classes.addOn894} /> | ||
|
||
<NotificationButton /> | ||
<Hidden smDown> | ||
{props.auth.username && ( | ||
<Box> | ||
<Typography className={clsx(common_classes.title2, classes.username)}> | ||
{props.auth.username} | ||
</Typography> | ||
{/* Todo: Change this subheading based on current role of user */} | ||
<Typography className="">Creator</Typography> | ||
</Box> | ||
)} | ||
</Hidden> | ||
<AvatarButton navigate={props.navigate} /> | ||
</div> | ||
)} | ||
</Toolbar> | ||
{open_search_form ? ( | ||
<ClickAwayListener onClickAway={e => handleSetState(closeSearchFormOrIgnore(e))}> | ||
|
@@ -455,4 +465,4 @@ const mapDispatchToProps = dispatch => { | |
}; | ||
}; | ||
|
||
export default connect(mapStateToProps, mapDispatchToProps)(NavBar); | ||
export default connect(mapStateToProps, mapDispatchToProps)(NavBar); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { FormHelperText } from '@mui/material'; | ||
import React from 'react'; | ||
|
||
const CustomErrorMessage = props => { | ||
const { name, touched, errors } = props; | ||
return <FormHelperText error>{touched[name] && errors[name] && <>{errors[name]}</>}</FormHelperText>; | ||
}; | ||
|
||
export default CustomErrorMessage; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why is this now
mainStyles
? we should revert back tostyles
. This only serves to add more diff and doesn't improve the code in any way