Centralized the topic cards

src/Components/ExpandedMaterials.js

@@ -4,10 +4,10 @@ import styled from 'styled-components';
 import Chip from '@material-ui/core/Chip';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
-import ExpandedMaterialCard from './ExpandedMaterialCard';
+import TopicCard from './TopicCard';
 import Paper from '@material-ui/core/Paper';
 import Library from '@material-ui/icons/LibraryBooks';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -26,7 +26,7 @@ const ExpandedMaterial = (props) => {
     return (
         <Paper elevation={3} style={{ backgroundColor: "#444444", padding: "20px" }}>
             <Grid container direction="row" spacing={2}>
-                <Grid item direction="column" xs={4}>
+                <Grid item direction="column" xs={12} md={4}>
                     <Grid item>
                         <Title variant="body2">
                             {
@@ -61,8 +61,8 @@ const ExpandedMaterial = (props) => {
                         </StyledLink>
                     </Grid>
                 </Grid>
-                <Grid item direction="column" xs={8}>
-                    <Grid container direction="row" alignItems="center">
+                <Grid item direction="column" xs={12} md={8}>
+                    <Grid container direction="row">
                         <Library style={{ color: "White" }} />
                         <SizedWidthBox />
                         <Title>
@@ -70,23 +70,23 @@ const ExpandedMaterial = (props) => {
                         </Title>
                     </Grid>
                     <SizedHeightBox />
-                    <Grid container direction="row" spacing={3}>
+                    <Grid container direction="row" justify="center" alignItems="center" spacing={3}>
                         <Grid item md={4}>
-                            <ExpandedMaterialCard
-                                name={material.topics[0].pre_title + material.topics[0].title}
-                                thumb={material.topics[0].img}
+                            <TopicCard
+                                topic={material.topics[0]}
+                                colecao_id={material.id}
                             />
                         </Grid>
                         <Grid item md={4}>
-                            <ExpandedMaterialCard
-                                name={material.topics[1].pre_title + material.topics[1].title}
-                                thumb={material.topics[1].img}
+                            <TopicCard
+                                topic={material.topics[1]}
+                                colecao_id={material.id}
                             />
                         </Grid>
                         <Grid item md={4}>
-                            <ExpandedMaterialCard
-                                name={material.topics[2].pre_title + material.topics[2].title}
-                                thumb={material.topics[2].img}
+                            <TopicCard
+                                topic={material.topics[2]}
+                                colecao_id={material.id}
                             />
                         </Grid>
                     </Grid>