diff --git a/src/Components/TabPanelColecoes.js b/src/Components/TabPanelColecoes.js index b865f48bff1ff7b11114671c1065edfb65400782..9a3c44da8db43945569d70e7a2d295ea75fd7e4f 100644 --- a/src/Components/TabPanelColecoes.js +++ b/src/Components/TabPanelColecoes.js @@ -6,8 +6,10 @@ import Button from '@material-ui/core/Button'; import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js' import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js' import LoadingSpinner from './LoadingSpinner.js' +import PaginaVaziaColecao from '../img/Pagina_vazia_colecao.png' import axios from 'axios' import {apiUrl} from '../env'; +import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder'; export default function TabPanelColecoes (props) { const [loading, handleLoading] = useState(true) @@ -54,12 +56,36 @@ export default function TabPanelColecoes (props) { <StyledP>Minhas Coleções <b style={{fontWeight:"700", fontSize:"20px"}}>({userCollectionsLength})</b></StyledP> <StyledHR/> </DivTitulo> - <div style={{height : "400px"}}> + <div style={{paddingRight:"15px", paddingLeft:"15px"}}> + <CardDiv> + <div style={{backgroundColor:"#673ab7", height:"250px", display:"flex", justifyContent:"center", alignItems:"center"}}> + <CreateNewFolderIcon style={{color:"#fff", fontSize:"70px"}}/> + <p style={{fontSize:"16px", margin:"0 0 10px"}}> + CRIAR COLEÇÃO + </p> + </div> + </CardDiv> { userCollectionsLength == 0 ? ( [ - <span>Adicionar tela "criar colecao" e a imagem</span> + <DivTextoNoPublications style={{width:"50%"}}> + <div style={{position:"relative", top:"50%", transform:"translateY(-50%)"}}> + <div> + <img src={PaginaVaziaColecao} alt="PaginaVaziaColecao" + style={{height:"150px",width:"150px", verticalAlign:"middle", border:"0"}}/> + <br/> + <span style={{fontFamily:"Roboto", fontWeight:"lighter", fontSize:"24px"}}> + Criamos a sua primeira Coleção! + </span> + <p style={{fontFamily:"Roboto", fontSize:"16px", margin:"0 0 10px"}}> + Adicione nela recursos que você queira acessar mais tarde. + <br/> + Crie novas coleções clicando no cartão roxo "Criar Colecão". + </p> + </div> + </div> + </DivTextoNoPublications> ] ) : @@ -121,3 +147,12 @@ export default function TabPanelColecoes (props) { </> ) } + +const CardDiv = styled.div` + margin-top : 10px; + margin-bottom : 10px; + width : 25%; + float : left; + padding-left : 15px; + padding-right : 15px; +` diff --git a/src/img/Pagina_vazia_colecao.png b/src/img/Pagina_vazia_colecao.png new file mode 100644 index 0000000000000000000000000000000000000000..0dbf187a01d49f7df1d69780d18ceaf38f3c4efa Binary files /dev/null and b/src/img/Pagina_vazia_colecao.png differ