added side popup

Author: AhsanKhan7

src/ui/layouts/stacks/CreateStack/ListForAll/SidePopup/index.module.scss

@@ -0,0 +1,46 @@
+@import '../../../../../globalStyles.scss';
+
+.sidePopup {
+  background: #ffffff;
+  border-radius: 4px;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  top: 13rem;
+  height: 800px;
+  // height: 677px;
+  min-width: 700px;
+  overflow-x: auto;
+}
+
+@media (max-width: $md-breakpoint) {
+  .sidePopup {
+    max-width: 80vw;
+    min-width: 0;
+  }
+}
+
+.popupContainer {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+}
+
+.popupClose {
+  background-color: #fff;
+  border-radius: 100px;
+  position: absolute;
+  top: 15rem;
+  right: 70rem;
+  z-index: 999;
+}
+
+.actionSection { 
+  min-width: 683px;
+  background-color: white;
+  position: fixed;
+  bottom: 0;
+}

src/ui/layouts/stacks/CreateStack/ListForAll/SidePopup/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import OutsideClickHandler from 'react-outside-click-handler';
+
+import {
+  Box,
+  FlexBox,
+  icons,
+  LinkBox,
+  Paragraph,
+  H3,
+  PrimaryButton,
+} from '../../../../../components';
+
+import styles from './index.module.scss';
+
+
+export const SidePopup: React.FC<{
+  onSeeExisting: () => void;
+  onClose: () => void;
+  registerStack: any;
+}> = ({ children, onClose, registerStack, onSeeExisting }) => (
+  <>
+    <FlexBox
+      alignItems="center"
+      justifyContent="center"
+      className={styles.popupContainer}
+    >
+      <Box className={styles.popupClose}>
+        <LinkBox onClick={onClose}>
+          <icons.closeWithBorder />
+        </LinkBox>
+      </Box>
+
+      <Box className={styles.sidePopup}>
+        <OutsideClickHandler onOutsideClick={onClose}>
+          <Box paddingVertical="lg" paddingHorizontal="xxxl">
+            <H3 style={{ color: '#443E99', fontWeight: 'bold' }} >Configurations</H3>
+              {children}
+            </Box>
+
+          <Box
+            paddingVertical="lg"
+            paddingHorizontal="md"
+            className={styles.actionSection}
+          >
+            <FlexBox.Row justifyContent="space-between" alignItems="center">
+              <Box>
+                <LinkBox onClick={onSeeExisting}>
+                  <Paragraph>Edit Component</Paragraph>
+                </LinkBox>
+              </Box>
+              <Box>
+                <PrimaryButton onClick={registerStack}>Register Stack</PrimaryButton>
+              </Box>
+            </FlexBox.Row>
+          </Box>
+        </OutsideClickHandler>
+      </Box>
+    </FlexBox>
+  </>
+);

src/ui/layouts/stacks/CreateStack/ListForAll/index.tsx

@@ -6,6 +6,7 @@ import { stackComponentSelectors } from '../../../../../redux/selectors';
 import { useSelector } from 'react-redux';
 import { GetList } from './GetList';
 import { GetFlavorsListForLogo } from '../../../stackComponents/Stacks/List/GetFlavorsListForLogo';
+import { SidePopup } from './SidePopup';
 
 interface Props {}
 
@@ -17,7 +18,12 @@ export const ListForAll: React.FC<Props> = () => {
 
   const [selectedStack, setSelectedStack] = useState<any>([]);
   const [selectedStackBox, setSelectedStackBox] = useState<any>();
-  console.log(selectedStack);
+  const [showPopup, setShowPopup] = useState<boolean>(false);
+  
+  const selectStack = (data: any) => {
+    setShowPopup(true)
+    setSelectedStackBox(data)
+  }
 
   return (
     <Box style={{ width: '100%' }}>
@@ -48,7 +54,7 @@ export const ListForAll: React.FC<Props> = () => {
         <FlexBox.Row marginTop="md">
           {selectedStack?.map((e: any) => (
             <Box
-              onClick={() => setSelectedStackBox(e.id)}
+              onClick={() => selectStack(e)}
               marginLeft="sm"
               style={{
                 height: '60px',
@@ -73,7 +79,6 @@ export const ListForAll: React.FC<Props> = () => {
           ))}
         </FlexBox.Row>
       )}
-      {console.log('selectedStackselectedStackselectedStack', selectedStack)}
 
       <FlexBox.Column>
         {stackComponentsTypes?.map((item) => {
@@ -90,6 +95,23 @@ export const ListForAll: React.FC<Props> = () => {
         })}
       </FlexBox.Column>
 
+      {showPopup &&
+        <SidePopup
+          registerStack={() => {}} 
+          onSeeExisting={() => {}}
+          onClose={() => setShowPopup(false)}
+        >
+          <Box marginTop='md'>
+            <FormTextField
+              onChange={(e: any) => {}}
+              placeholder=""
+              label='Stack Name'
+              value={selectedStackBox.name}
+            />
+          </Box>
+        </SidePopup>
+      }
+
       {/* <Box marginTop="lg" style={{ overflowX: 'auto' }}>
         <FlexBox.Row alignItems="center">
           <H3 style={{ fontWeight: 'bold' }}>Artifact Store</H3>