popup with tags to choose init design complete

This commit is contained in:
Mateusz Tylka 2023-05-12 11:50:02 +02:00
parent 9e9cd81a54
commit 1464bc084a
6 changed files with 84 additions and 14 deletions

View File

@ -33,6 +33,7 @@ const Button = (props) => {
onClick={() => props.handler()}
width={props.width}
height={props.height}
margin={props.margin}
color={props.color}
backgroundColor={props.backgroundColor}
to={props.to}

View File

@ -7,6 +7,8 @@ import pencilIco from '../../assets/pencil_ico.svg';
import styled from 'styled-components';
import PopUp from './PopUp';
import { createPortal } from 'react-dom';
import Search from './Search';
import Button from './Button';
const DropdownWithPopupStyle = styled(FlexColumn)`
cursor: pointer;
@ -50,7 +52,67 @@ const DropdownWithPopup = (props) => {
</Grid>
{tagsPopUp &&
createPortal(
<PopUp closeHandler={() => setTagsPopUp(false)}></PopUp>,
<PopUp
width="50%"
height="80vh"
padding="36px 32px 0"
closeHandler={() => setTagsPopUp(false)}
>
<FlexColumn
width="100%"
alignmentY="flex-start"
height="100%"
gap="24px"
>
<Search />
<FlexColumn
as="list"
alignmentY="flex-start"
height="80%"
width="100%"
overflowY="scroll"
>
{props.tags.map((tag, index) => {
return (
<FlexRow
key={`tag-${index}`}
height="48px"
width="100%"
alignmentX="flex-start"
backgroundColor={
index % 2 === 0
? theme.colors.dark01
: theme.colors.white
}
padding="12px"
>
{tag.name}
</FlexRow>
);
})}
</FlexColumn>
<FlexRow width="100%" gap="20px" alignmentX="flex-start">
<Button height="32px" width="76px">
Done
</Button>
<Button
height="32px"
width="76px"
backgroundColor={theme.colors.dark08}
>
Clear
</Button>
<Button
height="32px"
width="76px"
backgroundColor={theme.colors.dark}
margin="0 0 0 auto"
>
Cancel
</Button>
</FlexRow>
</FlexColumn>
</PopUp>,
document.body
)}
</DropdownWithPopupStyle>

View File

@ -13,10 +13,13 @@ const PopUpStyle = styled(FlexColumn)`
.PopUpStyle__body {
width: ${({ width }) => (width ? width : '60%')};
height: ${({ height }) => (height ? height : '50%')};
min-height: ${({ minHeight }) => (minHeight ? minHeight : '50%')};
padding: ${({ padding }) => (padding ? padding : '48px')};
margin: ${({ margin }) => (margin ? margin : '0')};
border-radius: 12px;
background-color: ${({ theme }) => theme.colors.white};
justify-content: flex-start;
}
`;
@ -31,7 +34,9 @@ const PopUp = (props) => {
<PopUpStyle
padding={props.padding}
width={props.width}
height={props.height}
minHeight={props.minHeight}
margin={props.margin}
onClick={closePopUp}
>
<FlexColumn

View File

@ -35,7 +35,6 @@ const Submit = (props) => {
};
if (!loading) {
console.log(tags);
return (
<FlexColumn
margin="40px 0 0 0"
@ -59,6 +58,7 @@ const Submit = (props) => {
<DropdownWithPopup
label="Submission tags"
handler={setSubmissionTags}
tags={tags}
/>
</FlexColumn>
<Button width="122px" height="44px" handler={challengeSubmissionSubmit}>

View File

@ -1,6 +1,7 @@
const colors = {
white: '#FCFCFC',
green: '#1B998B',
blue: '#4B8FF0',
green03: 'rgba(27, 153, 139, 0.3)',
green05: 'rgba(27, 153, 139, 0.5)',
dark: '#343434',

View File

@ -37,6 +37,7 @@ const Container = styled.div`
list-style: ${({ listStyle }) => (listStyle ? listStyle : 'none')};
overflow-wrap: ${({ overflowWrap }) =>
overflowWrap ? overflowWrap : 'normal'};
overflow-y: ${({ overflowY }) => (overflowY ? overflowY : 'none')};
`;
const FlexRow = styled(Container)`