TagsChoose component styles refactor

src/components/generic/DropdownWithPopup.js

@@ -1,122 +0,0 @@
-import React from 'react';
-import { FlexColumn, FlexRow, Grid } from '../../utils/containers';
-import { Medium } from '../../utils/fonts';
-import theme from '../../utils/theme';
-import ImageButton from './ImageButton';
-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;
-  gap: 8px;
-  width: 100%;
-  align-items: flex-start;
-  * {
-    cursor: pointer;
-  }
-`;
-
-const DropdownWithPopup = (props) => {
-  const [tagsPopUp, setTagsPopUp] = React.useState(false);
-
-  return (
-    <DropdownWithPopupStyle
-      onClick={() => {
-        if (!tagsPopUp) setTagsPopUp(true);
-      }}
-    >
-      <Medium as="label" htmlFor={props.label}>
-        {props.label}
-      </Medium>
-      <Grid
-        borderRadius="4px"
-        width="100%"
-        height="100px"
-        border={`1px solid ${theme.colors.dark}`}
-        shadow={theme.shadow}
-        onChange={(e) => props.handler(e.target.value)}
-        padding="12px"
-        gridTemplateColumns="1fr auto"
-      >
-        <FlexRow height="100%" alignmentX="flex-start" alignmentY="flex-start">
-          dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
-          dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
-          dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
-          dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
-        </FlexRow>
-        <ImageButton src={pencilIco} width="20px" height="20px" />
-      </Grid>
-      {tagsPopUp &&
-        createPortal(
-          <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>
-  );
-};
-
-export default DropdownWithPopup;

src/pages/Submit/Submit.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
-import { FlexColumn } from '../utils/containers';
-import { H2, Menu } from '../utils/fonts';
-import SubmitInput from '../components/generic/SubmitInput';
-import Button from '../components/generic/Button';
-import theme from '../utils/theme';
-import challengeSubmission from '../api/challengeSubmissionPost';
-import Loading from '../components/generic/Loading';
-import getTags from '../api/getTags';
-import DropdownWithPopup from '../components/generic/DropdownWithPopup';
+import { FlexColumn } from '../../utils/containers';
+import { H2, Menu } from '../../utils/fonts';
+import SubmitInput from '../../components/generic/SubmitInput';
+import Button from '../../components/generic/Button';
+import theme from '../../utils/theme';
+import challengeSubmission from '../../api/challengeSubmissionPost';
+import Loading from '../../components/generic/Loading';
+import getTags from '../../api/getTags';
+import TagsChoose from './components/TagsChoose';
 
 const Submit = (props) => {
   const [description, setDescription] = React.useState('');
@@ -55,7 +55,7 @@ const Submit = (props) => {
           />
           <SubmitInput label="Submission repo URL" handler={setRepoUrl} />
           <SubmitInput label="Submission repo branch" handler={setRepoBranch} />
-          <DropdownWithPopup
+          <TagsChoose
             label="Submission tags"
             handler={setSubmissionTags}
             tags={tags}

src/pages/Submit/components/TagsChoose/TagsChoose.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FlexRow, Grid } from '../../../../utils/containers';
+import { Medium } from '../../../../utils/fonts';
+import ImageButton from '../../../../components/generic/ImageButton';
+import pencilIco from '../../../../assets/pencil_ico.svg';
+import TagsChoosePopUp from '../TagsChoosePopUp';
+import { createPortal } from 'react-dom';
+import TagsChooseStyle from './TagsChooseStyle';
+
+const TagsChoose = (props) => {
+  const [tagsPopUp, setTagsPopUp] = React.useState(false);
+
+  return (
+    <TagsChooseStyle
+      onClick={() => {
+        if (!tagsPopUp) setTagsPopUp(true);
+      }}
+    >
+      <Medium as="label" htmlFor={props.label}>
+        {props.label}
+      </Medium>
+      <Grid
+        className="TagsChooseStyle__grid"
+        onChange={(e) => props.handler(e.target.value)}
+      >
+        <FlexRow className="TagsChooseStyle__tags-container">tags</FlexRow>
+        <ImageButton src={pencilIco} width="20px" height="20px" />
+      </Grid>
+      {tagsPopUp &&
+        createPortal(
+          <TagsChoosePopUp tags={props.tags} setTagsPopUp={setTagsPopUp} />,
+          document.body
+        )}
+    </TagsChooseStyle>
+  );
+};
+
+export default TagsChoose;

src/pages/Submit/components/TagsChoose/TagsChooseStyle.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import { FlexColumn } from '../../../../utils/containers';
+
+const TagsChooseStyle = styled(FlexColumn)`
+  cursor: pointer;
+  gap: 8px;
+  width: 100%;
+  align-items: flex-start;
+  * {
+    cursor: pointer;
+  }
+
+  .TagsChooseStyle__grid {
+    border-radius: 4px;
+    width: 100%;
+    height: 100px;
+    border: 1px solid ${({ theme }) => theme.colors.dark};
+    box-shadow: 1px 2px 4px rgba(52, 52, 52, 0.25);
+    padding: 12px;
+    grid-template-columns: 1fr auto;
+  }
+
+  .TagsChooseStyle__tags-container {
+    height: 100%;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+`;
+
+export default TagsChooseStyle;

src/pages/Submit/components/TagsChoose/index.js

@@ -0,0 +1 @@
+export { default } from './TagsChoose';

src/pages/Submit/components/TagsChoosePopUp.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PopUp from '../../../components/generic/PopUp';
+import { FlexColumn, FlexRow } from '../../../utils/containers';
+import Search from '../../../components/generic/Search';
+import theme from '../../../utils/theme';
+import Button from '../../../components/generic/Button';
+
+const TagsChoosePopUp = (props) => {
+  return (
+    <PopUp
+      width="50%"
+      height="80vh"
+      padding="36px 32px 0"
+      closeHandler={() => props.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>
+  );
+};
+
+export default TagsChoosePopUp;

src/pages/Submit/index.js

@@ -0,0 +1 @@
+export { default } from './Submit';