Move Color enum to index file

src/components/HeroAsideSection/HeroAsideSection.tsx

@@ -1,21 +1,12 @@
 import * as React from "react";
 import "./HeroAsideSection.scss";
+import { colors, ColorEnum } from "../../index";
+
 
-export enum BackgroundColor {
-  DarkBlue,
-  LightTurquoise,
-  LightBlue,
-}
 export interface HeroAsideSectionProps {
-  backgroundColor?: BackgroundColor;
+  backgroundColor?: ColorEnum;
 }
-export interface HeroAsideSectionState {}
+export interface HeroAsideSectionState { }
-
-const colors = new Map<BackgroundColor, string>([
-  [BackgroundColor.DarkBlue, "dark-blue"],
-  [BackgroundColor.LightTurquoise, "light-turquoise"],
-  [BackgroundColor.LightBlue, "light-blue"],
-]);
 
 class HeroAsideSection extends React.Component<HeroAsideSectionProps, HeroAsideSectionState> {
   render() {

src/components/PageSection/PageSection.tsx

@@ -1,30 +1,15 @@
 import * as React from "react";
 import "./PageSection.scss";
-
+import { colors, ColorEnum } from "../../index";
-export enum BackgroundColor {
-  DarkBlue,
-  White,
-  Orange,
-  LightTurquoise,
-  LightBlue,
-}
 
 export interface PageSectionProps {
-  backgroundColor: BackgroundColor;
+  backgroundColor: ColorEnum;
   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>([
-  [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() {

src/components/TextAnchor/TextAnchor.scss

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

src/components/TextAnchor/TextAnchor.tsx

@@ -20,19 +20,20 @@ export interface TextAnchorProps {
   size?: TextSize;
   to: string;
   style?: any;
+  color?: string;
 }
-export interface TextAnchorState {}
+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)}`;
     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.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";
 
@@ -9,6 +9,22 @@ console.log("Using API URL: ", process.env.API_URL);
 
 const rootEl = document.getElementById("root");
 
+export enum ColorEnum {
+  DarkBlue,
+  White,
+  Orange,
+  LightTurquoise,
+  LightBlue,
+}
+
+export const colors = new Map<ColorEnum, string>([
+  [ColorEnum.DarkBlue, "dark-blue"],
+  [ColorEnum.White, "white"],
+  [ColorEnum.Orange, "orange"],
+  [ColorEnum.LightTurquoise, "light-turquoise"],
+  [ColorEnum.LightBlue, "light-blue"],
+]);
+
 render(
   <AppContainer>
     <BrowserRouter>

src/pages/ContactsPage/ContactsPage.tsx

@@ -5,7 +5,7 @@ import "./ContactsPage.scss";
 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 { ColorEnum as PageSectionColor } from "../../index";
 import PageSection from "../../components/PageSection";
 import HeroMainSection from "../../components/HeroMainSection";
 import ContactCard from "../../components/ContactCard";
@@ -68,21 +68,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}>
-        {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/FrontPage/FrontPage.tsx

@@ -9,8 +9,8 @@ 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 as PageSectionColor } from "../../index";
-import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
+import { ColorEnum as HeroAsideColor } from "../../index";
 
 import PageLink from "../../components/PageLink/PageLink";
 import HeroMainSection from "../../components/HeroMainSection";

src/pages/GuildPage/GuildPage.tsx

@@ -10,8 +10,8 @@ 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 as PageSectionColor } from "../../index";
-import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
+import { ColorEnum as HeroAsideColor } from "../../index";
 import Accordion from "../../components/Accordion";
 import TextAnchor from "../../components/TextAnchor/index";
 import { TextSize } from "../../components/TextAnchor/TextAnchor";
@@ -63,17 +63,17 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               <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
+                      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
               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
+                      saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa
-                uusista avoimista työpaikoista.
+                      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
+                      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>
@@ -100,8 +100,8 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               Aalto-yliopistossa.
               Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor 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
+                      osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen
-                Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä
+                      Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä
               kiinnostavaa.</p>
 
               <p>Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa

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 as PageSectionColor } from "../../index";
 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({