FrontPage rewrite, seems ok

src/components/Card.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+import Anchor from "@components/Anchor";
+
+interface WrappedCardProps {
+  title: string;
+  start_time: string;
+  text: string;
+  link: string;
+  image?: string;
+  imageAlt?: string;
+  buttonOnClick?: () => void;
+}
+
+interface CardProps {
+  title: string;
+  start_time: string;
+  text: string;
+  img: JSX.Element;
+  button: JSX.Element;
+}
+
+const StyledCard = styled.article`
+  color: ${colors.black};
+  margin: 1rem;
+  text-align: center;
+
+  img {
+    width: 100%;
+    max-height: 300px;
+    margin-bottom: 1rem;
+  }
+
+  p {
+    font-size: 16px;
+    text-overflow: ellipsis;
+    margin: 0 0 0.5rem;
+    font-weight: 200;
+    line-height: 22px;
+  }
+
+  p:first-of-type {
+    color: ${colors.orange1};
+    font-size: 0.9rem !important;
+    font-weight: 600 !important;
+
+    @media screen and (max-width: 1200px) {
+      margin: 0.5rem 0;
+      font-size: 16px;
+    }
+  }
+
+
+  h3 {
+    padding: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 300;
+  }
+
+  button {
+    cursor: pointer;
+
+    padding: 0.8rem 2rem;
+    margin: 0.5rem;
+    font-size: 13px;
+    background: none;
+    text-transform: uppercase;
+    background-color: ${colors.blue1};
+    color: ${colors.white};
+    font-weight: 800;
+    letter-spacing: 1.5px;
+    border: none;
+  }
+`;
+
+const Card: React.FC<CardProps> = ({ title, start_time, text, img, button }) => (
+  <StyledCard>
+    {img}
+    <p>{start_time}</p>
+    <h3>{title}</h3>
+    <p>{text}</p>
+    {button}
+  </StyledCard>
+);
+
+const WrappedCard: React.FC<WrappedCardProps> = ({ title, text, link, image, imageAlt, start_time, buttonOnClick }) => {
+  const options = {
+    day: "numeric",
+    month: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  };
+  const datetime = new Date(start_time).toLocaleString("fi-FI", options);
+  const img = image ? (
+    <img src={image} alt={imageAlt} />
+  ) : null;
+
+  const button = (
+    <Anchor to={link}>
+      <button onClick={buttonOnClick}>
+      Lue lisää&nbsp;›
+      </button>
+    </Anchor>
+  );
+
+  return (
+    <Card
+      title={title}
+      start_time={datetime}
+      text={text}
+      img={img}
+      button={button}
+    />
+  );
+}
+
+export default WrappedCard;

src/components/Card/index.ts

@@ -1,2 +0,0 @@
-import Card from "./Card";
-export default Card;

src/components/Footer/Footer.tsx

@@ -30,23 +30,46 @@ const StyledFooter = styled.footer`
 
 const Content = styled.div`
   display: flex;
-  & > div {
-    flex: 2;
+
+  & > div:first-of-type {
     padding: 48px 0;
+    flex: 2 1;
 
-    h4 {
-      color: ${colors.lightBlue};
-      padding: 24px 0;
-    }
-
-    & > div {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+    & > * {
+      padding: 0 24px;
     }
   }
+
+  h4 {
+    color: ${colors.lightBlue};
+    padding: 24px 0;
+  }
 `;
 
+const MarginSpace = styled.div`
+  max-width: 600px;
+  margin: auto;
+`;
+
+const Columns = styled.div`
+  display: flex;
+  justify-content: space-between;
+  & > div > div {
+    margin-bottom: 1rem;
+  }
+`;
+
+const Map = styled.div`
+  flex: 1;
+  @media screen and (max-width: 600px) {
+    display: none;
+  }
+  iframe {
+    border: none;
+  }
+`;
+
+
 const CopyRight = styled.div`
   display: flex;
   flex-flow: row nowrap;
@@ -60,50 +83,47 @@ const CopyRight = styled.div`
     padding: 0.5rem 1rem;
   }
 
-  @media screen and (max-width: 600px - 1px) {
+  @media screen and (max-width: 600px) {
     flex-flow: column nowrap;
   }
 `;
 
-const Map = styled.iframe`
-  border: none;
-  flex: 1;
-
-  @media screen and (max-width: 1200px - 1px) {
-    display: none;
-  }
-`;
-
 const Footer: React.FC = () => (
   <StyledFooter>
     <Content>
       <div>
-        <h4>Aalto-yliopiston Sähköinsinöörikilta ry</h4>
-        <div>
-          <div>
-            <p>TUAS-Talo</p>
-            <p>Maarintie 8</p>
-            <p>PL 15500, 00076 Aalto</p>
-            <br></br>
-            <br></br>
-            <p>Y-tunnus: 1627010-1</p>
-            <p>sik-hallitus@list.ayy.fi</p>
-            <Anchor to="/yhteystiedot">Yhteystiedot</Anchor>
-          </div>
-
-          <div>
-            <Anchor to="/jaseneksi">Jäseneksi</Anchor>
-            <Anchor to="/palaute">Palaute</Anchor>
-            <Anchor to="https://static.sika.sik.party">Arkisto</Anchor>
-            <Anchor to="https://static.sika.sik.party">Materiaalipankki</Anchor>
-          </div>
-        </div>
+        <MarginSpace>
+          <h4>Aalto-yliopiston Sähköinsinöörikilta ry</h4>
+          <Columns>
+            <div>
+              <div>
+                <p>TUAS-Talo</p>
+                <p>Maarintie 8</p>
+                <p>PL 15500, 00076 Aalto</p>
+              </div>
+              <div>
+                <p>Y-tunnus: 1627010-1</p>
+                <p>sik-hallitus@list.ayy.fi</p>
+                <Anchor to="/yhteystiedot">Yhteystiedot</Anchor>
+              </div>
+            </div>
+            <div>
+              <Anchor to="/jaseneksi">Jäseneksi</Anchor>
+              <Anchor to="/palaute">Palaute</Anchor>
+              <Anchor to="https://static.sika.sik.party">Arkisto</Anchor>
+              <Anchor to="https://static.sika.sik.party">Materiaalipankki</Anchor>
+            </div>
+          </Columns>
+        </MarginSpace>
       </div>
-      <Map
-        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
-        width="600"
-        height="350"
-      />
+      <Map>
+        <iframe
+          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
+          width="100%"
+          height="100%"
+        />
+      </Map>
+
     </Content>
     <CopyRight>
       <p>&copy; Aalto-yliopiston Sähköinsinöörikilta ry</p>

src/pages/CommonPage.tsx

@@ -11,11 +11,11 @@ class CommonPage extends React.Component<CommonPageProps, CommonPageState> {
   render() {
     const Page = this.props.page;
     return (
-      <React.Fragment>
+      <>
         <Header />
         <Page {...this.props} />
         <Footer />
-      </React.Fragment>
+      </>
     );
   }
 }

src/pages/admin/AdminCommonPage.scss

@@ -3,6 +3,7 @@
 
 .admin-container {
   display: flex;
+  background-color: color(dark-blue);
   flex-flow: row nowrap;
   justify-content: flex-start;
   align-items: flex-start;

src/views/ActualPage/EventCalendar.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Event } from "@models/Event";
-import Card from "@components/Card";
+import Card from "@components/Card/Card";
 import Button from "@components/Button";
 import PageSection from "@components/PageSection";
 

src/views/ActualPage/News.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Post } from "@models/Feed";
-import Card from "@components/Card";
+import Card from "@components/Card/Card";
 import Button from "@components/Button";
 import PageSection from "@components/PageSection";
 

src/views/FrontPage/FrontPageHero.tsx

@@ -5,7 +5,7 @@ import { colors } from "@theme/colors";
 import Anchor from "@components/Anchor";
 
 const HeroSection = styled(PageSection)`
-  padding: 0;
+  padding: 0 1rem;
   @media screen and (min-width: 800px) {
     min-height: 85vh;
   }
@@ -30,6 +30,8 @@ const MainSection = styled.section`
       min-width: 20%;
       max-width: fit-content;
       margin: auto;
+      display: flex;
+      flex-direction: column;
     }
 
     h1 {
@@ -49,7 +51,6 @@ const MainSection = styled.section`
 
 const HeroButton = styled.button`
   display: block;
-  width: 100%;
   color: ${colors.blue1};
   background-color: transparent;
   padding: 0.8rem 2rem;
@@ -72,7 +73,7 @@ const HeroButton = styled.button`
 
 const AsideSection = styled.aside`
   flex: 4;
-  padding: 3rem 1rem 2rem;
+  padding: 3rem 0rem 2rem;
 `;
 
 const AsideItem = styled.article`

src/views/FrontPage/FrontPageView.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { PageSection, Card, PageLink, Ribbon, SponsorReel, TextAnchor, Divider } from "@components/index";
+import { PageSection, Card, PageLink, SponsorReel, Divider } from "@components/index";
 import FrontPageHero from "./FrontPageHero";
 import { Event } from "@models/Event";
 import { Post } from "@models/Feed";
@@ -38,12 +38,52 @@ const CardSection = styled(PageSection)`
   h6 {
     color: ${colors.orange1};
   }
+
+  & > * {
+    width: calc(25% - 2rem);
+
+    @media screen and (min-width: 1000px) and (max-width: 1200px) {
+      width: calc(50% - 2rem);
+      margin-bottom: 2rem;
+    }
+
+    @media screen and (max-width: 1000px) {
+      width: 100%;
+      margin: 0 0 3rem 0;
+    }
+  }
 `;
 
 const SössöSection = styled(PageSection)`
   color: ${colors.white};
   background-color: ${colors.orange1};
 
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  align-items: flex-end;
+
+  @media screen and (max-width: 600px - 1px) {
+    flex-flow: column nowrap;
+    align-items: center;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+    font-weight: 200;
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+
+  a {
+    font-weight: 700;
+    text-decoration: none;
+    margin: 0.5rem 1rem 0;
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1rem;
+  }
+
   a:hover {
     color: ${colors.darkBlue};
   }
@@ -63,7 +103,6 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
             link={`/events/${event.id}`}
             image={event.image || event.tags[0].icon}
             buttonOnClick={() => {}}
-            buttonText="Lue lisää&nbsp;›"
           />
         ))}
         <div className="card" key="links">
@@ -74,12 +113,8 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
       </CardSection>
 
       <SössöSection>
-        <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>
+        <h3>Sössöä vuodesta 1969.</h3>
+        <a href="https://sosso.fi">Lue opiskelijalehden viimeisin numero&nbsp;›</a>
       </SössöSection>
 
       <CardSection>
@@ -91,7 +126,6 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
             text={inst.description_fi}
             link={`/feed/${inst.id}`}
             buttonOnClick={() => {}}
-            buttonText="Lue lisää&nbsp;›"
           />
         ))}
         <div className="card" key="links">