Improve contacts page layout

src/components/CommitteeContainer/CommitteeContainer.scss

@@ -6,6 +6,15 @@
   justify-content: flex-start;
   color: color('dark-blue');
 
+  .committee-name {
+    display: flex;
+    justify-content: center;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    line-height: 14px;
+    font-weight: bold;
+  }
+
   &__contacts {
     display: flex;
     flex-flow: row wrap;

src/components/CommitteeContainer/CommitteeContainer.tsx

@@ -15,10 +15,10 @@ class CommitteeContainer extends React.Component<CommitteeContainerProps, Commit
     const { name_fi, name_en, contacts } = this.props;
     return (
       <div className="committee-container">
-        <div>
+        <div className="committee-name">
           {name_fi}
         </div>
-        <div>
+        <div className="committee-name">
           {name_en}
         </div>
         <div className="committee-container__contacts">

src/components/ContactCard/ContactCard.scss

@@ -7,6 +7,14 @@
   color: color(dark-blue);
   margin: 1rem 1rem;
 
+  &__notBoard {
+    order: 1;
+  }
+
+  &__chair {
+    order: -1;
+  }
+
   &__info {
     display: flex;
     flex-direction: column;

src/components/ContactCard/ContactCard.tsx

@@ -16,8 +16,14 @@ export interface ContactCardState { }
 class ContactCard extends React.Component<ContactCardProps, ContactCardState> {
   render() {
     const { first_name, last_name, phone, email, image, role } = this.props;
+    let className = "contact-card"
+    if (!role.is_board) {
+      className += " contact-card__notBoard"
+    } else if (role.name_fi === "Puheenjohtaja") {
+      className += " contact-card__chair"
+    }
     return (
-      <div className="contact-card">
+      <div className={className}>
         <div className="contact-card__image__container">
           <img className="contact-card__image" src={image ? image : blank_profile} alt="profile_image" />
         </div>

src/pages/ContactsPage/ContactsPage.tsx

@@ -82,29 +82,32 @@ class ContactsPage extends React.Component<ContactsPageProps, ContactsPageState>
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
         </Helmet>
-        <PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.DarkBlue}>
+        <PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.DarkBlue} center>
           <p>
             Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
             Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
           </p>
         </PageSection>
-        <PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.DarkBlue} bottomBorder>
+        <PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.DarkBlue} bottomBorder center>
           <div>
             <CommitteeContainer name_fi="Hallitus" name_en="Board" contacts={board} />
             <p>
               Hallitukseen saa yhteyden lähettämällä sähköpostia <Anchor
-                className={`${getColor(ColorEnum.DarkBlue)} ${getHoverColor(ColorEnum.LightBlue)}`}
+                className={`${getColor(ColorEnum.Blue)} ${getHoverColor(ColorEnum.LightBlue)}`}
                 to="mailto:sik-hallitus@list.ayy.fi">
                 sik-hallitus@list.ayy.fi
             </Anchor>
             </p>
           </div>
         </PageSection>
-        {committees.map((committee, index) => (
-          <PageSection key={index} backgroundColor={ColorEnum.White}>
-            <CommitteeContainer name_fi={committee.name_fi} name_en={committee.name_en} contacts={contacts.filter(x => x.role.committee.name_fi === committee.name_fi)} />
-          </PageSection>
-        ))}
+        {committees.map((committee, index) => {
+          const order = committee.name_fi === "Toimikunnattomat" ? 1 : 0;
+          return (
+            <PageSection key={index} style={{order}} backgroundColor={ColorEnum.White} center>
+              <CommitteeContainer name_fi={committee.name_fi} name_en={committee.name_en} contacts={contacts.filter(x => x.role.committee.name_fi === committee.name_fi)} />
+            </PageSection>
+          )
+        })}
       </div>
     );
   }