leireriel · irisparedes · Jun 5, 2019 · Jun 4, 2019 · Jun 4, 2019 · Jun 4, 2019
diff --git a/src/components/Footer/styles.scss b/src/components/Footer/styles.scss
@@ -3,13 +3,17 @@
 
 .container__footer {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  flex-direction: column;
+  border-top: 1px solid $colorborder;
   align-items: center;
+  padding: 10px 0;
   font-family: $defaultfont;
-  padding: 0 25px;
-  height: 70px;
-  border-top: 1px solid $colorborder;
+  @media all and (min-width: $bptablet){
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 25px;
+    height: 70px;
+  } 
 }
 
 .footer__nfq,

diff --git a/src/components/Header/styles.scss b/src/components/Header/styles.scss
@@ -3,11 +3,15 @@
 
 .container__header {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 89px;
   padding: 0 39px;
-  position: relative;
+  @media all and (min-width: $bptablet){
+    position: relative;
+    height: 97px;
+  }
 }
 
 .header__stackList {
@@ -25,9 +29,16 @@
 }
 
 .header__button-link {
-  text-decoration: none;
-  color: $colorblue;
-  position: absolute;
-  top: 27px;
-  left: 39px;
-}
+  padding: 0 0 40px 0;
+  @media all and (min-width: $bptablet){
+    text-decoration: none;
+    color: $colorblue;
+    position: absolute;
+    top: 27px;
+    left: 39px;
+  }
+}
+
+.header__link-image {
+  margin-right: 12px;
+}
diff --git a/src/components/Home/styles.scss b/src/components/Home/styles.scss
@@ -19,7 +19,10 @@
 }
 
 .header__home {
-  width: 372px;
+  width: 250px;
+  @media all and (min-width: $bptablet){
+    width: 372px;
+  }
 }
 
 .home__main {
@@ -33,11 +36,14 @@
 
 .home__title {
   font-family: $defaultfont;
-  font-size: 30px;
   color: $colorwhite;
   margin: 60px 30px 60px;
   text-align: center;
+  font-size: 25px;
   font-weight: normal;
+  @media all and (min-width: $bptablet){
+    font-size: 30px;
+  }
 }
 
 .info__btn {
@@ -72,15 +78,19 @@
 
 .home__btn {
   font-family: $defaultfont;
-  font-size: 33px;
-  width: 400px;
+  font-size: 23px;
+  width: 250px;
   color: $colorgrey;
   height: 70px;
   border-radius: 5px;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   cursor: pointer;
   background: $colorwhite;
   border: 0;
+  @media all and (min-width: $bptablet){
+    width: 400px;
+    font-size: 33px;
+  }
 }
 
 .home__btn:hover {

diff --git a/src/components/QuestionDetails/Answer/styles.scss b/src/components/QuestionDetails/Answer/styles.scss
@@ -1,4 +1,5 @@
 @import '../../../scss/colors';
+@import '../../../scss/variables';
 
 .MuiPaper-root.MuiPaper-elevation1.QuestionDetails-paperAnswer-7.MuiPaper-rounded {
   display: flex;
@@ -8,7 +9,10 @@
 .container__text {
   display: flex;
   flex-direction: row;
-  text-align: left;
+  text-align: center;
+  @media all and (min-width: $bptablet){
+    text-align: left;
+  }
 }
 
 .answer__heart {
@@ -33,8 +37,11 @@
 .container__user {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
+  align-items: center;
   color: $colorgrey;
+  @media all and (min-width: $bptablet){
+    align-items: flex-end;
+  }
 }
 
 .container__face {
@@ -52,6 +59,8 @@
   height: auto;
 }
 
-.answer__date  {
+.answer__date {
   margin: 0;
+  padding: 0 10px;
+  color: $colorgrey;
 }
diff --git a/src/components/QuestionDetails/Form/index.js b/src/components/QuestionDetails/Form/index.js
@@ -133,6 +133,7 @@ class Form extends Component {
 
 Form.propTypes = {
   classPaper: PropTypes.string.isRequired,
+  classButton: PropTypes.string.isRequired,
   updatedQuestion: PropTypes.func,
   questionItem: PropTypes.object
 };

diff --git a/src/components/StackList/Button/index.js b/src/components/StackList/Button/index.js
@@ -3,6 +3,7 @@ import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 import { withStyles, createMuiTheme } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
+import PropTypes from 'prop-types';
 
 const theme = createMuiTheme({
   palette: {
@@ -34,4 +35,9 @@ function FloatingActionButtons({ dialogueFunction, classes }) {
   );
 }
 
+FloatingActionButtons.propTypes = {
+  dialogueFunction: PropTypes.func,
+  classes: PropTypes.object.isRequired
+};
+
 export default withStyles(styles)(FloatingActionButtons);
diff --git a/src/components/StackList/Filter/index.js b/src/components/StackList/Filter/index.js
@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import Grid from '@material-ui/core/Grid';
+import PropTypes from 'prop-types';
 import './styles.scss';
 
 const useStyles = makeStyles(theme => ({
@@ -37,4 +38,8 @@ function Filter({handleInputValue}) {
   );
 }
 
+Filter.propTypes = {
+  handleInputValue: PropTypes.func
+};
+
 export default Filter;
diff --git a/src/components/StackList/Filter/styles.scss b/src/components/StackList/Filter/styles.scss
@@ -1,4 +1,6 @@
 @import '../../../scss/colors';
+@import '../../../scss/variables';
+
 
 .filter__wrapper {
   background-color: $colorlightgrey;
@@ -7,7 +9,18 @@
   justify-content: center;
   align-items: center;
   height: 100px;
-  padding: 0 30px;
+  padding: 0 20px;
+  @media all and (min-width: $bptablet){
+    padding: 0 auto;
+  }
+}
+
+.MuiInputBase-input.MuiInput-input{
+  margin: 0 20px;
+  max-width: 700px;
+  @media all and(min-width: $bptablet){
+    max-width: 950px;
+  }
 }
 
 .MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-1 {

diff --git a/src/components/StackList/QuestionContent/styles.scss b/src/components/StackList/QuestionContent/styles.scss
@@ -1,4 +1,6 @@
 @import '../../../scss/colors';
+@import '../../../scss/variables';
+
 
 .question__title {
   color: $colorgrey;
@@ -14,8 +16,15 @@
 .title__container,
 .subtitle__container {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  @media all and (min-width: $bptablet){
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    text-align: left;
+  }
 }
 
 .subtitle__container {
@@ -37,12 +46,16 @@
   list-style: none;
   padding: 0;
   margin: 0;
+  align-items: center;
 }
 
 .question__tags-list {
   display: flex;
+  justify-content: center;
+  padding: 15px 0;
+  flex-wrap: wrap;
   .question__tag {
-    margin-right: 10px;
+    margin: 5px;
     background-color: $colorblue;
     color: $colorwhite;
     padding: 5px 8px;
@@ -51,4 +64,4 @@
       margin-right: 0;
     }
   }
-}
+}
diff --git a/src/components/TeamInfo/Member/index.js b/src/components/TeamInfo/Member/index.js
@@ -23,7 +23,7 @@ const findClassIcon = iconName => {
   return classForIcon;
 };
 
-export default function Member({ member: { name, bio, links, img, role } }) {
+export default function Member({ member: { name, links, img, role } }) {
   return (
     <Fragment>
       <div className="member__image--container">

diff --git a/src/components/TeamInfo/styles.scss b/src/components/TeamInfo/styles.scss
@@ -33,11 +33,19 @@
   padding: 0;
   margin: 0;
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  align-self: center;
   height: 100%;
   align-items: flex-start;
   flex-grow: 1;
-  padding: 0 0 20px;
+  padding: 0 10px 20px;
+  @media all and (min-width: 1160px){
+    flex-direction: row;
+    padding: 0 20px;
+    justify-content: space-between;
+    max-width: 1300px;
+    max-height: 900px;
+  }
 }
 
 .member__item {
@@ -46,6 +54,7 @@
   justify-content: space-between;
   max-width: 200px;
   margin: 0 20px;
+  padding: 20px 0;
   &:nth-child(odd) {
     align-self: flex-end;
   }
@@ -55,6 +64,10 @@
   color: $colorblack;
   max-width: 800px;
   margin: 0 auto 50px;
-  font-size: 22px;
   line-height: 30px;
+  font-size: 18px;
+  padding:  0 50px;
+  @media all and (min-width: $bptablet){
+    font-size: 22px;
+  }
 }
diff --git a/src/data/dataMembers.js b/src/data/dataMembers.js
@@ -20,7 +20,7 @@ const dataMembers = [
   {
     name: 'Leire Rico',
     img: leireImg,
-    links: [{ name: 'github', src: 'https://github.com/leireriel' }, { name: 'linkedin', src: 'https://www.linkedin.com/in/leirerico/' }, { name: 'twitter', src: 'https://twitter.com/leireriel1?lang=es' }, { name: 'email', src: 'mailto:leirericop@gmail.com' }],
+    links: [{ name: 'github', src: 'https://github.com/leireriel' }, { name: 'linkedin', src: 'https://www.linkedin.com/in/leirerico/' }, { name: 'twitter', src: 'https://twitter.com/leireriel1' }, { name: 'email', src: 'mailto:leirericop@gmail.com' }],
     role: 'Responsable Comunicación con la empresa'
   },
   {

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -1,2 +1,3 @@
 $defaultfont: 'Roboto', sans-serif;
 $teamtfont: 'Playfair Display', serif;
+$bptablet: 768px;