Add page color classes in index.scss

2019-01-28 21:31:05 +02:00
parent 5b9a546289
commit 8030f0143a
4 changed files with 167 additions and 35 deletions
@@ -2898,6 +2898,12 @@
          "requires": {
            "is-plain-obj": "^1.0.0"
          }
+        },
+        "strict-uri-encode": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+          "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+          "dev": true
        }
      }
    },
@@ -1,34 +1,16 @@
 import * as React from "react";
 import "./AsideSection.scss";

-export enum BackgroundColor {
-  DarkBlue,
-  LightTurquoise,
-  LightBlue,
-}
-
 export interface AsideSectionProps {
-  backgroundColor: BackgroundColor;
+  className: string;
 }
 export interface AsideSectionState {}

-const colors = new Map<BackgroundColor, string>([
-  [BackgroundColor.DarkBlue, "dark-blue"],
-  [BackgroundColor.LightTurquoise, "light-turquoise"],
-  [BackgroundColor.LightBlue, "light-blue"],
-]);
-
 class AsideSection extends React.Component<AsideSectionProps, AsideSectionState> {
-  constructor(props: AsideSectionProps) {
-    super(props);
-  }
  render() {
-    const {children} = this.props;
-    const { backgroundColor } = this.props;
-    const bgClass = colors.get(backgroundColor);
-    const className = `aside-section ${bgClass}`;
+    const {children, className} = this.props;
    return (
-      <div className={className}>
+      <div className={`${className} aside-section`}>
        {children}
      </div>
    );
@@ -34,11 +34,158 @@ h2 {

 p {
  color: $white;
-  font-size: 1.5rem;
+  font-size: 16px;
 }

 a,
 a:hover {
+  font-size: 16px;
  text-decoration: none;
  color: $white;
 }
+
+.page {
+  &__dark-blue {
+    background-color: $dark-blue;
+
+    h1 {
+      color: $white;
+    }
+
+    h2 {
+      color: $light-turquoise;
+    }
+
+    h3 {
+      color: $blue;
+    }
+
+    p {
+      color: $white;
+    }
+
+    a {
+      color: $white;
+    }
+  }
+
+  &__white {
+    background-color: $white;
+
+    h1 {
+      color: $black;
+    }
+
+    h2 {
+      color: $black;
+    }
+
+    h3 {
+      color: $orange1;
+    }
+
+    p {
+      color: $black;
+    }
+
+    a {
+      color: $blue;
+    }
+  }
+
+  &__orange {
+    background-color: $orange1;
+
+    h1 {
+      color: $white;
+    }
+
+    h2 {
+      color: $white;
+    }
+
+    h3 {
+      color: $white;
+    }
+
+    p {
+      color: $white;
+    }
+
+    a {
+      color: $white;
+    }
+  }
+
+  &__light-turquoise {
+    background-color: $light-turquoise;
+
+    h1 {
+      color: $dark-blue;
+    }
+
+    h2 {
+      color: $dark-blue;
+    }
+
+    h3 {
+      color: $dark-blue;
+    }
+
+    p {
+      color: $dark-blue;
+    }
+
+    a {
+      color: $dark-blue;
+    }
+  }
+
+  &__blue {
+    background-color: $blue;
+
+    h1 {
+      color: $dark-blue;
+    }
+
+    h2 {
+      color: $dark-blue;
+    }
+
+    h3 {
+      color: $dark-blue;
+    }
+
+    p {
+      color: $white;
+    }
+
+    a {
+      color: $white;
+    }
+  }
+
+  &__light-blue {
+    background-color: $light-blue;
+
+    h1 {
+      color: $dark-blue;
+    }
+
+    h2 {
+      color: $dark-blue;
+    }
+
+    h3 {
+      color: $dark-blue;
+    }
+
+    p {
+      color: $dark-blue;
+    }
+
+    a {
+      color: $dark-blue;
+    }
+  }
+}
@@ -12,8 +12,6 @@ import Ribbon from "../../components/Ribbon";
 import InfoBox from "../../components/InfoBox";
 import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
 import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
-import { BackgroundColor } from "../../components/AsideSection/AsideSection";
-import {Link} from "react-router";
 import CustomLink from "../../components/CustomLink";

 export interface GuildPageProps {}
@@ -67,8 +65,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
            </HeroAsideSection>
          </PageSection>
          <PageSection backgroundColor={PageSectionColor.White}>
-            <AsideSection>
-            </AsideSection>
+            <AsideSection className="page__white" />
            <MainSection>
              <h2>Killan tehtävät ja tarina</h2>
              Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää
@@ -121,7 +118,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
              Teekkariuteen kuuluu olennaisena osana mukautuminen ajan vaatimuksiin. Jos asiat
              tehtäisiin aina vanhaa toistaen, ei voitaisi enää edes puhua teekkariudesta.
            </MainSection>
-            <AsideSection>
+            <AsideSection className="page__white">
              <div>
                <PageLink to="/jasenedut/" desc="vuonna 2018&nbsp;›">
                  Yliopiston jäsenedut
@@ -143,7 +140,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
            </Ribbon>
          </PageSection>
          <PageSection backgroundColor={PageSectionColor.White}>
-            <AsideSection />
+            <AsideSection className="page__white"/>
            <MainSection>
              <h2>Organisaatio</h2>

@@ -157,7 +154,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
              Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen toimikuntansa kanssa. Puheenjohtajan tehtävä on pitää langat käsissään, ja olla perillä kaikesta, mitä killassa tapahtuu. Hallitus tekee päätökset ja sopii menettelytavat viikottaisessa kokouksessaan. Hallitus on vastuussa kaikesta killan näkyvästä ja näkymättömästä toiminnasta, ja se on myös oikea osoite, jos joku asia vaivaa mieltä, tai mielessä on parannusehdotus mihin tahansa asiaan.

            </MainSection>
-            <AsideSection>
+            <AsideSection className="page__white">
              <div>
                <PageLink to="/yhteystiedot/" desc="yhteystiedot&nbsp;›">
                  Vuoden 2019 hallinto
@@ -174,7 +171,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
            </Ribbon>
          </PageSection>
          <div style={{display: "flex"}}>
-            <AsideSection backgroundColor={BackgroundColor.LightTurquoise}>
+            <AsideSection className="page__light-turquoise">
              <h3>Miksi alkaa kilta-aktiiviksi?</h3>
              <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!
@@ -189,7 +186,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
                » Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt
              </p>
            </AsideSection>
-            <AsideSection backgroundColor={BackgroundColor.LightBlue}>
+            <AsideSection className="page__light-blue">
              <h3>Runsaasti erilaisia tehtäviä</h3>
              <p>
                Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. Toimikunnissa sitoudut toimintaan vuodeksi kerrallaan. Jaostoiminta 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.
@@ -207,13 +204,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
          </div>

          <PageSection backgroundColor={PageSectionColor.White}>
-            <AsideSection>
+            <AsideSection className="page__white">
              <h2>Sähkötekniikan korkeakoulun toimikunnat</h2>
              <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.
              </p>
            </AsideSection>
-            <AsideSection>
+            <AsideSection className="page__white">
              <h2>Jaokset—kokeile kiltatoimintaa vapaammin</h2>
              <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.
@@ -226,7 +223,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
            </Ribbon>
          </PageSection>
          <PageSection backgroundColor={PageSectionColor.White}>
-            <AsideSection />
+            <AsideSection className="page__white" />
            <MainSection>
              <h2>Aalto-yliopiston tarjoamat monenlaiset edut</h2>
              <p>
@@ -236,7 +233,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
              » <CustomLink linkHref={"https://download.aalto.fi"} linkText={"Download.aalto.fi"}/> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
              </p>
            </MainSection>
-            <AsideSection>
+            <AsideSection className="page__white">
              <InfoBox>
                <CustomLink linkHref={""} linkText={"Jäseneksi liittyminen"}/> on helppoa, hauskaa ja hyödyllistä 8 € jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
              </InfoBox>