From ce924995281712f0a0f89f62c6145d383d7c9345 Mon Sep 17 00:00:00 2001
From: Mateusz Tylka <mattyl@st.amu.edu.pl>
Date: Fri, 12 May 2023 12:58:43 +0200
Subject: [PATCH] refactor TagsChoosePopUp component

---
 .../components/TagsChoose/TagsChoose.js       |  2 +-
 .../{ => TagsChoosePopup}/TagsChoosePopUp.js  | 28 +++++++------------
 .../TagsChoosePopup/TagsChoosePopUpStyle.js   | 25 +++++++++++++++++
 .../components/TagsChoosePopup/index.js       |  1 +
 4 files changed, 37 insertions(+), 19 deletions(-)
 rename src/pages/Submit/components/{ => TagsChoosePopup}/TagsChoosePopUp.js (64%)
 create mode 100644 src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js
 create mode 100644 src/pages/Submit/components/TagsChoosePopup/index.js

diff --git a/src/pages/Submit/components/TagsChoose/TagsChoose.js b/src/pages/Submit/components/TagsChoose/TagsChoose.js
index 3413219..42eabbd 100644
--- a/src/pages/Submit/components/TagsChoose/TagsChoose.js
+++ b/src/pages/Submit/components/TagsChoose/TagsChoose.js
@@ -3,7 +3,7 @@ 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 TagsChoosePopUp from '../TagsChoosePopup/TagsChoosePopUp';
 import { createPortal } from 'react-dom';
 import TagsChooseStyle from './TagsChooseStyle';
 
diff --git a/src/pages/Submit/components/TagsChoosePopUp.js b/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js
similarity index 64%
rename from src/pages/Submit/components/TagsChoosePopUp.js
rename to src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js
index abd4f01..16de725 100644
--- a/src/pages/Submit/components/TagsChoosePopUp.js
+++ b/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js
@@ -1,9 +1,10 @@
 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';
+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';
+import TagsChoosePopUpStyle from './TagsChoosePopUpStyle';
 
 const TagsChoosePopUp = (props) => {
   return (
@@ -13,26 +14,17 @@ const TagsChoosePopUp = (props) => {
       padding="36px 32px 0"
       closeHandler={() => props.setTagsPopUp(false)}
     >
-      <FlexColumn width="100%" alignmentY="flex-start" height="100%" gap="24px">
+      <TagsChoosePopUpStyle>
         <Search />
-        <FlexColumn
-          as="list"
-          alignmentY="flex-start"
-          height="80%"
-          width="100%"
-          overflowY="scroll"
-        >
+        <FlexColumn as="list" className="TagsChoosePopUpStyle__tags-list">
           {props.tags.map((tag, index) => {
             return (
               <FlexRow
                 key={`tag-${index}`}
-                height="48px"
-                width="100%"
-                alignmentX="flex-start"
+                className="TagsChoosePopUpStyle__tag-item"
                 backgroundColor={
                   index % 2 === 0 ? theme.colors.dark01 : theme.colors.white
                 }
-                padding="12px"
               >
                 {tag.name}
               </FlexRow>
@@ -59,7 +51,7 @@ const TagsChoosePopUp = (props) => {
             Cancel
           </Button>
         </FlexRow>
-      </FlexColumn>
+      </TagsChoosePopUpStyle>
     </PopUp>
   );
 };
diff --git a/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js b/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js
new file mode 100644
index 0000000..127c11d
--- /dev/null
+++ b/src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { FlexColumn } from '../../../../utils/containers';
+
+const TagsChoosePopUpStyle = styled(FlexColumn)`
+  width: 100%;
+  justify-content: flex-start;
+  height: 100%;
+  gap: 24px;
+
+  .TagsChoosePopUpStyle__tags-list {
+    height: 80%;
+    width: 100%;
+    overflow-y: scroll;
+    justify-content: flex-start;
+  }
+
+  .TagsChoosePopUpStyle__tag-item {
+    height: 48px;
+    width: 100%;
+    justify-content: flex-start;
+    padding: 12px;
+  }
+`;
+
+export default TagsChoosePopUpStyle;
diff --git a/src/pages/Submit/components/TagsChoosePopup/index.js b/src/pages/Submit/components/TagsChoosePopup/index.js
new file mode 100644
index 0000000..a4781d6
--- /dev/null
+++ b/src/pages/Submit/components/TagsChoosePopup/index.js
@@ -0,0 +1 @@
+export { default } from './TagsChoosePopUp';