From c267822441a2ce1bb74f3016b25ebe12384756cb Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Sat, 10 Oct 2020 01:53:03 +0300
Subject: [PATCH] Remove Ribbon

---
 src/components/Ribbon/Ribbon.tsx              | 34 -------------------
 src/components/Ribbon/index.ts                |  2 --
 .../{SössöSection.tsx => SossoSection.tsx}    | 16 +++++----
 src/components/index.tsx                      |  3 +-
 src/views/ActualPage/ActualPageView.tsx       | 10 +++---
 src/views/CorporatePage/CorporatePageView.tsx | 18 +++++-----
 src/views/FreshmenPage/FreshmenPageView.tsx   | 20 +++++------
 src/views/FrontPage/FrontPageView.tsx         |  6 ++--
 src/views/GuildPage/GuildPageView.tsx         | 28 +++++++--------
 src/views/StudiesPage/StudiesPageView.tsx     | 18 +++++-----
 10 files changed, 57 insertions(+), 98 deletions(-)
 delete mode 100644 src/components/Ribbon/Ribbon.tsx
 delete mode 100644 src/components/Ribbon/index.ts
 rename src/components/Sections/{SössöSection.tsx => SossoSection.tsx} (93%)

diff --git a/src/components/Ribbon/Ribbon.tsx b/src/components/Ribbon/Ribbon.tsx
deleted file mode 100644
index 81f416b..0000000
--- a/src/components/Ribbon/Ribbon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import styled from "styled-components";
-
-const Ribbon = styled.div`
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: flex-end;
-  text-align: center;
-  justify-content: center;
-  margin: auto;
-
-  p {
-    font-size: 2rem;
-    font-weight: 100;
-    line-height: 30px;
-    margin-block-start: 0;
-    margin-block-end: 0;
-  }
-
-  a {
-    font-weight: 100;
-    text-decoration: none;
-    margin: 0 1rem;
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    margin-top: 10px;
-  }
-
-  @media screen and (max-width: 600px - 1px) {
-    flex-flow: column nowrap;
-    align-items: center;
-  }
-`;
-
-export default Ribbon;
diff --git a/src/components/Ribbon/index.ts b/src/components/Ribbon/index.ts
deleted file mode 100644
index 896a201..0000000
--- a/src/components/Ribbon/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import Ribbon from "./Ribbon";
-export default Ribbon;
diff --git a/src/components/Sections/SössöSection.tsx b/src/components/Sections/SossoSection.tsx
similarity index 93%
rename from src/components/Sections/SössöSection.tsx
rename to src/components/Sections/SossoSection.tsx
index 2adcb37..3bf9a24 100644
--- a/src/components/Sections/SössöSection.tsx
+++ b/src/components/Sections/SossoSection.tsx
@@ -17,14 +17,11 @@ const SössöSection = styled(PageSection)`
     align-items: center;
   }
 
-  h3 {
-    font-size: 1.5rem;
-    font-weight: 200;
-    margin-block-start: 0;
-    margin-block-end: 0;
+  a {
+    text-decoration: underline;
   }
 
-  a {
+   & > a {
     font-weight: 700;
     text-decoration: none;
     margin: 0.5rem 1rem 0;
@@ -33,6 +30,13 @@ const SössöSection = styled(PageSection)`
     letter-spacing: 0.1rem;
   }
 
+  h3, p {
+    font-size: 1.5rem;
+    font-weight: 200;
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+
   a:hover {
     color: ${colors.darkBlue};
   }
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 541234c..809820f 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,11 +1,10 @@
 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 "./Sections/PageSection";
 export { default as Divider } from "./Divider";
 export { default as CardSection } from "./Sections/CardSection";
-export { default as SössöSection } from "./Sections/SössöSection";
+export { default as SossoSection } from "./Sections/SossoSection";
 export { default as TextSection } from "./Sections/TextSection";
diff --git a/src/views/ActualPage/ActualPageView.tsx b/src/views/ActualPage/ActualPageView.tsx
index f5aafb6..a0ea631 100644
--- a/src/views/ActualPage/ActualPageView.tsx
+++ b/src/views/ActualPage/ActualPageView.tsx
@@ -7,7 +7,7 @@ import { Post } from "@models/Feed";
 import EventCalendar from "./EventCalendar";
 import News from "./News";
 
-import { Divider, SössöSection, TextSection } from "@components/index";
+import { Divider, SossoSection, TextSection } from "@components/index";
 import Anchor from "@components/Anchor";
 import ActualPageHero from "./ActualPageHero";
 
@@ -38,12 +38,12 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({events, feed}) => {
 
       <News feed={feed} />
 
-      <SössöSection backgroundColor="light-turquoise" textColor="dark-blue">
+      <SossoSection backgroundColor="light-turquoise" textColor="dark-blue">
         <h3>Kuvia tapahtumista.</h3>
         <Anchor to="https://sosso.fi">
           Kuvagalleria&nbsp;›
         </Anchor>
-      </SössöSection>
+      </SossoSection>
 
       <Gallery>
         <img src="https://placehold.it/400x400" />
@@ -51,12 +51,12 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({events, feed}) => {
         <img src="https://placehold.it/400x400" />
       </Gallery>
 
-      <SössöSection>
+      <SossoSection>
         <h3>Sinustako kilta-aktiivi?</h3>
         <Anchor to="https://sosso.fi">
           Tule mukaan kiltatoimintaan&nbsp;›
         </Anchor>
-      </SössöSection>
+      </SossoSection>
 
       <TextSection>
         <h3>Yritystapahtumia ja vastapainoa opiskelulle</h3>
diff --git a/src/views/CorporatePage/CorporatePageView.tsx b/src/views/CorporatePage/CorporatePageView.tsx
index 1a88bdb..96739ce 100644
--- a/src/views/CorporatePage/CorporatePageView.tsx
+++ b/src/views/CorporatePage/CorporatePageView.tsx
@@ -7,8 +7,8 @@ import HeroAsideItem from "@components/Hero/HeroAsideItem";
 import AsideSection from "@components/AsideSection";
 import MainSection from "@components/MainSection";
 import PageLink from "@components/PageLink";
-import Ribbon from "@components/Ribbon";
-import TextAnchor from "@components/TextAnchor";
+import { SossoSection } from "@components/index";
+import Anchor from "@components/Anchor";
 
 
 const CorporatePageView: React.FC = () => (
@@ -80,14 +80,12 @@ const CorporatePageView: React.FC = () => (
         </div>
       </AsideSection>
     </PageSection>
-    <PageSection backgroundColor="orange1">
-      <Ribbon>
-        <h3>Mainos Sössöön?</h3>
-        <TextAnchor textColor="white1" hoverColor="blue1" to="https://sosso.fi">
-          <h4>Killan lehden mediakortin löydät täältä›</h4>
-        </TextAnchor>
-      </Ribbon>
-    </PageSection>
+    <SossoSection>
+      <h3>Mainos Sössöön?</h3>
+      <Anchor to="https://sosso.fi">
+        <h4>Killan lehden mediakortin löydät täältä›</h4>
+      </Anchor>
+    </SossoSection>
     <PageSection backgroundColor="white1">
       <AsideSection backgroundColor="white1" textColor="black1" />
       <MainSection backgroundColor="white1" textColor="black1">
diff --git a/src/views/FreshmenPage/FreshmenPageView.tsx b/src/views/FreshmenPage/FreshmenPageView.tsx
index 1442ddd..6ac65fb 100644
--- a/src/views/FreshmenPage/FreshmenPageView.tsx
+++ b/src/views/FreshmenPage/FreshmenPageView.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import styled from "styled-components";
 import "./FreshmenPage.scss";
 import PageSection from "@components/PageSection";
 import HeroMainSection from "@components/Hero/HeroMainSection";
@@ -7,10 +8,10 @@ import HeroAsideItem from "@components/Hero/HeroAsideItem";
 import AsideSection from "@components/AsideSection";
 import MainSection from "@components/MainSection";
 import PageLink from "@components/PageLink";
-import Ribbon from "@components/Ribbon";
 import TextAnchor from "@components/TextAnchor";
 import InfoBox from "@components/InfoBox";
-import styled from "styled-components";
+import Anchor from "@components/Anchor";
+import { SossoSection } from "@components/index";
 
 const KippariImage = styled.img`
 max-width:100%;
@@ -99,14 +100,13 @@ const FreshmenPageView: React.FC = () => (
         </div>
       </AsideSection>
     </PageSection>
-    <PageSection backgroundColor="light-turquoise">
-      <Ribbon>
-        <h3>Killassa tapahtuu kaikenlaista!</h3>
-        <TextAnchor textColor="white1" hoverColor="blue1" to="/kilta/toiminta">
-          <h4>Seuraa killan tapahtumia</h4>
-        </TextAnchor>
-      </Ribbon>
-    </PageSection>
+    <SossoSection>
+      <h3>Killassa tapahtuu kaikenlaista!</h3>
+      <Anchor to="/kilta/toiminta">
+        <h4>Seuraa killan tapahtumia</h4>
+      </Anchor>
+    </SossoSection>
+
     <PageSection backgroundColor="white1">
       <AsideSection backgroundColor="white1" textColor="black1" />
       <MainSection backgroundColor="white1" textColor="black1">
diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx
index adb2e12..3430a68 100644
--- a/src/views/FrontPage/FrontPageView.tsx
+++ b/src/views/FrontPage/FrontPageView.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { PageSection, Card, PageLink, SponsorReel, Divider, CardSection, SössöSection } from "@components/index";
+import { PageSection, Card, PageLink, SponsorReel, Divider, CardSection, SossoSection } from "@components/index";
 import FrontPageHero from "./FrontPageHero";
 import { Event } from "@models/Event";
 import { Post } from "@models/Feed";
@@ -47,10 +47,10 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
 
       </CardSection>
 
-      <SössöSection>
+      <SossoSection>
         <h3>Sössöä vuodesta 1969.</h3>
         <Anchor to="https://sosso.fi">Lue opiskelijalehden viimeisin numero&nbsp;›</Anchor>
-      </SössöSection>
+      </SossoSection>
 
       <CardSection>
         {feed.map(inst => (
diff --git a/src/views/GuildPage/GuildPageView.tsx b/src/views/GuildPage/GuildPageView.tsx
index bba4dfb..fb0dc9a 100644
--- a/src/views/GuildPage/GuildPageView.tsx
+++ b/src/views/GuildPage/GuildPageView.tsx
@@ -7,10 +7,11 @@ import PageLink from "@components/PageLink";
 import HeroMainSection from "@components/Hero/HeroMainSection";
 import HeroAsideSection from "@components/Hero/HeroAsideSection";
 import HeroAsideItem from "@components/Hero/HeroAsideItem";
-import Ribbon from "@components/Ribbon";
 import InfoBox from "@components/InfoBox";
 import Accordion from "@components/Accordion";
 import TextAnchor from "@components/TextAnchor";
+import Anchor from "@components/Anchor";
+import { SossoSection } from "@components/index";
 
 const GuildPageView: React.FC = () => (
   <div className="guild-page">
@@ -99,11 +100,9 @@ const GuildPageView: React.FC = () => (
           </div>
         </AsideSection>
       </PageSection>
-      <PageSection backgroundColor="light-blue" textColor="dark-blue">
-        <Ribbon>
-          <p>Killan hallinto koostuu XXX henkilöstä.</p>
-        </Ribbon>
-      </PageSection>
+      <SossoSection>
+        <p>Killan hallinto koostuu XXX henkilöstä.</p>
+      </SossoSection>
       <PageSection backgroundColor="white1">
         <AsideSection backgroundColor="white1" />
         <MainSection backgroundColor="white1" textColor="dark-blue" >
@@ -130,11 +129,10 @@ const GuildPageView: React.FC = () => (
           </div>
         </AsideSection>
       </PageSection>
-      <PageSection backgroundColor="dark-blue">
-        <Ribbon>
-          <p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor textColor="white1" hoverColor="blue1" to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor textColor="white1" hoverColor="blue1" to="/jaokset">jaokset</TextAnchor>.</p>
-        </Ribbon>
-      </PageSection>
+      <SossoSection>
+        <p>
+          Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <Anchor to="/toimikunnat">toimikunnat</Anchor> ja <Anchor to="/jaokset">jaokset</Anchor>.</p>
+      </SossoSection>
       <div style={{ display: "flex" }}>
         <AsideSection textColor="dark-blue" backgroundColor="light-turquoise">
           <h6>Miksi alkaa kilta-aktiiviksi?</h6>
@@ -200,11 +198,9 @@ const GuildPageView: React.FC = () => (
           </div>
         </AsideSection>
       </PageSection>
-      <PageSection backgroundColor="orange1">
-        <Ribbon>
-          <p id="jasenedut">Jäsenedut vuonna 2019</p>
-        </Ribbon>
-      </PageSection>
+      <SossoSection>
+        <p id="jasenedut">Jäsenedut vuonna 2019</p>
+      </SossoSection>
       <PageSection backgroundColor="white1">
         <AsideSection backgroundColor="white1" />
         <MainSection textColor="black1">
diff --git a/src/views/StudiesPage/StudiesPageView.tsx b/src/views/StudiesPage/StudiesPageView.tsx
index 6c319a1..fe80407 100644
--- a/src/views/StudiesPage/StudiesPageView.tsx
+++ b/src/views/StudiesPage/StudiesPageView.tsx
@@ -7,8 +7,8 @@ import HeroAsideItem from "@components/Hero/HeroAsideItem";
 import AsideSection from "@components/AsideSection";
 import MainSection from "@components/MainSection";
 import PageLink from "@components/PageLink";
-import Ribbon from "@components/Ribbon";
-import TextAnchor from "@components/TextAnchor";
+import Anchor from "@components/Anchor";
+import { SossoSection } from "@components/index";
 
 const StudiesPageView: React.FC = () => (
   <div className="studies-page">
@@ -69,14 +69,12 @@ const StudiesPageView: React.FC = () => (
         </div>
       </AsideSection>
     </PageSection>
-    <PageSection backgroundColor="orange1">
-      <Ribbon>
-        <h3>Hae opiskelemaan!</h3>
-        <TextAnchor textColor="white1" hoverColor="blue1" to="https://aalto.fi">
-          <h4>Lue lisää Aallon sivuilta</h4>
-        </TextAnchor>
-      </Ribbon>
-    </PageSection>
+    <SossoSection>
+      <h3>Hae opiskelemaan!</h3>
+      <Anchor to="https://aalto.fi">
+        <h4>Lue lisää Aallon sivuilta</h4>
+      </Anchor>
+    </SossoSection>
     <PageSection backgroundColor="white1">
       <AsideSection backgroundColor="white1" textColor="black1" />
       <MainSection backgroundColor="white1" textColor="black1">