Add global SASS class for color and hover selector color

src/assets/scss/_globals.scss

@@ -12,3 +12,63 @@ $green: #c0dcd9;
 $sand: #fdf9d7;
 
 $font: 'Montserrat', sans-serif;
+
+.dark-blue {
+  color: $dark-blue;
+}
+
+.white {
+  color: $white;
+}
+
+.orange {
+  color: $orange1;
+}
+
+.light-turquoise {
+  color: $light-turquoise;
+}
+
+.light-blue {
+  color: $light-blue;
+}
+
+.blue {
+  color: $blue;
+}
+
+.hover-dark-blue {
+  &:hover {
+    color: $dark-blue;
+  }
+}
+
+.hover-white {
+  &:hover {
+    color: $white;
+  }
+}
+
+.hover-orange {
+  &:hover {
+    color: $orange1;
+  }
+}
+
+.hover-light-turquoise {
+  &:hover {
+    color: $light-turquoise;
+  }
+}
+
+.hover-light-blue {
+  &:hover {
+    color: $light-blue;
+  }
+}
+
+.hover-blue {
+  &:hover {
+    color: $blue;
+  }
+}

src/components/TextAnchor/TextAnchor.scss

@@ -4,10 +4,6 @@
   text-decoration: underline;
   font-weight: 600;
 
-  &:hover {
-    color: $blue;
-  }
-
   &.no-weight {
     font-weight: 100;
 

src/components/TextAnchor/TextAnchor.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import "./TextAnchor.scss";
 import { Link } from "react-router-dom";
+import { ColorEnum, colors } from "../../index";
 
 export enum TextSize {
   Small,
@@ -20,14 +21,18 @@ export interface TextAnchorProps {
   size?: TextSize;
   to: string;
   style?: any;
-  color?: string;
+  color?: ColorEnum;
+  hoverColor?: ColorEnum;
 }
 export interface TextAnchorState { }
 
 class TextAnchor extends React.Component<TextAnchorProps, TextAnchorState> {
   render() {
-    const { children, size, to, style } = this.props;
-    const className = `text-anchor ${sizes.get(size ? size : TextSize.Small)}`;
+    const { children, size, to, style, color, hoverColor } = this.props;
+    const className = `text-anchor
+     ${sizes.get(size !== undefined ? size : TextSize.Small)}
+     ${color !== undefined ? colors.get(color) : "dark-blue"}
+      hover-${hoverColor !== undefined ? colors.get(hoverColor) : "blue"}`;
     if (to.startsWith("/")) {
       return (
         <Link style={style} to={to} className={className}>

src/index.scss

@@ -1,7 +1,9 @@
 @import "./assets/scss/normalize";
 @import "./assets/scss/globals";
 
-* { box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+}
 
 html,
 body {

src/index.tsx

@@ -15,6 +15,7 @@ export enum ColorEnum {
   Orange,
   LightTurquoise,
   LightBlue,
+  Blue,
 }
 
 export const colors = new Map<ColorEnum, string>([
@@ -23,6 +24,7 @@ export const colors = new Map<ColorEnum, string>([
   [ColorEnum.Orange, "orange"],
   [ColorEnum.LightTurquoise, "light-turquoise"],
   [ColorEnum.LightBlue, "light-blue"],
+  [ColorEnum.Blue, "blue"],
 ]);
 
 render(

src/pages/GuildPage/GuildPage.tsx

@@ -30,7 +30,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
           <PageSection backgroundColor={PageSectionColor.DarkBlue} fullSize>
             <HeroMainSection>
               <h1>Kilta koostuu sähkötekniikan ja elektroniikan (ELEC) tutkinto-ohjelmissa opiskelevista opiskelijoista</h1>
-              <p>Vapaa-ajan <TextAnchor to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <TextAnchor to="https://sosso.fi">Sössöä</TextAnchor>, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.</p>
+              <p>Vapaa-ajan <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.White} to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.White} to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.White} to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.White} to="https://sosso.fi">Sössöä</TextAnchor>, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.</p>
               <p>Arvot estrumquias doluptatur aut quam fugiti cus debit landisciis eatemperes eumquibus di blat que sim etus idis dolut labor ad magnat.</p>
             </HeroMainSection>
             <HeroAsideSection backgroundColor={HeroAsideColor.LightTurquoise}>
@@ -62,18 +62,18 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               <h3>Killan tehtävät ja tarina</h3>
               <p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää
               esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja
-              saunailtoja. Valinnanvaraa on, joten <TextAnchor to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella
-                      saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi
+              saunailtoja. Valinnanvaraa on, joten <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella
+                                        saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi
               tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>
 
-              <p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor to="/opinnot">opetusta</TextAnchor>. Kilta on mukana
+              <p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/opinnot">opetusta</TextAnchor>. Kilta on mukana
               kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun
               henkilöstöä lähemmäs kiltalaisia.
-              Kilta avaa oven <TextAnchor to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> järjestämällä yritysten kanssa excursioita,
-                      saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa
-                      uusista avoimista työpaikoista.
-              Killalla on Otaniemen mukavin <TextAnchor to="/kiltahuone">kiltahuone</TextAnchor>, jossa voi käydä hengähtämässä
-                      luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän
+              Kilta avaa oven <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> järjestämällä yritysten kanssa excursioita,
+                                        saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa
+                                        uusista avoimista työpaikoista.
+              Killalla on Otaniemen mukavin <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/kiltahuone">kiltahuone</TextAnchor>, jossa voi käydä hengähtämässä
+                                        luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän
               lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.</p>
 
               <h6>Takana lähes satavuotinen historia</h6>
@@ -98,10 +98,10 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               määritelmä kuuluukin: “teekkarius on kaikkea sitä, mitä teekkarit tekevät”. Yksi asia
               meitä kaikkia kuitenkin yhdistää. Opiskelemme jotain tekniikkaan liittyvää täällä
               Aalto-yliopistossa.
-              Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
+              Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
               yhdistyksistä</TextAnchor>. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin
-                      osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen
-                      Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä
+                                        osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen
+                                        Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä
               kiinnostavaa.</p>
 
               <p>Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa
@@ -136,14 +136,14 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
             <MainSection>
               <h2>Organisaatio</h2>
 
-              <p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor to="/valtuusto">valtuusto</TextAnchor>, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 1–2 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. <TextAnchor to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
+              <p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/valtuusto">valtuusto</TextAnchor>, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 1–2 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
 
               <h6>Valtuuston toimintaa</h6>
 
-              <p>Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. <TextAnchor to="/dokumenttiarkisto">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
+              <p>Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/dokumenttiarkisto">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
 
               <h6>Hallituksen toimintaa</h6>
-              <p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor to="/toimikunnat">toimikuntansa</TextAnchor> 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 <TextAnchor to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
+              <p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/toimikunnat">toimikuntansa</TextAnchor> 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 <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
 
             </MainSection>
             <AsideSection className="page__white">
@@ -159,7 +159,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
           </PageSection>
           <PageSection backgroundColor={PageSectionColor.DarkBlue}>
             <Ribbon>
-              <p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor size={TextSize.Ribbon} to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor size={TextSize.Ribbon} to="/jaokset">jaokset</TextAnchor>.</p>
+              <p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} size={TextSize.Ribbon} to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} size={TextSize.Ribbon} to="/jaokset">jaokset</TextAnchor>.</p>
             </Ribbon>
           </PageSection>
           <div style={{ display: "flex", }}>
@@ -181,13 +181,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
             <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. <TextAnchor to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor 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.
+                Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} 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 to={""} >valtuustoon</TextAnchor>, <TextAnchor to={""}>hallitukseen</TextAnchor> tai <TextAnchor to={""}>toimariksi</TextAnchor>?
+                » Haluatko <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={""} >valtuustoon</TextAnchor>, <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={""}>hallitukseen</TextAnchor> tai <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={""}>toimariksi</TextAnchor>?
               </p>
               <p>
-                » <TextAnchor to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
+                » <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
               </p>
               <p>
                 » Lorem ipsum
@@ -240,7 +240,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
                 Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.
               </p>
               <p>
-                » <TextAnchor to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
+                » <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
               </p>
             </MainSection>
             <AsideSection className="page__white">