From 10485d650e28e193a849302b0cea4319b380b0e1 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Mon, 3 Jun 2019 19:19:21 +0300 Subject: [PATCH] Move Color enum to index file --- .../HeroAsideSection/HeroAsideSection.tsx | 17 ++++--------- src/components/PageSection/PageSection.tsx | 21 +++------------- src/components/TextAnchor/TextAnchor.scss | 1 - src/components/TextAnchor/TextAnchor.tsx | 13 +++++----- src/index.tsx | 20 ++++++++++++++-- src/pages/ContactsPage/ContactsPage.tsx | 24 +++++++++---------- src/pages/FrontPage/FrontPage.tsx | 4 ++-- src/pages/GuildPage/GuildPage.tsx | 16 ++++++------- src/pages/SignUpPage/SignUpPage.tsx | 4 ++-- 9 files changed, 56 insertions(+), 64 deletions(-) diff --git a/src/components/HeroAsideSection/HeroAsideSection.tsx b/src/components/HeroAsideSection/HeroAsideSection.tsx index 3affa75..715a3c0 100644 --- a/src/components/HeroAsideSection/HeroAsideSection.tsx +++ b/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 {} - -const colors = new Map([ - [BackgroundColor.DarkBlue, "dark-blue"], - [BackgroundColor.LightTurquoise, "light-turquoise"], - [BackgroundColor.LightBlue, "light-blue"], -]); +export interface HeroAsideSectionState { } class HeroAsideSection extends React.Component { render() { diff --git a/src/components/PageSection/PageSection.tsx b/src/components/PageSection/PageSection.tsx index e63e716..c1b0fc1 100644 --- a/src/components/PageSection/PageSection.tsx +++ b/src/components/PageSection/PageSection.tsx @@ -1,30 +1,15 @@ import * as React from "react"; import "./PageSection.scss"; - -export enum BackgroundColor { - DarkBlue, - White, - Orange, - LightTurquoise, - LightBlue, -} +import { colors, ColorEnum } from "../../index"; 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 {} - -const colors = new Map([ - [BackgroundColor.DarkBlue, "dark-blue"], - [BackgroundColor.White, "white"], - [BackgroundColor.Orange, "orange"], - [BackgroundColor.LightTurquoise, "light-turquoise"], - [BackgroundColor.LightBlue, "light-blue"], -]); +export interface PageSectionState { } class PageSection extends React.Component { render() { diff --git a/src/components/TextAnchor/TextAnchor.scss b/src/components/TextAnchor/TextAnchor.scss index 6864abd..9975fe0 100644 --- a/src/components/TextAnchor/TextAnchor.scss +++ b/src/components/TextAnchor/TextAnchor.scss @@ -3,7 +3,6 @@ .text-anchor { text-decoration: underline; font-weight: 600; - color: inherit; &:hover { color: $blue; diff --git a/src/components/TextAnchor/TextAnchor.tsx b/src/components/TextAnchor/TextAnchor.tsx index 5402562..ff58901 100644 --- a/src/components/TextAnchor/TextAnchor.tsx +++ b/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 { render() { const { children, size, to, style } = this.props; const className = `text-anchor ${sizes.get(size ? size : TextSize.Small)}`; if (to.startsWith("/")) { - return ( - - {children} - - ); + return ( + + {children} + + ); } else { return ( diff --git a/src/index.tsx b/src/index.tsx index 2c5e515..7cbb2c2 100644 --- a/src/index.tsx +++ b/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.DarkBlue, "dark-blue"], + [ColorEnum.White, "white"], + [ColorEnum.Orange, "orange"], + [ColorEnum.LightTurquoise, "light-turquoise"], + [ColorEnum.LightBlue, "light-blue"], +]); + render( diff --git a/src/pages/ContactsPage/ContactsPage.tsx b/src/pages/ContactsPage/ContactsPage.tsx index 5c0a1a1..2666c73 100644 --- a/src/pages/ContactsPage/ContactsPage.tsx +++ b/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 Contacts Page -

Aalto-yliopiston Sähköinsinöörikilta

-

- lorem ipsum dolor est +

Aalto-yliopiston Sähköinsinöörikilta

+

+ lorem ipsum dolor est

- {contacts.map(contact => ( - ( + - ))} + ))} ); diff --git a/src/pages/FrontPage/FrontPage.tsx b/src/pages/FrontPage/FrontPage.tsx index f8003f3..2efc28d 100644 --- a/src/pages/FrontPage/FrontPage.tsx +++ b/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 { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection"; +import { ColorEnum as PageSectionColor } from "../../index"; +import { ColorEnum as HeroAsideColor } from "../../index"; import PageLink from "../../components/PageLink/PageLink"; import HeroMainSection from "../../components/HeroMainSection"; diff --git a/src/pages/GuildPage/GuildPage.tsx b/src/pages/GuildPage/GuildPage.tsx index 4fcf74b..61cacc3 100644 --- a/src/pages/GuildPage/GuildPage.tsx +++ b/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 { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection"; +import { ColorEnum as PageSectionColor } from "../../index"; +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 {

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 tapahtumakalenterin 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.

Yhteistyössä korkeakoulun kanssa, kilta kehittää opetusta. Kilta on mukana kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun henkilöstöä lähemmäs kiltalaisia. Kilta avaa oven yritysmaailmaan järjestämällä yritysten kanssa excursioita, - saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa - uusista avoimista työpaikoista. + saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa + uusista avoimista työpaikoista. Killalla on Otaniemen mukavin kiltahuone, 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.

Takana lähes satavuotinen historia
@@ -100,8 +100,8 @@ class GuildPage extends React.Component { Aalto-yliopistossa. Teekkariutta on vaikkapa toimiminen killoissa tai jossain AYY:n lukuisista yhdistyksistä. 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.

Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa diff --git a/src/pages/SignUpPage/SignUpPage.tsx b/src/pages/SignUpPage/SignUpPage.tsx index 620ade0..718f01c 100644 --- a/src/pages/SignUpPage/SignUpPage.tsx +++ b/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 { fetchSignUp = (): Promise => { const { match } = this.props; - const { id } = match.params; + const { id } = match.params; const formPromise = getForm(id); formPromise.then(signUpForm => { this.setState({