topbar dropdown width aligned with input wrapper width

src/components/Dropdown.tsx

@@ -3,9 +3,7 @@ import { coursesContext } from '../contexts/CoursesProvider';
 import { Course } from '../types';
 import styled from 'styled-components';
 
-const WrapperIchuj = styled.div`
+
-  max-width: 1400px;
-`;
 
 const DropdownContainer = styled.div`
   position: relative;
@@ -102,16 +100,16 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo
   };
 
   return (
-    <WrapperIchuj>
-      {open && (
     <DropdownContainer>
+      {open && (
+        <>
           {filteredCourses.map(({ name, id }, index) => (
             <CourseContainer key={index} id={id.toString()} onClick={onCourseClick}>
               <p>{name} </p>
             </CourseContainer>
           ))}
-        </DropdownContainer>
+        </>
       )}
-    </WrapperIchuj>
+    </DropdownContainer>
   );
 });

src/components/SchedulerRow.tsx

@@ -51,7 +51,7 @@ const Classes = styled.div<ClassesProps>`
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
   padding-left: 10px;
   text-align: left;
-  background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#A68820')};
+  background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
   box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
 `;
 
@@ -109,7 +109,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
                   >
                     <div>
                       <p style={{ fontWeight: 700 }}>{groups[index].name}</p>
-                      <span>{groups[index].room}</span>
+                      <p >{groups[index].room}</p>
                     </div>
                   </Classes>
                   <Popover

src/components/Topbar.tsx

@@ -22,13 +22,12 @@ const Topbar = styled.div`
 
 const LogoWrapper = styled.div`
   display: flex;
+  justify-content: center;
   align-items: center;
-  flex-grow: 0.5;
+  flex: 2;
-  justify-content: flex-start;
 `;
 
 const Logo = styled.img`
-  flex-grow: 1;
   width: 70px;
   height: 70px;
   @media only screen and (max-width: 670px) {
@@ -38,7 +37,6 @@ const Logo = styled.img`
 `;
 
 const Text = styled.div`
-  flex-grow: 2;
   @media only screen and (max-width: 670px) {
     display: none;
   }
@@ -47,14 +45,11 @@ const Text = styled.div`
 const FlexboxColumn = styled.div`
   display: flex;
   flex-direction: column;
-  flex-grow: 9;
+  flex: 9;
-  max-width: 1400px;
 `;
 
 const InputWrapper = styled.div`
   display: flex;
-  align-items: center;
-  justify-content: center;
   margin-top: 15px;
   background-color: #f2f4f7;
   border-radius: 6px;
@@ -82,9 +77,9 @@ const InputIcon = styled.img`
 
 const IconWrapper = styled.div`
   display: flex;
+  justify-content: center;
   align-items: center;
-  justify-content: space-around;
+  flex: 2;
-  flex-grow: 0.5;
 `;
 
 const Icon = styled.img`
@@ -152,7 +147,7 @@ export default function ({ handleTransfer }: TopbarProps) {
       </FlexboxColumn>
 
       <IconWrapper>
-        {/* <Icon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
+        <Icon alt="transfer" src={Transfer} onClick={handleTransfer} />
         <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} />
         <Icon alt="profile" src={ProfileIcon} onClick={handleProfile} />
         <Profile anchorEl={anchorEl} handleClose={handleClose} />