popup and transitions

gofireflyio · Apr 27, 2022 · a24dc70 · a24dc70
1 parent 867ca45
commit a24dc70
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 19 deletions.
diff --git a/frontend/src/components/MainView/FireflyPopup.tsx b/frontend/src/components/MainView/FireflyPopup.tsx
@@ -1,48 +1,89 @@
 import React from "react";
-import Dialog from '@mui/material/Dialog';
 import styled from "styled-components";
+import { mainBackgrund } from "../../utils/Colors";
+import { FIREFLY_APP } from "./MainViewHeader";
+import { ReactComponent as Firefly } from "./assets/Firefly.svg";
 
 const Content = styled.div`
   padding: 20px;
+  background-color: ${mainBackgrund};
+  position: fixed;
+  bottom: 0;
+  width: 40%;
+  left: 50%;
+  height: 15%;
+  transform: translate(-50%, -5%);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  font-family: Poppins;
 `;
 
 const Title = styled.div`
   font-weight: 500;
-  font-family: Poppins;
   text-align: left;
   font-size: 22px;
-  color: #0d0534;
+  color: white;
 `;
 
 const LinkContainer = styled.div`
-  margin-top: 8%;
-  text-align: center; 
+  justify-content: center;
+  display: flex;
 `;
 
-const Link = styled.a`
+const Link = styled.div`
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  justify-content: center;
+  cursor: pointer;
   font-size: 22px;
-  font-family: Poppins;
   color: #305bbb;
-  text-decoration: none;
+  width: fit-content;
+`;
+const CloseBtnContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const CloseBtn = styled.button`
+  font-family: Poppins;
+  background-color: ${mainBackgrund};
+  color: white;
+  border: 1px solid white;
+  border-radius: 5px;
+  cursor: pointer;
 `;
 
 interface FireflyPopupProps {
-  open: boolean;
   onClose: () => void;
+  style: Object;
 }
 
 const FireflyPopup: React.FC<FireflyPopupProps> = ({
-  onClose, open
+  onClose,
+  style
 }) => {
   return (
-    <Dialog onClose={onClose} open={open}>
-      <Content>
-        <Title>Tired of manually codifying HCL?</Title>
-        <LinkContainer>
-          <Link href="https://app.gofirefly.io/" target="_blank" rel="noreferrer">Go to Firefly</Link>
-        </LinkContainer>
-      </Content>
-    </Dialog>
+    <Content 
+    style={style}
+    >
+      <Title>Tired of manually codifying HCL?</Title>
+      <LinkContainer>
+        <Link onClick={() => {
+          window.open(FIREFLY_APP); 
+          onClose();
+        }}>
+          Go to Firefly
+          <Firefly style={{height: "30px", width: "50px"}} />
+        </Link>
+      </LinkContainer>
+      <CloseBtnContainer>
+        <CloseBtn onClick={onClose}>Close</CloseBtn>
+      </CloseBtnContainer>
+    </Content>
   );
 };
 

diff --git a/frontend/src/components/MainView/MainViewHeader.tsx b/frontend/src/components/MainView/MainViewHeader.tsx
@@ -8,6 +8,7 @@ import { ReactComponent as LinkedinIcon } from "./assets/LinkedinIcon.svg";
 import { ReactComponent as TwitterIcon } from "./assets/TwitterIcon.svg";
 
 export const FIREFLY_IO = "https://gofirefly.io/";
+export const FIREFLY_APP = "https://app.gofirefly.io/";
 export const TWITTER_URL = "https://twitter.com/goFireflyio";
 export const LINKEDIN_URL = "https://www.linkedin.com/company/gofireflyio/";
 export const GITHUB_URL = "https://github.com/gofireflyio/validiac";

diff --git a/frontend/src/components/MainView/assets/Firefly.svg b/frontend/src/components/MainView/assets/Firefly.svg
diff --git a/frontend/src/components/MainView/index.tsx b/frontend/src/components/MainView/index.tsx
@@ -41,6 +41,10 @@ const MainView: React.FC = () => {
   const [curTab, setCurTab] = useState<number>(0);
   const [popupOpen, setPopupOpen] = useState<boolean>(false);
   const [initialTabClicked, setInitialTabClicked] = useState<boolean>(false);
+  const [popupStyle, setPopupStyle] = useState<Object>({
+      opacity: 0,
+      transition: "all 0.3s ease-in"
+    });
 
   const callApiCallabck = useCallback(
     (endpoint: string) => {
@@ -64,6 +68,21 @@ const MainView: React.FC = () => {
     }
   }, [initialTabClicked]);
 
+  useEffect(() => {
+    if (popupOpen) {
+      setPopupStyle({
+        opacity: 1,
+        transition: "all 0.3s ease-in"
+      });
+    } else {
+      setPopupStyle({
+        opacity: 0,
+        transition: "all 0.3s ease-in"
+      });
+    }
+
+  }, [popupOpen]);
+
   const handleClose = () => {
     setPopupOpen(false);
   };
@@ -89,12 +108,12 @@ const MainView: React.FC = () => {
             setInitialTabClicked={setInitialTabClicked}
             initialTabClicked={initialTabClicked}
           />
-          <FireflyPopup open={popupOpen} onClose={handleClose} />
         </TextaresContainer>
         <BrOnlyOnPc />
       </MainViewBodyContainer>
       <AboutThisProjectHeader />
       <AboutThisProjectBottom />
+      <FireflyPopup onClose={handleClose} style={popupStyle} />
     </>
   );
 };