Added sign up modal if the user is not logged

src/Components/ButtonGuardarColecao.js

-import React, {useState, useContext} from 'react'
-import {Store} from '../Store.js'
+import React, { useState, useContext } from 'react'
+import { Store } from '../Store.js'
 import Button from '@material-ui/core/Button';
 import styled from 'styled-components'
 import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
 import GuardarModal from './GuardarModal'
+import SignUpModal from './SignUpModal'
+import LoginModal from './LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
 
-export default function ButtonGuardarColecao (props) {
-    const {state} = useContext(Store)
+export default function ButtonGuardarColecao(props) {
+    const { state } = useContext(Store)
     const [saveToCol, toggleSave] = useState(false)
     const handleGuardar = () => {
-        if(state.currentUser.id === '') {
-            console.log('abrir login modal');
+        if (!state.currentUser.id) {
+            handleLogin()
         }
         else {
             toggleSave(true);
         }
     }
 
+    const handleSignUp = () => {
+        setSignUp(!signUpOpen)
+    }
+
+    const handleLogin = () => {
+        setLogin(!loginOpen)
+    }
+
+    function Alert(props) {
+        return <MuiAlert elevation={6} variant="filled" {...props} />;
+    }
+
+    function toggleLoginSnackbar(reason) {
+        if (reason === 'clickaway') {
+            return;
+        }
+        handleSuccessfulLogin(false);
+    }
+
+    const [signUpOpen, setSignUp] = useState(false)
+    const [loginOpen, setLogin] = useState(false)
+    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
     return (
         <>
-        <GuardarModal open={saveToCol} handleClose={() => {toggleSave(false)}}
-            thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
-        />
-        <StyledButton onClick={handleGuardar}>
-                <CreateNewFolderIcon/> &nbsp; GUARDAR
-        </StyledButton>
+            <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+            />
+            <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+                openSnackbar={() => { handleSuccessfulLogin(true) }}
+            />
+            <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
+                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+            >
+                <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+            </Snackbar>
+            <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+                thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
+            />
+            <StyledButton onClick={handleGuardar}>
+                <CreateNewFolderIcon /> &nbsp; GUARDAR
+            </StyledButton>
         </>
     )
 }