TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Call To Action sections and colors

Browse Source
This commit is contained in:
Aarni Halinen
2020-10-10 19:42:12 +03:00
parent 6531fd1daa
commit 07f2255427
10 changed files with 163 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Sections/CTASection.tsx
+104
View File
@@ -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<CTASectionProps> = ({ bgColor = "orange1", link, linkText, children }) => (
<Section colors={textColors(bgColor)}>
<h1>{children}</h1>
{link && (
<Anchor to={link}>
<h4>{linkText}</h4>
</Anchor>
)}
</Section>
);
export default CTASection;
src/components/Sections/SossoSection.tsx
-45
View File
@@ -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;
src/components/Sections/TextSection.tsx
+1 -2
View File
@@ -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;
src/components/index.tsx
+1 -1
View File
@@ -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";
src/views/ActualPage/ActualPageView.tsx
+17 -17
View File
@@ -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<ActualPageViewProps> = ({events, feed}) => {
<News feed={feed} />
<SossoSection backgroundColor="light-turquoise" textColor="dark-blue">
<h3>Kuvia tapahtumista.</h3>
<Anchor to="https://sosso.fi">
Kuvagalleria&nbsp;›
</Anchor>
</SossoSection>
<CTASection
bgColor="lightTurquoise"
link="sik.kuvat.fi"
linkText="Kuvagalleria&nbsp;›"
>
Kuvia tapahtumista.
</CTASection>
<Gallery>
<img src="https://placehold.it/400x400" />
@@ -51,12 +50,13 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({events, feed}) => {
<img src="https://placehold.it/400x400" />
</Gallery>
<SossoSection>
<h3>Sinustako kilta-aktiivi?</h3>
<Anchor to="https://sosso.fi">
Tule mukaan kiltatoimintaan&nbsp;›
</Anchor>
</SossoSection>
<CTASection
bgColor="blue1"
link="#"
linkText="Tule mukaan kiltatoimintaan&nbsp;›"
>
Sinustako kilta-aktiivi?
</CTASection>
<TextSection>
<h3>Yritystapahtumia ja vastapainoa opiskelulle</h3>
src/views/CorporatePage/CorporatePageView.tsx
+8 -8
View File
@@ -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 = () => (
</div>
</TextSection>
<SossoSection>
<h3>Mainos Sössöön?</h3>
<Anchor to="https://sosso.fi">
<h4>Killan lehden mediakortin löydät täältä›</h4>
</Anchor>
</SossoSection>
<CTASection
bgColor="orange1"
link="https://sosso.fi"
linkText="Killan lehden mediakortin löydät täältä&nbsp;›"
>
Mainos Sössöön?
</CTASection>
<TextSection>
<h3 id="tyopaikat">Työpaikkailmoitukset</h3>
src/views/FreshmenPage/FreshmenPageView.tsx
+8 -7
View File
@@ -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 = () => (
</div>
</aside>
</TextSection>
<SossoSection>
<h3>Killassa tapahtuu kaikenlaista!</h3>
<Anchor to="/kilta/toiminta">
<h4>Seuraa killan tapahtumia</h4>
</Anchor>
</SossoSection>
<CTASection
bgColor="lightBlue"
link="/kilta/toiminta"
linkText="Seuraa killan tapahtumia"
>
Killassa tapahtuu kaikenlaista!
</CTASection>
<TextSection>
<h3 id="isot">Isoryhmät</h3>
src/views/FrontPage/FrontPageView.tsx
+8 -5
View File
@@ -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<FrontPageViewProps> = ({ events, feed }) => (
</CardSection>
<SossoSection>
<h3>Sössöä vuodesta 1969.</h3>
<Anchor to="https://sosso.fi">Lue opiskelijalehden viimeisin numero&nbsp;›</Anchor>
</SossoSection>
<CTASection
bgColor="orange1"
link="https://sosso.fi"
linkText="Lue opiskelijalehden viimeisin numero&nbsp;›"
>
Sössöä vuodesta 1969.
</CTASection>
<CardSection>
{feed.map(inst => (
src/views/GuildPage/GuildPageView.tsx
+8 -10
View File
@@ -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 = () => (
</aside>
</TextSection>
<SossoSection>
<p>Killan hallinto koostuu XXX henkilöstä.</p>
</SossoSection>
<CTASection bgColor="lightBlue">
Killan hallinto koostuu XXX henkilöstä.
</CTASection>
<TextSection>
<h3 id="organisaatio">Organisaatio</h3>
@@ -101,9 +101,9 @@ const GuildPageView: React.FC = () => (
</aside>
</TextSection>
<SossoSection>
<p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <Anchor to="/toimikunnat">toimikunnat</Anchor> ja <Anchor to="/jaokset">jaokset</Anchor>.</p>
</SossoSection>
<CTASection bgColor="darkBlue">
Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <Anchor to="/toimikunnat">toimikunnat</Anchor> ja <Anchor to="/jaokset">jaokset</Anchor>.
</CTASection>
<Column>
<FullWidthSection>
@@ -157,9 +157,7 @@ const GuildPageView: React.FC = () => (
</p>
</TextSection>
<SossoSection>
<p id="jasenedut">Jäsenedut vuonna 2019</p>
</SossoSection>
<CTASection bgColor="orange1">Jäsenedut vuonna 2019</CTASection>
<TextSection>
<h3>Aalto-yliopiston tarjoamat monenlaiset edut</h3>
src/views/StudiesPage/StudiesPageView.tsx
+8 -7
View File
@@ -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 = () => (
</TextSection>
<SossoSection>
<h3>Hae opiskelemaan!</h3>
<Anchor to="https://aalto.fi">
<h4>Lue lisää Aallon sivuilta</h4>
</Anchor>
</SossoSection>
<CTASection
bgColor="orange1"
link="#"
linkText="Lue lisää Aallon sivuilta&nbsp;›"
>
Hae opiskelemaan!
</CTASection>
<TextSection>
<h3 id="yliopisto">Yliopiston järjestelmiä</h3>