Iniciando página de recursos, bugs em cards arrumados

src/App.js

@@ -5,6 +5,7 @@ import Header from './Components/Header'
 import EcFooter from './Components/EcFooter';
 import GNUAGPLfooter from './Components/AGPLFooter';
 import UserPage from './Pages/UserPage';
+import ResourcePage from './Pages/ResourcePage';
 import {BrowserRouter, Switch, Route} from 'react-router-dom';
 import { Store } from './Store'
 
@@ -46,9 +47,10 @@ export default function App(){
         <Route path="/" exact={true} component={Home}/>
         <Route path="/busca" component={Search} />
         <Route path="/usuario" component={UserPage} />
+        <Route path="/recurso" component={ResourcePage}/>
       </Switch>
       <EcFooter/>
       <GNUAGPLfooter/>
     </BrowserRouter>
   )
-}
\ No newline at end of file
+}

src/Components/AboutResource.js

+import React from 'react';
+import {apiUrl} from '../env';
+import Paper from '@material-ui/core/Paper';
+import { withStyles } from '@material-ui/styles';
+import Typography from '@material-ui/core/Typography';
+import CardContent from '@material-ui/core/CardContent';
+import Collapse from '@material-ui/core/Collapse';
+import CardHeader from '@material-ui/core/CardHeader';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardActions from '@material-ui/core/CardActions';
+import Avatar from '@material-ui/core/Avatar';
+import IconButton from '@material-ui/core/IconButton';
+import { red } from '@material-ui/core/colors';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import ShareIcon from '@material-ui/icons/Share';
+import ReportIcon from '@material-ui/icons/Error';
+import AddIcon from '@material-ui/icons/CreateNewFolder';
+const contentStyle={
+  margin: "2% 15% 2% 15%",
+};
+export default function AboutResource() {
+
+  const [expanded, setExpanded] = React.useState(false);
+
+  function handleExpandClick() {
+    setExpanded(!expanded);
+  }
+
+  return (
+    <div>
+      <Paper style={contentStyle}>
+      <CardContent>
+        <Typography variant="h5" color="textSecondary" component="h3">
+        fICHA TÉCNICA
+        </Typography>
+        <div> tagsss </div>
+        <Typography component="p" color="textSecondary">
+        Paper can be used to build surface or other elements for your application.
+        </Typography>
+        <CardMedia
+        image="/static/images/cards/paella.jpg"/>
+        <CardActions style={{justifyContent: "space-between", fontSize: "0.7rem"}}>
+          <IconButton  aria-label="Reportar" size="small">
+            <ReportIcon />     REPORTAR          </IconButton>
+          <IconButton aria-label="Compartilhar">
+            <ShareIcon />   COMPARTILHAR          </IconButton>
+          <IconButton aria-label="Guardar">
+            <AddIcon />   GUARDAR          </IconButton>
+        </CardActions>
+    </CardContent>
+      </Paper>
+      <Paper style={contentStyle}>
+        <CardContent>
+          <Typography variant="h5" color="textSecondary" component="h3">
+          Sobre o Recurso
+          </Typography>
+          <Typography component="p" color="textSecondary">
+          Paper can be used to build surface or other elements for your application.
+          </Typography>
+      </CardContent>
+      <CardActions style={{borderTop:"1px solid #e5e5e5", justifyContent: "center"}}>
+        <IconButton
+          onClick={handleExpandClick}
+          aria-expanded={expanded}
+          aria-label="show more"
+          style={{fontSize: "1.2rem", padding: "0px"}}>
+          Ver Mais
+          <ExpandMoreIcon size="small"/>
+        </IconButton>
+      </CardActions>
+        <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent>
+          <Typography paragraph>Method:</Typography>
+          <Typography paragraph>
+            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
+            minutes.
+          </Typography>
+          <Typography paragraph>
+            Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
+            heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
+            browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken
+            and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and
+            pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add
+            saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
+          </Typography>
+          <Typography paragraph>
+            Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
+            without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
+            medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook
+            again without stirring, until mussels have opened and rice is just tender, 5 to 7
+            minutes more. (Discard any mussels that don’t open.)
+          </Typography>
+          <Typography>
+            Set aside off of the heat to let rest for 10 minutes, and then serve.
+          </Typography>
+        </CardContent>
+      </Collapse>
+      </Paper>
+    </div>
+  );
+}

src/Components/CollectionCard.js

@@ -91,6 +91,7 @@ class CollectionCard extends Component {
      <div className={this.state.userStyle}>
       <img style={slideStyle} src={this.state.userAvatar}/>
       <div style={publisherStyle}>Enviado por: <br/>{this.props.author}</div>
+      <div> tags </div>
      </div>
      <RenderThumbs thumbs={this.props.thumbnail}/>
      <div style={authorStyle}>

src/Components/ResourceCard.js

@@ -40,8 +40,7 @@ const slideStyle={
 const publisherStyle={
   color: "white",
   paddinLeft: "30px",
-  fontSize: "15px"
-
+  fontSize: "15px",
 };
 
 class ResourceCard extends Component {
@@ -85,7 +84,7 @@ class ResourceCard extends Component {
        <Container style={{padding:"0px", height:"175px", backgroundColor: "#ff7f00"}}>
          <div className={this.state.userStyle}>
           <img style={slideStyle} src={this.state.userAvatar}/>
-          <div style={publisherStyle}>Enviado por: <br/>{this.props.author}</div>
+          <Typography style={publisherStyle}>Enviado por: <br/>{this.props.author}</Typography>
          </div>
          <img  src={this.state.thumbnail} style={{height:"100%"}}alt="thumbnail do recurso"/>
        </Container>

src/Components/carousel.css

@@ -10,7 +10,7 @@
     bottom: 50% !important;
     border-radius: 100% !important;
     opacity: 0.8 !important;
-    padding: -10px !important;
+    padding: 12px !important;
 }
 .MuiPaper-elevation1-209{
   box-shadow: none !important;

src/Pages/ResourcePage.js

 import React, {Component} from 'react';
-
+import AboutResource from '../Components/AboutResource'
 
 class ResourcePage extends Component {
+  constructor(props){
+    super(props);
+
+  };
+
     render() {
       return (
-        <h1> Página visulizar Recurso</h1>
+        <AboutResource/>
       );
     }
   }