Skip to content

Commit

Permalink
Merge pull request #461 from Ekta29yadav/ui
Browse files Browse the repository at this point in the history 
Task #0000 - UI of feedback form for player
  • Loading branch information
@paritshivani
paritshivani authored Aug 8, 2024
2 parents b1c243f + 4797c82 commit 5b16ef8
Show file tree
Hide file tree
Showing 8 changed files with 113 additions and 38 deletions.
81 changes: 72 additions & 9 deletions packages/nulp_elite/src/components/FeedbackPopup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import {
TextField,
} from "@mui/material";
import StarIcon from "@mui/icons-material/Star";
import { styled } from "@mui/material/styles";
import IconButton from "@mui/material/IconButton";
import CloseIcon from "@mui/icons-material/Close";

const FeedbackPopup = ({ open, onClose }) => {
const [rating, setRating] = useState(0);
Expand All @@ -21,6 +24,14 @@ const FeedbackPopup = ({ open, onClose }) => {
const [showTextBox, setShowTextBox] = useState(false);
const [checkboxes, setCheckboxes] = useState({});

const BootstrapDialog = styled(Dialog)(({ theme }) => ({
"& .MuiDialogContent-root": {
padding: theme.spacing(2),
},
"& .MuiDialogActions-root": {
padding: theme.spacing(1),
},
}));
// Mapping of checkbox names to labels
const checkboxLabels = {
conceptWell: "Understood the concept well",
Expand Down Expand Up @@ -84,6 +95,9 @@ const FeedbackPopup = ({ open, onClose }) => {
console.log("Additional Feedback:", additionalFeedback);
onClose();
};
const handleClose = () => {
setOpen(false);
};

const renderCheckboxes = () => {
if (rating >= 5) {
Expand Down Expand Up @@ -249,11 +263,25 @@ const FeedbackPopup = ({ open, onClose }) => {
};

return (
<Dialog open={open} onClose={onClose}>
<DialogTitle>Feedback</DialogTitle>
<DialogContent>
<Typography variant="h6">Rate Us</Typography>
<Box display="flex" alignItems="center">
<BootstrapDialog open={open} onClose={onClose} className="feedback-popup">
<DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
Feedback
</DialogTitle>
<IconButton
aria-label="close"
onClick={onClose}
sx={{
position: "absolute",
right: 8,
top: 8,
color: (theme) => theme.palette.grey[500],
}}
>
<CloseIcon />
</IconButton>
<DialogContent dividers>
<Box className="h5-title">Rate Us</Box>
<Box>
<Rating
name="feedback-rating"
value={rating}
Expand All @@ -267,22 +295,57 @@ const FeedbackPopup = ({ open, onClose }) => {
</Typography>
</Box>
<Typography
variant="body2"
className="h6-title"
style={{ marginTop: "10px", fontStyle: "italic" }}
>
{ratingMessages[rating]}
</Typography>
{renderCheckboxes()}
</DialogContent>
<DialogActions>
<Button onClick={onClose} color="primary">
<Button onClick={onClose} className="custom-btn-default">
Cancel
</Button>
<Button onClick={handleSubmit} color="primary">
<Button onClick={handleSubmit} className="custom-btn-primary">
Submit
</Button>
</DialogActions>
</Dialog>
</BootstrapDialog>

// <Dialog open={open} onClose={onClose}>
// <DialogTitle>Feedback</DialogTitle>
// <DialogContent>
// <Typography variant="h6">Rate Us</Typography>
// <Box>
// <Rating
// name="feedback-rating"
// value={rating}
// onChange={handleRatingChange}
// icon={<StarIcon style={{ color: "gold" }} />}
// emptyIcon={<StarIcon style={{ color: "grey" }} />}
// precision={1}
// />
// <Typography variant="body1" style={{ marginLeft: "10px" }}>
// {rating} {rating === 1 ? "star" : "stars"}
// </Typography>
// </Box>
// <Typography
// variant="body2"
// style={{ marginTop: "10px", fontStyle: "italic" }}
// >
// {ratingMessages[rating]}
// </Typography>
// {renderCheckboxes()}
// </DialogContent>
// <DialogActions>
// <Button onClick={onClose} color="primary">
// Cancel
// </Button>
// <Button onClick={handleSubmit} color="primary">
// Submit
// </Button>
// </DialogActions>
// </Dialog>
);
};

Expand Down
2 changes: 1 addition & 1 deletion packages/nulp_elite/src/components/VotingCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export default function VotingCard({ items, index, onClick }) {

return (
<Card
className="cardBox pb-20"
className="cardBox pb-10"
sx={{ position: "relative", cursor: "pointer", textAlign: "left" }}
onClick={onClick}
>
Expand Down
6 changes: 5 additions & 1 deletion packages/nulp_elite/src/pages/content/Player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,11 @@ const Player = () => {
</Box>
</Container>
{openFeedBack && (
<FeedbackPopup open={openFeedBack} onClose={handleClose} />
<FeedbackPopup
open={openFeedBack}
onClose={handleClose}
className="feedback-popup"
/>
)}
<FloatingChatIcon />
<Footer />
Expand Down
2 changes: 1 addition & 1 deletion packages/nulp_elite/src/pages/events/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -613,7 +613,7 @@ const Dashboard = () => {
]}
series={[{ data: eventTopUser }]}
height={300}
barSize={10}
barSize={2}
/>
<Box className="brYlabel">No. of Participants</Box>
<Box sx={{ textAlign: "center" }}>Events</Box>
Expand Down
7 changes: 4 additions & 3 deletions packages/nulp_elite/src/pages/voting/pollsDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ const pollsDetailes = () => {
<Container
maxWidth="xl"
role="main"
className="xs-pb-20 lg-pt-20 min-"
className="xs-pb-20 lg-pt-20 votingDashboard"
>
<Box
display="flex"
Expand Down Expand Up @@ -178,7 +178,7 @@ const pollsDetailes = () => {
key={items.poll_id}
>
<Card
className="cardBox1 pb-20"
className="cardBox1 pb-10"
sx={{
position: "relative",
cursor: "pointer",
Expand Down Expand Up @@ -209,8 +209,9 @@ const pollsDetailes = () => {
lg={4}
style={{ marginBottom: "10px" }}
key={items.poll_id}
className="pl-0"
>
<Box className="xs-hide">
<Box className="xs-hide text-right">
<FacebookShareButton
url={shareUrl}
className="pr-5"
Expand Down
24 changes: 14 additions & 10 deletions packages/nulp_elite/src/pages/voting/votingDashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,11 @@ const votingDashboard = () => {
{toasterMessage && <Toast response={toasterMessage} type="success" />}

{contentCreator || admin ? (
<Container maxWidth="xl" role="main" className="xs-pb-20 lg-pt-20 min-">
<Container
maxWidth="xl"
role="main"
className="xs-pb-20 lg-pt-20 votingDashboard"
>
<Box mb={2} mt={2}>
<Box className="p-15">
<Grid container spacing={2} alignItems="center">
Expand Down Expand Up @@ -385,7 +389,7 @@ const votingDashboard = () => {
key={items.poll_id}
>
<Card
className="pb-20"
className="pb-10"
sx={{
position: "relative",
cursor: "pointer",
Expand All @@ -408,7 +412,7 @@ const votingDashboard = () => {
{items.title && (
<Typography
gutterBottom
className="mt-10 event-title"
className="mt-10 event-title width-inherit"
>
{items.title}
</Typography>
Expand Down Expand Up @@ -486,7 +490,7 @@ const votingDashboard = () => {
style={{ marginBottom: "10px" }}
key={items.poll_id}
>
<Box className="xs-hide text-right pl-10">
<Box className="xs-hide text-right">
<FacebookShareButton
url={shareUrl}
className="pr-4"
Expand Down Expand Up @@ -675,7 +679,7 @@ const votingDashboard = () => {
key={items.poll_id}
>
<Card
className="pb-20"
className="pb-10"
sx={{
position: "relative",
cursor: "pointer",
Expand All @@ -692,14 +696,14 @@ const votingDashboard = () => {
{items.title && (
<Typography
gutterBottom
className="mt-10 event-title"
className="mt-10 event-title width-inherit"
>
{items.title}
</Typography>
)}
</Box>
<Box>
<Box className="xs-hide text-right pl-10">
<Box className="xs-hide text-right">
<FacebookShareButton
url={shareUrl}
className="pr-5"
Expand Down Expand Up @@ -938,7 +942,7 @@ const votingDashboard = () => {
key={items.poll_id}
>
<Card
className="pb-20"
className="pb-10"
sx={{
position: "relative",
cursor: "pointer",
Expand All @@ -955,14 +959,14 @@ const votingDashboard = () => {
{items.title && (
<Typography
gutterBottom
className="mt-10 event-title"
className="mt-10 event-title width-inherit"
>
{items.title}
</Typography>
)}
</Box>
<Box>
<Box className="xs-hide text-right pl-10">
<Box className="xs-hide text-right">
<FacebookShareButton
url={shareUrl}
className="pr-5"
Expand Down
18 changes: 9 additions & 9 deletions packages/nulp_elite/src/pages/voting/votingDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,8 +336,8 @@ const VotingDetails = () => {
<span className=" h3-custom-title"> Live until</span>
)}
<TodayOutlinedIcon
className="h3-custom-title pl-10"
style={{ verticalAlign: "-webkit-baseline-middle" }}
className="h3-custom-title pl-10 pt-10"
style={{ verticalAlign: "middle" }}
/>
<span className="h3-custom-title ">
{moment(poll.end_date).format(
Expand All @@ -351,7 +351,7 @@ const VotingDetails = () => {
<VerifiedIcon
className="h3-custom-title pl-10 icon-blue fs-18"
style={{
verticalAlign: "-webkit-baseline-middle",
verticalAlign: "middle",
paddingLeft: "10px",
paddingRight: "10px",
fontSize: "22px",
Expand Down Expand Up @@ -402,7 +402,7 @@ const VotingDetails = () => {
</Box>
</Grid>
) : (
<Grid item xs={9} md={6} lg={6}>
<Grid item xs={9} md={6} lg={8}>
<Typography
gutterBottom
className="mt-10 h1-title mb-20 xs-pl-15"
Expand All @@ -412,9 +412,9 @@ const VotingDetails = () => {
<Box className="pr-5 h3-custom-title">
<span className=" h3-custom-title"> Live until</span>
<TodayOutlinedIcon
className="h3-custom-title pl-10 mb-10"
className="h3-custom-title pl-10 mb-10 pt-10"
style={{
verticalAlign: "-webkit-baseline-middle",
verticalAlign: "middle",
paddingRight: "10px",
}}
/>
Expand Down Expand Up @@ -452,7 +452,7 @@ const VotingDetails = () => {
<span className=" h3-custom-title"> Your Vote</span>
<VerifiedIcon
className="h3-custom-title pl-10 icon-blue"
style={{ verticalAlign: "-webkit-baseline-middle" }}
style={{ verticalAlign: "middle" }}
/>
<span className="h3-custom-title ">
{userVote[0]?.poll_result}
Expand Down Expand Up @@ -539,9 +539,9 @@ const VotingDetails = () => {
<Box className="pr-5">
<span className=" h3-custom-title"> Poll Ended On</span>
<TodayOutlinedIcon
className="h3-custom-title pl-10"
className="h3-custom-title pl-10 pt-10"
style={{
verticalAlign: "-webkit-baseline-middle",
verticalAlign: "middle",
paddingRight: "10px",
}}
/>
Expand Down
11 changes: 7 additions & 4 deletions packages/nulp_elite/src/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1315,7 +1315,7 @@ button {
}
.custom-event-container .cardBox,
.votingDashboard .cardBox {
height: inherit !important;
height: 100% !important;
}
.lg-left {
text-align: right;
Expand Down Expand Up @@ -2086,6 +2086,7 @@ button {
position: fixed !important;
width: 100%;
z-index: 99999;
top: 80px;
}
.domain-fixed .mt-180 {
margin-top: 180px !important;
Expand Down Expand Up @@ -3017,8 +3018,7 @@ tspan {
.pt-12 {
padding-top: 12px !important;
}

.mt-15 {
MuiDialog-paper .mt-15 {
margin-top: 15px !important;
}

Expand Down Expand Up @@ -3705,6 +3705,9 @@ input:required::after {
.d-inline-block {
display: inline-block !important;
}
.MuiChartsAxis-tickContainer {
/* .MuiChartsAxis-tickContainer {
transform: rotate(0.1turn);
} */
.feedback-popup .MuiDialog-paper {
width: 434px !important;
}

0 comments on commit 5b16ef8

Please sign in to comment.