Merge pull request #34 from 2020-1-RDM/fix-text-todosHorarios

Fix text todos horarios

src/components/RedeHorarioCard/RedeHorarioCard.jsx

@@ -26,6 +26,14 @@ function RedeHorarioCard({ mentoria }) {
     .sort((dateTimeA, dateTimeB) => dateTimeA.dayOfTheMonth.split('/')[1] - dateTimeB.dayOfTheMonth.split('/')[1]);
 
   const timeInformation = sortedTimes.map((dt) => {
+    // Quebra o dia onde tiver a string /, e tira os espaços em branco
+    let dayOfTheMonth = dt.dayOfTheMonth.replace(/ /g, '').split('/');
+    // Loop dentro da data, se encontrar algum numero com tamanho 1, significa que precisa colocar o 0
+    // Por ex, mês 8 tem tamanho 1, precisa ficar 08
+    for (let i = 0; i < 2; i += 1) if (dayOfTheMonth[i].length === 1) dayOfTheMonth[i] = `0${dayOfTheMonth[i]}`;
+    // Junta o array, separando por /
+    dayOfTheMonth = dayOfTheMonth.join('/');
+
     // eslint-disable-next-line max-len
     const hours = dt.times.map((time) => (
       <RedeHorarioButton
@@ -40,10 +48,9 @@ function RedeHorarioCard({ mentoria }) {
       />
     ));
 
-
     return (
       <Details>
-        <Label>{dt.dayOfTheMonth}</Label>
+        <Label>{dayOfTheMonth}</Label>
         <Hours>
           {hours}
         </Hours>
@@ -80,9 +87,9 @@ function RedeHorarioCard({ mentoria }) {
           onConfirm={(evt) => onConfirm(evt)}
         />
       </>
-      <Details style={{ borderBottom: 'none' }}>
-        <Label>Data</Label>
-        <Label>Hora</Label>
+      <Details style={{ borderBottom: 'none', marginBottom: '15px', paddingTop: '10px' }}>
+        <Label>Datas</Label>
+        <Label style={{ width: '30%' }}>Horários</Label>
       </Details>
       {timeInformation}
     </Container>

src/components/RedeHorarioCard/StyledComponents/Details.jsx

@@ -4,8 +4,8 @@ import Color from '../../../utils/colors.constants';
 const Details = styled.div`
 width: 100%;
 display:flex;
-justify-content: left;
 border-bottom: 2px solid ${Color.AZUL_CLARO};
+
 `;
 
 export default Details;

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: 7px;
+        margin-bottom: 2px;
+        padding: 7px 30px;
+        font-size: 0.8em;
     }
 `;
 

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/components/RedeHorarioCard/StyledComponents/index.jsx

@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import Color from '../../../utils/colors.constants';
 
 const Container = styled.div`
+    color: ${Color.AZUL};
+    font-size: 1.3em;
     border: 3px solid ${Color.AZUL};
     border-radius: 10px;
     opacity: 1;
@@ -10,6 +12,7 @@ const Container = styled.div`
     width: 80%;
     padding-left: 5%;
     padding-right: 5%;
+    padding-bottom:2%;
     min-height: 210px;
     height:auto;
     margin-bottom: 50px;

src/pages/mentoria/Mentoria.jsx

@@ -6,7 +6,13 @@ import CaminhoTitle from '../mentorias/StyledComponents/CaminhoTitle';
 import CaminhoTitleDesabilitado from '../mentorias/StyledComponents/CaminhoTitleDesabilitado';
 import CaminhoAp from '../mentorias/StyledComponents/CaminhoAp';
 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('');
@@ -25,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: 20px;
+        
+    }
+    button{
+        padding: 7px 12px;
+        :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: 0.8em;
+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