WJ-117 - New: Image login favorite alert;

src/components/LoginAlert/index.tsx

@@ -3,10 +3,12 @@ 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,
@@ -22,6 +24,9 @@ const LoginAlert: React.FC<any> = () => {
 
   return (
     <Container>
+      <ImageContainer>
+        <HeartImage />
+      </ImageContainer>
       <MessageContainer>
         <Message>Entre com sua conta para adicionar aos favoritos.</Message>
       </MessageContainer>

src/components/LoginAlert/styles.ts

@@ -9,9 +9,19 @@ export const Container = styled.div`
   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.Default};
-  padding-top: 0;
+  padding: ${Size.Large} ${Size.Default};
   text-align: center;
 `;
 

src/components/Modal/styles.ts

@@ -74,7 +74,7 @@ export const ModalContainer = styled.div<StyleProps>`
 export const ModalContent = styled.div`
   display: flex;
   flex-direction: column;
-  box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 7px 1px rgba(0, 0, 0, 0.3);
   margin: 10px;
   margin-top: 0;
 

src/pages/Login/index.tsx

@@ -72,7 +72,7 @@ const Login: React.FC = () => {
   return (
     <ColumnLayout>
       <HeaderContainer>
-        <Header background={Color.Transparent} color={Color.Primary} />
+        <Header background={Color.Transparent} color={Color.Secondary} />
       </HeaderContainer>
       <Container>
         <RowContainer>
@@ -88,7 +88,7 @@ const Login: React.FC = () => {
                 placeholder="Senha"
               />
               <ErrorMessage data-testid="errorMessage">{error}</ErrorMessage>
-              <Button type="submit" loading={loginLoading}>
+              <Button type="submit" loading={loginLoading} theme="secondary">
                 ENTRAR
               </Button>
             </LoginForm>
@@ -102,15 +102,15 @@ const Login: React.FC = () => {
             <Button
               type="button"
               variant="outlined"
-              theme="primary"
+              theme="secondary"
               onClick={() => history.push(Route.SIGNUP)}
             >
               CRIAR CONTA
             </Button>
           </SignupContainer>
         </RowContainer>
       </Container>
-      <Footer />
+      <Footer theme="secondary" />
     </ColumnLayout>
   );
 };

src/pages/Login/styles.ts

@@ -53,12 +53,12 @@ export const LoginHeader = styled.h1`
   margin-bottom: ${Size.Large};
   font-size: ${Size.Large};
   font-weight: 400;
-  color: ${Color.Primary};
+  color: ${Color.Secondary};
 `;
 
 export const ErrorMessage = styled.p`
   margin: ${Size.Default} 0;
-  color: ${Color.Primary};
+  color: ${Color.Secondary};
   font-size: ${Size.Small};
 `;
 
@@ -68,7 +68,7 @@ export const SignupContainer = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: ${Color.Primary};
+  color: ${Color.Secondary};
   text-align: center;
   padding: ${Size.Default};
   flex: 1 1 458px;
@@ -82,12 +82,12 @@ export const SignupHeader = styled.h1`
   margin-bottom: ${Size.Large};
   font-size: ${Size.Large};
   font-weight: 400;
-  color: ${Color.Primary};
+  color: ${Color.Secondary};
 `;
 
 export const SignupDescription = styled.p`
   margin-bottom: ${Size.Large};
   font-size: ${Size.Default};
   font-weight: 100;
-  color: ${Color.Primary};
+  color: ${Color.Secondary};
 `;

src/pages/Signup/index.tsx

@@ -72,7 +72,7 @@ const Signup: React.FC = () => {
   return (
     <ColumnLayout>
       <HeaderContainer>
-        <Header background={Color.Transparent} color={Color.Primary} />
+        <Header background={Color.Transparent} color={Color.Secondary} />
       </HeaderContainer>
       <Container>
         <RowContainer>
@@ -89,7 +89,7 @@ const Signup: React.FC = () => {
                 placeholder="Senha"
               />
               <ErrorMessage>{error}</ErrorMessage>
-              <Button type="submit" loading={signupLoading}>
+              <Button type="submit" loading={signupLoading} theme="secondary">
                 CADASTRAR
               </Button>
             </SignupForm>
@@ -103,15 +103,15 @@ const Signup: React.FC = () => {
             <Button
               type="button"
               variant="outlined"
-              theme="primary"
+              theme="secondary"
               onClick={() => history.push(Route.LOGIN)}
             >
               LOGIN
             </Button>
           </LoginContainer>
         </RowContainer>
       </Container>
-      <Footer />
+      <Footer theme="secondary" />
     </ColumnLayout>
   );
 };

src/pages/Signup/styles.ts

@@ -53,12 +53,12 @@ export const SignupHeader = styled.h1`
   margin-bottom: ${Size.Large};
   font-size: ${Size.Large};
   font-weight: 400;
-  color: ${Color.Primary};
+  color: ${Color.Secondary};
 `;
 
 export const ErrorMessage = styled.p`
   margin: ${Size.Default} 0;
-  color: ${Color.Primary};
+  color: ${Color.Secondary};
   font-size: ${Size.Small};
 `;
 
@@ -81,12 +81,12 @@ export const LoginHeader = styled.h1`
   margin-bottom: ${Size.Large};
   font-size: ${Size.Large};
   font-weight: 400;
-  color: ${Color.Primary};
+  color: ${Color.Secondary};
 `;
 
 export const LoginDescription = styled.p`
   margin-bottom: ${Size.Large};
   font-size: ${Size.Default};
   font-weight: 100;
-  color: ${Color.Primary};
+  color: ${Color.Secondary};
 `;