dropdown working correctly

public/index.html

@@ -10,7 +10,8 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link href="https://fonts.googleapis.com/css2?family=B612:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <title>PlanNaPlan</title>
 </head>
 

src/components/Dropdown.tsx

@@ -4,7 +4,7 @@ import { Course } from '../types';
 import styled from 'styled-components';
 
 const WrapperIchuj = styled.div`
-  max-width: 1200px;
+  max-width: 1400px;
 `;
 
 const DropdownContainer = styled.div`
@@ -86,8 +86,9 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo
       );
       setFilteredCourses(filteredCourses);
     };
+    console.log("filtering courses");
     filterCourses(input);
-  }, [input, basket]);
+  }, [open, input, basket]);
 
   const onCourseClick = async (event: MouseEvent) => {
     const target = event.currentTarget;

src/components/SchedulerRow.tsx

@@ -47,13 +47,10 @@ const Classes = styled.div<ClassesProps>`
   align-items: center;
   z-index: 2;
   border-radius: 10px;
-
-  font-size: 0.9vw;
-  /* background-color: rgb(100, 181, 246); */
   width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
-  margin-right: 5px;
-  text-align: center;
+  padding-left: 10px;
+  text-align: left;
   background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#A68820')};
   box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
 `;
@@ -98,7 +95,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
           {groups.map(
             (group, index) =>
               group.day === eventIndex && (
-                <div key={index}>
+                <>
                   <Classes
                     groupType={group.type}
                     cellWidth={cellWidth}
@@ -110,11 +107,10 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
                     onMouseEnter={(e) => handlePopoverOpen(e)}
                     onMouseLeave={handlePopoverClose}
                   >
-                    <p>
-                      {groups[index].name}
-                      <br></br>
-                      {groups[index].room}
-                    </p>
+                    <div>
+                      <p style={{ fontWeight: 700 }}>{groups[index].name}</p>
+                      <span>{groups[index].room}</span>
+                    </div>
                   </Classes>
                   <Popover
                     id={`mouse-over-popover`}
@@ -141,7 +137,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
                       <p>{groups[index].room}</p>
                     </Typography>
                   </Popover>
-                </div>
+                </>
               ),
           )}
         </SchedulerEvent>

src/components/Topbar.tsx

@@ -48,7 +48,7 @@ const FlexboxColumn = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 9;
-  max-width: 1200px;
+  max-width: 1400px;
 `;
 
 const InputWrapper = styled.div`

src/constants/index.ts

@@ -20,3 +20,6 @@ export const hours = [
   "18:00",
   "19:00",
 ];
+
+
+export const MONDAY_TO_FRIDAY = 5;

src/styles/GlobalStyles.ts

@@ -11,7 +11,7 @@ export const GlobalStyles = createGlobalStyle`
     margin: 0;
     padding: 0;
     line-height: 24px;
-    font-family: 'B612', sans-serif;
+    font-family: 'Roboto', sans-serif;
   }
 
   body::-webkit-scrollbar {