perdao, to com pressa

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;
+`