diff --git a/frontend/mms-Admin/src/components/SelectionSideBar/SelectionSideBar.jsx b/frontend/mms-Admin/src/components/SelectionSideBar/SelectionSideBar.jsx index da5d3205..32905e07 100644 --- a/frontend/mms-Admin/src/components/SelectionSideBar/SelectionSideBar.jsx +++ b/frontend/mms-Admin/src/components/SelectionSideBar/SelectionSideBar.jsx @@ -30,15 +30,19 @@ function SelectionSideBar({ data, selectedMenuItem, activeClassName }) {
{data?.headerComponent}
); diff --git a/frontend/mms-Admin/src/constants/testData.js b/frontend/mms-Admin/src/constants/testData.js new file mode 100644 index 00000000..15cd45cc --- /dev/null +++ b/frontend/mms-Admin/src/constants/testData.js @@ -0,0 +1,113 @@ + import mentorManagerImage from "@/assets/images/mentor-manager-thumbnail.svg"; +import mentorImage from "@/assets/images/sample-profile-image.svg"; + + export const mentorsArray = [ + { + id: "1", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "2", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "3", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "4", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "5", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "6", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "7", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "8", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "9", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "10", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + } + ]; + + export const mentorManagersArray = [ + { + id: "91", + name: "Alice Davies", + designation: "Program Assistant, Andela, Her/She", + image: mentorManagerImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "92", + name: "Alice Davies", + designation: "Program Assistant, Andela, Her/She", + image: mentorManagerImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "93", + name: "Alice Davies", + designation: "Program Assistant, Andela, Her/She", + image: mentorManagerImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "94", + name: "Alice Davies", + designation: "Program Assistant, Andela, Her/She", + image: mentorManagerImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "95", + name: "Alice Davies", + designation: "Program Assistant, Andela, Her/She", + image: mentorManagerImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + } + ]; \ No newline at end of file diff --git a/frontend/mms-Admin/src/helpers/validation.js b/frontend/mms-Admin/src/helpers/validation.js index 35f09f37..ead58ab4 100644 --- a/frontend/mms-Admin/src/helpers/validation.js +++ b/frontend/mms-Admin/src/helpers/validation.js @@ -54,7 +54,7 @@ export const settingsSupportSchema = Yup.object().shape({ }); export const createTaskSchema = Yup.object().shape({ - title: Yup.string().required("Title is required").max(32, "The title must contain a maximum of 32 characters"), + title: Yup.string().required("Title is required"), description: Yup.string().required("Task description is required") }); @@ -79,12 +79,12 @@ export const editProgramCriteriaSchema = Yup.object().shape({ }); export const editTaskSchema = Yup.object().shape({ - title: Yup.string().required("Title is required").max(32, "The title must contain a maximum of 32 characters"), + title: Yup.string().required("Title is required"), description: Yup.string().required("Task description is required") }); export const createReportSchema = Yup.object().shape({ - title: Yup.string().required("Title is required").max(32, "The title must contain a maximum of 32 characters"), + title: Yup.string().required("Title is required"), achievements: Yup.string(), blockers: Yup.string(), recommendations: Yup.string() diff --git a/frontend/mms-Admin/src/pages/Dashboard/Profile/Profile.jsx b/frontend/mms-Admin/src/pages/Dashboard/Profile/Profile.jsx index 13a591ce..53b0cd1b 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Profile/Profile.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Profile/Profile.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import cx from "classnames"; -import { getProfile, getAllUserProfiles } from "@/redux/Profile/ProfileSlice"; +import { getProfile } from "@/redux/Profile/ProfileSlice"; import { Container, Row } from "react-bootstrap"; import ProfileHeader from "./ProfileHeader/ProfileHeader"; @@ -25,9 +25,6 @@ function Profile() { const userProfile = useSelector((state) => state.profile.getProfileData); const getProfileLoading = useSelector((state) => state.loading.getProfileLoading); - const getAllUserProfilesData = useSelector((state) => state.profile.getAllUserProfilesData); - - console.log(getAllUserProfilesData, "all users data"); useEffect(() => { if (Object.keys(userProfile).length > 0) { @@ -93,7 +90,6 @@ function Profile() { useEffect(() => { dispatch(getProfile()); - dispatch(getAllUserProfiles()); }, [dispatch]); return ( diff --git a/frontend/mms-Admin/src/pages/Dashboard/Programs/Programs.jsx b/frontend/mms-Admin/src/pages/Dashboard/Programs/Programs.jsx index 03dd87ef..53c5a61e 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Programs/Programs.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Programs/Programs.jsx @@ -3,7 +3,6 @@ import cx from "classnames"; import { useNavigate, useParams, Outlet } from "react-router-dom"; import styles from "./Programs.module.scss"; import GenericSideBar from "@/components/GenericSideBar/GenericSideBar"; -// import FilterAndSearch from "@/components/FilterAndSearch/FilterAndSearch"; import backIcon from "@/assets/icons/back-icon.svg"; import Search from "@/components/Search/Search"; import Filter from "@/components/Filter/Filter"; diff --git a/frontend/mms-Admin/src/pages/Dashboard/Tasks/CreateTask/CreateTask.jsx b/frontend/mms-Admin/src/pages/Dashboard/Tasks/CreateTask/CreateTask.jsx index af1ad0b5..71e1ec4e 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Tasks/CreateTask/CreateTask.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Tasks/CreateTask/CreateTask.jsx @@ -16,13 +16,12 @@ import { showModal } from "@/redux/Modal/ModalSlice"; import successImage from "@/assets/images/create-task-success-image.svg"; import { createTaskSchema } from "@/helpers/validation"; import PersonelComponent from "@/pages/Dashboard/Tasks/PersonelComponent/PersonelComponent"; -import mentorManagerImage from "@/assets/images/mentor-manager-thumbnail.svg"; -import mentorImage from "@/assets/images/sample-profile-image.svg"; -import { getAllMentors } from "@/redux/Mentors/MentorsSlice"; -import { getAllMentorManagers } from "@/redux/MentorManagers/MentorManagersSlice"; +// import { getAllMentors } from "@/redux/Mentors/MentorsSlice"; +// import { getAllMentorManagers } from "@/redux/MentorManagers/MentorManagersSlice"; import { createTask } from "@/redux/Tasks/TasksSlice"; import closeIconAlt from "@/assets/icons/close-icon.svg"; import { useNavigate } from "react-router-dom"; +import { getAllUserProfiles } from "@/redux/Profile/ProfileSlice"; function CreateTask() { const navigate = useNavigate(); @@ -37,129 +36,18 @@ function CreateTask() { const displayModal = useSelector((state) => state.modal.show); const modalName = useSelector((state) => state.modal.modalName); - const allMentorsData = useSelector((state) => state.mentors.getAllMentorsData); - const allMentorManagersData = useSelector((state) => state.mentorManagers.getAllMentorManagersData); + // const allMentorsData = useSelector((state) => state.mentors.getAllMentorsData); + // const allMentorManagersData = useSelector((state) => state.mentorManagers.getAllMentorManagersData); const createTaskLoading = useSelector((state) => state.loading.createTaskLoading); - console.log(allMentorManagersData, "all mentor managers data"); - console.log(allMentorsData, "all mentors data"); + const allUserProfilesData = useSelector((state) => state.profile.getAllUserProfilesData); useEffect(() => { - dispatch(getAllMentors()); - dispatch(getAllMentorManagers()); + // dispatch(getAllMentors()); + // dispatch(getAllMentorManagers()); + dispatch(getAllUserProfiles()); }, [dispatch]); - const mentorsArray = [ - { - id: "1", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "2", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "3", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "4", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "5", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "6", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "7", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "8", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "9", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "10", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - } - ]; - - const mentorManagersArray = [ - { - id: "91", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "92", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "93", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "94", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "95", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - } - ]; - const resolver = yupResolver(createTaskSchema); const defaultValues = { @@ -239,7 +127,9 @@ function CreateTask() { )}
{ + if (category === "mentorManager") { + return ( + Array.isArray(allUserProfilesData) && + allUserProfilesData.filter((item) => item.roles.find((role) => role.toLowerCase() === "manager")) + ); + } + if (category === "mentor") { + return ( + Array.isArray(allUserProfilesData) && + allUserProfilesData.filter((item) => item.roles.find((role) => role.toLowerCase() === "mentor")) + ); + } + }; + return (
@@ -368,14 +273,14 @@ function CreateTask() {
) : openSideBar.open && openSideBar.category === "mentor" ? (
) : null} diff --git a/frontend/mms-Admin/src/pages/Dashboard/Tasks/CreateTask/CreateTask.module.scss b/frontend/mms-Admin/src/pages/Dashboard/Tasks/CreateTask/CreateTask.module.scss index fc19e091..6d7c7362 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Tasks/CreateTask/CreateTask.module.scss +++ b/frontend/mms-Admin/src/pages/Dashboard/Tasks/CreateTask/CreateTask.module.scss @@ -95,6 +95,17 @@ .sideBarSection { width: auto; + .noUserFound { + width: 100%; + + h6 { + font-family: var(--semiBold); + font-size: 1rem; + color: var(--black2TextColor); + margin: 0; + } + } + .filterAndSearchDiv { width: 100%; justify-content: flex-end; diff --git a/frontend/mms-Admin/src/pages/Dashboard/Tasks/EditTask/EditTask.jsx b/frontend/mms-Admin/src/pages/Dashboard/Tasks/EditTask/EditTask.jsx index 09ee35f0..e51f3b17 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Tasks/EditTask/EditTask.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Tasks/EditTask/EditTask.jsx @@ -16,14 +16,13 @@ import { useForm, Controller } from "react-hook-form"; import { editTaskSchema } from "@/helpers/validation"; import { yupResolver } from "@hookform/resolvers/yup"; import PersonelComponent from "@/pages/Dashboard/Tasks/PersonelComponent/PersonelComponent"; -import mentorManagerImage from "@/assets/images/mentor-manager-thumbnail.svg"; -import mentorImage from "@/assets/images/sample-profile-image.svg"; -import { getAllMentors } from "@/redux/Mentors/MentorsSlice"; -import { getAllMentorManagers } from "@/redux/MentorManagers/MentorManagersSlice"; +// import { getAllMentors } from "@/redux/Mentors/MentorsSlice"; +// import { getAllMentorManagers } from "@/redux/MentorManagers/MentorManagersSlice"; import { getTaskDetails, editTask } from "@/redux/Tasks/TasksSlice"; import { useParams } from "react-router-dom"; import closeIconAlt from "@/assets/icons/close-icon.svg"; import { useNavigate } from "react-router-dom"; +import { getAllUserProfiles } from "@/redux/Profile/ProfileSlice"; const EditTask = () => { const params = useParams(); @@ -42,133 +41,22 @@ const EditTask = () => { const displayModal = useSelector((state) => state.modal.show); const modalName = useSelector((state) => state.modal.modalName); const taskDetails = useSelector((state) => state.tasks.getTaskDetailsData); - const allMentorsData = useSelector((state) => state.mentors.getAllMentorsData); - const allMentorManagersData = useSelector((state) => state.mentorManagers.getAllMentorManagersData); + // const allMentorsData = useSelector((state) => state.mentors.getAllMentorsData); + // const allMentorManagersData = useSelector((state) => state.mentorManagers.getAllMentorManagersData); const editTaskLoading = useSelector((state) => state.loading.editTaskLoading); - console.log(allMentorManagersData, "all mentor managers data"); - console.log(allMentorsData, "all mentors data"); + const allUserProfilesData = useSelector((state) => state.profile.getAllUserProfilesData); useEffect(() => { - dispatch(getAllMentors()); - dispatch(getAllMentorManagers()); + // dispatch(getAllMentors()); + // dispatch(getAllMentorManagers()); + dispatch(getAllUserProfiles()); }, [dispatch]); useEffect(() => { dispatch(getTaskDetails(taskId)); }, [dispatch, taskId]); - const mentorsArray = [ - { - id: "1", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "2", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "3", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "4", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "5", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "6", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "7", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "8", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "9", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "10", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - } - ]; - - const mentorManagersArray = [ - { - id: "91", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "92", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "93", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "94", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "95", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - } - ]; - const resolver = yupResolver(editTaskSchema); const { @@ -188,18 +76,18 @@ const EditTask = () => { }, [reset, taskDetails]); const handleEditTask = async (data) => { - let formattedMentorManagerIds = selectedMentorManagers.map((id) => { - return { mentorManagerId: id }; - }); - let formattedMentorIds = selectedMentors.map((id) => { - return { programsMentorId: id }; - }); + // let formattedMentorManagerIds = selectedMentorManagers.map((id) => { + // return { mentorManagerId: id }; + // }); + // let formattedMentorIds = selectedMentors.map((id) => { + // return { programsMentorId: id }; + // }); let payload = { ...data, id: taskId, - managers: formattedMentorManagerIds, - mentors: formattedMentorIds + managers: [], + mentors: [] }; const response = await dispatch(editTask(payload)); @@ -253,7 +141,9 @@ const EditTask = () => { )}
{ } }; + const getUsers = (category) => { + if (category === "mentorManager") { + return ( + Array.isArray(allUserProfilesData) && + allUserProfilesData.filter((item) => item.roles.find((role) => role.toLowerCase() === "manager")) + ); + } + if (category === "mentor") { + return ( + Array.isArray(allUserProfilesData) && + allUserProfilesData.filter((item) => item.roles.find((role) => role.toLowerCase() === "mentor")) + ); + } + }; + return (
@@ -386,14 +291,14 @@ const EditTask = () => {
) : openSideBar.open && openSideBar.category === "mentor" ? (
) : null} diff --git a/frontend/mms-Admin/src/pages/Dashboard/Tasks/PersonelComponent/PersonelComponent.jsx b/frontend/mms-Admin/src/pages/Dashboard/Tasks/PersonelComponent/PersonelComponent.jsx index ba3b3a71..abf30aaa 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Tasks/PersonelComponent/PersonelComponent.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Tasks/PersonelComponent/PersonelComponent.jsx @@ -4,6 +4,7 @@ import PropTypes from "prop-types"; import styles from "./PersonelComponent.module.scss"; import { ReactComponent as AddIcon } from "@/assets/icons/add-icon.svg"; import { ReactComponent as CheckIcon } from "@/assets/icons/check-icon.svg"; +import { initialsCase, titleCase } from "@/helpers/textTransform"; function PersonelComponent({ data, checked, handleChecked }) { const [toggleIcon, setToggleIcon] = useState(false); @@ -19,13 +20,19 @@ function PersonelComponent({ data, checked, handleChecked }) { return (
- user-image + {data?.profilePicture ? ( + user-image + ) : ( + + {initialsCase(`${data?.firstName} ${data?.lastName}`)} + + )}
-
{data?.name}
-

{data?.designation}

+
{`${titleCase(data?.firstName)} ${titleCase(data?.lastName)}`}
+

{data?.headline}

- {data?.positionTags && - data?.positionTags.map((tag, index) => ( + {data?.roles && + data?.roles.map((tag, index) => ( {tag} diff --git a/frontend/mms-Admin/src/pages/Dashboard/Tasks/PersonelComponent/PersonelComponent.module.scss b/frontend/mms-Admin/src/pages/Dashboard/Tasks/PersonelComponent/PersonelComponent.module.scss index 02611daa..7e0a5fcf 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Tasks/PersonelComponent/PersonelComponent.module.scss +++ b/frontend/mms-Admin/src/pages/Dashboard/Tasks/PersonelComponent/PersonelComponent.module.scss @@ -19,6 +19,15 @@ border-radius: 50%; } + .avatarText { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + background-color: var(--green4Color); + font-size: 1.125rem; + font-family: var(--semiBold); + } + .userInfo { gap: 0.25rem; flex-grow: 1;