Skip to content

Commit

Permalink
Refactor/volunteer view modal css #2893 (#3097)
Browse files Browse the repository at this point in the history 
* refactor/VolunteerViewModal-css-#2893

* added --bs-warning color variable

* Improved Code Coverage in src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx (#3096)

* Improved Code Coverage in src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx

* Unit test documentation

* Update pull-request.yml

* Revert "Update pull-request.yml"

This reverts commit 6371f56.

* added coderabbit's suggestions

---------

Co-authored-by: Aadhil Ahamed <[email protected]>
Co-authored-by: Peter Harrison <[email protected]>
  • Loading branch information
@Dhiren-Mhatre @aadhil2k4 @palisadoes
3 people authored Dec 31, 2024
1 parent 56c1fbe commit a52c095
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 35 deletions.
62 changes: 27 additions & 35 deletions src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,22 +52,22 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
const { user, hasAccepted, hoursVolunteered, groups } = volunteer;

return (
<Modal className={styles.volunteerCreateModal} onHide={hide} show={isOpen}>
<Modal className={styles.volunteerViewModal} onHide={hide} show={isOpen}>
<Modal.Header>
<p className={styles.titlemodal}>{t('volunteerDetails')}</p>
<p className={styles.modalTitle}>{t('volunteerDetails')}</p>
<Button
variant="danger"
onClick={hide}
className={styles.modalCloseBtn}
className={styles.modalCloseButton}
data-testid="modalCloseBtn"
>
<i className="fa fa-times"></i>
</Button>
</Modal.Header>
<Modal.Body>
<Form className="p-3">
<Form className={styles.modalForm}>
{/* Volunteer Name & Avatar */}
<Form.Group className="mb-3">
<Form.Group className={styles.formGroup}>
<FormControl fullWidth>
<TextField
label={t('volunteer')}
Expand All @@ -83,14 +83,14 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
src={user.image}
alt="Volunteer"
data-testid="volunteer_image"
className={styles.TableImages}
className={styles.tableImage}
/>
) : (
<div className={styles.avatarContainer}>
<Avatar
key={user._id + '1'}
containerStyle={styles.imageContainer}
avatarStyle={styles.TableImages}
avatarStyle={styles.tableImage}
dataTestId="volunteer_avatar"
name={user.firstName + ' ' + user.lastName}
alt={user.firstName + ' ' + user.lastName}
Expand All @@ -104,7 +104,7 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
</FormControl>
</Form.Group>
{/* Status and hours volunteered */}
<Form.Group className="d-flex gap-3 mx-auto mb-2">
<Form.Group className={styles.statusGroup}>
<TextField
label={t('status')}
fullWidth
Expand All @@ -113,42 +113,34 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
startAdornment: (
<>
{hasAccepted ? (
<TaskAlt color="success" className="me-2" />
<TaskAlt color="success" className={styles.statusIcon} />
) : (
<HistoryToggleOff color="warning" className="me-2" />
<HistoryToggleOff
color="warning"
className={styles.statusIcon}
/>
)}
</>
),
style: {
color: hasAccepted ? 'green' : '#ed6c02',
},
}}
inputProps={{
style: {
WebkitTextFillColor: hasAccepted ? 'green' : '#ed6c02',
},
className: hasAccepted
? styles.acceptedStatus
: styles.pendingStatus,
}}
disabled
/>

<TextField
label={t('hoursVolunteered')}
variant="outlined"
className={`${styles.noOutline} w-100`}
className={`${styles.noOutline} ${styles.hoursField}`}
value={hoursVolunteered ?? '-'}
disabled
/>
</Form.Group>
{/* Table for Associated Volunteer Groups */}
{groups && groups.length > 0 && (
<Form.Group>
<Form.Label
className="fw-lighter ms-2 mb-0"
style={{
fontSize: '0.8rem',
color: 'grey',
}}
>
<Form.Label className={styles.groupsLabel}>
Volunteer Groups Joined
</Form.Label>

Expand All @@ -160,9 +152,13 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
<Table aria-label="group table">
<TableHead>
<TableRow>
<TableCell className="fw-bold">Sr. No.</TableCell>
<TableCell className="fw-bold">Group Name</TableCell>
<TableCell className="fw-bold" align="center">
<TableCell className={styles.tableHeader}>
Sr. No.
</TableCell>
<TableCell className={styles.tableHeader}>
Group Name
</TableCell>
<TableCell className={styles.tableHeader} align="center">
No. of Members
</TableCell>
</TableRow>
Expand All @@ -171,12 +167,7 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
{groups.map((group, index) => {
const { _id, name, volunteers } = group;
return (
<TableRow
key={_id}
sx={{
'&:last-child td, &:last-child th': { border: 0 },
}}
>
<TableRow key={_id} className={styles.tableRow}>
<TableCell component="th" scope="row">
{index + 1}
</TableCell>
Expand All @@ -199,4 +190,5 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
</Modal>
);
};

export default VolunteerViewModal;
71 changes: 71 additions & 0 deletions src/style/app.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
--search-button-bg: #a8c7fa;
--search-button-border: var(--brown-color);
--bs-primary: #0056b3;
--bs-warning: #ffc107;
--bs-white: #fff;
--bs-gray-600: #4b5563;
--bs-gray-400: #9ca3af;
Expand Down Expand Up @@ -4117,3 +4118,73 @@ button[data-testid='createPostBtn'] {
overflow-y: scroll;
overflow-x: hidden;
}

/* VolunteerViewModal.tsx */

.modalTitle {
margin: 0;
}

.modalForm {
padding: 1rem;
}

.formGroup {
margin-bottom: 1rem;
}

.tableImage {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 8px;
}

.statusGroup {
display: flex;
gap: 1rem;
margin: 0 auto;
margin-bottom: 0.5rem;
role: 'status';
}

.statusIcon {
margin-right: 0.5rem;
}

.acceptedStatus {
color: var(--bs-primary);
-webkit-text-fill-color: var(--bs-primary);
outline: 1px solid currentColor;
border-radius: 4px;
padding: 2px 4px;
}

.pendingStatus {
color: var(--bs-warning);
-webkit-text-fill-color: var(--bs-warning);
outline: 1px solid currentColor;
border-radius: 4px;
padding: 2px 4px;
}

.hoursField {
width: 100%;
}

.groupsLabel {
font-weight: lighter;
margin-left: 0.5rem;
margin-bottom: 0;
font-size: 0.8rem;
color: var(--bs-secondary);
}

.tableHeader {
font-weight: bold;
}

.tableRow:last-child td,
.tableRow:last-child th {
border: 0;
}

0 comments on commit a52c095

Please sign in to comment.