update contacts page styles

src/views/ContactsPage/ContactsPageView.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import styled from "styled-components";
-import CommitteeContainer from "@components/CommitteeContainer";
 import { Divider, TextSection, Link } from "@components/index";
 import { colors } from "@theme/colors";
+import ContactCard from "@components/ContactCard";
 
 import BoardJson from "./board.json";
 import HvtmkJson from "./hvtmk.json";
@@ -15,6 +15,8 @@ import TtmkJson from "./ttmk.json";
 import UtmkJson from "./utmk.json";
 import YtmkJson from "./ytmk.json";
 
+const blank_profile = "/img/blank_profile.png";
+
 const BlueLink = styled(Link)`
   color: ${colors.blue1};
 
@@ -23,19 +25,59 @@ const BlueLink = styled(Link)`
   }
 `;
 
-export interface Committee {
+const Container = styled.div`
+  color: ${colors.darkBlue};
+
+  & > h2 {
+    text-transform: uppercase;
+    width: 100%;
+  }
+
+  & > div {
+    display: flex;
+    flex-flow: row wrap;
+  }
+`;
+
+const CommitteeContainer: React.FC<{
+  committee: Committee;
+}> = ({ committee, children }) => (
+  <Container>
+    <h2>
+      {committee.name_fi || committee.name_en}
+    </h2>
+    <div>
+      {committee.roles.map((role) => (
+        role.representatives.map((representative) => (
+          <ContactCard
+            key={representative.name}
+            name={representative.name}
+            phone={representative.phone_number}
+            email={representative.email}
+            image={(committee.name_en === "Board") ? (representative.image || blank_profile) : null}
+            role_fi={role.name_fi}
+            role_en={role.name_en}
+          />
+        ))
+      ))}
+    </div>
+    {children}
+  </Container>
+);
+
+interface Committee {
   name_fi: string;
   name_en: string;
   roles: Array<Role>;
 }
 
-export interface Role {
+interface Role {
   name_fi: string;
   name_en: string;
   representatives: Array<Representative>
 }
 
-export interface Representative {
+interface Representative {
   name: string;
   phone_number?: string;
   email?: string;
@@ -45,6 +87,7 @@ export interface Representative {
 const ContactsPageView: React.FC = () => (
   <>
     <TextSection>
+      <h1>Yhteystiedot</h1>
       <p>
         Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
         Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
@@ -52,87 +95,68 @@ const ContactsPageView: React.FC = () => (
     </TextSection>
 
     <TextSection>
-      <div>
-        <CommitteeContainer committee={BoardJson} />
+      <CommitteeContainer committee={BoardJson}>
         <p>
           {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
           <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
             hallitus@sahkoinsinoorikilta.fi
           </BlueLink>
         </p>
-      </div>
+      </CommitteeContainer>
     </TextSection>
 
     <Divider />
 
     <TextSection>
-      <div>
-        <CommitteeContainer committee={HvtmkJson} />
-      </div>
+      <CommitteeContainer committee={HvtmkJson} />
     </TextSection>
 
     <Divider />
 
     <TextSection>
-      <div>
-        <CommitteeContainer committee={MtmkJson} />
-      </div>
+      <CommitteeContainer committee={MtmkJson} />
     </TextSection>
 
     <Divider />
 
     <TextSection>
-      <div>
-        <CommitteeContainer committee={OptmkJson} />
-      </div>
+      <CommitteeContainer committee={OptmkJson} />
     </TextSection>
 
     <Divider />
 
     <TextSection>
-      <div>
-        <CommitteeContainer committee={OtmkJson} />
-      </div>
+      <CommitteeContainer committee={OtmkJson} />
     </TextSection>
 
     <Divider />
 
     <TextSection id="eptmk">
-      <div>
-        <CommitteeContainer committee={PtmkJson} />
-      </div>
+      <CommitteeContainer committee={PtmkJson} />
     </TextSection>
 
     <Divider />
 
     <TextSection>
-      <div>
-        <CommitteeContainer committee={SstmkJson} />
-      </div>
+      <CommitteeContainer committee={SstmkJson} />
     </TextSection>
 
     <Divider />
 
     <TextSection id="ttmk">
-      <div>
-        <CommitteeContainer committee={TtmkJson} />
-      </div>
+      <CommitteeContainer committee={TtmkJson} />
     </TextSection>
 
     <Divider />
 
     <TextSection>
-      <div>
-        <CommitteeContainer committee={UtmkJson} />
-      </div>
+      <CommitteeContainer committee={UtmkJson} />
     </TextSection>
 
     <Divider />
 
     <TextSection>
-      <div>
-        <CommitteeContainer committee={YtmkJson} />
-      </div>
+      <CommitteeContainer committee={YtmkJson} />
     </TextSection>
 
     <Divider />