Add Paper component

src/Components/ExpandedMaterials.js

 import React from 'react';
-import { Typography } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
 import styled from 'styled-components';
 import Chip from '@material-ui/core/Chip';
 import Grid from '@material-ui/core/Grid';
-import { Container } from "react-grid-system";
+import Button from '@material-ui/core/Button';
+import ExpandedMaterialCard from './ExpandedMaterialCard';
+import Paper from '@material-ui/core/Paper';
+import Library from '@material-ui/icons/LibraryBooks';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -21,8 +23,8 @@ const ExpandedMaterial = (props) => {
     const classes = useStyles();
 
     return (
-        <Container style={{ backgroundColor: "#444444", padding : "20px" }}>
-            <Grid container direction="row">
+        <Paper elevation={3} style={{ backgroundColor: "#444444", padding: "20px" }}>
+            <Grid container direction="row" spacing={2}>
                 <Grid item direction="column" xs={4}>
                     <Grid item>
                         <Title variant="body2">
@@ -31,30 +33,63 @@ const ExpandedMaterial = (props) => {
                             }
                         </Title>
                     </Grid>
+                    <SizedHeightBox />
                     <Grid item>
                         <ChipsDiv className={classes.root}>
                             {
                                 material.tags.map((tag, index) => {
                                     return (
-                                        <Chip color="default" label={tag.name} key={index} style={{padding : "0.5px"}} />
+                                        <Chip color="default" label={tag.name} key={index} style={{ padding: "0.5px" }} />
                                     )
                                 })
                             }
                         </ChipsDiv>
                     </Grid>
-                    <div>
-                        <DevelopedTypo>
-                            Desenvolvido por: 
-                        </DevelopedTypo>
-                        <DevelopedSpan>
+                    <SizedHeightBox2 />
+                    <Grid item direction="column" style={{ color: '#E5E7E9', fontWeight: "500" }}>
+                        <DevelopedByDiv>
                             {
-                                material.developed
+                                `Desenvolvido por: ${material.developed}`
                             }
-                        </DevelopedSpan>
-                    </div>
+                        </DevelopedByDiv>
+                        <SizedHeightBox3 />
+                        <Button variant="contained" color="secondary">
+                            Ver todos
+                        </Button>
+                    </Grid>
+                </Grid>
+                <Grid item direction="column" xs={8}>
+                    <Grid container direction="row" alignItems="center">
+                        <Library style={{ color: "White" }} />
+                        <SizedWidthBox />
+                        <Title>
+                            {material.topics.length} módulos
+                        </Title>
+                    </Grid>
+                    <SizedHeightBox />
+                    <Grid container direction="row" spacing={3}>
+                        {/* <Grid item md={3}>
+                            <ExpandedMaterialCard
+                                name={material.topics[1].pre_title + material.topics[1].title}
+                                thumb={material.topics[1].img}
+                            />
+                        </Grid> */}
+                        {
+                            material.topics.map((material, index) => {
+                                return (
+                                    <Grid item key={index} md={4}>
+                                        <ExpandedMaterialCard
+                                            name={material.pre_title + material.title}
+                                            thumb={material.img}
+                                        />
+                                    </Grid>
+                                )
+                            })
+                        }
+                    </Grid>
                 </Grid>
             </Grid>
-        </Container>
+        </Paper>
     );
 }
 
@@ -64,21 +99,23 @@ const Title = styled.h3`
     padding : 0; 
     margin  : 0; 
 `
+const DevelopedByDiv = styled.div`
+`
 
 const ChipsDiv = styled.div`
     margin-left : -5px;
 `
-
-const DevelopedSpan = styled.span`
-    color : white;
-    opacity : 0.9;    
-
+const SizedHeightBox = styled.div`    
+    height : 3em;
 `
-
-const DevelopedTypo = styled(Typography)`
-    color : white;
-    font-weight: bold;
+const SizedHeightBox2 = styled.div`    
+    height : 2em;
+`
+const SizedHeightBox3 = styled.div`    
+    height : 0.5em;
+`
+const SizedWidthBox = styled.div`
+  width : 5px;
 `
-
 
 export default ExpandedMaterial;
\ No newline at end of file