Merge branch 'feature-colorenum' into 'master'

Color enums and global SASS classes for coloring

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!1

src/assets/scss/_globals.scss

@@ -1,14 +1,39 @@
-$dark-blue: #002d3a;
-$light-blue: #bfdbd9;
-$white: #fff;
-$black: #000;
-$grey1: #d4d0c7;
-$grey2: #efece4;
-$orange1: #d57a2d;
-$orange2: #dd934e;
-$blue: #57b2df;
-$light-turquoise: #beddeb;
-$green: #c0dcd9;
-$sand: #fdf9d7;
-
 $font: 'Montserrat', sans-serif;
+
+$colors: (
+  // Name Color ?Hover?
+  dark-blue: 'dark-blue'               #002d3a,
+  light-blue: 'light-blue'             #bfdbd9,
+  white: 'white'                       #fff,
+  black: 'black'                       #000,
+  grey1: 'grey1'                       #d4d0c7,
+  grey2: 'grey2'                       #efece4,
+  orange1: 'orange1'                   #d57a2d,
+  orange2: 'orange2'                   #dd934e,
+  blue: 'blue'                         #57b2df,
+  light-turquoise: 'light-turquoise'   #beddeb,
+  green: 'green'                       #c0dcd9,
+  sand: 'sand'                         #fdf9d7
+);
+
+@function color($label) {
+  $color: map-get($colors, $label);
+
+  @if $color {
+    @return nth($color, 2);
+  }
+
+  @warn 'No specified color for '#{$label}'; add your own to _colors.scss';
+  @return null;
+}
+
+@function hover($label) {
+  $color: map-get($colors, $label);
+
+  @if $color {
+    @return nth($color, 2);
+  }
+
+  @warn 'No specified hover color for '#{$label}'; add your own to _colors.scss';
+  @return lighten($color, 20%);
+}

src/components/Accordion/Accordion.scss

@@ -1,12 +1,13 @@
 @import "../../assets/scss/globals";
 
+
 .accordion {
   margin: 0.2em;
   padding: 0.2em;
   display: flex;
   flex-flow: column nowrap;
   border-style: solid;
-  border-color: $light-turquoise;
+  border-color: color(light-turquoise);
   border-width: 1px;
 
   &__desc {
@@ -38,7 +39,7 @@
   button {
     display: flex;
     flex-flow: row nowrap;
-    background-color: $white;
+    background-color: color(white);
     width: 100%;
     margin: 0;
     padding: 0;
@@ -51,7 +52,7 @@
     flex: 1;
     text-align: center;
     padding-left: 1em;
-    color: $blue;
+    color: color(blue);
     font-size: 1.125em;
     margin: auto;
   }

src/components/AccordionIcon/AccordionIcon.scss

@@ -1,9 +1,10 @@
 @import "../../assets/scss/globals";
 
+
 .accordion-icon {
   display: flex;
-  background-color: $blue;
+  background-color: color(blue);
-  color: $white;
+  color: color(white);
   align-items: center;
   justify-content: center;
   min-width: 40px;
@@ -14,7 +15,7 @@
   font-size: 40px;
 
   &.open {
-    background-color: $orange1;
+    background-color: color(orange1);
   }
 }
 

src/components/AdminSidebarLink/AdminSidebarLink.scss

@@ -1,13 +1,14 @@
 @import "../../assets/scss/globals";
 
+
 .admin-sidebar-link {
   padding: 1rem 3rem 1rem 1rem;
-  background-color: $blue;
+  background-color: color(blue);
   letter-spacing: 3px;
   text-transform: uppercase;
   line-height: 20px;
   font-weight: bold;
-  border-left: 4px solid $blue;
+  border-left: 4px solid color(blue);
   white-space: nowrap;
 
   @media screen and (max-width: 800px - 1px) {
@@ -16,7 +17,7 @@
 
   &:hover,
   &.active {
-    border-left: 4px solid $white;
+    border-left: 4px solid color(white);
   }
 
   &::after {

src/components/AsideSection/AsideSection.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .aside-section {
   display: flex;
   flex: 1;
@@ -8,27 +9,27 @@
   padding: 4rem;
 
   &.dark-blue {
-    background-color: $dark-blue;
+    background-color: color(dark-blue);
 
     h2 {
-      color: $light-blue;
+      color: color(light-blue);
     }
 
     p {
-      color: $white;
+      color: color(white);
     }
   }
 
   &.light-turquoise {
-    background-color: $light-turquoise;
+    background-color: color(light-turquoise);
 
     h2,
     p {
-      color: $dark-blue;
+      color: color(dark-blue);
     }
   }
 
   &.light-blue {
-    background-color: $light-blue;
+    background-color: color(light-blue);
   }
 }

src/components/AsideSection/AsideSection.tsx

@@ -1,18 +1,23 @@
 import * as React from "react";
 import "./AsideSection.scss";
+import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
 
 export interface AsideSectionProps {
-  className: string;
+  className?: string;
 }
-export interface AsideSectionState {}
+export interface AsideSectionState { }
 
-class AsideSection extends React.Component<AsideSectionProps, AsideSectionState> {
+class AsideSection extends React.Component<AsideSectionProps & ColorDivProps, AsideSectionState> {
   render() {
-    const {children, className} = this.props;
+    const { children, className, ...props } = this.props;
+    const classNames = [
+      "aside-section",
+    ];
+    if (className) classNames.push(className);
     return (
-      <div className={`${className} aside-section`}>
+      <ColorDiv className={classNames.join(" ")} {...props}>
         {children}
-      </div>
+      </ColorDiv>
     );
   }
 }

src/components/Button/Button.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .button {
   -webkit-appearance: none;
   border-radius: none;
@@ -14,17 +15,17 @@
   }
 
   &.hero {
-    background-color: $dark-blue;
+    background-color: color(dark-blue);
-    color: $blue;
+    color: color(blue);
     font-weight: 800;
     letter-spacing: 1.5px;
-    border: 1px solid $light-turquoise;
+    border: 1px solid color(light-turquoise);
   }
 
   &.filled {
     justify-content: center;
-    background-color: $blue;
+    background-color: color(blue);
-    color: $white;
+    color: color(white);
     font-weight: 800;
     letter-spacing: 1.5px;
     border: none;

src/components/Card/Card.scss

@@ -1,8 +1,9 @@
 @import "../../assets/scss/globals";
 
+
 .card {
-  background-color: $white;
+  background-color: color(white);
-  color: $dark-blue;
+  color: color(dark-blue);
   white-space: wrap;
   margin: 1rem 1rem;
   display: flex;
@@ -30,7 +31,7 @@
     font-size: 1.5rem;
     text-align: center;
     font-weight: 300;
-    color: $black;
+    color: color(black);
   }
 
   &__image {
@@ -68,7 +69,7 @@
     margin: 0 0 0.5rem;
     font-weight: 200;
     line-height: 22px;
-    color: $black;
+    color: color(black);
 
     @media screen and (max-width: 1200px - 1px) {
       margin: 0.5rem 0;
@@ -77,7 +78,7 @@
   }
 
   &__datetime {
-    color: $orange1;
+    color: color(orange1);
     display: flex;
     justify-content: center;
     text-align: center;

src/components/ColorDiv/ColorDiv.scss

@@ -0,0 +1,66 @@
+@import "../../assets/scss/globals";
+
+.color-div {
+  @mixin hoverableColor($colorName) {
+    &__#{$colorName} {
+      color: color($colorName);
+    }
+
+    &__#{$colorName}Hoverable {
+      &:hover,
+      &:active {
+        color: hover($colorName);
+      }
+    }
+  }
+
+  @mixin backgroundColor($colorName) {
+    &__background_#{$colorName} {
+      background-color: color($colorName);
+    }
+
+    &__background_#{$colorName}Hoverable {
+      &:hover,
+      &:active {
+        background-color: hover($colorName);
+      }
+    }
+  }
+
+  @mixin backgroundAndHoverableColor($colorName) {
+    @include hoverableColor($colorName);
+    @include backgroundColor($colorName);
+  }
+
+  @include backgroundAndHoverableColor(dark-blue);
+  @include backgroundAndHoverableColor(light-blue);
+  @include backgroundAndHoverableColor(white);
+  @include backgroundAndHoverableColor(black);
+  @include backgroundAndHoverableColor(grey1);
+  @include backgroundAndHoverableColor(grey2);
+  @include backgroundAndHoverableColor(orange1);
+  @include backgroundAndHoverableColor(orange2);
+  @include backgroundAndHoverableColor(blue);
+  @include backgroundAndHoverableColor(light-turquoise);
+  @include backgroundAndHoverableColor(green);
+  @include backgroundAndHoverableColor(sand);
+
+  &__inherit {
+    color: inherit;
+  }
+
+  &__transparent {
+    color: transparent;
+  }
+
+  &__inheritHoverable {
+    &:hover,
+    &:active {
+      color: inherit;
+    }
+  }
+
+  &__background_transparent {
+    background-color: transparent;
+  }
+}

src/components/ColorDiv/ColorDiv.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import "./ColorDiv.scss";
+
+export enum ColorEnum {
+  DarkBlue,
+  LightBlue,
+  White,
+  Black,
+  Grey1,
+  Grey2,
+  Orange1,
+  Orange2,
+  Blue,
+  LightTurquoise,
+  Green,
+  Sand,
+  Transparent,
+  Inherit,
+}
+
+const colors = new Map<ColorEnum, string>([
+  [ColorEnum.DarkBlue, "dark-blue"],
+  [ColorEnum.LightBlue, "light-blue"],
+  [ColorEnum.White, "white"],
+  [ColorEnum.Black, "black"],
+  [ColorEnum.Grey1, "grey1"],
+  [ColorEnum.Grey2, "grey2"],
+  [ColorEnum.Orange1, "orange1"],
+  [ColorEnum.Orange2, "orange2"],
+  [ColorEnum.Blue, "blue"],
+  [ColorEnum.LightTurquoise, "light-turquoise"],
+  [ColorEnum.Green, "green"],
+  [ColorEnum.Sand, "sand"],
+  [ColorEnum.Transparent, "transparent"],
+  [ColorEnum.Inherit, "inherit"]
+]);
+
+export const getColor = (color: ColorEnum): string => `color-div__${colors.get(color)}`;
+export const getBgColor = (color: ColorEnum): string => `color-div__background_${colors.get(color)}`;
+export const getHoverColor = (color: ColorEnum): string => `color-div__${colors.get(color)}Hoverable`;
+export const getBgHoverColor = (color: ColorEnum): string => `color-div__background_${colors.get(color)}Hoverable`;
+
+
+export interface ColorDivProps extends React.HTMLAttributes<HTMLDivElement> {
+  textColor?: ColorEnum;
+  backgroundColor?: ColorEnum;
+  hoverColor?: ColorEnum;
+  backgroundHoverColor?: ColorEnum;
+}
+export interface ColorDivState { }
+
+
+class ColorDiv extends React.Component<ColorDivProps, ColorDivState> {
+  render() {
+    const { children, className, textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props } = this.props;
+    const classNames = [];
+    if (className) classNames.push(className);
+    if (textColor !== undefined) classNames.push(getColor(textColor));
+    if (backgroundColor !== undefined) classNames.push(getBgColor(backgroundColor));
+    if (hoverColor !== undefined) classNames.push(getHoverColor(hoverColor));
+    if (backgroundHoverColor !== undefined) classNames.push(getBgHoverColor(backgroundHoverColor));
+    return (
+      <div {...props} className={classNames.join(" ")} >
+        {children}
+      </div>
+    );
+  }
+}
+
+export default ColorDiv;

src/components/ColorDiv/index.ts

@@ -0,0 +1,2 @@
+import ColorDiv from "./ColorDiv";
+export default ColorDiv;

src/components/ContactCard/ContactCard.scss

@@ -1,8 +1,9 @@
 @import "../../assets/scss/globals";
 
+
 .contact-card {
-  background-color: $white;
+  background-color: color(white);
-  color: $dark-blue;
+  color: color(dark-blue);
   white-space: wrap;
   margin: 1rem 1rem;
   display: flex;
@@ -30,7 +31,7 @@
     font-size: 1.5rem;
     text-align: center;
     font-weight: 300;
-    color: $black;
+    color: color(black);
   }
 
   &__image {
@@ -68,7 +69,7 @@
     margin: 0 0 0.5rem;
     font-weight: 200;
     line-height: 22px;
-    color: $black;
+    color: color(black);
 
     @media screen and (max-width: 1200px - 1px) {
       margin: 0.5rem 0;
@@ -77,7 +78,7 @@
   }
 
   &__datetime {
-    color: $orange1;
+    color: color(orange1);
     display: flex;
     justify-content: center;
     text-align: center;

src/components/DropDownBox/DropDownBox.scss

@@ -1,7 +1,8 @@
 @import "../../assets/scss/globals";
 
+
 .drop-down-box {
-  background-color: $white;
+  background-color: color(white);
   margin-top: 0.8rem;
   position: absolute;
   left: 0;
@@ -10,7 +11,7 @@
 
   &,
   & a {
-    color: $dark-blue !important;
+    color: color(dark-blue) !important;
     text-transform: uppercase;
   }
 }

src/components/Footer/Footer.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .footer {
   display: flex;
   flex-direction: column;
@@ -9,19 +10,19 @@
   }
 
   h4 {
-    color: $light-blue;
+    color: color(light-blue);
     padding: 1.5rem 0;
   }
 
   & a {
-    color: $white;
+    color: color(white);
     text-decoration: underline;
     padding: 0.4rem 0;
     font-size: 14px;
   }
 
   & p {
-    color: $white;
+    color: color(white);
     margin: 0;
     padding: 0.4rem 0;
     font-size: 14px;
@@ -71,7 +72,7 @@
   &__copyright {
     display: flex;
     flex-flow: row nowrap;
-    background-color: $black;
+    background-color: color(black);
     text-align: center;
     justify-content: center;
     font-size: 12px;

src/components/Header/Header.scss

@@ -1,11 +1,12 @@
 @import "../../assets/scss/globals";
 
+
 .header {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   padding: 0 1rem;
-  background-color: $dark-blue;
+  background-color: color(dark-blue);
 
   @media screen and (min-width: 600px) {
     position: sticky;

src/components/HeroAsideItem/HeroAsideItem.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .hero-aside-item {
   max-width: 300px;
   line-height: 16px;
@@ -25,11 +26,11 @@
   }
 
   h6 {
-    color: $blue;
+    color: color(blue);
     font-weight: 600;
   }
 
   h6:hover {
-    color: $white;
+    color: color(white);
   }
 }

src/components/HeroAsideSection/HeroAsideSection.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .hero-aside-section {
   display: flex;
   flex-flow: column nowrap;
@@ -15,28 +16,28 @@
   padding: 3rem 1rem 2rem;
 
   &.dark-blue {
-    background-color: $dark-blue;
+    background-color: color(dark-blue);
 
     h2 {
-      color: $light-blue;
+      color: color(light-blue);
     }
 
     p {
       font-weight: 100;
-      color: $white;
+      color: color(white);
     }
   }
 
   &.light-turquoise {
-    background-color: $light-turquoise;
+    background-color: color(light-turquoise);
 
     h2,
     p {
-      color: $dark-blue;
+      color: color(dark-blue);
     }
   }
 
   &.light-blue {
-    background-color: $light-blue;
+    background-color: color(light-blue);
   }
 }

src/components/HeroAsideSection/HeroAsideSection.tsx

@@ -1,33 +1,20 @@
 import * as React from "react";
 import "./HeroAsideSection.scss";
+import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
 
-export enum BackgroundColor {
-  DarkBlue,
-  LightTurquoise,
-  LightBlue,
-}
-export interface HeroAsideSectionProps {
-  backgroundColor?: BackgroundColor;
-}
-export interface HeroAsideSectionState {}
 
-const colors = new Map<BackgroundColor, string>([
+export interface HeroAsideSectionProps { }
-  [BackgroundColor.DarkBlue, "dark-blue"],
+export interface HeroAsideSectionState { }
-  [BackgroundColor.LightTurquoise, "light-turquoise"],
-  [BackgroundColor.LightBlue, "light-blue"],
-]);
 
-class HeroAsideSection extends React.Component<HeroAsideSectionProps, HeroAsideSectionState> {
+class HeroAsideSection extends React.Component<HeroAsideSectionProps & ColorDivProps, HeroAsideSectionState> {
   render() {
-    const { backgroundColor } = this.props;
+    const className = `hero-aside-section`;
-    const bgClass = colors.get(backgroundColor);
-    const className = `hero-aside-section ${bgClass}`;
     return (
-      <div className={className}>
+      <ColorDiv className={className} {...this.props}>
         <div className="hero-aside-section-block">
           {this.props.children}
         </div>
-      </div>
+      </ColorDiv>
     );
   }
 }

src/components/MainSection/MainSection.tsx

@@ -1,19 +1,24 @@
 import * as React from "react";
 import "./MainSection.scss";
+import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
 
-export interface MainSectionProps {}
+export interface MainSectionProps { }
-export interface MainSectionState {}
+export interface MainSectionState { }
 
-class MainSection extends React.Component<MainSectionProps, MainSectionState> {
+class MainSection extends React.Component<MainSectionProps & ColorDivProps, MainSectionState> {
   constructor(props: MainSectionProps) {
     super(props);
   }
   render() {
-    const {children} = this.props;
+    const { children, className, ...props } = this.props;
+    const classNames = [
+      "main-section",
+    ];
+    if (className) classNames.push(className);
     return (
-      <div className="main-section">
+      <ColorDiv className={classNames.join(" ")} {...props}>
         {children}
-      </div>
+      </ColorDiv>
     );
   }
 }

src/components/NavbarChildLink/NavbarChildLink.scss

@@ -1,4 +1,6 @@
 @import "../../assets/scss/globals";
+
+
 $border-width: 2px;
 
 .navbar-child-link {
@@ -9,14 +11,14 @@ $border-width: 2px;
   font-weight: 400;
 
   @media screen and (max-width: 1200px - 1px) {
-    border-bottom: 1px dotted $light-blue;
+    border-bottom: 1px dotted color(light-blue);
     margin-left: 2rem;
     padding-left: 0;
   }
 
   &:hover {
     @media screen and (min-width: 1200px) {
-      background-color: $light-blue;
+      background-color: color(light-blue);
     }
   }
 }

src/components/NavbarDropdownLink/NavbarDropdownLink.scss

@@ -1,4 +1,6 @@
 @import "../../assets/scss/globals";
+
+
 $border-width: 2px;
 
 .navbar-dropdown-link {
@@ -11,7 +13,7 @@ $border-width: 2px;
   padding: 20px 0;
 
   @media screen and (max-width: 1200px - 1px) {
-    border-bottom: 1px solid $light-blue;
+    border-bottom: 1px solid color(light-blue);
   }
 }
 
@@ -25,7 +27,7 @@ $border-width: 2px;
       bottom: 5px;
       left: 0;
       width: 100%;
-      border-bottom: 4px solid $light-blue;
+      border-bottom: 4px solid color(light-blue);
     }
   }
 }

src/components/Navigation/Navigation.scss

@@ -1,12 +1,14 @@
 @import "../../assets/scss/globals";
+
+
 $border-width: 2px;
 
 .navigation,
 .navigation-mobile-menu {
   a,
   a:-webkit-any-link {
-    fill: $light-blue;
+    fill: color(light-blue);
-    color: $light-blue;
+    color: color(light-blue);
   }
 }
 
@@ -16,8 +18,8 @@ $border-width: 2px;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
-  font-size: 12px;
+  font-size: 14px;
-  color: $light-blue;
+  color: color(light-blue);
   margin-left: 5rem;
 
   @media screen and (min-width: 600px) and (max-width: 1200px - 1px) {
@@ -41,8 +43,8 @@ $border-width: 2px;
 
     a,
     a:-webkit-any-link {
-      fill: $white;
+      fill: color(white);
-      color: $white;
+      color: color(white);
     }
   }
 
@@ -66,8 +68,8 @@ $border-width: 2px;
     svg {
       width: 26px;
       height: 26px;
-      fill: $white;
+      fill: color(white);
-      color: $white;
+      color: color(white);
     }
   }
 }

src/components/PageLink/PageLink.scss

@@ -1,7 +1,8 @@
 @import "../../assets/scss/globals";
 
+
 .page-link {
-  border-left-color: $blue;
+  border-left-color: color(blue);
   border-left-width: 0.8rem;
   border-left-style: solid;
   margin: 0 1rem 1rem 0;
@@ -10,7 +11,7 @@
     display: flex;
     margin-block-start: 0;
     margin-block-end: 0;
-    color: $dark-blue;
+    color: color(dark-blue);
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 1px;
@@ -21,7 +22,7 @@
   }
 
   & a {
-    color: $dark-blue;
+    color: color(dark-blue);
     margin-left: 1rem;
     display: flex;
   }

src/components/PageSection/PageSection.scss

@@ -1,7 +1,7 @@
 @import "../../assets/scss/globals";
 
+
 .page-section {
-  background-color: $dark-blue;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
@@ -17,31 +17,6 @@
     }
   }
 
-  &.dark-blue {
-    background-color: $dark-blue;
-    color: $white;
-  }
-
-  &.white {
-    background-color: $white;
-    color: $dark-blue;
-  }
-
-  &.orange {
-    background-color: $orange1;
-    color: $white;
-  }
-
-  &.light-turquoise {
-    background-color: $light-turquoise;
-    color: $dark-blue;
-  }
-
-  &.light-blue {
-    background-color: $light-blue;
-    color: $black;
-  }
-
   &.center {
     justify-content: center;
   }
@@ -53,7 +28,7 @@
       bottom: 0;
       width: 98%;
       left: 1%;
-      border-bottom: 1px solid rgba($blue, 0.4);
+      border-bottom: 1px solid rgba(color(blue), 0.4);
     }
   }
 }

src/components/PageSection/PageSection.tsx

@@ -1,43 +1,34 @@
 import * as React from "react";
 import "./PageSection.scss";
-
+import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
-export enum BackgroundColor {
-  DarkBlue,
-  White,
-  Orange,
-  LightTurquoise,
-  LightBlue,
-}
 
 export interface PageSectionProps {
-  backgroundColor: BackgroundColor;
   center?: boolean;
   bottomBorder?: boolean;
   cardSection?: boolean;  // does section contain a grid of cards
   fullSize?: boolean;
 }
-export interface PageSectionState {}
+export interface PageSectionState { }
 
-const colors = new Map<BackgroundColor, string>([
+class PageSection extends React.Component<PageSectionProps & ColorDivProps, PageSectionState> {
-  [BackgroundColor.DarkBlue, "dark-blue"],
-  [BackgroundColor.White, "white"],
-  [BackgroundColor.Orange, "orange"],
-  [BackgroundColor.LightTurquoise, "light-turquoise"],
-  [BackgroundColor.LightBlue, "light-blue"],
-]);
-
-class PageSection extends React.Component<PageSectionProps, PageSectionState> {
   render() {
-    const { backgroundColor, children, center, bottomBorder, cardSection, fullSize } = this.props;
+    const { children, className, center, bottomBorder, cardSection, fullSize, ...props } = this.props;
     const centerClass = center ? "center" : "";
     const borderClass = bottomBorder ? "bottom-border" : "";
     const cardsClass = cardSection ? "card-section" : "";
     const nonPaddedClass = fullSize ? "" : "padded";
-    const className = `page-section ${colors.get(backgroundColor)} ${centerClass} ${borderClass} ${cardsClass} ${nonPaddedClass}`;
+    const classNames = [
+      "page-section",
+      centerClass,
+      borderClass,
+      cardsClass,
+      nonPaddedClass
+    ];
+    if (className) classNames.push(className);
     return (
-      <div className={className}>
+      <ColorDiv className={classNames.join(" ")} {...props}>
         {children}
-      </div>
+      </ColorDiv>
     );
   }
 }

src/components/Ribbon/Ribbon.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .ribbon {
   display: flex;
   flex-flow: row nowrap;
@@ -9,7 +10,6 @@
   margin: auto;
 
   p {
-    color: $white;
     font-size: 2rem;
     font-weight: 100;
     line-height: 30px;

src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .signup-questions-widget {
   button.add-link {
     background: none;
@@ -8,7 +9,7 @@
   }
 
   button.remove {
-    background-color: $orange1;
+    background-color: color(orange1);
     margin-left: auto;
     margin-bottom: 0.5rem;
     padding: 0.3rem 0.5rem;
@@ -20,6 +21,6 @@
     display: flex;
     flex-flow: column nowrap;
     padding: 0.5rem;
-    background-color: $light-blue;
+    background-color: color(light-blue);
   }
 }

src/components/SponsorReel/SponsorReel.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .sponsor-reel {
   text-align: center;
 
@@ -7,7 +8,7 @@
     text-transform: uppercase;
     letter-spacing: 2px;
     font-weight: 500;
-    color: $dark-blue;
+    color: color(dark-blue);
     margin: 1rem 0 4rem;
     font-size: 14px;
 
@@ -17,7 +18,7 @@
   }
 
   a {
-    color: $blue;
+    color: color(blue);
     text-decoration: underline;
   }
 

src/components/SponsorReel/SponsorReel.tsx

@@ -1,9 +1,11 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
 import "./SponsorReel.scss";
+import TextAnchor from "../TextAnchor";
+import { ColorEnum } from "../ColorDiv/ColorDiv";
 
-export interface SponsorReelProps {}
+export interface SponsorReelProps { }
-export interface SponsorReelState {}
+export interface SponsorReelState { }
 
 class SponsorReel extends React.Component<SponsorReelProps, SponsorReelState> {
   render() {
@@ -17,7 +19,7 @@ class SponsorReel extends React.Component<SponsorReelProps, SponsorReelState> {
           <Link to="#"><img src="https://placehold.it/200x200" /></Link>
           <Link to="#"><img src="https://placehold.it/200x200" /></Link>
         </div>
-        <Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
+        <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.LightTurquoise} to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</TextAnchor>
       </div>
     );
   }

src/components/TextAnchor/TextAnchor.scss

@@ -3,11 +3,6 @@
 .text-anchor {
   text-decoration: underline;
   font-weight: 600;
-  color: inherit;
-
-  &:hover {
-    color: $blue;
-  }
 
   &.no-weight {
     font-weight: 100;

src/components/TextAnchor/TextAnchor.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import "./TextAnchor.scss";
 import { Link } from "react-router-dom";
+import { ColorEnum, getColor, getHoverColor } from "../ColorDiv/ColorDiv";
+
 
 export enum TextSize {
   Small,
@@ -20,19 +22,24 @@ export interface TextAnchorProps {
   size?: TextSize;
   to: string;
   style?: any;
+  textColor?: ColorEnum;
+  hoverColor?: ColorEnum;
 }
-export interface TextAnchorState {}
+export interface TextAnchorState { }
 
 class TextAnchor extends React.Component<TextAnchorProps, TextAnchorState> {
   render() {
-    const { children, size, to, style } = this.props;
+    const { children, size, to, style, textColor, hoverColor } = this.props;
-    const className = `text-anchor ${sizes.get(size ? size : TextSize.Small)}`;
+    const classColor = textColor !== undefined ? getColor(textColor) : getColor(ColorEnum.DarkBlue);
+    const classHoverColor = hoverColor !== undefined ? getHoverColor(hoverColor) : getHoverColor(ColorEnum.Blue);
+    const classSize = size !== undefined ? sizes.get(size) : sizes.get(TextSize.Small);
+    const className = `text-anchor ${classSize} ${classColor} ${classHoverColor}`;
     if (to.startsWith("/")) {
-    return (
+      return (
-      <Link style={style} to={to} className={className}>
+        <Link style={style} to={to} className={className}>
-        {children}
+          {children}
-      </Link>
+        </Link>
-    );
+      );
     } else {
       return (
         <a style={style} href={to} className={className}>

src/index.scss

@@ -1,15 +1,17 @@
 @import "./assets/scss/normalize";
 @import "./assets/scss/globals";
 
-* { box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+}
 
 html,
 body {
   font-size: 16px;
-  background-color: $dark-blue;
+  background-color: color(dark-blue);
   height: 100%;
   font-family: $font;
-  color: $white;
+  color: color(white);
   overflow: auto;
 }
 
@@ -110,151 +112,5 @@ p {
 a,
 a:hover {
   text-decoration: none;
-  color: $white;
+  color: 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;
-    }
-  }
 }

src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import {render} from "react-dom";
+import { render } from "react-dom";
 import { BrowserRouter } from "react-router-dom";
-import {AppContainer} from "react-hot-loader";
+import { AppContainer } from "react-hot-loader";
 import Routes from "./routes";
 import "./index.scss";
 

src/pages/AdminCommonPage/AdminCommonPage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .admin-container {
   display: flex;
   flex-flow: row nowrap;
@@ -33,9 +34,9 @@
   input[type="submit"] {
     border: none;
     outline: none;
-    background-color: $orange2;
+    background-color: color(orange2);
     padding: 0.5rem 1rem;
-    color: $white;
+    color: color(white);
   }
 
   h1 {
@@ -44,17 +45,17 @@
 
   .error {
     margin-bottom: 0.5rem;
-    border: 1px solid $orange2;
+    border: 1px solid color(orange2);
     padding: 8px 16px;
-    color: $orange2;
+    color: color(orange2);
     display: inline-block;
   }
 
   .success {
     margin-bottom: 0.5rem;
-    border: 1px solid $green;
+    border: 1px solid color(green);
     padding: 8px 16px;
-    color: $green;
+    color: color(green);
     display: inline-block;
   }
 
@@ -65,7 +66,7 @@
     margin-bottom: 1rem;
 
     &:hover {
-      color: $orange2;
+      color: color(orange2);
     }
 
     img {

src/pages/AdminEventPage/AdminEventPage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .admin-event-page {
   table {
     border-collapse: collapse;
@@ -8,11 +9,11 @@
   table,
   th,
   td {
-    border: 1px solid $white;
+    border: 1px solid color(white);
     padding: 0.5rem;
 
     a {
-      color: $orange1;
+      color: color(orange1);
       text-decoration: underline;
     }
   }

src/pages/AdminFeedPage/AdminFeedPage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .admin-feed-page {
   table {
     border-collapse: collapse;
@@ -8,11 +9,11 @@
   table,
   th,
   td {
-    border: 1px solid $white;
+    border: 1px solid color(white);
     padding: 0.5rem;
 
     a {
-      color: $orange1;
+      color: color(orange1);
       text-decoration: underline;
     }
   }

src/pages/AdminSignupPage/AdminSignupPage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .admin-signup-page {
   table {
     border-collapse: collapse;
@@ -8,11 +9,11 @@
   table,
   th,
   td {
-    border: 1px solid $white;
+    border: 1px solid color(white);
     padding: 0.5rem;
 
     a {
-      color: $orange1;
+      color: color(orange1);
       text-decoration: underline;
     }
   }

src/pages/ContactsPage/ContactsPage.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
 import Helmet from "react-helmet";
 import "./ContactsPage.scss";
-
+import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
 import { StaticContext } from "../../server/StaticContext";
 import PageLink from "../../components/PageLink/PageLink";
 import Card from "../../components/Card";
-import { BackgroundColor as PageSectionColor }  from "../../components/PageSection/PageSection";
 import PageSection from "../../components/PageSection";
 import HeroMainSection from "../../components/HeroMainSection";
 import ContactCard from "../../components/ContactCard";
@@ -68,21 +67,21 @@ class ContactsPage extends React.Component<ContactsPageProps, ContactsPageState>
         </Helmet>
         Contacts Page
         <HeroMainSection>
-            <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
+          <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
-            <p>
+          <p>
-              lorem ipsum dolor est
+            lorem ipsum dolor est
             </p>
         </HeroMainSection>
-        <PageSection backgroundColor={PageSectionColor.White}>
+        <PageSection backgroundColor={ColorEnum.White}>
-        {contacts.map(contact => (
+          {contacts.map(contact => (
-          <ContactCard
+            <ContactCard
-            key = {contact.id}
+              key={contact.id}
-            first_name = {contact.first_name}
+              first_name={contact.first_name}
-            last_name = {contact.last_name}
+              last_name={contact.last_name}
-            phone = {contact.phone_number}
+              phone={contact.phone_number}
-            email = {contact.email}
+              email={contact.email}
             />
-        ))}
+          ))}
         </PageSection>
       </div>
     );

src/pages/EventCreatePage/EventCreatePage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .event-create-page {
   width: 100%;
 
@@ -34,8 +35,8 @@
   }
 
   button {
-    background-color: $blue;
+    background-color: color(blue);
-    color: $white;
+    color: color(white);
     padding: 0.5rem 1rem;
     border: none;
     outline: none;

src/pages/FeedCreatePage/FeedCreatePage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .post-create-page {
   width: 100%;
 
@@ -34,8 +35,8 @@
   }
 
   button {
-    background-color: $blue;
+    background-color: color(blue);
-    color: $white;
+    color: color(white);
     padding: 0.5rem 1rem;
     border: none;
     outline: none;

src/pages/FrontPage/FrontPage.tsx

@@ -9,8 +9,7 @@ import { StaticContext } from "../../server/StaticContext";
 // @ts-ignore
 import * as BeerImage from "../../assets/img/beer.jpeg";
 import PageSection from "../../components/PageSection";
-import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
+import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
-import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
 
 import PageLink from "../../components/PageLink/PageLink";
 import HeroMainSection from "../../components/HeroMainSection";
@@ -19,7 +18,7 @@ import Button, { ButtonType } from "../../components/Button";
 import Ribbon from "../../components/Ribbon";
 import SponsorReel from "../../components/SponsorReel";
 import HeroAsideItem from "../../components/HeroAsideItem";
-import TextAnchor from "../../components/TextAnchor/index";
+import TextAnchor from "../../components/TextAnchor";
 import { TextSize } from "../../components/TextAnchor/TextAnchor";
 
 interface FrontPageProps {
@@ -95,7 +94,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
     const { events, feed } = this.state;
     return (
       <div className="front-page">
-        <PageSection backgroundColor={PageSectionColor.DarkBlue} fullSize>
+        <PageSection backgroundColor={ColorEnum.DarkBlue} fullSize>
           <HeroMainSection>
             <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
             <p>
@@ -113,7 +112,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
             </div>
 
           </HeroMainSection>
-          <HeroAsideSection backgroundColor={HeroAsideColor.DarkBlue}>
+          <HeroAsideSection textColor={ColorEnum.LightBlue} backgroundColor={ColorEnum.DarkBlue}>
             <HeroAsideItem
               title="Vasta-aloittanut opiskelija"
               linkHref="/kilta/fuksi"
@@ -138,7 +137,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
             </HeroAsideItem>
           </HeroAsideSection>
         </PageSection>
-        <PageSection backgroundColor={PageSectionColor.White} cardSection>
+        <PageSection backgroundColor={ColorEnum.White} cardSection>
           {events.map(event => (
             <Card
               key={event.id}
@@ -160,16 +159,16 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
             </PageLink>
           </div>
         </PageSection>
-        <PageSection backgroundColor={PageSectionColor.Orange}>
+        <PageSection backgroundColor={ColorEnum.Orange1}>
           <Ribbon>
             <h3>Sössöä vuodesta 1969.</h3>
-            <TextAnchor size={TextSize.SmallRibbon} to="https://sosso.fi">
+            <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://sosso.fi">
               <h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
             </TextAnchor>
           </Ribbon>
         </PageSection>
         <PageSection
-          backgroundColor={PageSectionColor.White}
+          backgroundColor={ColorEnum.White}
           bottomBorder
           cardSection
         >
@@ -196,7 +195,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
             </PageLink>
           </div>
         </PageSection>
-        <PageSection center backgroundColor={PageSectionColor.White}>
+        <PageSection center backgroundColor={ColorEnum.White}>
           <SponsorReel />
         </PageSection>
       </div>

src/pages/GuildPage/GuildPage.tsx

@@ -10,10 +10,9 @@ import HeroAsideSection from "../../components/HeroAsideSection";
 import HeroAsideItem from "../../components/HeroAsideItem";
 import Ribbon from "../../components/Ribbon";
 import InfoBox from "../../components/InfoBox";
-import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
+import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
-import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
 import Accordion from "../../components/Accordion";
-import TextAnchor from "../../components/TextAnchor/index";
+import TextAnchor from "../../components/TextAnchor";
 import { TextSize } from "../../components/TextAnchor/TextAnchor";
 
 export interface GuildPageProps { }
@@ -27,13 +26,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
           <link rel="canonical" href="https://sik.ayy.fi/kilta" />
         </Helmet>
         <div className="front-page">
-          <PageSection backgroundColor={PageSectionColor.DarkBlue} fullSize>
+          <PageSection backgroundColor={ColorEnum.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 textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.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}>
+            <HeroAsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
               <HeroAsideItem
                 title="Toverielämää ja sähkötekniikkaa"
                 linkHref="/kilta/tehtavat"
@@ -56,25 +55,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               </HeroAsideItem>
             </HeroAsideSection>
           </PageSection>
-          <PageSection backgroundColor={PageSectionColor.White}>
+          <PageSection backgroundColor={ColorEnum.White}>
-            <AsideSection className="page__white" />
+            <AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
-            <MainSection>
+            <MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} >
               <h3>Killan tehtävät ja tarina</h3>
-              <p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää
+              <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 textColor={ColorEnum.Blue} hoverColor={ColorEnum.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>
-              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
-              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 textColor={ColorEnum.Blue} hoverColor={ColorEnum.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 textColor={ColorEnum.Blue} hoverColor={ColorEnum.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 textColor={ColorEnum.Blue} hoverColor={ColorEnum.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>
-              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
-              lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.</p>
 
               <h6>Takana lähes satavuotinen historia</h6>
 
@@ -98,11 +85,8 @@ 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 textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
-              yhdistyksistä</TextAnchor>. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin
+              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ä kiinnostavaa.</p>
-                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
               tutustua, jotta saa jonkinlaisen kuvan siitä vahvasta teekkarihengestä, joka
@@ -110,7 +94,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.</p>
             </MainSection>
-            <AsideSection className="page__white">
+            <AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} >
               <div>
                 <PageLink to="/jasenedut/" desc="vuonna 2018&nbsp;›">
                   Yliopiston jäsenedut
@@ -126,27 +110,27 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               </div>
             </AsideSection>
           </PageSection>
-          <PageSection backgroundColor={PageSectionColor.LightBlue}>
+          <PageSection backgroundColor={ColorEnum.LightBlue} textColor={ColorEnum.DarkBlue}>
             <Ribbon>
               <p>Killan hallinto koostuu XXX henkilöstä.</p>
             </Ribbon>
           </PageSection>
-          <PageSection backgroundColor={PageSectionColor.White}>
+          <PageSection backgroundColor={ColorEnum.White}>
-            <AsideSection className="page__white" />
+            <AsideSection backgroundColor={ColorEnum.White} />
-            <MainSection>
+            <MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.DarkBlue} >
               <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 textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.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 textColor={ColorEnum.Blue} hoverColor={ColorEnum.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 textColor={ColorEnum.Blue} hoverColor={ColorEnum.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 textColor={ColorEnum.Blue} hoverColor={ColorEnum.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 textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
 
             </MainSection>
-            <AsideSection className="page__white">
+            <AsideSection backgroundColor={ColorEnum.White}>
               <div>
                 <PageLink to="/yhteystiedot/" desc="yhteystiedot&nbsp;›">
                   Vuoden 2019 hallinto
@@ -157,13 +141,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               </div>
             </AsideSection>
           </PageSection>
-          <PageSection backgroundColor={PageSectionColor.DarkBlue}>
+          <PageSection backgroundColor={ColorEnum.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 textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.Ribbon} to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.Ribbon} to="/jaokset">jaokset</TextAnchor>.</p>
             </Ribbon>
           </PageSection>
           <div style={{ display: "flex", }}>
-            <AsideSection className="page__light-turquoise">
+            <AsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
               <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!
@@ -178,16 +162,16 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
                 » Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt
               </p>
             </AsideSection>
-            <AsideSection className="page__light-blue">
+            <AsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightBlue}>
               <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 textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.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 textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""} >valtuustoon</TextAnchor>, <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>hallitukseen</TextAnchor> tai <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>toimariksi</TextAnchor>?
               </p>
               <p>
-                » <TextAnchor to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
+                » <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
               </p>
               <p>
                 » Lorem ipsum
@@ -195,8 +179,8 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
             </AsideSection>
           </div>
 
-          <PageSection backgroundColor={PageSectionColor.White}>
+          <PageSection backgroundColor={ColorEnum.White}>
-            <AsideSection className="page__white">
+            <AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
               <div>
                 <h2>Sähkötekniikan korkeakoulun toimikunnat</h2>
                 <p>
@@ -218,7 +202,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
                 <Accordion title="Ipsum" />
               </div>
             </AsideSection>
-            <AsideSection className="page__white">
+            <AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
               <div>
                 <h2>Jaokset—kokeile kiltatoimintaa vapaammin</h2>
                 <p>
@@ -227,23 +211,23 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               </div>
             </AsideSection>
           </PageSection>
-          <PageSection backgroundColor={PageSectionColor.Orange}>
+          <PageSection backgroundColor={ColorEnum.Orange1}>
             <Ribbon>
               <p>Jäsenedut vuonna 2019</p>
             </Ribbon>
           </PageSection>
-          <PageSection backgroundColor={PageSectionColor.White}>
+          <PageSection backgroundColor={ColorEnum.White}>
-            <AsideSection className="page__white" />
+            <AsideSection backgroundColor={ColorEnum.White} />
-            <MainSection>
+            <MainSection textColor={ColorEnum.Black}>
               <h2>Aalto-yliopiston tarjoamat monenlaiset edut</h2>
               <p>
                 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 textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
               </p>
             </MainSection>
-            <AsideSection className="page__white">
+            <AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
               <InfoBox>
                 <TextAnchor to={""}>Jäseneksi liittyminen</TextAnchor> on helppoa, hauskaa ja hyödyllistä 8 € jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
               </InfoBox>

src/pages/SignUpPage/SignUpPage.tsx

@@ -3,7 +3,7 @@ import Helmet from "react-helmet";
 import "./SignUpPage.scss";
 import { getForm, SignupForm } from "../../models/SignupForm";
 import PageSection from "../../components/PageSection";
-import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
+import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
 import { Question, optionTypes } from "../../components/SignupQuestionsWidget";
 
 export interface SignUpPageProps {
@@ -50,7 +50,7 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
 
   fetchSignUp = (): Promise<SignupForm> => {
     const { match } = this.props;
-    const { id }  = match.params;
+    const { id } = match.params;
     const formPromise = getForm(id);
     formPromise.then(signUpForm => {
       this.setState({
@@ -117,7 +117,7 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
         <Helmet>
           <link rel="canonical" href={`https://sik.ayy.fi/signup/${id}`} />
         </Helmet>
-        <PageSection backgroundColor={PageSectionColor.DarkBlue}>
+        <PageSection backgroundColor={ColorEnum.DarkBlue}>
           {content}
         </PageSection>
       </div>

src/pages/SignupCreatePage/SignupCreatePage.scss

@@ -1,5 +1,6 @@
 @import "../../assets/scss/globals";
 
+
 .signup-create-page {
   width: 100%;
 
@@ -34,8 +35,8 @@
   }
 
   button {
-    background-color: $blue;
+    background-color: color(blue);
-    color: $white;
+    color: color(white);
     padding: 0.5rem 1rem;
     border: none;
     outline: none;

src/routes.tsx

@@ -20,11 +20,11 @@ import ContactsPage from "./pages/ContactsPage";
 import AdminSignupPage from "./pages/AdminSignupPage";
 import SignupCreatePage from "./pages/SignupCreatePage";
 import SignUpPage from "./pages/SignUpPage";
-import ActualPage from "./pages/ActualPage/index";
+import ActualPage from "./pages/ActualPage";
-import FreshmenPage from "./pages/FreshmenPage/FreshmenPage";
+import FreshmenPage from "./pages/FreshmenPage";
-import StudiesPage from "./pages/StudiesPage/index";
+import StudiesPage from "./pages/StudiesPage";
-import CorporatePage from "./pages/CorporatePage/CorporatePage";
+import CorporatePage from "./pages/CorporatePage";
-import InEnglishPage from "./pages/InEnglishPage/index";
+import InEnglishPage from "./pages/InEnglishPage";
 
 const renderPage = (Page) => (props): JSX.Element => {
   return <CommonPage page={Page} {...props} />;
@@ -60,11 +60,11 @@ const adminRoutes = [
   { path: "/admin/feed/create", page: FeedCreatePage },
   { path: "/admin/feed/:id", page: FeedCreatePage },
   { path: "/admin/events", page: AdminEventPage },
-  { path: "/admin/events/create", page: EventCreatePage},
+  { path: "/admin/events/create", page: EventCreatePage },
-  { path: "/admin/events/:id", page: EventCreatePage},
+  { path: "/admin/events/:id", page: EventCreatePage },
   { path: "/admin/signups", page: AdminSignupPage },
-  { path: "/admin/signups/create", page: SignupCreatePage},
+  { path: "/admin/signups/create", page: SignupCreatePage },
-  { path: "/admin/signups/:id", page: SignupCreatePage},
+  { path: "/admin/signups/:id", page: SignupCreatePage },
   { path: "/admin/logout", page: AdminLogoutPage },
   { path: "/admin", page: AdminFrontPage },
 ];