update contacts page styles

src/components/CommitteeContainer.tsx

@@ -1,60 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { Committee } from "@views/ContactsPage/ContactsPageView";
-import { colors } from "@theme/colors";
-import ContactCard from "./ContactCard";
-
-const blank_profile = "/img/blank_profile.png";
-
-interface CommitteeContainerProps {
-  committee: Committee;
-}
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  color: ${colors.darkBlue};
-
-  & > p {
-    display: flex;
-    justify-content: center;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    line-height: 0.75;
-    font-weight: bold;
-  }
-
-  & > div {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-  }
-`;
-
-const CommitteeContainer: React.FC<CommitteeContainerProps> = ({ committee }) => (
-  <Container>
-    <p>
-      {committee.name_fi || committee.name_en}
-    </p>
-    <div>
-      {committee.roles.map((role) => (
-        role.representatives.map((representative) => (
-          <ContactCard
-            key={representative.name}
-            name={representative.name}
-            phone={representative.phone_number}
-            email={representative.email}
-            // conditional image for dev
-            image={(committee.name_en === "Board") ? (representative.image || blank_profile) : null}
-            role_fi={role.name_fi}
-            role_en={role.name_en}
-          />
-        ))
-      ))}
-    </div>
-  </Container>
-);
-
-export default CommitteeContainer;

src/components/ContactCard.tsx

@@ -5,17 +5,20 @@ import { colors } from "@theme/colors";
 
 const Card = styled.article`
   display: flex;
-  align-items: flex-start;
-  flex-flow: row nowrap;
+  justify-content: space-between;
+  flex: 1 0 50%;
   padding: 0.5rem;
   color: ${colors.darkBlue};
-  width: 19rem;
+`;
+
+const Row = styled.div`
+  display: flex;
+  flex-flow: row nowrap;
 `;
 
 const ImageContainer = styled.div`
   position: relative;
   display: flex;
-  flex-shrink: 0;
   justify-content: center;
   align-items: center;
   height: 5rem;
@@ -39,7 +42,7 @@ const Info = styled.div`
     margin: 0;
   }
 
-  & > h1 {
+  & > h3 {
     font-size: 0.9rem;
     font-weight: 500;
   }
@@ -58,22 +61,24 @@ const ContactCard: React.FC<ContactCardProps> = ({
   name, phone, email, image, role_fi, role_en,
 }) => (
   <Card>
-    {image ? (
-      <ImageContainer>
-        <Image
-          src={image}
-          alt={name}
-          layout="fill"
-          objectFit="scale-down"
-        />
-      </ImageContainer>
-    ) : null}
-    <Info>
-      <h1>{name}</h1>
-      <p>{role_fi || role_en}</p>
-      {phone ? <p>{phone}</p> : null}
-      {email ? <p>{email}</p> : null}
-    </Info>
+    <Row>
+      {image ? (
+        <ImageContainer>
+          <Image
+            src={image}
+            alt={name}
+            layout="fill"
+            objectFit="scale-down"
+          />
+        </ImageContainer>
+      ) : null}
+      <Info>
+        <h3>{name}</h3>
+        <p>{role_fi || role_en}</p>
+        {phone ? <p>{phone}</p> : null}
+        {email ? <p>{email}</p> : null}
+      </Info>
+    </Row>
   </Card>
 );
 

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 />