FrontPage improvements and PageSection prop reducing

src/components/Divider.tsx

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+
+const Divider = styled.hr`
+  width: 98%;
+  border-color: ${colors.blue1};
+  margin: 0 auto;
+`;
+
+export default Divider;

src/components/PageSection/PageSection.tsx

@@ -1,22 +1,28 @@
 import React from "react";
 import styled from "styled-components";
-import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
-import { colors } from "@theme/colors";
+import { ColorDivProps } from "../ColorDiv/ColorDiv";
+import { ColorMapper } from "@theme/colors";
 
 interface PageSectionProps {
   center?: boolean;
-  bottomBorder?: boolean;
   cardSection?: boolean; // does section contain a grid of cards
   fullSize?: boolean;
 }
 
-const Section = styled(ColorDiv)<PageSectionProps>`
+const Section = styled.section<PageSectionProps>`
   display: flex;
   flex-flow: row wrap;
   justify-content: ${(p) => p.center ? "center" : "space-between"};
   position: relative;
   padding: ${(p) => p.fullSize ? 0 : "2rem 1rem 2rem"};
 
+  color: ${(p) => p.textColor};
+  background-color: ${(p) => p.backgroundColor};
+  &:hover {
+    color: ${(p) => p.hoverColor};
+    background-color: ${(p) => p.hoverBackgroundColor};
+  }
+
   .lander-hero {
     @media screen and (min-width: 800px) {
       min-height: 85vh;
@@ -28,23 +34,16 @@ const Section = styled(ColorDiv)<PageSectionProps>`
       flex-flow: column nowrap;
     }
   `}
-
-  ${(p) => p.bottomBorder ? `
-    &::after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      width: 98%;
-      left: 1%;
-      border-bottom: 1px solid rgba(${colors.blue1}, 0.4);
-    }
-  ` : ""}
 `;
 
-const PageSection: React.FC<PageSectionProps & ColorDivProps> = (props) => {
-  return (
-    <Section {...props} />
-  );
-}
+const PageSection: React.FC<PageSectionProps & ColorDivProps> = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => (
+  <Section
+    textColor={ColorMapper.get(textColor)}
+    backgroundColor={ColorMapper.get(backgroundColor)}
+    hoverColor={ColorMapper.get(hoverColor)}
+    hoverBackgroundColor={ColorMapper.get(backgroundHoverColor)}
+    {...props}
+  />
+);
 
 export default PageSection;

src/components/index.tsx

@@ -0,0 +1,8 @@
+export { default as Card } from "./Card";
+export { default as PageLink } from "./PageLink";
+export { default as Button } from "./Button";
+export { default as Ribbon } from "./Ribbon";
+export { default as SponsorReel } from "./SponsorReel";
+export { default as TextAnchor } from "./TextAnchor";
+export { default as PageSection } from "./PageSection";
+export { default as Divider } from "./Divider";

src/pages/FrontPage.tsx

@@ -78,8 +78,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
     const { events, feed } = this.state;
     return (
       <>
-        <Helmet>
-        </Helmet>
+        <Helmet />
         <FrontPageView events={events} feed={feed} />
       </>
     )

src/views/ContactsPage/ContactsPageView.tsx

@@ -4,12 +4,15 @@ import PageSection from "@components/PageSection";
 import { Occupation, Committee } from "@models/Contacts";
 import CommitteeContainer from "@components/CommitteeContainer";
 import TextAnchor from "@components/TextAnchor";
+import { Divider } from "@components/index";
 
 interface ContactsPageViewProps {
   contacts: Occupation[];
   committees: Committee[];
 }
 
+
+
 class ContactsPageView extends React.Component<ContactsPageViewProps> {
   render() {
     const { contacts, committees } = this.props;
@@ -22,7 +25,8 @@ class ContactsPageView extends React.Component<ContactsPageViewProps> {
             Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
           </p>
         </PageSection>
-        <PageSection backgroundColor="white1" textColor="dark-blue" bottomBorder center>
+
+        <PageSection backgroundColor="white1" textColor="dark-blue" center>
           <div>
             <CommitteeContainer name_fi="Hallitus" name_en="Board" contacts={board} />
             <p>
@@ -36,12 +40,16 @@ class ContactsPageView extends React.Component<ContactsPageViewProps> {
             </p>
           </div>
         </PageSection>
+        <Divider />
         {committees.map((committee, index) => {
           const order = committee.name_fi === "Toimikunnattomat" ? 1 : 0;
           return (
-            <PageSection key={index} style={{order}} backgroundColor="white1" 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>
+            <>
+              <PageSection key={index} style={{order}} backgroundColor="white1" 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>
+              <Divider />
+            </>
           )
         })}
       </div>

src/views/FrontPage/FrontPage.scss

@@ -1,7 +0,0 @@
-@import "../../assets/scss/globals";
-
-.front-page {
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: flex-start;
-}

src/views/FrontPage/FrontPageHero.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { PageSection, Button } from "@components/index";
+import HeroMainSection from "@components/Hero/HeroMainSection";
+import HeroAsideSection from "@components/Hero/HeroAsideSection";
+import HeroAsideItem from "@components/Hero/HeroAsideItem";
+
+const FrontPageHero: React.FC = () => (
+  <PageSection backgroundColor="dark-blue" fullSize className="lander-hero">
+    <HeroMainSection>
+      <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
+      <p>
+          on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta
+          kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa
+          vauhdilla sähköistyvän maailmamme kehityksessä.
+      </p>
+      <div className="hero-button-container">
+        <Button type="hero" onClick={() => { }}>
+          <h6>Killan tehtävät&nbsp;›</h6>
+        </Button>
+        <Button type="hero" onClick={() => { }}>
+          <h6>Vastapainoa opiskelulle&nbsp;›</h6>
+        </Button>
+      </div>
+    </HeroMainSection>
+    <HeroAsideSection textColor="light-blue" backgroundColor="dark-blue">
+      <HeroAsideItem
+        title="Vasta-aloittanut opiskelija"
+        linkHref="/kilta/fuksi"
+        linkText="Fuksit"
+      >
+          Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet.
+      </HeroAsideItem>
+      <HeroAsideItem
+        title="Harkitsetko uraa alalla?"
+        linkHref="/opinnot_ja_ura"
+        linkText="Opinnot ja ura"
+      >
+          Oletko abi, vaihtamassa uraa tai valmistumassa?
+      </HeroAsideItem>
+      <HeroAsideItem
+        title="Yhteistyö yritysten kanssa"
+        linkHref="/yritysyhteistyo"
+        linkText="Yritysyhteistyö"
+      >
+          Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja
+          sponsseille.
+      </HeroAsideItem>
+    </HeroAsideSection>
+  </PageSection>
+);
+
+export default FrontPageHero;

src/views/FrontPage/FrontPageView.tsx

@@ -1,131 +1,81 @@
 import React from "react";
-import "./FrontPage.scss";
-import Card from "@components/Card";
+import { PageSection, Card, PageLink, Button, Ribbon, SponsorReel, TextAnchor, Divider } from "@components/index";
+import FrontPageHero from "./FrontPageHero";
 import { Event } from "@models/Event";
 import { Post } from "@models/Feed";
 
-import PageSection from "@components/PageSection";
-
-import PageLink from "@components/PageLink/PageLink";
-import HeroMainSection from "@components/Hero/HeroMainSection";
-import HeroAsideSection from "@components/Hero/HeroAsideSection";
-import Button from "@components/Button";
-import Ribbon from "@components/Ribbon";
-import SponsorReel from "@components/SponsorReel";
-import HeroAsideItem from "@components/Hero/HeroAsideItem";
-import TextAnchor from "@components/TextAnchor";
-
 interface FrontPageViewProps {
   events: Event[];
   feed: Post[];
 }
 
 const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
-  <div className="front-page">
-    <PageSection backgroundColor="dark-blue" fullSize className="lander-hero">
-      <HeroMainSection>
-        <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
-        <p>
-              on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta
-              kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa
-              vauhdilla sähköistyvän maailmamme kehityksessä.
-        </p>
-        <div className="hero-button-container">
-          <Button type="hero" onClick={() => { }}>
-            <h6>Killan tehtävät&nbsp;›</h6>
-          </Button>
-          <Button type="hero" onClick={() => { }}>
-            <h6>Vastapainoa opiskelulle&nbsp;›</h6>
-          </Button>
-        </div>
-      </HeroMainSection>
-      <HeroAsideSection textColor="light-blue" backgroundColor="dark-blue">
-        <HeroAsideItem
-          title="Vasta-aloittanut opiskelija"
-          linkHref="/kilta/fuksi"
-          linkText="Fuksit"
-        >
-              Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet.
-        </HeroAsideItem>
-        <HeroAsideItem
-          title="Harkitsetko uraa alalla?"
-          linkHref="/opinnot_ja_ura"
-          linkText="Opinnot ja ura"
-        >
-              Oletko abi, vaihtamassa uraa tai valmistumassa?
-        </HeroAsideItem>
-        <HeroAsideItem
-          title="Yhteistyö yritysten kanssa"
-          linkHref="/yritysyhteistyo"
-          linkText="Yritysyhteistyö"
-        >
-              Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja
-              sponsseille.
-        </HeroAsideItem>
-      </HeroAsideSection>
-    </PageSection>
-    <PageSection backgroundColor="white1" cardSection>
-      {events.map(event => (
-        <Card
-          key={event.id}
-          title={event.title_fi}
-          start_time={event.start_time}
-          text={event.description_fi}
-          link={`/events/${event.id}`}
-          image={event.image || event.tags[0].icon}
-          button={
-            <Button type="filled" onClick={() => { }}>
-              <h6>Lue lisää&nbsp;›</h6>
-            </Button>
-          }
-        />
-      ))}
-      <div className="card" key="links">
-        <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
+  <>
+    <FrontPageHero />
+    <main>
+      <PageSection backgroundColor="white1" cardSection>
+        {events.map(event => (
+          <Card
+            key={event.id}
+            title={event.title_fi}
+            start_time={event.start_time}
+            text={event.description_fi}
+            link={`/events/${event.id}`}
+            image={event.image || event.tags[0].icon}
+            button={
+              <Button type="filled" onClick={() => { }}>
+                <h6>Lue lisää&nbsp;›</h6>
+              </Button>
+            }
+          />
+        ))}
+        <div className="card" key="links">
+          <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
               Kaikki tapahtumat
-        </PageLink>
-      </div>
-    </PageSection>
-    <PageSection backgroundColor="orange1">
-      <Ribbon>
-        <h3>Sössöä vuodesta 1969.</h3>
-        <TextAnchor textColor="white1" hoverColor="blue1" to="https://sosso.fi">
-          <h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
-        </TextAnchor>
-      </Ribbon>
-    </PageSection>
-    <PageSection
-      backgroundColor="white1"
-      bottomBorder
-      cardSection
-    >
-      {feed.map(inst => (
-        <Card
-          key={inst.id}
-          title={inst.title_fi}
-          start_time={inst.publish_time}
-          text={inst.description_fi}
-          link={`/feed/${inst.id}`}
-          button={
-            <Button type="filled" onClick={() => { }}>
-              <h6>Lue lisää&nbsp;›</h6>
-            </Button>
-          }
-        />
-      ))}
-      <div className="card" key="links">
-        <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
+          </PageLink>
+        </div>
+      </PageSection>
+      <PageSection backgroundColor="orange1">
+        <Ribbon>
+          <h3>Sössöä vuodesta 1969.</h3>
+          <TextAnchor textColor="white1" hoverColor="blue1" to="https://sosso.fi">
+            <h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
+          </TextAnchor>
+        </Ribbon>
+      </PageSection>
+      <PageSection
+        backgroundColor="white1"
+        cardSection
+      >
+        {feed.map(inst => (
+          <Card
+            key={inst.id}
+            title={inst.title_fi}
+            start_time={inst.publish_time}
+            text={inst.description_fi}
+            link={`/feed/${inst.id}`}
+            button={
+              <Button type="filled" onClick={() => { }}>
+                <h6>Lue lisää&nbsp;›</h6>
+              </Button>
+            }
+          />
+        ))}
+        <div className="card" key="links">
+          <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
               Lue tuoreimmat uutiset
-        </PageLink>
-        <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
+          </PageLink>
+          <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
               Kuvia tapahtumista
-        </PageLink>
-      </div>
-    </PageSection>
-    <PageSection center backgroundColor="white1">
-      <SponsorReel />
-    </PageSection>
-  </div>
+          </PageLink>
+        </div>
+      </PageSection>
+      <PageSection center backgroundColor="white1">
+        <Divider />
+        <SponsorReel />
+      </PageSection>
+    </main>
+  </>
 )
 
 export default FrontPageView;