Typography, HeroAside tweaks

src/components/AsideSection/AsideSection.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { ColorDivProps } from "../ColorDiv/ColorDiv";
-import { ColorMapper } from "@theme/colors";
-
-type AsideSectionProps = ColorDivProps;
-
-const Section = styled.div<ColorDivProps>`
-  display: flex;
-  flex: 1;
-  flex-flow: column;
-  justify-content: space-between;
-  padding: 3rem 4rem;
-
-  color: ${(p) => p.textColor};
-  background-color: ${(p) => p.backgroundColor};
-  &:hover {
-    color: ${(p) => p.hoverColor};
-    background-color: ${(p) => p.hoverBackgroundColor};
-  }
-`;
-
-const AsideSection: React.FC<AsideSectionProps> = ({ 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 AsideSection;

src/components/AsideSection/index.ts

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

src/components/ColorDiv/ColorDiv.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-import styled from "styled-components"
-import { Colors, ColorMapper } from "@theme/colors";
-
-interface ColorsProps {
-  textColor?: string;
-  backgroundColor?: string;
-  hoverColor?: string;
-  hoverBackgroundColor?: string;
-}
-
-export type ColorDivProps = React.HTMLAttributes<HTMLDivElement> & {
-  textColor?: Colors;
-  backgroundColor?: Colors;
-  hoverColor?: Colors;
-  backgroundHoverColor?: Colors;
-}
-
-const Div = styled.div<ColorsProps>`
-  color: ${(p) => p.textColor};
-  background-color: ${(p) => p.backgroundColor};
-  &:hover {
-    color: ${(p) => p.hoverColor};
-    background-color: ${(p) => p.hoverBackgroundColor};
-  }
-`;
-
-const ColorDiv: React.FC<ColorDivProps> = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => (
-  <Div
-    textColor={ColorMapper.get(textColor)}
-    backgroundColor={ColorMapper.get(backgroundColor)}
-    hoverColor={ColorMapper.get(hoverColor)}
-    hoverBackgroundColor={ColorMapper.get(backgroundHoverColor)}
-    {...props}
-  />
-);
-
-export default ColorDiv;

src/components/Hero/HeroAside.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors, Colors2 } from "@theme/colors";
+import { colors } from "@theme/colors";
 import Anchor from "@components/Anchor";
 
 interface HeroAsideItemProps {
@@ -11,33 +11,8 @@ interface HeroAsideItemProps {
 }
 
 const Article = styled.article`
-  line-height: 1rem;
+  max-width: 350px;
   margin-bottom: 1rem;
-
-  h2 {
-    color: ${colors.lightBlue};
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    line-height: 20px;
-  }
-
-  p, a {
-    color: ${colors.lightBlue};
-    font-size: 14px;
-    font-weight: 300;
-    line-height: 20px;
-  }
-
-  a {
-    color: ${colors.blue1};
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.1rem;
-
-    &:hover {
-      color: ${colors.white};
-    }
-  }
 `;
 
 export const HeroAsideItem: React.FC<HeroAsideItemProps> = ({ header, text, link, linkText }) => (
@@ -47,34 +22,78 @@ export const HeroAsideItem: React.FC<HeroAsideItemProps> = ({ header, text, link
       <p>{text}</p>
     )}
     <Anchor to={link}>
-      {linkText}
+      <h6>
+        {linkText}
+      </h6>
     </Anchor>
   </Article>
 )
 
+type Colors = "darkBlue" | "lightTurquoise";
 
 interface HeroAsideProps {
-  bgColor?: Colors2;
+  bgColor: Colors;
 }
 
 // TODO: Color combos
-const Aside = styled.aside<HeroAsideProps>`
+const Aside = styled.aside<{ colors: string }>`
+  ${(p) => p.colors}
   flex: 4;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 0 6rem;
 
-  background: ${(p) => p.bgColor};
-  color: ${colors.darkBlue};
+
+  h2 {
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    line-height: 1.5rem;
+  }
+
+  p {
+    margin: 0;
+    line-height: 2rem;
+  }
+
+
+  & > p {
+    font-weight: 600;
+    margin-bottom: 2rem;
+  }
+
+  a {
+    line-height: 2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    text-decoration: none;
+    letter-spacing: 0.1rem;
+  }
+
 
   @media screen and (max-width: 800px) {
     margin: 48px auto;
   }
 `;
 
-const HeroAside: React.FC<HeroAsideProps> = ({ bgColor = "inherit", children}) => (
-  <Aside bgColor={colors[bgColor]}>
+const textColors = (bgColor: Colors) => {
+  switch(bgColor) {
+  case "darkBlue":
+    return `
+background-color: ${colors[bgColor]};
+color: ${colors.lightBlue};
+`;
+  case "lightTurquoise":
+    return `
+background-color: ${colors[bgColor]};
+color: ${colors.darkBlue};
+  `;
+  default: return ""
+  }
+}
+
+const HeroAside: React.FC<HeroAsideProps> = ({ bgColor, children}) => (
+  <Aside colors={textColors(bgColor)}>
     {children}
   </Aside>
 )

src/components/Hero/HeroPrimarySection.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { colors } from "@theme/colors";
 
 interface HeroPrimarySectionProps {
   header: string;
@@ -22,7 +23,18 @@ const Section = styled.section`
   p {
     max-width: 400px;
     margin: 1em auto;
-    font-weight: 100;
+    font-weight: 200;
+  }
+
+  a {
+    color: ${colors.blue1};
+    font-weight: 600;
+    text-decoration: underline;
+
+    &:hover {
+      color: ${colors.white};
+      text-decoration: none
+    }
   }
 `;
 

src/components/PageSection.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { ColorDivProps } from "./ColorDiv/ColorDiv";
-import { ColorMapper } from "@theme/colors";
-
-interface PageSectionProps {
-  center?: boolean;
-  cardSection?: boolean; // does section contain a grid of cards
-  fullSize?: boolean;
-}
-
-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;
-    }
-  }
-
-  ${(p) => p.cardSection ? "" : `
-    @media screen and (max-width: 800px - 1px) {
-      flex-flow: column nowrap;
-    }
-  `}
-`;
-
-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/index.scss

@@ -7,11 +7,15 @@
 
 html,
 body {
-  font-size: 100%;
+  font-size: 12pt;
   background-color: color(dark-blue);
   height: 100%;
   font-family: $font;
-  color: color(white1);
+}
+
+body {
+  padding: 0;
+  margin: auto !important;
 }
 
 #root {
@@ -23,9 +27,13 @@ body {
   background-color: color(white1);
 }
 
-body {
-  padding: 0;
-  margin: auto !important;
+p {
+  font-size: 1.2rem;
+  font-weight: 300;
+
+  .lg {
+    font-size: 2rem;
+  }
 }
 
 h1 {
@@ -40,7 +48,7 @@ h1 {
 }
 
 h2 {
-  font-size: 1rem;
+  font-size: 1.2rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   margin-block-start: 0;
@@ -66,7 +74,7 @@ h3 {
 h4 {
   font-size: 1rem;
   font-weight: 700;
-  letter-spacing: 0.1rem;
+  letter-spacing: 0.1em;
   margin-block-start: 0;
   margin-block-end: 0;
   text-transform: uppercase;
@@ -77,13 +85,13 @@ h4 {
 }
 
 h5 {
-  font-size: 1.2rem;
+  font-size: 1.125rem;
   font-weight: 600;
   margin-block-start: 0;
   margin-block-end: 0;
 
   .lg {
-    font-size: 2rem;
+    font-size: 2.3rem;
   }
 }
 
@@ -100,17 +108,22 @@ h6 {
   }
 }
 
-p {
-  font-size: 16px;
-  font-weight: 300;
+// TODO: List item style »
+li {
+  font-size: 1.2rem;
+  font-weight: 600;
 
   .lg {
     font-size: 2rem;
   }
 }
 
-a,
+
+a {
+  text-decoration: underline;
+  color: color(blue1);
+}
+
 a:hover {
   text-decoration: none;
-  color: color(white1);
 }

src/views/ActualPage/ActualPageHero.tsx

@@ -34,7 +34,7 @@ const ActualPageHero: React.FC = () => (
         </HeroSecondarySectionItem>
       </HeroSecondarySection>
     </div>
-    <HeroAside bgColor="lightBlue">
+    <HeroAside bgColor="lightTurquoise">
       <p>
         Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa:
       </p>

src/views/ContactsPage/ContactsPage.scss

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

src/views/ContactsPage/ContactsPageView.tsx

@@ -1,10 +1,8 @@
 import React from "react";
-import "./ContactsPage.scss";
-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";
+import { Divider, TextSection } from "@components/index";
 
 interface ContactsPageViewProps {
   contacts: Occupation[];
@@ -18,15 +16,15 @@ class ContactsPageView extends React.Component<ContactsPageViewProps> {
     const { contacts, committees } = this.props;
     const board = contacts.filter(x => x.role.is_board);
     return (
-      <div className="contacts-page">
-        <PageSection backgroundColor="white1" textColor="dark-blue" center>
+      <>
+        <TextSection>
           <p>
             Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
             Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
           </p>
-        </PageSection>
+        </TextSection>
 
-        <PageSection backgroundColor="white1" textColor="dark-blue" center>
+        <TextSection>
           <div>
             <CommitteeContainer name_fi="Hallitus" name_en="Board" contacts={board} />
             <p>
@@ -39,20 +37,20 @@ class ContactsPageView extends React.Component<ContactsPageViewProps> {
               </TextAnchor>
             </p>
           </div>
-        </PageSection>
+        </TextSection>
         <Divider />
         {committees.map((committee, index) => {
-          const order = committee.name_fi === "Toimikunnattomat" ? 1 : 0;
+          // const order = committee.name_fi === "Toimikunnattomat" ? 1 : 0;
           return (
             <>
-              <PageSection key={index} style={{order}} backgroundColor="white1" center>
+              <TextSection key={index}>
                 <CommitteeContainer name_fi={committee.name_fi} name_en={committee.name_en} contacts={contacts.filter(x => x.role.committee.name_fi === committee.name_fi)} />
-              </PageSection>
+              </TextSection>
               <Divider />
             </>
           )
         })}
-      </div>
+      </>
     );
   }
 }

src/views/FrontPage/FrontPageHero.tsx

@@ -24,7 +24,7 @@ const FrontPageHero: React.FC = () => (
       </HeroPrimarySection>
     </div>
 
-    <HeroAside>
+    <HeroAside bgColor="darkBlue">
       <HeroAsideItem
         header="Vasta-aloittanut opiskelija"
         text="Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet."

src/views/GuildPage/GuildPageHero.tsx

@@ -13,7 +13,7 @@ const GuildPageHero: React.FC = () => (
       </HeroPrimarySection>
     </div>
 
-    <HeroAside>
+    <HeroAside bgColor="lightTurquoise">
       <HeroAsideItem
         header="Toverielämää ja sähkötekniikkaa"
         link="#tehtavat"

src/views/GuildPage/GuildPageView.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import AsideSection from "@components/AsideSection";
+import styled from "styled-components";
 import PageLink from "@components/PageLink";
 import InfoBox from "@components/InfoBox";
 import Accordion from "@components/Accordion";
@@ -7,6 +7,16 @@ import TextAnchor from "@components/TextAnchor";
 import Anchor from "@components/Anchor";
 import { SossoSection, TextSection } from "@components/index";
 import GuildPageHero from "./GuildPageHero";
+import FullWidthSection from "@components/Sections/FullWidthSection";
+
+const Column = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  ul {
+    list-style: none;
+  }
+`;
 
 const GuildPageView: React.FC = () => (
   <>
@@ -94,36 +104,40 @@ const GuildPageView: React.FC = () => (
     </TextSection>
 
     <SossoSection>
-      <p>
-          Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <Anchor to="/toimikunnat">toimikunnat</Anchor> ja <Anchor to="/jaokset">jaokset</Anchor>.</p>
+      <p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <Anchor to="/toimikunnat">toimikunnat</Anchor> ja <Anchor to="/jaokset">jaokset</Anchor>.</p>
     </SossoSection>
 
+    <Column>
+      <FullWidthSection>
+        <div>
+          <h6>Miksi alkaa kilta-aktiiviksi?</h6>
+          <p>Näitä töitä tehdessä saa väkisinkin paljon uusia kavereita ja oppii monia palkallisessa työelämässä tarpeellisia taitoja. Eikä laajasta tuttavapiiristä ja monista kontakteista varmasti haittaa ole tulevaa työuraakaan ajatellen. Rahallista tai materiaalista hyötyä kiltatoiminnasta ei saa, eikä kukaan killan toimintaan mukaan tuleva sitä pyrikään tavoittelemaan. Mikä tärkeintä, kiltatoiminta on kivaa!</p>
+          <ul>
+            <li>» Uusia ystäviä, samanhenkistä seuraa</li>
+            <li>» Loistava mahdollisuus kokeilla omia kykyjään</li>
+            <li>» Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt</li>
+          </ul>
+        </div>
+      </FullWidthSection>
+      <FullWidthSection>
+        <div>
+          <h6>Runsaasti erilaisia tehtäviä</h6>
+          <p>Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to="/jaostot">Jaostoiminta</TextAnchor> mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.</p>
+          <ul>
+            <li>» Haluatko <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>valtuustoon</TextAnchor>, <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>hallitukseen</TextAnchor> tai <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>toimariksi</TextAnchor>?</li>
+            <li>» <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja</li>
+            <li>» Lorem ipsum</li>
+          </ul>
+        </div>
+      </FullWidthSection>
+    </Column>
+
     <TextSection>
-      <aside>
-        <h6>Miksi alkaa kilta-aktiiviksi?</h6>
-        <p>Näitä töitä tehdessä saa väkisinkin paljon uusia kavereita ja oppii monia palkallisessa työelämässä tarpeellisia taitoja. Eikä laajasta tuttavapiiristä ja monista kontakteista varmasti haittaa ole tulevaa työuraakaan ajatellen. Rahallista tai materiaalista hyötyä kiltatoiminnasta ei saa, eikä kukaan killan toimintaan mukaan tuleva sitä pyrikään tavoittelemaan. Mikä tärkeintä, kiltatoiminta on kivaa!</p>
-        <p>» Uusia ystäviä, samanhenkistä seuraa</p>
-        <p>» Loistava mahdollisuus kokeilla omia kykyjään</p>
-        <p>» Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt</p>
-      </aside>
-
-      <aside>
-        <h6>Runsaasti erilaisia tehtäviä</h6>
-        <p>Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to="/jaostot">Jaostoiminta</TextAnchor> mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.</p>
-        <p>» Haluatko <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>valtuustoon</TextAnchor>, <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>hallitukseen</TextAnchor> tai <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>toimariksi</TextAnchor>?</p>
-        <p>» <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja</p>
-        <p>» Lorem ipsum</p>
-      </aside>
-    </TextSection>
-
-    <AsideSection textColor="black1" backgroundColor="white1">
+      <h3>Sähkötekniikan korkeakoulun toimikunnat</h3>
       <div>
-        <h3>Sähkötekniikan korkeakoulun toimikunnat</h3>
         <p>
-                  Ylioppilaskunnalla on edustus suuressa osassa Aalto-yliopiston tiedekuntia. Elektroniikan, tietoliikenteen ja automaation tiedekunnan toimikuntiin eli hallopedeihin opiskelijavalinna EST- ja TLT-tutkinto-ohjelmien osalta tehdään osin ylioppilaskunnan edustajistossa Sähköinsinöörikillan esityksestä ja osin Sähköinsinöörikillassa.
+          Ylioppilaskunnalla on edustus suuressa osassa Aalto-yliopiston tiedekuntia. Elektroniikan, tietoliikenteen ja automaation tiedekunnan toimikuntiin eli hallopedeihin opiskelijavalinna EST- ja TLT-tutkinto-ohjelmien osalta tehdään osin ylioppilaskunnan edustajistossa Sähköinsinöörikillan esityksestä ja osin Sähköinsinöörikillassa.
         </p>
-      </div>
-      <div className="accordion-list">
         <Accordion
           title="Akateeminen komitea">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus feugiat ante. Nam eget venenatis dui. Morbi purus dui, cursus at velit id, placerat scelerisque turpis. Nulla a mauris odio. Nulla at tempor mi. Maecenas et sapien eu lorem interdum luctus. Proin interdum, tortor eget tempor tristique, massa arcu suscipit ipsum, sit amet lacinia erat lorem sit amet ipsum. Praesent dictum odio auctor odio sodales pharetra. Quisque accumsan iaculis diam, a laoreet odio aliquet eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Pellentesque at hendrerit mi. Morbi at lacus finibus, pharetra urna sed, molestie tellus. Duis fermentum sodales leo. Nullam varius, massa in convallis sagittis, mi felis lacinia ipsum, viverra rhoncus nibh ipsum vel mi. Pellentesque ornare hendrerit malesuada.
@@ -137,15 +151,13 @@ const GuildPageView: React.FC = () => (
         <Accordion title="Lorem" />
         <Accordion title="Ipsum" />
       </div>
-    </AsideSection>
-    <AsideSection textColor="black1" backgroundColor="white1">
-      <div>
-        <h3>Jaokset—kokeile kiltatoimintaa vapaammin</h3>
-        <p>
-                  Kiinnostaako kiltatoiminta, mutta vuoden kestävä sitoutuminen pelottaa? Jaokset mahdollistavat kiltatoiminnan kokeilemisen pienemmässä mittakaavassa. Jaokset toimivat varsin vapaamuotoisesti, mutta siltikin hyvässä hengessä. Mikäli Sinulla olisi hyvä idea, mitä kilta voisi jaosmaisesti toteuttaa, voit myös perustaa oman jaoksen.
-        </p>
-      </div>
-    </AsideSection>
+    </TextSection>
+    <TextSection>
+      <h3>Jaokset—kokeile kiltatoimintaa vapaammin</h3>
+      <p>
+        Kiinnostaako kiltatoiminta, mutta vuoden kestävä sitoutuminen pelottaa? Jaokset mahdollistavat kiltatoiminnan kokeilemisen pienemmässä mittakaavassa. Jaokset toimivat varsin vapaamuotoisesti, mutta siltikin hyvässä hengessä. Mikäli Sinulla olisi hyvä idea, mitä kilta voisi jaosmaisesti toteuttaa, voit myös perustaa oman jaoksen.
+      </p>
+    </TextSection>
 
     <SossoSection>
       <p id="jasenedut">Jäsenedut vuonna 2019</p>

src/views/InEnglishPage/InEnglishPageHero.tsx

@@ -10,7 +10,7 @@ const InEnglishPageHero: React.FC = () => (
       />
     </div>
 
-    <HeroAside>
+    <HeroAside bgColor="darkBlue">
       <HeroAsideItem
         header="Upcoming events"
         text="Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet."

src/views/StudiesPage/StudiesPageHero.tsx

@@ -10,7 +10,7 @@ const StudiesPageHero: React.FC = () => (
       />
     </div>
 
-    <HeroAside>
+    <HeroAside bgColor="darkBlue">
       <HeroAsideItem
         header="Opiskelemaan sähkölle"
         link="#abeille"