Skip to content

UI improved for Contact Us component for learning management theme #459

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.

Sign up for GitHub

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

Open
dhruv18ranjan wants to merge 1 commit into
base: master
Choose a base branch
from
Open

UI improved for Contact Us component for learning management theme #459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
58 changes: 35 additions & 23 deletions themes/learning-management-system/learning-management-theme/src/component/contactUs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,66 +23,78 @@ const ContactUs = () => {
classes={{ root: classes.wrapper }}
>
<Grid item>
<FontAwesomeIcon icon={iconName} size="2x" />
<FontAwesomeIcon icon={iconName} size="4x" style={{marginBottom:"20px"}} />
</Grid>
<Grid item> {children}</Grid>
<Grid > {children}</Grid>
</Grid>
)
}
return (
<Grid container direction="column" classes={{ root: classes.container }}>
<Grid item>
<Typography variant="h4">Feel free to Contact Us!</Typography>
<Typography variant="h4" classes={{root: classes.heading}} >Feel free to Contact Us!</Typography>
</Grid>
<Grid item classes={{ root: classes.space }}>
<Typography>
<Typography classes={{root: classes.head}}>
Please contact us using the information below. For additional
informations on UOM Higher Education Institute
</Typography>
</Grid>
<Grid item container direction="column" classes={{ root: classes.space }}>
<Grid item>
<DetailCard iconName={faAddressCard}>

<Grid item container direction="row" classes={{ root: classes.space }}>

<Grid item classes={{root: classes.pad }}>
<DetailCard iconName={faAddressCard} >
<Grid container direction="column">
<Grid item>
<Typography>No: 07/A,</Typography>
</Grid>
<Grid item>
<Typography> Galle Rd</Typography>
<Grid item classes={{root: classes.textGrid}}>
<Typography>Visit us</Typography>
</Grid>
<Grid item>
<Typography>Galle</Typography>
<Grid item classes={{root: classes.textGrid}}>
<Typography>No: 07/A, <br></br> Galle Rd , Galle</Typography>
</Grid>
</Grid>
</DetailCard>
</Grid>
<Grid item classes={{ root: classes.spaceWrapper }}>
<DetailCard iconName={faBlenderPhone}>

<Grid item classes={{root: classes.pad }}>
<DetailCard iconName={faBlenderPhone} >
<Grid container direction="column">
<Grid item>
<Grid item classes={{root: classes.textGrid}}>
<Typography>Text us</Typography>
</Grid>
<Grid item classes={{root: classes.textGrid}}>
<Typography>091-5623123</Typography>
</Grid>
</Grid>
</DetailCard>
</Grid>
<Grid item>
<DetailCard iconName={faPhone}>

<Grid item classes={{root: classes.pad }}>
<DetailCard iconName={faPhone} size="6x" >
<Grid container direction="column">
<Grid item>
<Grid item classes={{root: classes.textGrid}}>
<Typography>Call us</Typography>
</Grid>
<Grid item classes={{root: classes.textGrid}}>
<Typography>076-3459011</Typography>
</Grid>
</Grid>
</DetailCard>
</Grid>
<Grid item>
<DetailCard iconName={faEnvelope}>

<Grid item classes={{root: classes.pad }}>
<DetailCard iconName={faEnvelope} >
<Grid container direction="column">
<Grid item>
<Grid item classes={{root: classes.textGrid}}>
<Typography>Mail us</Typography>
</Grid>
<Grid item classes={{root: classes.textGrid}}>
<Typography>[email protected]</Typography>
</Grid>
</Grid>
</DetailCard>
</Grid>

</Grid>
</Grid>
)
Expand Down
46 changes: 46 additions & 0 deletions ...es/learning-management-system/learning-management-theme/src/component/contactUs/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,37 @@ const Styles = makeStyles(theme => ({
boxShadow: theme.shadows[5],
border: "1px solid #000",
},
head:{
[theme.breakpoints.down("sm")]:{
marginLeft:"0",
width:"60vw",
},
marginLeft:"50px",
width:"80vw",
},
heading:{
[theme.breakpoints.down("sm")]:{
marginLeft:"50px",
width:"50vw",
color:"black",
fontSize:"30px"
},
marginLeft:"410px",
width:"80vw",
color:"black",
fontSize:"30px"
},
space: {
[theme.breakpoints.down("sm")]: {
display:"flex",
flexDirection:"column",
},
marginTop: "20px",
marginBottom:"40px",
marginLeft:"50px",
width:"max-content",
gap:"20px",
alignItems:"center"
},
wrapper: {
width: "40%",
Expand All @@ -29,6 +58,23 @@ const Styles = makeStyles(theme => ({
marginTop: "0px",
},
},
pad:{
[theme.breakpoints.down("sm")]: {
height: "200px",
},
marginLeft:"20px",
width:"250px",
justifyContent:"center",
alignItems:"center",
height:"300px"
},

textGrid:{
width:"150px",
textAlign:"center",
justifyContent:"center",
fontFamily:"sans-serif"
}
}))

export default Styles