refactor VolunteerViewModal-css

docs/README.md

@@ -1,15 +1,18 @@
 # Talawa Admin Documentation Website
 
+[![N|Solid](static/img/markdown/misc/logo.png)](https://github.com/PalisadoesFoundation/talawa-admin)
 [![N|Solid](static/img/markdown/misc/logo.png)](https://github.com/PalisadoesFoundation/talawa-admin)
 
 # Installation
 
+This document provides instructions on how to set up and start a running instance of the [talawa-admin documentation website](https://docs-admin.talawa.io/) on your local system. The instructions are written to be followed in sequence so make sure to go through each of them step by step without skipping any sections.
 This document provides instructions on how to set up and start a running instance of the [talawa-admin documentation website](https://docs-admin.talawa.io/) on your local system. The instructions are written to be followed in sequence so make sure to go through each of them step by step without skipping any sections.
 
 # Table of Contents
 
 <!-- /TOC -->
 
+- [Developer-Docs Installation](#talawa-admin-installation)
 - [Developer-Docs Installation](#talawa-admin-installation)
 - [Table of Contents](#table-of-contents)
 - [Prerequisites for Developers](#prerequisites-for-developers)
@@ -25,6 +28,7 @@ This document provides instructions on how to set up and start a running instanc
 
 # Prerequisites for Developers
 
+The contents of the `talawa-admin` repo is used to automatically create [the talawa-admin Documentation website](https://docs-admin.talawa.io/). The automation uses [Docusaurus](https://docusaurus.io/docs/), a modern static website generator.
 The contents of the `talawa-admin` repo is used to automatically create [the talawa-admin Documentation website](https://docs-admin.talawa.io/). The automation uses [Docusaurus](https://docusaurus.io/docs/), a modern static website generator.
 
 We recommend that you follow these steps before beginning development work in this repository.
@@ -48,6 +52,8 @@ $ yarn -version
 ```console
 $ git clone https://github.com/PalisadoesFoundation/talawa-admin.git
 $ cd talawa-admin
+$ git clone https://github.com/PalisadoesFoundation/talawa-admin.git
+$ cd talawa-admin
 $ yarn add docusaurus
 ```
 
@@ -174,3 +180,4 @@ $ yarn run build
 ```
 
 This command generates static content into the `/build` directory and can be served using any static contents hosting service.
+

src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx

@@ -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')}
@@ -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}
@@ -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
@@ -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>
 
@@ -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>
@@ -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>
@@ -199,4 +190,5 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
     </Modal>
   );
 };
+
 export default VolunteerViewModal;

src/style/app.module.css

@@ -4117,3 +4117,76 @@ 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;
+}
+
+.statusIcon {
+  margin-right: 0.5rem;
+}
+
+.acceptedStatus {
+  color: var(--bs-primary);
+  -webkit-text-fill-color: var(--bs-primary);
+  /* Add checkmark icon */
+  &::before {
+    content: '✓';
+    margin-right: 0.25rem;
+  }
+}
+
+.pendingStatus {
+  color: var(--bs-warning);
+  -webkit-text-fill-color: var(--bs-warning);
+  /* Add clock icon */
+  &::before {
+    content: '⏳';
+    margin-right: 0.25rem;
+  }
+}
+
+.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;
+}