topbar dropdown width aligned with input wrapper width
This commit is contained in:
parent
0f155e928b
commit
c8edf64963
@ -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>
|
||||
<DropdownContainer>
|
||||
{open && (
|
||||
<DropdownContainer>
|
||||
<>
|
||||
{filteredCourses.map(({ name, id }, index) => (
|
||||
<CourseContainer key={index} id={id.toString()} onClick={onCourseClick}>
|
||||
<p>{name} </p>
|
||||
</CourseContainer>
|
||||
))}
|
||||
</DropdownContainer>
|
||||
</>
|
||||
)}
|
||||
</WrapperIchuj>
|
||||
</DropdownContainer>
|
||||
);
|
||||
});
|
||||
|
@ -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
|
||||
|
@ -22,13 +22,12 @@ const Topbar = styled.div`
|
||||
|
||||
const LogoWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 0.5;
|
||||
justify-content: flex-start;
|
||||
flex: 2;
|
||||
`;
|
||||
|
||||
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;
|
||||
max-width: 1400px;
|
||||
flex: 9;
|
||||
`;
|
||||
|
||||
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-grow: 0.5;
|
||||
flex: 2;
|
||||
`;
|
||||
|
||||
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} />
|
||||
|
Loading…
Reference in New Issue
Block a user