Merge branch 'master' into 'production'

master -> prod contacts page update

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!100

src/components/ContactCard.tsx

@@ -18,8 +18,8 @@ const Row = styled.div`
 
 const ImageContainer = styled.div`
   position: relative;
-  height: 150px;
-  width: 150px;
+  height: 125px;
+  width: 125px;
   flex-shrink: 0;
 
   img {
@@ -33,17 +33,17 @@ const Info = styled.div`
   flex-direction: column;
   align-items: flex-start;
   margin-left: -20px;
-  min-width: 225px;
+  min-width: 150px;
   padding: 2rem;
   color: ${colors.darkBlue};
 
   & > p {
-    font-size: 1.1rem;
+    font-size: 1.0rem;
     margin: 0;
   }
 
   & > h3 {
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     font-weight: 500;
   }
 `;

src/views/ContactsPage/ContactsPageView.tsx

@@ -70,9 +70,13 @@ const Index: React.FC<{ committees: typeof orderedCommittees }> = ({ committees
 
 const Container = styled.div`
   color: ${colors.darkBlue};
+  align-items: center;
+  justify-content: center;
+  width: 50vw;
 
   & > h2 {
     text-transform: uppercase;
+    font-size: 4rem;
     width: 100%;
   }
 
@@ -80,15 +84,39 @@ const Container = styled.div`
     display: flex;
     flex-flow: row wrap;
   }
+
+  @media (max-width: 950px) {
+    width: 100vw;
+  }
+`;
+
+const ContactContainer = styled.div`
+  margin-top: -13rem;
+  overflow-x: hidden;
+  @media (max-width: 950px) {
+    margin-top: 0;
+  }
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 10px;
+  flex-direction: column;
+  margin: auto;
 `;
 
 const CommitteeContainer: React.FC<{
   committee: Committee;
 }> = ({ committee, children }) => (
   <Container>
+    <TitleContainer>
       <h2>
         {committee.name_fi || committee.name_en}
       </h2>
+    </TitleContainer>
     <div>
       {committee.roles.map((role) => (
         role.representatives.map((representative) => (
@@ -143,6 +171,7 @@ const ContactsPageView: React.FC = () => (
         </div>
       </aside>
     </TextSection>
+    <ContactContainer>
 
       {orderedCommittees.map((json) => (
         <React.Fragment key={json.slug}>
@@ -164,7 +193,9 @@ const ContactsPageView: React.FC = () => (
           </TextSection>
         </React.Fragment>
       ))}
+    </ContactContainer>
   </>
 );
 
+
 export default ContactsPageView;