Skip to content

Commit

Permalink
fixed-2505
Browse files Browse the repository at this point in the history
  • Loading branch information
gurramkarthiknetha committed Dec 17, 2024
1 parent 9b5bd3e commit d482f10
Show file tree
Hide file tree
Showing 12 changed files with 232 additions and 316 deletions.
266 changes: 0 additions & 266 deletions src/screens/EventVolunteers/EventVolunteers.module.css
Original file line number Diff line number Diff line change
@@ -1,266 +0,0 @@
/* Toggle Btn */
.toggleGroup {
width: 50%;
min-width: 20rem;
margin: 0.5rem 0rem;
}

.toggleBtn {
padding: 0rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
}

.toggleBtn:hover {
color: #31bb6b !important;
}

input[type='radio']:checked + label {
background-color: #31bb6a50 !important;
}

input[type='radio']:checked + label:hover {
color: black !important;
}

.actionItemsContainer {
height: 90vh;
}

.actionItemModal {
max-width: 80vw;
margin-top: 2vh;
margin-left: 13vw;
}

.datediv {
display: flex;
flex-direction: row;
}

.datebox {
width: 90%;
border-radius: 7px;
outline: none;
box-shadow: none;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-left: 5px;
}

.dropdownToggle {
margin-bottom: 0;
display: flex;
}

.dropdownModalToggle {
width: 50%;
}

.errorIcon {
transform: scale(1.5);
color: var(--bs-danger);
margin-bottom: 1rem;
}

.greenregbtn {
margin: 1rem 0 0;
margin-top: 15px;
border: 1px solid var(--bs-gray-300);
box-shadow: 0 2px 2px var(--bs-gray-300);
padding: 10px 10px;
border-radius: 5px;
background-color: var(--bs-primary);
width: 100%;
font-size: 16px;
color: var(--bs-white);
outline: none;
font-weight: 600;
cursor: pointer;
transition:
transform 0.2s,
box-shadow 0.2s;
width: 100%;
}

hr {
border: none;
height: 1px;
background-color: var(--bs-gray-500);
margin: 1rem;
}

.iconContainer {
display: flex;
justify-content: flex-end;
}
.icon {
margin: 1px;
}

.message {
margin-top: 25%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.preview {
display: flex;
flex-direction: row;
font-weight: 900;
font-size: 16px;
color: rgb(80, 80, 80);
}

.removeFilterIcon {
cursor: pointer;
}

.searchForm {
display: inline;
}

.view {
margin-left: 2%;
font-weight: 600;
font-size: 16px;
color: var(--bs-gray-600);
}

/* header (search, filter, dropdown) */
.btnsContainer {
display: flex;
margin: 0.5rem 0 1.5rem 0;
}

.btnsContainer .input {
flex: 1;
min-width: 18rem;
position: relative;
}

.btnsContainer input {
outline: 1px solid var(--bs-gray-400);
}

.btnsContainer .input button {
width: 52px;
}

.noOutline input {
outline: none;
}

.noOutline input:disabled {
-webkit-text-fill-color: black !important;
}

.noOutline textarea:disabled {
-webkit-text-fill-color: black !important;
}

.inputField {
margin-top: 10px;
margin-bottom: 10px;
background-color: white;
box-shadow: 0 1px 1px #31bb6b;
}

.inputField > button {
padding-top: 10px;
padding-bottom: 10px;
}

.dropdown {
background-color: white;
border: 1px solid #31bb6b;
position: relative;
display: inline-block;
color: #31bb6b;
}

/* Action Items Data Grid */
.rowBackground {
background-color: var(--bs-white);
max-height: 120px;
}

.tableHeader {
background-color: var(--bs-primary);
color: var(--bs-white);
font-size: 1rem;
}

.chipIcon {
height: 0.9rem !important;
}

.chip {
height: 1.5rem !important;
}

.active {
background-color: #31bb6a50 !important;
}

.pending {
background-color: #ffd76950 !important;
color: #bb952bd0 !important;
border-color: #bb952bd0 !important;
}

/* Modals */
.itemModal {
max-width: 80vw;
margin-top: 2vh;
margin-left: 13vw;
}

.titlemodal {
color: #707070;
font-weight: 600;
font-size: 32px;
width: 65%;
margin-bottom: 0px;
}

.modalCloseBtn {
width: 40px;
height: 40px;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}

.imageContainer {
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.5rem;
}

.TableImage {
object-fit: cover;
width: 25px !important;
height: 25px !important;
border-radius: 100% !important;
}

.avatarContainer {
width: 28px;
height: 26px;
}

/* Modal Table (Groups & Assignments) */
.modalTable {
max-height: 220px;
overflow-y: auto;
}
22 changes: 11 additions & 11 deletions src/screens/EventVolunteers/Requests/Requests.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
type GridColDef,
} from '@mui/x-data-grid';
import Avatar from 'components/Avatar/Avatar';
import styles from '../EventVolunteers.module.css';
import styles from '../../../style/app.module.css';
import { USER_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Queries/EventVolunteerQueries';
import type { InterfaceVolunteerMembership } from 'utils/interfaces';
import dayjs from 'dayjs';
Expand Down Expand Up @@ -154,7 +154,7 @@ function requests(): JSX.Element {
align: 'center',
headerAlign: 'center',
sortable: false,
headerClassName: `${styles.tableHeader}`,
headerClassName: `${styles.tableHeaders}`,
renderCell: (params: GridCellParams) => {
return params.row.id;
},
Expand All @@ -167,7 +167,7 @@ function requests(): JSX.Element {
minWidth: 100,
headerAlign: 'center',
sortable: false,
headerClassName: `${styles.tableHeader}`,
headerClassName: `${styles.tableHeaders}`,
renderCell: (params: GridCellParams) => {
const { firstName, lastName, image } = params.row.volunteer.user;
return (
Expand All @@ -180,14 +180,14 @@ function requests(): JSX.Element {
src={image}
alt="volunteer"
data-testid={`volunteer_image`}
className={styles.TableImage}
className={styles.TableImages}
/>
) : (
<div className={styles.avatarContainer}>
<Avatar
key="volunteer_avatar"
containerStyle={styles.imageContainer}
avatarStyle={styles.TableImage}
avatarStyle={styles.TableImages}
name={firstName + ' ' + lastName}
alt={firstName + ' ' + lastName}
/>
Expand All @@ -205,7 +205,7 @@ function requests(): JSX.Element {
minWidth: 150,
align: 'center',
headerAlign: 'center',
headerClassName: `${styles.tableHeader}`,
headerClassName: `${styles.tableHeaders}`,
sortable: false,
renderCell: (params: GridCellParams) => {
return dayjs(params.row.createdAt).format('DD/MM/YYYY');
Expand All @@ -219,7 +219,7 @@ function requests(): JSX.Element {
minWidth: 100,
headerAlign: 'center',
sortable: false,
headerClassName: `${styles.tableHeader}`,
headerClassName: `${styles.tableHeaders}`,
renderCell: (params: GridCellParams) => {
return (
<>
Expand Down Expand Up @@ -251,7 +251,7 @@ function requests(): JSX.Element {
return (
<div>
{/* Header with search, filter and Create Button */}
<div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
<div className={`${styles.btnsContainer} btncon gap-4 flex-wrap`}>
<div className={`${styles.input} mb-1`}>
<Form.Control
type="name"
Expand All @@ -260,7 +260,7 @@ function requests(): JSX.Element {
})}
autoComplete="off"
required
className={styles.inputField}
className={styles.inputFields}
value={searchValue}
onChange={(e) => {
setSearchValue(e.target.value);
Expand All @@ -282,7 +282,7 @@ function requests(): JSX.Element {
<Dropdown>
<Dropdown.Toggle
variant="success"
className={styles.dropdown}
className={styles.dropdowns}
data-testid="sort"
>
<Sort className={'me-1'} />
Expand Down Expand Up @@ -316,7 +316,7 @@ function requests(): JSX.Element {
hideFooter={true}
getRowId={(row) => row._id}
sx={dataGridStyle}
getRowClassName={() => `${styles.rowBackground}`}
getRowClassName={() => `${styles.rowBackgrounds}`}
autoHeight
rowHeight={65}
rows={requests.map((request, index) => ({
Expand Down
2 changes: 1 addition & 1 deletion src/screens/EventVolunteers/VolunteerContainer.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Navigate, useParams } from 'react-router-dom';
import styles from './EventVolunteers.module.css';
import styles from '../../style/app.module.css';
import { HiUserGroup, HiUser } from 'react-icons/hi2';
import Volunteers from './Volunteers/Volunteers';
import VolunteerGroups from './VolunteerGroups/VolunteerGroups';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Button, Modal } from 'react-bootstrap';
import styles from '../EventVolunteers.module.css';
import styles from '../../../style/app.module.css';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useMutation } from '@apollo/client';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import type {
InterfaceUserInfo,
InterfaceVolunteerGroupInfo,
} from 'utils/interfaces';
import styles from '../EventVolunteers.module.css';
import styles from '../../../style/app.module.css';
import React, { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useMutation, useQuery } from '@apollo/client';
Expand Down
Loading

0 comments on commit d482f10

Please sign in to comment.