Add level description component

This component has a progress bar for user's current XP;
TO-DO:
* [] add information from backend
DOING:
* [] list users achievements

src/Components/LevelDescriptionCard.js

+import React, { Component, useState, useEffect } from 'react';
+
+import {Container} from 'react-grid-system';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+
+import styled from 'styled-components'
+import ShinyProgressBar from './ShinyProgressBar.js'
+import { Grid } from '@material-ui/core'
+
+import axios from 'axios';
+import { apiUrl } from '../env';
+
+export default function LevelDescriptionCard(props) {
+
+  return (
+    <LevelDescDiv>
+      <Grid container direction="row" justify="space-between" alignItems="center">
+          <Grid item xs={6} md={4}>
+            <CurrentLevelNumber>
+              Nível 
+            </CurrentLevelNumber>
+            <CurrentLevelXP>
+              XP 4096
+            </CurrentLevelXP>
+          </Grid>
+          <Grid item xs={6} md={4} alignContent='flex-end'>
+            <CurrentCoins>
+              256 COINS
+            </CurrentCoins>
+            <NextLevelXP>
+              512 XP PARA O NÍVEL 32
+            </NextLevelXP>
+          </Grid>
+          <ShinyProgressBar percentage='66' />
+      </Grid>
+    </LevelDescDiv>
+  );
+}
+
+const NextLevelXP = styled.p`
+  text-align: right;
+  font-size: large;
+  font-weight: 500;
+  color: #575757;
+  margin-right: 30px;
+`
+
+const CurrentCoins = styled.p`
+  text-align: right;
+  font-size: x-large;
+  font-weight: 500;
+  color: #575757;
+  margin-right: 30px;
+`
+
+const CurrentLevelInfo = styled.div`
+  background-color: red;
+`
+const CurrentLevelNumber = styled.h1`
+  font-weight: 500;
+  font-size: 40px;
+  color: #646464;
+  margin-left: 30px;
+`
+
+const CurrentLevelXP = styled.h2`
+  font-size: x-large;
+  font-weight: 500;
+  color: #00A5B9;
+  margin-left: 30px;
+`
+
+const LevelDescDiv = styled.div`
+  margin: 20px;
+  padding: 20px;
+`
\ No newline at end of file

src/Components/ShinyProgressBar.js

+import React, {Component} from 'react';
+import {Container} from 'react-grid-system';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import styled from 'styled-components'
+
+
+export default function ShinyProgressBar(props) {
+    return (
+      <ProgressBar>
+        <ShinyFiller percentage={props.percentage}/>    
+      </ProgressBar>
+    );
+}
+
+const ShinyFiller = (props) => {
+    return (
+        <StyledFiller style={{ width: `${props.percentage}%` }}>
+            <FillerShine/>
+        </StyledFiller>
+    );
+}
+
+const FillerShine = (props) => {
+    return <StyledShine/>
+}
+
+const ProgressBar = styled.div`
+    background: #C4C4C4;
+    position: relative;
+    height: 30px;
+    width: 100%;
+    border-radius: 50px;
+    margin-left:20px;
+    margin-right:20px;
+`
+
+const StyledFiller = styled.div`
+    background: #02A4B9;
+    height: 100%;
+    border-radius: 50px;
+    transition: width 1s ease-in;
+`
+
+const StyledShine = styled.div`
+    position: relative;
+    top: 5px;
+    left: 15px;
+    background: #03C0CE;
+    height: 25%;
+    width: 95%;
+    border-radius: 50px;
+    transition: width 1s ease-in;
+    z-index: +1;
+`
\ No newline at end of file

src/Components/TabPanels/TabPanelStatusEConquistas.js

+import React, {useContext, useState, useEffect} from 'react'
+import styled from 'styled-components'
+import { Container } from 'react-grid-system'
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+import {ContainerDivStyled} 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 LevelDescriptionCard from '../LevelDescriptionCard.js'
+import AchievementDescriptionCard from '../AchievementDescriptionCard.js'
+
+export default function TabPanelStatusEConquistas (props) {
+    return (
+      <div>
+        <ContainerDivStyled>
+          <Paper elevation={3}>
+            <LevelDescriptionCard/>
+          </Paper>
+        </ContainerDivStyled>
+        <AchievementsContainer>
+          <AchievementsSectionTitle>
+            Conquistas
+          </AchievementsSectionTitle>
+        </AchievementsContainer>
+      </div>
+    );
+}
+
+const AchievementsSectionTitle = styled.h1`
+  font-weight: 400;
+`
+const AchievementsContainer = styled.div`
+  max-width : 1140px;
+  margin-left : auto;
+  margin-right : auto;
+  margin-left : 20em;
+  margin-bottom: 30px;
+  margin-top: 70px;
+`
\ No newline at end of file