From 07f2255427e22e0d371094da0983ee9deebf2ed1 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Sat, 10 Oct 2020 19:42:12 +0300 Subject: [PATCH] Call To Action sections and colors --- src/components/Sections/CTASection.tsx | 104 ++++++++++++++++++ src/components/Sections/SossoSection.tsx | 45 -------- src/components/Sections/TextSection.tsx | 3 +- src/components/index.tsx | 2 +- src/views/ActualPage/ActualPageView.tsx | 34 +++--- src/views/CorporatePage/CorporatePageView.tsx | 16 +-- src/views/FreshmenPage/FreshmenPageView.tsx | 15 +-- src/views/FrontPage/FrontPageView.tsx | 13 ++- src/views/GuildPage/GuildPageView.tsx | 18 ++- src/views/StudiesPage/StudiesPageView.tsx | 15 +-- 10 files changed, 163 insertions(+), 102 deletions(-) create mode 100644 src/components/Sections/CTASection.tsx delete mode 100644 src/components/Sections/SossoSection.tsx diff --git a/src/components/Sections/CTASection.tsx b/src/components/Sections/CTASection.tsx new file mode 100644 index 0000000..5ba27c0 --- /dev/null +++ b/src/components/Sections/CTASection.tsx @@ -0,0 +1,104 @@ + +import React from "react"; +import styled from "styled-components"; +import { colors } from "@theme/colors"; +import Anchor from "@components/Anchor"; + +const Section = styled.section<{ colors: string }>` + ${(p) => p.colors} + + display: flex; + justify-content: center; + text-align: center; + align-items: baseline; + padding: 2rem 0; + + flex-direction: row; + @media screen and (max-width: 600px) { + flex-direction: column; + } + + a { + color: inherit; + } + + & > a { + font-weight: 700; + text-decoration: none; + margin: 0.5rem 1rem 0; + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 0.1rem; + } + + & > h1 { + a { + text-decoration: underline; + } + a:hover { + text-decoration: none; + } + } +`; + +type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise"; + +interface CTASectionProps { + bgColor?: Colors; + link?: string; + linkText?: string; +} + +const textColors = (bgColor: Colors) => { + switch(bgColor) { + case "orange1": return ` +color: ${colors.white}; +background-color: ${colors[bgColor]}; +a:hover { + color: ${colors.darkBlue}; +} +`; + + case "darkBlue": return ` +background-color: ${colors[bgColor]}; +color: ${colors.white}; + `; + + case "lightBlue": return ` +background-color: ${colors[bgColor]}; +color: ${colors.darkBlue}; +a:hover { + color: ${colors.white}; +} + `; + + case "lightTurquoise": return ` +background-color: ${colors[bgColor]}; +color: ${colors.darkBlue}; +a:hover { + color: ${colors.white}; +} + `; + case "blue1": return ` +background-color: ${colors[bgColor]}; +color: ${colors.white}; +a:hover { + color: ${colors.darkBlue}; +} + `; + default: return "" + } +} + +const CTASection: React.FC = ({ bgColor = "orange1", link, linkText, children }) => ( +
+

{children}

+ {link && ( + +

{linkText}

+ + )} +
+); + +export default CTASection; \ No newline at end of file diff --git a/src/components/Sections/SossoSection.tsx b/src/components/Sections/SossoSection.tsx deleted file mode 100644 index 3bf9a24..0000000 --- a/src/components/Sections/SossoSection.tsx +++ /dev/null @@ -1,45 +0,0 @@ - -import styled from "styled-components"; -import { PageSection } from "@components/index"; -import { colors } from "@theme/colors"; - -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; - } - - a { - text-decoration: underline; - } - - & > a { - font-weight: 700; - text-decoration: none; - margin: 0.5rem 1rem 0; - font-size: 1rem; - text-transform: uppercase; - 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}; - } -`; - -export default SössöSection; \ No newline at end of file diff --git a/src/components/Sections/TextSection.tsx b/src/components/Sections/TextSection.tsx index 022f94d..df0dab9 100644 --- a/src/components/Sections/TextSection.tsx +++ b/src/components/Sections/TextSection.tsx @@ -1,8 +1,7 @@ import React from "react"; import styled from "styled-components"; -import { PageSection } from "@components/index"; -const StyledSection = styled(PageSection)` +const StyledSection = styled.section` display: grid; padding: 24px; diff --git a/src/components/index.tsx b/src/components/index.tsx index 67c7a1f..190dc7f 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -5,7 +5,7 @@ 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 SossoSection } from "./Sections/SossoSection"; +export { default as CTASection } from "./Sections/CTASection"; export { default as TextSection } from "./Sections/TextSection"; export { default as InfoBox } from "./InfoBox"; export { default as Accordion } from "./Accordion"; diff --git a/src/views/ActualPage/ActualPageView.tsx b/src/views/ActualPage/ActualPageView.tsx index a0ea631..8e59127 100644 --- a/src/views/ActualPage/ActualPageView.tsx +++ b/src/views/ActualPage/ActualPageView.tsx @@ -1,15 +1,13 @@ import React from "react"; import styled from "styled-components"; - -import Accordion from "@components/Accordion"; import { Event } from "@models/Event"; import { Post } from "@models/Feed"; + +import { Divider, CTASection, TextSection, Accordion } from "@components/index"; +import ActualPageHero from "./ActualPageHero"; import EventCalendar from "./EventCalendar"; import News from "./News"; -import { Divider, SossoSection, TextSection } from "@components/index"; -import Anchor from "@components/Anchor"; -import ActualPageHero from "./ActualPageHero"; interface ActualPageViewProps { events: Event[]; @@ -38,12 +36,13 @@ const ActualPageView: React.FC = ({events, feed}) => { - -

Kuvia tapahtumista.

- - Kuvagalleria › - - + + Kuvia tapahtumista. + @@ -51,12 +50,13 @@ const ActualPageView: React.FC = ({events, feed}) => { - -

Sinustako kilta-aktiivi?

- - Tule mukaan kiltatoimintaan › - - + + Sinustako kilta-aktiivi? +

Yritystapahtumia ja vastapainoa opiskelulle

diff --git a/src/views/CorporatePage/CorporatePageView.tsx b/src/views/CorporatePage/CorporatePageView.tsx index 2ea18d8..34e3e92 100644 --- a/src/views/CorporatePage/CorporatePageView.tsx +++ b/src/views/CorporatePage/CorporatePageView.tsx @@ -1,8 +1,7 @@ import React from "react"; import CorporatePageHero from "./CorporatePageHero"; import PageLink from "@components/PageLink"; -import { SossoSection, TextSection } from "@components/index"; -import Anchor from "@components/Anchor"; +import { CTASection, TextSection } from "@components/index"; const CorporatePageView: React.FC = () => ( <> @@ -57,12 +56,13 @@ const CorporatePageView: React.FC = () => ( - -

Mainos Sössöön?

- -

Killan lehden mediakortin löydät täältä›

- - + + Mainos Sössöön? +

Työpaikkailmoitukset

diff --git a/src/views/FreshmenPage/FreshmenPageView.tsx b/src/views/FreshmenPage/FreshmenPageView.tsx index cd40a3a..fc4cc80 100644 --- a/src/views/FreshmenPage/FreshmenPageView.tsx +++ b/src/views/FreshmenPage/FreshmenPageView.tsx @@ -3,7 +3,7 @@ import styled from "styled-components"; import FreshmenPageHero from "./FreshmenPageHero"; import PageLink from "@components/PageLink"; import Anchor from "@components/Anchor"; -import { SossoSection, TextSection, InfoBox } from "@components/index"; +import { CTASection, TextSection, InfoBox } from "@components/index"; const KippariImage = styled.img` max-width:100%; @@ -56,12 +56,13 @@ const FreshmenPageView: React.FC = () => ( - -

Killassa tapahtuu kaikenlaista!

- -

Seuraa killan tapahtumia

- - + + Killassa tapahtuu kaikenlaista! +

Isoryhmät

diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx index ad4cad0..281ceb2 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 { Card, PageLink, Divider, CardSection, SossoSection } from "@components/index"; +import { Card, PageLink, Divider, CardSection, CTASection } from "@components/index"; import FrontPageHero from "./FrontPageHero"; import { Event } from "@models/Event"; import { Post } from "@models/Feed"; @@ -62,10 +62,13 @@ const FrontPageView: React.FC = ({ events, feed }) => ( - -

Sössöä vuodesta 1969.

- Lue opiskelijalehden viimeisin numero › - + + Sössöä vuodesta 1969. + {feed.map(inst => ( diff --git a/src/views/GuildPage/GuildPageView.tsx b/src/views/GuildPage/GuildPageView.tsx index 47c0f02..32b27c2 100644 --- a/src/views/GuildPage/GuildPageView.tsx +++ b/src/views/GuildPage/GuildPageView.tsx @@ -3,7 +3,7 @@ import styled from "styled-components"; import PageLink from "@components/PageLink"; import TextAnchor from "@components/TextAnchor"; import Anchor from "@components/Anchor"; -import { SossoSection, TextSection, InfoBox, Accordion } from "@components/index"; +import { CTASection, TextSection, InfoBox, Accordion } from "@components/index"; import GuildPageHero from "./GuildPageHero"; import FullWidthSection from "@components/Sections/FullWidthSection"; @@ -76,9 +76,9 @@ const GuildPageView: React.FC = () => ( - -

Killan hallinto koostuu XXX henkilöstä.

- + + Killan hallinto koostuu XXX henkilöstä. +

Organisaatio

@@ -101,9 +101,9 @@ const GuildPageView: React.FC = () => ( - -

Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.

- + + Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset. + @@ -157,9 +157,7 @@ const GuildPageView: React.FC = () => (

- -

Jäsenedut vuonna 2019

- + Jäsenedut vuonna 2019

Aalto-yliopiston tarjoamat monenlaiset edut

diff --git a/src/views/StudiesPage/StudiesPageView.tsx b/src/views/StudiesPage/StudiesPageView.tsx index 3c6db86..22ab147 100644 --- a/src/views/StudiesPage/StudiesPageView.tsx +++ b/src/views/StudiesPage/StudiesPageView.tsx @@ -1,7 +1,7 @@ import React from "react"; import PageLink from "@components/PageLink"; import Anchor from "@components/Anchor"; -import { SossoSection, TextSection } from "@components/index"; +import { CTASection, TextSection } from "@components/index"; import StudiesPageHero from "./StudiesPageHero"; const StudiesPageView: React.FC = () => ( @@ -45,12 +45,13 @@ const StudiesPageView: React.FC = () => ( - -

Hae opiskelemaan!

- -

Lue lisää Aallon sivuilta

- - + + Hae opiskelemaan! +

Yliopiston järjestelmiä