popup with tags to choose init design complete

src/components/generic/Button.js

@@ -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}

src/components/generic/DropdownWithPopup.js

@@ -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>

src/components/generic/PopUp.js

@@ -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

src/components/specific_challenge/Submit.js

@@ -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}>

src/utils/colors.js

@@ -1,15 +1,16 @@
 const colors = {
-    white: '#FCFCFC',
-    green: '#1B998B',
-    green03: 'rgba(27, 153, 139, 0.3)',
-    green05: 'rgba(27, 153, 139, 0.5)',
-    dark: '#343434',
-    dark01: 'rgba(52, 52, 52, 0.1)',
-    dark03: 'rgba(52, 52, 52, 0.3)',
-    dark04: 'rgba(52, 52, 52, 0.4)',
-    dark05: 'rgba(52, 52, 52, 0.5)',
-    dark07: 'rgba(52, 52, 52, 0.7)',
-    dark08: 'rgba(52, 52, 52, 0.8)',
+  white: '#FCFCFC',
+  green: '#1B998B',
+  blue: '#4B8FF0',
+  green03: 'rgba(27, 153, 139, 0.3)',
+  green05: 'rgba(27, 153, 139, 0.5)',
+  dark: '#343434',
+  dark01: 'rgba(52, 52, 52, 0.1)',
+  dark03: 'rgba(52, 52, 52, 0.3)',
+  dark04: 'rgba(52, 52, 52, 0.4)',
+  dark05: 'rgba(52, 52, 52, 0.5)',
+  dark07: 'rgba(52, 52, 52, 0.7)',
+  dark08: 'rgba(52, 52, 52, 0.8)',
 };
 
-export default colors;
+export default colors;

src/utils/containers.js

@@ -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)`