user interface changes

src/components/CourseCard.tsx

@@ -50,18 +50,31 @@ const CourseName = styled.div`
   user-select: none;
 `;
 
-const ClassGroupStyled = styled.div`
+type ClassGroupProps = {
+  isSelected: boolean;
+};
+
+const ClassGroupStyled = styled.div<ClassGroupProps>`
   position: relative;
   padding-top: 10px;
   padding-bottom: 10px;
   transition: color 0.3s, background-color 0.3s;
   :hover {
     cursor: pointer;
-    background-color: #9ed3ff;
+    ${({ isSelected }) =>
+      !isSelected &&
+      css`
+        background-color: rgba(223, 238, 245, 0.308);
+      `}
   }
   :last-child {
     border-radius: 0 0 10px 10px;
   }
+  ${({ isSelected }) =>
+    isSelected &&
+    css`
+      background-color: #85aec2;
+    `}
 `;
 
 interface ExpandIconProps {
@@ -171,6 +184,7 @@ export const CourseCard = ({ course }: CourseCardProps) => {
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
         {groups.map((group: Group, index) => (
           <ClassGroupStyled
+            isSelected={group.id === previous?.classes?.id || group.id === previous?.lecture?.id ? true : false}
             key={index}
             onClick={() => onGroupClick(group, course.id)}
             onMouseEnter={() => {

src/components/Dropdown.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useContext, useEffect, MouseEvent, useMemo } from 'react';
 import { coursesContext } from '../contexts/CoursesProvider';
-import { usersContext } from '../contexts/UsersProvider';
-import { Course, User } from '../types';
+import { studentsContext } from '../contexts/StudentsProvider';
+import { Course, Student } from '../types';
 import styled from 'styled-components';
 
 const DropdownContainer = styled.div`
@@ -51,11 +51,10 @@ interface DropdownProps {
 
 export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: DropdownProps) => {
   const { courses, selectBasketNames, addCourseToBasket, getUserID } = useContext(coursesContext)!;
-  const { users } = useContext(usersContext)!;
+  const { students } = useContext(studentsContext)!;
   const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
   const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
-  const [filteredUsers, setFilteredUsers] = useState<Array<User>>([]);
-
+  const [filteredStudents, setFilteredStudents] = useState<Array<Student>>([]);
 
   const onCourseClick = (event: MouseEvent) => {
     const target = event.currentTarget;
@@ -94,7 +93,7 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
 
   useEffect(() => {
     const filterUsers = (input: string) => {
-      const filteredUsers = users.filter(({ name, surname }) =>
+      const filteredUsers = students.filter(({ name, surname }) =>
         (name + surname)
           .toLowerCase()
           .normalize('NFD')
@@ -106,10 +105,10 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
               .replace(/[\u0300-\u036f]/g, ''),
           ),
       );
-      setFilteredUsers(filteredUsers);
+      setFilteredStudents(filteredUsers);
     };
     filterUsers(input);
-  }, [users, input]);
+  }, [students, input]);
 
   return (
     <DropdownContainer>
@@ -117,7 +116,7 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
         <>
           {selectedOption === 'studenci' ? (
             <div>
-              {filteredUsers.map(({ name, surname, id }, index) => (
+              {filteredStudents.map(({ name, surname, id }, index) => (
                 <CourseContainer key={index} id={id.toString()} onClick={onUserClick}>
                   <p>
                     {name} {surname}{' '}

src/components/SchedulerRow.tsx

@@ -65,7 +65,7 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
   text-align: center;
   background-color: ${({ groupType, isHovered }) => {
     if (isHovered) {
-      return groupType === 'CLASS' ? '#ffefb5' : '#d4ecff';
+      return groupType === 'CLASS' ? '#FFE485' : '#D2EBFF';
     } else {
       return groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff';
     }
@@ -73,9 +73,9 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
   ${({ isHovered }) =>
     isHovered &&
     css`
-      transition: background-color 0.4s ease;
+      transition: background-color ease-in 0.4s;
     `}
-
+  transition: background-color ease-out 0.4s;
   box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
 `;
 
@@ -218,12 +218,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
                     onClose={handlePopoverClose}
                     disableRestoreFocus
                   >
-                    <div
-                      style={{ display: 'flex', flexDirection: 'column', zIndex: 20000 }}
-                      onClick={() => {
-                        console.log('XDD');
-                      }}
-                    >
+                    <div style={{ display: 'flex', flexDirection: 'column', zIndex: 20000 }} onClick={() => {}}>
                       <p style={{ margin: '7px 0 7px 0', fontWeight: 'bold' }}>{groups[index].name}</p>
                       <p style={{ margin: '2px 0 2px 0' }}>
                         <PopoverSpan>Prowadzący:</PopoverSpan> {groups[index].lecturer}