Merge pull request #118 from 90lucasgabriel/feature/WJ-117

WJ-117 - Create login alert modal

package.json

@@ -14,6 +14,7 @@
     "chai": "^4.2.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
+    "framer-motion": "^2.9.4",
     "lodash": "^4.17.20",
     "polished": "^3.6.5",
     "react": "^16.13.1",

src/components/Button/styles.ts

@@ -50,6 +50,22 @@ export const Container = styled.button<ButtonProps>`
       }
     `}
 
+  ${props =>
+    props.variant === 'basic' &&
+    css`
+      border: 0;
+      color: ${getBackground(props.theme, props.color, Color.Fill)};
+      background: transparent;
+
+      &:hover {
+        background-color: ${`${getBackground(
+          props.theme,
+          props.color,
+          Color.Fill,
+        )}15`};
+      }
+    `}
+
 
 
   ${props =>

src/components/LoginAlert/index.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Route from 'routes/enums';
+
+import { ReactComponent as HeartImage } from 'assets/heart.svg';
+import { useModal } from 'components/Modal/hooks';
+import { Button } from 'components';
+import {
+  Container,
+  ImageContainer,
+  MessageContainer,
+  Message,
+  ButtonsContainer,
+} from './styles';
+
+const LoginAlert: React.FC<any> = () => {
+  const history = useHistory();
+  const { dismissModal } = useModal();
+
+  const handleClose = useCallback(() => {
+    dismissModal();
+  }, [dismissModal]);
+
+  return (
+    <Container>
+      <ImageContainer>
+        <HeartImage />
+      </ImageContainer>
+      <MessageContainer>
+        <Message>Entre com sua conta para adicionar aos favoritos.</Message>
+      </MessageContainer>
+      <ButtonsContainer>
+        <Button
+          type="button"
+          variant="basic"
+          theme="secondary"
+          onClick={handleClose}
+        >
+          CONTINUAR SEM LOGIN
+        </Button>
+        <Button
+          type="button"
+          theme="secondary"
+          onClick={() => history.push(Route.LOGIN)}
+        >
+          LOGIN / CADASTRO
+        </Button>
+      </ButtonsContainer>
+    </Container>
+  );
+};
+
+export default LoginAlert;

src/components/LoginAlert/styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import { Size } from 'shared/enums';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${Size.Default};
+  padding-top: 0;
+  width: min(550px, calc(100vw - 5rem));
+`;
+
+export const ImageContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: min(300px, 100%);
+    height: auto;
+  }
+`;
+
+export const MessageContainer = styled.div`
+  padding: ${Size.Large} ${Size.Default};
+  text-align: center;
+`;
+
+export const Message = styled.h3``;
+
+export const ButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  @media (min-width: 715px) {
+    flex-direction: row;
+  }
+`;

src/components/Modal/index.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
+import { AnimatePresence } from 'framer-motion';
 
 import { useModal } from 'components/Modal/hooks';
 import StyleProps from 'components/Modal/types/StyleProps';
@@ -43,27 +44,27 @@ const Modal: React.FC<StyleProps> = ({
     handleDismiss();
   }, [location]); // eslint-disable-line
 
-  if (!modalContent && !children && !show) {
-    return null;
-  }
-
   return (
-    <Container>
-      <Backdrop onClick={handleDismiss} />
-      <ModalContainer center={center} height={height}>
-        <ModalContent>
-          {!hideCloseButton && (
-            <CloseContainer>
-              <Button variant="icon" onClick={handleDismiss}>
-                <CloseIcon />
-              </Button>
-            </CloseContainer>
-          )}
+    <AnimatePresence>
+      {(modalContent || children || show) && (
+        <Container>
+          <Backdrop onClick={handleDismiss} />
+          <ModalContainer center={center} height={height}>
+            <ModalContent>
+              {!hideCloseButton && (
+                <CloseContainer>
+                  <Button variant="icon" onClick={handleDismiss}>
+                    <CloseIcon />
+                  </Button>
+                </CloseContainer>
+              )}
 
-          <ContentContainer>{modalContent || children}</ContentContainer>
-        </ModalContent>
-      </ModalContainer>
-    </Container>
+              <ContentContainer>{modalContent || children}</ContentContainer>
+            </ModalContent>
+          </ModalContainer>
+        </Container>
+      )}
+    </AnimatePresence>
   );
 };
 

src/components/Modal/styles.ts

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { motion } from 'framer-motion';
 
 import { Color, Size } from 'shared/enums';
 import StyleProps from 'components/Modal/types/StyleProps';
@@ -17,19 +18,26 @@ export const Container = styled.div`
   } */
 `;
 
-export const Backdrop = styled.div`
+export const Backdrop = styled(motion.div).attrs(() => ({
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+}))`
   flex: 1;
   background-color: rgba(0, 0, 0, 0.4);
 `;
 
-export const ModalContainer = styled.div<StyleProps>`
+export const ModalContainer = styled(motion.div).attrs((props: any) => ({
+  initial: { y: '-60%', x: '-50%', opacity: 0 },
+  animate: { y: props?.center ? '-50%' : 0, x: '-50%', opacity: 1 },
+  exit: { y: '-60%', x: '-50%', opacity: 0 },
+}))<StyleProps>`
   position: absolute;
 
   top: 100px;
   left: 50%;
   transform: translateX(-50%);
 
-
   z-index: 15;
 
   display: flex;
@@ -39,12 +47,10 @@ export const ModalContainer = styled.div<StyleProps>`
   max-height: 100%;
   overflow: hidden;
 
-  /* height: 100%; */
-
   ${props =>
     props.center &&
     css`
-      top: 50% !important;
+      top: 50%;
       transform: translate(-50%, -50%);
     `}
 
@@ -53,28 +59,14 @@ export const ModalContainer = styled.div<StyleProps>`
     css`
       height: ${props.height};
     `}
-
-
-
-
-  /* @media (max-width: 1280px) {
-    width: calc(100% - ${Size.Medium} * 2);
-  } */
-
-  @media (max-width: 715px) {
-    /* top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%; */
-  }
-
-
 `;
 
 export const ModalContent = styled.div`
   display: flex;
   flex-direction: column;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 7px 1px rgba(0, 0, 0, 0.3);
+  margin: 10px;
+  margin-top: 0;
 
   background-color: ${Color.Fill};
   border-radius: ${Size.Small};

src/components/index.ts

@@ -7,6 +7,7 @@ export { default as AspectRatioLoading } from './AspectRatio/Loading';
 export { default as Button } from './Button';
 export { default as EnvironmentLabel } from './EnvironmentLabel';
 export { default as Input } from './Input';
+export { default as LoginAlert } from './LoginAlert';
 export { default as Media } from './Media';
 export { default as Modal } from './Modal';