Adicionei titulos na tela de Mentoria

src/components/RedeHorarioCard/RedeHorarioCard.jsx

@@ -68,7 +68,7 @@ function RedeHorarioCard({ mentoria }) {
   return (
     <Container>
       <>
-        <RedeMarcarMentoria
+        <RedeMarcarMentoria 
           opened={open}
           image={`${urlFiles}/${mentoria.image}`}
           title={mentoria.title}

src/components/RedeHorarioCard/StyledComponents/Hours.jsx

 import styled from 'styled-components';
 
 const Hours = styled.div`
-    width: 75%;
+    width: 80%;
     display:flex;
     flex-wrap: wrap;
-    margin-left:12%;
     > button{
-        margin: 5px;
+        margin-top: 5px;
+        margin-bottom: 5px;
     }
 `;
 

src/components/RedeHorarioCard/StyledComponents/Label.jsx

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 const Label = styled.h2`
     margin: 0;
     display: flex;
-    font-size: 2vh;
+    font-size: 1em;
     justify-content: space-around;
-    width: 25%;
+    width: 20%;
     align-items: center;
 `;
 

src/pages/mentoria/Mentoria.jsx

@@ -5,16 +5,21 @@ import Caminho from '../mentorias/StyledComponents/Caminho';
 import CaminhoTitle from '../mentorias/StyledComponents/CaminhoTitle';
 import CaminhoTitleDesabilitado from '../mentorias/StyledComponents/CaminhoTitleDesabilitado';
 import CaminhoAp from '../mentorias/StyledComponents/CaminhoAp';
-import RedeHeader from '../../components/RedeHeader/RedeHeader';
 import Card from '../../components/RedeCard/RedeCard';
+import Title from './StyledComponents/Title';
+import Titles from './StyledComponents/Titles';
+import Subtitle from './StyledComponents/SubTitle';
+import Legend from './StyledComponents/Legend';
+import HeaderCard from './StyledComponents/HeaderCard';
 import RedeHorarioCard from '../../components/RedeHorarioCard/RedeHorarioCard';
+import RedeHorarioButton from '../../components/RedeHorarioButton/RedeHorarioButton';
 
 function Mentoria() {
   const [redirectTo, setRedirectTo] = useState('');
   const mentoria = JSON.parse(sessionStorage.getItem('mentoriaSelected'));
   const areaConhecimento = sessionStorage.getItem('areaSelected');
-  
-  //Http.put(`/mentoria/choice/${mentoria.idMentoria}`, data, headers);
+
+  // Http.put(`/mentoria/choice/${mentoria.idMentoria}`, data, headers);
 
   console.log(mentoria);
   return (redirectTo) ? <Redirect to={redirectTo} /> : (
@@ -26,13 +31,21 @@ function Mentoria() {
         <Caminho />
         <CaminhoTitle>{mentoria.title}</CaminhoTitle>
       </CaminhoAp>
-
       <Card
         mentoria={mentoria}
         mentorias
         todosHorarios
       />
-
+      <HeaderCard>
+        <Titles>
+          <Title> Horários e Datas</Title>
+          <Subtitle> Selecione um Horário disponível </Subtitle>
+        </Titles>
+        <Legend>
+          <RedeHorarioButton horario="Disponível"> </RedeHorarioButton>
+          <RedeHorarioButton ocupado desabilitado horario="Indisponível"> </RedeHorarioButton>
+        </Legend>
+      </HeaderCard>
       <RedeHorarioCard mentoria={mentoria} />
     </Container>
   );

src/pages/mentoria/StyledComponents/HeaderCard.jsx

+import styled from 'styled-components';
+const Subtitle = styled.div`
+display:flex;
+width:90%;
+margin-bottom:10px;
+justify-content:space-between;
+@media screen and (max-width:1000px){
+    width:85vw;
+}
+`;
+
+export default Subtitle;
\ No newline at end of file

src/pages/mentoria/StyledComponents/Legend.jsx

+import styled from 'styled-components';
+
+const Title = styled.div`
+    display:flex;
+    align-self:flex-end;
+    button + button{
+        margin-left: 15px;
+    }
+    button{
+        :hover{
+            cursor:initial;
+        }
+        
+    }
+`;
+
+export default Title;
\ No newline at end of file

src/pages/mentoria/StyledComponents/SubTitle.jsx

+import styled from 'styled-components';
+import COLORS from '../../../utils/colors.constants';
+const Subtitle = styled.h2`
+font-family: Roboto, sans-serif;
+font-size: 1em;
+color : ${COLORS.AZUL};
+`;
+
+export default Subtitle;
\ No newline at end of file

src/pages/mentoria/StyledComponents/Title.jsx

+import styled from 'styled-components';
+import COLORS from '../../../utils/colors.constants';
+const Title = styled.h1`
+font-family: Roboto, sans-serif;
+color : ${COLORS.AZUL};
+`;
+
+export default Title;
\ No newline at end of file

src/pages/mentoria/StyledComponents/Titles.jsx

+import styled from 'styled-components';
+const Titles = styled.div`
+display:Flex;
+flex-direction:column;
+padding: 0;
+margin:0;
+`;
+
+export default Titles;
\ No newline at end of file