From 84f2a64d38f1d48c3bc37236ca7521e1e3e97c34 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Mon, 3 Jun 2019 18:29:53 +0300 Subject: [PATCH 1/7] Navigatiopn font to 14px --- src/components/Navigation/Navigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index 7ca5142..a511fc3 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -16,7 +16,7 @@ $border-width: 2px; flex-flow: row nowrap; justify-content: space-between; align-items: center; - font-size: 12px; + font-size: 14px; color: $light-blue; margin-left: 5rem; From 10485d650e28e193a849302b0cea4319b380b0e1 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Mon, 3 Jun 2019 19:19:21 +0300 Subject: [PATCH 2/7] 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({ From 8ae0783c69872f91486910eadb974f22bd25bbd4 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Wed, 5 Jun 2019 19:33:06 +0300 Subject: [PATCH 3/7] Add global SASS class for color and hover selector color --- src/assets/scss/_globals.scss | 60 +++++++++++++++++++++++ src/components/TextAnchor/TextAnchor.scss | 4 -- src/components/TextAnchor/TextAnchor.tsx | 11 +++-- src/index.scss | 4 +- src/index.tsx | 2 + src/pages/GuildPage/GuildPage.tsx | 40 +++++++-------- 6 files changed, 93 insertions(+), 28 deletions(-) diff --git a/src/assets/scss/_globals.scss b/src/assets/scss/_globals.scss index 7154e88..d5c3c27 100644 --- a/src/assets/scss/_globals.scss +++ b/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; + } +} diff --git a/src/components/TextAnchor/TextAnchor.scss b/src/components/TextAnchor/TextAnchor.scss index 9975fe0..f954b40 100644 --- a/src/components/TextAnchor/TextAnchor.scss +++ b/src/components/TextAnchor/TextAnchor.scss @@ -4,10 +4,6 @@ text-decoration: underline; font-weight: 600; - &:hover { - color: $blue; - } - &.no-weight { font-weight: 100; diff --git a/src/components/TextAnchor/TextAnchor.tsx b/src/components/TextAnchor/TextAnchor.tsx index ff58901..0f14952 100644 --- a/src/components/TextAnchor/TextAnchor.tsx +++ b/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 { 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 ( diff --git a/src/index.scss b/src/index.scss index 735dbff..1000f1e 100644 --- a/src/index.scss +++ b/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 { diff --git a/src/index.tsx b/src/index.tsx index 7cbb2c2..e7e5d64 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -15,6 +15,7 @@ export enum ColorEnum { Orange, LightTurquoise, LightBlue, + Blue, } export const colors = new Map([ @@ -23,6 +24,7 @@ export const colors = new Map([ [ColorEnum.Orange, "orange"], [ColorEnum.LightTurquoise, "light-turquoise"], [ColorEnum.LightBlue, "light-blue"], + [ColorEnum.Blue, "blue"], ]); render( diff --git a/src/pages/GuildPage/GuildPage.tsx b/src/pages/GuildPage/GuildPage.tsx index 61cacc3..56b70bd 100644 --- a/src/pages/GuildPage/GuildPage.tsx +++ b/src/pages/GuildPage/GuildPage.tsx @@ -30,7 +30,7 @@ class GuildPage extends React.Component {

Kilta koostuu sähkötekniikan ja elektroniikan (ELEC) tutkinto-ohjelmissa opiskelevista opiskelijoista

-

Vapaa-ajan jäsenpalvelujen lisäksi killan tehtävänä on edistää jäsentensä opintoja, tarjota uraohjausta ja fuksikasvatusta. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti Sössöä, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.

+

Vapaa-ajan jäsenpalvelujen lisäksi killan tehtävänä on edistää jäsentensä opintoja, tarjota uraohjausta ja fuksikasvatusta. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti Sössöä, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.

Arvot estrumquias doluptatur aut quam fugiti cus debit landisciis eatemperes eumquibus di blat que sim etus idis dolut labor ad magnat.

@@ -62,18 +62,18 @@ class GuildPage extends React.Component {

Killan tehtävät ja tarina

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 + saunailtoja. Valinnanvaraa on, joten tapahtumakalenterin aktiivisella seuraamisella + 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 +

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. - 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 + 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. + 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 lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.

Takana lähes satavuotinen historia
@@ -98,10 +98,10 @@ class GuildPage extends React.Component { 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 AYY:n lukuisista + 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 @@ -136,14 +136,14 @@ class GuildPage extends React.Component {

Organisaatio

-

Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama hallitus apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan valtuusto, 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. Hallituksen kuulumiset lorem.

+

Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama hallitus apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan valtuusto, 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. Hallituksen kuulumiset lorem.

Valtuuston toimintaa
-

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. Pöytäkirjat ja muut dokumentit lorem ipsum.

+

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. Pöytäkirjat ja muut dokumentit lorem ipsum.

Hallituksen toimintaa
-

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

+

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

@@ -159,7 +159,7 @@ class GuildPage extends React.Component { -

Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.

+

Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.
@@ -181,13 +181,13 @@ class GuildPage extends React.Component {

Runsaasti erilaisia tehtäviä

- Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. Toimikunnissa sitoudut toimintaan vuodeksi kerrallaan. Jaostoiminta mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman. + Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. Toimikunnissa sitoudut toimintaan vuodeksi kerrallaan. Jaostoiminta mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.

- » Haluatko valtuustoon, hallitukseen tai toimariksi? + » Haluatko valtuustoon, hallitukseen tai toimariksi?

- » Toimihenkilönä pääset edistämään opintoja + » Toimihenkilönä pääset edistämään opintoja

» Lorem ipsum @@ -240,7 +240,7 @@ class GuildPage extends React.Component { Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.

- » Download.aalto.fi Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi. + » Download.aalto.fi Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.

From 02daa01d2562c1b3cff8ce2e15678c19b84ee7d9 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Tue, 2 Jul 2019 20:43:44 +0300 Subject: [PATCH 4/7] Total color overhaul on Front and Guild page --- src/assets/scss/_globals.scss | 142 +++++++++------- src/components/Accordion/Accordion.scss | 7 +- .../AccordionIcon/AccordionIcon.scss | 7 +- .../AdminSidebarLink/AdminSidebarLink.scss | 7 +- src/components/AsideSection/AsideSection.scss | 13 +- src/components/AsideSection/AsideSection.tsx | 18 ++- src/components/Button/Button.scss | 11 +- src/components/Card/Card.scss | 11 +- src/components/ColorDiv/ColorDiv.scss | 66 ++++++++ src/components/ColorDiv/ColorDiv.tsx | 31 ++++ src/components/ColorDiv/index.ts | 2 + src/components/ContactCard/ContactCard.scss | 11 +- src/components/DropDownBox/DropDownBox.scss | 5 +- src/components/Footer/Footer.scss | 9 +- src/components/Header/Header.scss | 3 +- .../HeroAsideItem/HeroAsideItem.scss | 5 +- .../HeroAsideSection/HeroAsideSection.scss | 13 +- .../HeroAsideSection/HeroAsideSection.tsx | 17 +- src/components/MainSection/MainSection.tsx | 18 ++- .../NavbarChildLink/NavbarChildLink.scss | 6 +- .../NavbarDropdownLink.scss | 6 +- src/components/Navigation/Navigation.scss | 16 +- src/components/PageLink/PageLink.scss | 7 +- src/components/PageSection/PageSection.scss | 29 +--- src/components/PageSection/PageSection.tsx | 21 ++- src/components/Ribbon/Ribbon.scss | 2 +- .../SignupQuestionsWidget.scss | 5 +- src/components/SponsorReel/SponsorReel.scss | 5 +- src/components/SponsorReel/SponsorReel.tsx | 8 +- src/components/TextAnchor/TextAnchor.tsx | 14 +- src/index.scss | 152 +----------------- src/index.tsx | 57 ++++--- .../AdminCommonPage/AdminCommonPage.scss | 15 +- src/pages/AdminEventPage/AdminEventPage.scss | 5 +- src/pages/AdminFeedPage/AdminFeedPage.scss | 5 +- .../AdminSignupPage/AdminSignupPage.scss | 5 +- .../EventCreatePage/EventCreatePage.scss | 5 +- src/pages/FeedCreatePage/FeedCreatePage.scss | 5 +- src/pages/FrontPage/FrontPage.tsx | 9 +- src/pages/GuildPage/GuildPage.tsx | 88 +++++----- src/pages/SignUpPage/SignUpPage.tsx | 4 +- .../SignupCreatePage/SignupCreatePage.scss | 5 +- 42 files changed, 439 insertions(+), 431 deletions(-) create mode 100644 src/components/ColorDiv/ColorDiv.scss create mode 100644 src/components/ColorDiv/ColorDiv.tsx create mode 100644 src/components/ColorDiv/index.ts diff --git a/src/assets/scss/_globals.scss b/src/assets/scss/_globals.scss index d5c3c27..d81c114 100644 --- a/src/assets/scss/_globals.scss +++ b/src/assets/scss/_globals.scss @@ -1,74 +1,104 @@ -$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; -.dark-blue { - color: $dark-blue; +$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; } -.white { - color: $white; +@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%); } -.orange { - color: $orange1; -} -.light-turquoise { - color: $light-turquoise; -} -.light-blue { - color: $light-blue; -} +@mixin hoverableColor($colorName) { + .color--#{$colorName} { + color: color($colorName); + } -.blue { - color: $blue; -} - -.hover-dark-blue { - &:hover { - color: $dark-blue; + .color--#{$colorName}Hoverable { + &:hover, + &:active { + color: hover($colorName); + } } } -.hover-white { - &:hover { - color: $white; +@mixin backgroundColor($colorName) { + .color--background-#{$colorName} { + background-color: color($colorName); + } + + .color--background-#{$colorName}Hoverable { + &:hover, + &:active { + background-color: hover($colorName); + } } } -.hover-orange { - &:hover { - color: $orange1; +@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); + +.color--inherit { + color: inherit; +} + +.color--transparent { + color: transparent; +} + +.color--inheritHoverable { + &:hover, + &:active { + color: inherit; } } -.hover-light-turquoise { - &:hover { - color: $light-turquoise; - } -} - -.hover-light-blue { - &:hover { - color: $light-blue; - } -} - -.hover-blue { - &:hover { - color: $blue; - } -} +.color--background-transparent { + background-color: transparent; +} \ No newline at end of file diff --git a/src/components/Accordion/Accordion.scss b/src/components/Accordion/Accordion.scss index e602d79..e33fbe0 100644 --- a/src/components/Accordion/Accordion.scss +++ b/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; } diff --git a/src/components/AccordionIcon/AccordionIcon.scss b/src/components/AccordionIcon/AccordionIcon.scss index 9954319..35c0a6b 100644 --- a/src/components/AccordionIcon/AccordionIcon.scss +++ b/src/components/AccordionIcon/AccordionIcon.scss @@ -1,9 +1,10 @@ @import "../../assets/scss/globals"; + .accordion-icon { display: flex; - background-color: $blue; - color: $white; + background-color: color(blue); + 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); } } diff --git a/src/components/AdminSidebarLink/AdminSidebarLink.scss b/src/components/AdminSidebarLink/AdminSidebarLink.scss index 9f46a40..95fd309 100644 --- a/src/components/AdminSidebarLink/AdminSidebarLink.scss +++ b/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 { diff --git a/src/components/AsideSection/AsideSection.scss b/src/components/AsideSection/AsideSection.scss index 9ba1738..aa4398a 100644 --- a/src/components/AsideSection/AsideSection.scss +++ b/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); } } diff --git a/src/components/AsideSection/AsideSection.tsx b/src/components/AsideSection/AsideSection.tsx index 4ecef38..6fe47fd 100644 --- a/src/components/AsideSection/AsideSection.tsx +++ b/src/components/AsideSection/AsideSection.tsx @@ -1,18 +1,24 @@ import * as React from "react"; import "./AsideSection.scss"; +import ColorDiv from "../ColorDiv"; +import { ColorDivProps } from "../ColorDiv/ColorDiv"; export interface AsideSectionProps { - className: string; + className?: string; } -export interface AsideSectionState {} +export interface AsideSectionState { } -class AsideSection extends React.Component { +class AsideSection extends React.Component { render() { - const {children, className} = this.props; + const { children, className, ...props } = this.props; + const classNames = [ + "aside-section", + ]; + if (className) classNames.push(className); return ( -
+ {children} -
+ ); } } diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 72e2daa..503875f 100644 --- a/src/components/Button/Button.scss +++ b/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; - color: $blue; + background-color: color(dark-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; - color: $white; + background-color: color(blue); + color: color(white); font-weight: 800; letter-spacing: 1.5px; border: none; diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index c7598b5..7b224c2 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -1,8 +1,9 @@ @import "../../assets/scss/globals"; + .card { - background-color: $white; - color: $dark-blue; + background-color: color(white); + 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; diff --git a/src/components/ColorDiv/ColorDiv.scss b/src/components/ColorDiv/ColorDiv.scss new file mode 100644 index 0000000..dfd38e6 --- /dev/null +++ b/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; + } +} diff --git a/src/components/ColorDiv/ColorDiv.tsx b/src/components/ColorDiv/ColorDiv.tsx new file mode 100644 index 0000000..fef9c18 --- /dev/null +++ b/src/components/ColorDiv/ColorDiv.tsx @@ -0,0 +1,31 @@ +import * as React from "react"; +import "./ColorDiv.scss"; +import { ColorEnum, getColor, getBgColor, getHoverColor, getBgHoverColor } from "../.."; + +export interface ColorDivProps extends React.HTMLAttributes { + textColor?: ColorEnum; + backgroundColor?: ColorEnum; + hoverColor?: ColorEnum; + backgroundHoverColor?: ColorEnum; +} +export interface ColorDivState { } + + +class ColorDiv extends React.Component { + 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 ( +
+ {children} +
+ ); + } +} + +export default ColorDiv; diff --git a/src/components/ColorDiv/index.ts b/src/components/ColorDiv/index.ts new file mode 100644 index 0000000..5eb8589 --- /dev/null +++ b/src/components/ColorDiv/index.ts @@ -0,0 +1,2 @@ +import ColorDiv from "./ColorDiv"; +export default ColorDiv; diff --git a/src/components/ContactCard/ContactCard.scss b/src/components/ContactCard/ContactCard.scss index 3f77076..0598811 100644 --- a/src/components/ContactCard/ContactCard.scss +++ b/src/components/ContactCard/ContactCard.scss @@ -1,8 +1,9 @@ @import "../../assets/scss/globals"; + .contact-card { - background-color: $white; - color: $dark-blue; + background-color: color(white); + 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; diff --git a/src/components/DropDownBox/DropDownBox.scss b/src/components/DropDownBox/DropDownBox.scss index ff74c3a..a8c3b83 100644 --- a/src/components/DropDownBox/DropDownBox.scss +++ b/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; } } diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss index da4cad9..254e480 100644 --- a/src/components/Footer/Footer.scss +++ b/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; diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 0b24977..8e6fb48 100644 --- a/src/components/Header/Header.scss +++ b/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; diff --git a/src/components/HeroAsideItem/HeroAsideItem.scss b/src/components/HeroAsideItem/HeroAsideItem.scss index 51a0f14..f2f18b7 100644 --- a/src/components/HeroAsideItem/HeroAsideItem.scss +++ b/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); } } diff --git a/src/components/HeroAsideSection/HeroAsideSection.scss b/src/components/HeroAsideSection/HeroAsideSection.scss index c2c7dc9..827a189 100644 --- a/src/components/HeroAsideSection/HeroAsideSection.scss +++ b/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); } } diff --git a/src/components/HeroAsideSection/HeroAsideSection.tsx b/src/components/HeroAsideSection/HeroAsideSection.tsx index 715a3c0..b60b5e7 100644 --- a/src/components/HeroAsideSection/HeroAsideSection.tsx +++ b/src/components/HeroAsideSection/HeroAsideSection.tsx @@ -1,24 +1,21 @@ import * as React from "react"; import "./HeroAsideSection.scss"; -import { colors, ColorEnum } from "../../index"; +import ColorDiv from "../ColorDiv/index"; +import { ColorDivProps } from "../ColorDiv/ColorDiv"; -export interface HeroAsideSectionProps { - backgroundColor?: ColorEnum; -} +export interface HeroAsideSectionProps { } export interface HeroAsideSectionState { } -class HeroAsideSection extends React.Component { +class HeroAsideSection extends React.Component { render() { - const { backgroundColor } = this.props; - const bgClass = colors.get(backgroundColor); - const className = `hero-aside-section ${bgClass}`; + const className = `hero-aside-section`; return ( -
+
{this.props.children}
-
+ ); } } diff --git a/src/components/MainSection/MainSection.tsx b/src/components/MainSection/MainSection.tsx index a95d1c4..16353c6 100644 --- a/src/components/MainSection/MainSection.tsx +++ b/src/components/MainSection/MainSection.tsx @@ -1,19 +1,25 @@ import * as React from "react"; import "./MainSection.scss"; +import ColorDiv from "../ColorDiv"; +import { ColorDivProps } from "../ColorDiv/ColorDiv"; -export interface MainSectionProps {} -export interface MainSectionState {} +export interface MainSectionProps { } +export interface MainSectionState { } -class MainSection extends React.Component { +class MainSection extends React.Component { 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 ( -
+ {children} -
+ ); } } diff --git a/src/components/NavbarChildLink/NavbarChildLink.scss b/src/components/NavbarChildLink/NavbarChildLink.scss index aca44af..9e27b98 100644 --- a/src/components/NavbarChildLink/NavbarChildLink.scss +++ b/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); } } } diff --git a/src/components/NavbarDropdownLink/NavbarDropdownLink.scss b/src/components/NavbarDropdownLink/NavbarDropdownLink.scss index 96ee165..cd25198 100644 --- a/src/components/NavbarDropdownLink/NavbarDropdownLink.scss +++ b/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); } } } diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index a511fc3..9650f76 100644 --- a/src/components/Navigation/Navigation.scss +++ b/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; - color: $light-blue; + fill: color(light-blue); + color: color(light-blue); } } @@ -17,7 +19,7 @@ $border-width: 2px; justify-content: space-between; align-items: center; 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; - color: $white; + fill: color(white); + color: color(white); } } @@ -66,8 +68,8 @@ $border-width: 2px; svg { width: 26px; height: 26px; - fill: $white; - color: $white; + fill: color(white); + color: color(white); } } } diff --git a/src/components/PageLink/PageLink.scss b/src/components/PageLink/PageLink.scss index 8f543a8..d48c12e 100644 --- a/src/components/PageLink/PageLink.scss +++ b/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; } diff --git a/src/components/PageSection/PageSection.scss b/src/components/PageSection/PageSection.scss index c1adfa1..5bb875e 100644 --- a/src/components/PageSection/PageSection.scss +++ b/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); } } } diff --git a/src/components/PageSection/PageSection.tsx b/src/components/PageSection/PageSection.tsx index c1b0fc1..d0d3cd9 100644 --- a/src/components/PageSection/PageSection.tsx +++ b/src/components/PageSection/PageSection.tsx @@ -1,9 +1,9 @@ import * as React from "react"; import "./PageSection.scss"; -import { colors, ColorEnum } from "../../index"; +import ColorDiv from "../ColorDiv/index"; +import { ColorDivProps } from "../ColorDiv/ColorDiv"; export interface PageSectionProps { - backgroundColor: ColorEnum; center?: boolean; bottomBorder?: boolean; cardSection?: boolean; // does section contain a grid of cards @@ -11,18 +11,25 @@ export interface PageSectionProps { } export interface PageSectionState { } -class PageSection extends React.Component { +class PageSection extends React.Component { 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 ( -
+ {children} -
+ ); } } diff --git a/src/components/Ribbon/Ribbon.scss b/src/components/Ribbon/Ribbon.scss index d6b53c6..b7de281 100644 --- a/src/components/Ribbon/Ribbon.scss +++ b/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; diff --git a/src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss b/src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss index 9fa5833..a239ce4 100644 --- a/src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss +++ b/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); } } diff --git a/src/components/SponsorReel/SponsorReel.scss b/src/components/SponsorReel/SponsorReel.scss index 5609deb..579ec14 100644 --- a/src/components/SponsorReel/SponsorReel.scss +++ b/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; } diff --git a/src/components/SponsorReel/SponsorReel.tsx b/src/components/SponsorReel/SponsorReel.tsx index 32a3e82..d53b070 100644 --- a/src/components/SponsorReel/SponsorReel.tsx +++ b/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 "../.."; -export interface SponsorReelProps {} -export interface SponsorReelState {} +export interface SponsorReelProps { } +export interface SponsorReelState { } class SponsorReel extends React.Component { render() { @@ -17,7 +19,7 @@ class SponsorReel extends React.Component {
- Haluatko kuulla lisää yhteistyöstä kanssamme? + Haluatko kuulla lisää yhteistyöstä kanssamme? ); } diff --git a/src/components/TextAnchor/TextAnchor.tsx b/src/components/TextAnchor/TextAnchor.tsx index 0f14952..3e7af14 100644 --- a/src/components/TextAnchor/TextAnchor.tsx +++ b/src/components/TextAnchor/TextAnchor.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import "./TextAnchor.scss"; import { Link } from "react-router-dom"; -import { ColorEnum, colors } from "../../index"; +import { ColorEnum, getColor, getHoverColor } from "../.."; export enum TextSize { Small, @@ -21,18 +21,18 @@ export interface TextAnchorProps { size?: TextSize; to: string; style?: any; - color?: ColorEnum; + textColor?: ColorEnum; hoverColor?: ColorEnum; } export interface TextAnchorState { } class TextAnchor extends React.Component { render() { - 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"}`; + const { children, size, to, style, textColor, hoverColor } = this.props; + 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 ( diff --git a/src/index.scss b/src/index.scss index 1000f1e..0888f87 100644 --- a/src/index.scss +++ b/src/index.scss @@ -8,10 +8,10 @@ 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; } @@ -112,151 +112,5 @@ p { a, a:hover { text-decoration: none; - color: $white; -} - -.page { - &__dark-blue { - background-color: $dark-blue; - - h1 { - color: $white; - } - - h2 { - color: $light-turquoise; - } - - h3 { - color: $blue; - } - - p { - color: $white; - } - - a { - color: $white; - } - } - - &__white { - background-color: $white; - - h1 { - color: $black; - } - - h2 { - color: $black; - } - - h3 { - color: $orange1; - } - - p { - color: $black; - } - - a { - color: $blue; - } - } - - &__orange { - background-color: $orange1; - - h1 { - color: $white; - } - - h2 { - color: $white; - } - - h3 { - color: $white; - } - - p { - color: $white; - } - - a { - color: $white; - } - } - - &__light-turquoise { - background-color: $light-turquoise; - - h1 { - color: $dark-blue; - } - - h2 { - color: $dark-blue; - } - - h3 { - color: $dark-blue; - } - - p { - color: $dark-blue; - } - - a { - color: $dark-blue; - } - } - - &__blue { - background-color: $blue; - - h1 { - color: $dark-blue; - } - - h2 { - color: $dark-blue; - } - - h3 { - color: $dark-blue; - } - - p { - color: $white; - } - - a { - color: $white; - } - } - - &__light-blue { - background-color: $light-blue; - - h1 { - color: $dark-blue; - } - - h2 { - color: $dark-blue; - } - - h3 { - color: $dark-blue; - } - - p { - color: $dark-blue; - } - - a { - color: $dark-blue; - } - } + color: color(white); } diff --git a/src/index.tsx b/src/index.tsx index e7e5d64..e892a87 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,28 +5,49 @@ import { AppContainer } from "react-hot-loader"; import Routes from "./routes"; import "./index.scss"; +export enum ColorEnum { + DarkBlue, + LightBlue, + White, + Black, + Grey1, + Grey2, + Orange1, + Orange2, + Blue, + LightTurquoise, + Green, + Sand, + Transparent, + Inherit, +} + +const colors = new Map([ + [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`; + console.log("Using API URL: ", process.env.API_URL); const rootEl = document.getElementById("root"); -export enum ColorEnum { - DarkBlue, - White, - Orange, - LightTurquoise, - LightBlue, - Blue, -} - -export const colors = new Map([ - [ColorEnum.DarkBlue, "dark-blue"], - [ColorEnum.White, "white"], - [ColorEnum.Orange, "orange"], - [ColorEnum.LightTurquoise, "light-turquoise"], - [ColorEnum.LightBlue, "light-blue"], - [ColorEnum.Blue, "blue"], -]); - render( diff --git a/src/pages/AdminCommonPage/AdminCommonPage.scss b/src/pages/AdminCommonPage/AdminCommonPage.scss index dc7f5ec..9fd679c 100644 --- a/src/pages/AdminCommonPage/AdminCommonPage.scss +++ b/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 { diff --git a/src/pages/AdminEventPage/AdminEventPage.scss b/src/pages/AdminEventPage/AdminEventPage.scss index ea1da3e..a9e96b2 100644 --- a/src/pages/AdminEventPage/AdminEventPage.scss +++ b/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; } } diff --git a/src/pages/AdminFeedPage/AdminFeedPage.scss b/src/pages/AdminFeedPage/AdminFeedPage.scss index ea2a401..600b4ca 100644 --- a/src/pages/AdminFeedPage/AdminFeedPage.scss +++ b/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; } } diff --git a/src/pages/AdminSignupPage/AdminSignupPage.scss b/src/pages/AdminSignupPage/AdminSignupPage.scss index aea0a80..146425a 100644 --- a/src/pages/AdminSignupPage/AdminSignupPage.scss +++ b/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; } } diff --git a/src/pages/EventCreatePage/EventCreatePage.scss b/src/pages/EventCreatePage/EventCreatePage.scss index bd1e402..b9bd11b 100644 --- a/src/pages/EventCreatePage/EventCreatePage.scss +++ b/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; - color: $white; + background-color: color(blue); + color: color(white); padding: 0.5rem 1rem; border: none; outline: none; diff --git a/src/pages/FeedCreatePage/FeedCreatePage.scss b/src/pages/FeedCreatePage/FeedCreatePage.scss index a2ecc54..20e40a7 100644 --- a/src/pages/FeedCreatePage/FeedCreatePage.scss +++ b/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; - color: $white; + background-color: color(blue); + color: color(white); padding: 0.5rem 1rem; border: none; outline: none; diff --git a/src/pages/FrontPage/FrontPage.tsx b/src/pages/FrontPage/FrontPage.tsx index 2efc28d..fc8f3d8 100644 --- a/src/pages/FrontPage/FrontPage.tsx +++ b/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 { ColorEnum as PageSectionColor } from "../../index"; -import { ColorEnum as HeroAsideColor } from "../../index"; +import { ColorEnum as PageSectionColor, ColorEnum } from "../../index"; import PageLink from "../../components/PageLink/PageLink"; import HeroMainSection from "../../components/HeroMainSection"; @@ -113,7 +112,7 @@ class FrontPage extends React.Component { - + { - +

Sössöä vuodesta 1969.

- +

Lue opiskelijalehden viimeisin numero ›

 diff --git a/src/pages/GuildPage/GuildPage.tsx b/src/pages/GuildPage/GuildPage.tsx index 56b70bd..c6e9832 100644 --- a/src/pages/GuildPage/GuildPage.tsx +++ b/src/pages/GuildPage/GuildPage.tsx @@ -10,8 +10,7 @@ import HeroAsideSection from "../../components/HeroAsideSection"; import HeroAsideItem from "../../components/HeroAsideItem"; import Ribbon from "../../components/Ribbon"; import InfoBox from "../../components/InfoBox"; -import { ColorEnum as PageSectionColor } from "../../index"; -import { ColorEnum as HeroAsideColor } from "../../index"; +import { ColorEnum } from "../../index"; import Accordion from "../../components/Accordion"; import TextAnchor from "../../components/TextAnchor/index"; import { TextSize } from "../../components/TextAnchor/TextAnchor"; @@ -27,13 +26,13 @@ class GuildPage extends React.Component {
- +

Kilta koostuu sähkötekniikan ja elektroniikan (ELEC) tutkinto-ohjelmissa opiskelevista opiskelijoista

-

Vapaa-ajan jäsenpalvelujen lisäksi killan tehtävänä on edistää jäsentensä opintoja, tarjota uraohjausta ja fuksikasvatusta. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti Sössöä, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.

+

Vapaa-ajan jäsenpalvelujen lisäksi killan tehtävänä on edistää jäsentensä opintoja, tarjota uraohjausta ja fuksikasvatusta. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti Sössöä, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.

Arvot estrumquias doluptatur aut quam fugiti cus debit landisciis eatemperes eumquibus di blat que sim etus idis dolut labor ad magnat.

 - + { - - - + + +

Killan tehtävät ja tarina

-

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 - tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.

+

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 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. - 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 - lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.

+

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. 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 lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.

Takana lähes satavuotinen historia
@@ -98,11 +85,8 @@ class GuildPage extends React.Component { 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 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ä - kiinnostavaa.

+ 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ä kiinnostavaa.

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 { Teekkariuteen kuuluu olennaisena osana mukautuminen ajan vaatimuksiin. Jos asiat tehtäisiin aina vanhaa toistaen, ei voitaisi enää edes puhua teekkariudesta.

 - +
Yliopiston jäsenedut @@ -126,27 +110,27 @@ class GuildPage extends React.Component {
- +

Killan hallinto koostuu XXX henkilöstä.

 - - - + + +

Organisaatio

-

Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama hallitus apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan valtuusto, 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. Hallituksen kuulumiset lorem.

+

Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama hallitus apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan valtuusto, 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. Hallituksen kuulumiset lorem.

Valtuuston toimintaa
-

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. Pöytäkirjat ja muut dokumentit lorem ipsum.

+

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. Pöytäkirjat ja muut dokumentit lorem ipsum.

Hallituksen toimintaa
-

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

+

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

 - +
Vuoden 2019 hallinto @@ -157,13 +141,13 @@ class GuildPage extends React.Component {
- + -

Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.

+

Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.
- +

Miksi alkaa kilta-aktiiviksi?

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 { » Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt

- +

Runsaasti erilaisia tehtäviä

- Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. Toimikunnissa sitoudut toimintaan vuodeksi kerrallaan. Jaostoiminta mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman. + Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. Toimikunnissa sitoudut toimintaan vuodeksi kerrallaan. Jaostoiminta mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.

- » Haluatko valtuustoon, hallitukseen tai toimariksi? + » Haluatko valtuustoon, hallitukseen tai toimariksi?

- » Toimihenkilönä pääset edistämään opintoja + » Toimihenkilönä pääset edistämään opintoja

» Lorem ipsum @@ -195,8 +179,8 @@ class GuildPage extends React.Component {

- - + +

Sähkötekniikan korkeakoulun toimikunnat

@@ -218,7 +202,7 @@ class GuildPage extends React.Component {

- +

Jaokset—kokeile kiltatoimintaa vapaammin

@@ -227,23 +211,23 @@ class GuildPage extends React.Component {

- +

Jäsenedut vuonna 2019

 - - - + + +

Aalto-yliopiston tarjoamat monenlaiset edut

Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.

- » Download.aalto.fi Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi. + » Download.aalto.fi Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.

- + Jäseneksi liittyminen on helppoa, hauskaa ja hyödyllistä 8 € jäsenmaksulla pääset nauttimaan kaikista jäseneduista. diff --git a/src/pages/SignUpPage/SignUpPage.tsx b/src/pages/SignUpPage/SignUpPage.tsx index 718f01c..262925c 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 { ColorEnum as PageSectionColor } from "../../index"; +import { ColorEnum } from "../../index"; import { Question, optionTypes } from "../../components/SignupQuestionsWidget"; export interface SignUpPageProps { @@ -117,7 +117,7 @@ class SignUpPage extends React.Component { - + {content}
diff --git a/src/pages/SignupCreatePage/SignupCreatePage.scss b/src/pages/SignupCreatePage/SignupCreatePage.scss index 3617eb2..998ef7f 100644 --- a/src/pages/SignupCreatePage/SignupCreatePage.scss +++ b/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; - color: $white; + background-color: color(blue); + color: color(white); padding: 0.5rem 1rem; border: none; outline: none; From 949d57fff63e8aca8c8f9c329cf1717cb00fd1d5 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Tue, 2 Jul 2019 21:40:25 +0300 Subject: [PATCH 5/7] Move color div to globals since TextAnchor uses it --- src/assets/scss/_globals.scss | 101 +++++++++++++------------- src/components/ColorDiv/ColorDiv.scss | 65 ----------------- 2 files changed, 51 insertions(+), 115 deletions(-) diff --git a/src/assets/scss/_globals.scss b/src/assets/scss/_globals.scss index d81c114..4bcf2ef 100644 --- a/src/assets/scss/_globals.scss +++ b/src/assets/scss/_globals.scss @@ -39,66 +39,67 @@ $colors: ( } +.color-div { + @mixin hoverableColor($colorName) { + &__#{$colorName} { + color: color($colorName); + } -@mixin hoverableColor($colorName) { - .color--#{$colorName} { - color: color($colorName); - } - - .color--#{$colorName}Hoverable { - &:hover, - &:active { - color: hover($colorName); + &__#{$colorName}Hoverable { + &:hover, + &:active { + color: hover($colorName); + } } } -} -@mixin backgroundColor($colorName) { - .color--background-#{$colorName} { - background-color: color($colorName); - } + @mixin backgroundColor($colorName) { + &__background_#{$colorName} { + background-color: color($colorName); + } - .color--background-#{$colorName}Hoverable { - &:hover, - &:active { - background-color: hover($colorName); + &__background_#{$colorName}Hoverable { + &:hover, + &:active { + background-color: hover($colorName); + } } } -} -@mixin backgroundAndHoverableColor($colorName) { - @include hoverableColor($colorName); - @include backgroundColor($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); + @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); -.color--inherit { - color: inherit; -} - -.color--transparent { - color: transparent; -} - -.color--inheritHoverable { - &:hover, - &:active { + &__inherit { color: inherit; } -} -.color--background-transparent { - background-color: transparent; -} \ No newline at end of file + &__transparent { + color: transparent; + } + + &__inheritHoverable { + &:hover, + &:active { + color: inherit; + } + } + + &__background_transparent { + background-color: transparent; + } +} diff --git a/src/components/ColorDiv/ColorDiv.scss b/src/components/ColorDiv/ColorDiv.scss index dfd38e6..d74729b 100644 --- a/src/components/ColorDiv/ColorDiv.scss +++ b/src/components/ColorDiv/ColorDiv.scss @@ -1,66 +1 @@ @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; - } -} From 18821d222c5ec2c919e81f3f1df9247780ea58fd Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Tue, 2 Jul 2019 21:55:41 +0300 Subject: [PATCH 6/7] Remove ColorEnum aliases --- src/pages/ContactsPage/ContactsPage.tsx | 4 ++-- src/pages/FrontPage/FrontPage.tsx | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/pages/ContactsPage/ContactsPage.tsx b/src/pages/ContactsPage/ContactsPage.tsx index 2666c73..dd9333a 100644 --- a/src/pages/ContactsPage/ContactsPage.tsx +++ b/src/pages/ContactsPage/ContactsPage.tsx @@ -2,10 +2,10 @@ import * as React from "react"; import Helmet from "react-helmet"; import "./ContactsPage.scss"; +import { ColorEnum } from "../.."; import { StaticContext } from "../../server/StaticContext"; import PageLink from "../../components/PageLink/PageLink"; import Card from "../../components/Card"; -import { ColorEnum as PageSectionColor } from "../../index"; import PageSection from "../../components/PageSection"; import HeroMainSection from "../../components/HeroMainSection"; import ContactCard from "../../components/ContactCard"; @@ -73,7 +73,7 @@ class ContactsPage extends React.Component lorem ipsum dolor est

- + {contacts.map(contact => ( { const { events, feed } = this.state; return (
- +

Aalto-yliopiston Sähköinsinöörikilta

@@ -137,7 +137,7 @@ class FrontPage extends React.Component { - + {events.map(event => ( {

- +

Sössöä vuodesta 1969.

@@ -168,7 +168,7 @@ class FrontPage extends React.Component { @@ -195,7 +195,7 @@ class FrontPage extends React.Component { - + From d1f84084726234fa0542a3d6f9849510d6ebf61c Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Wed, 3 Jul 2019 01:04:59 +0300 Subject: [PATCH 7/7] Fix import paths in whole project --- src/assets/scss/_globals.scss | 66 ------------------- src/components/AsideSection/AsideSection.tsx | 3 +- src/components/ColorDiv/ColorDiv.scss | 65 ++++++++++++++++++ src/components/ColorDiv/ColorDiv.tsx | 41 +++++++++++- .../HeroAsideSection/HeroAsideSection.tsx | 3 +- src/components/MainSection/MainSection.tsx | 3 +- src/components/PageSection/PageSection.tsx | 3 +- src/components/SponsorReel/SponsorReel.tsx | 2 +- src/components/TextAnchor/TextAnchor.tsx | 3 +- src/index.tsx | 39 ----------- src/pages/ContactsPage/ContactsPage.tsx | 3 +- src/pages/FrontPage/FrontPage.tsx | 4 +- src/pages/GuildPage/GuildPage.tsx | 4 +- src/pages/SignUpPage/SignUpPage.tsx | 2 +- src/routes.tsx | 18 ++--- 15 files changed, 127 insertions(+), 132 deletions(-) diff --git a/src/assets/scss/_globals.scss b/src/assets/scss/_globals.scss index 4bcf2ef..4a6bcc8 100644 --- a/src/assets/scss/_globals.scss +++ b/src/assets/scss/_globals.scss @@ -37,69 +37,3 @@ $colors: ( @warn 'No specified hover color for '#{$label}'; add your own to _colors.scss'; @return lighten($color, 20%); } - - -.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; - } -} diff --git a/src/components/AsideSection/AsideSection.tsx b/src/components/AsideSection/AsideSection.tsx index 6fe47fd..0ed377b 100644 --- a/src/components/AsideSection/AsideSection.tsx +++ b/src/components/AsideSection/AsideSection.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import "./AsideSection.scss"; -import ColorDiv from "../ColorDiv"; -import { ColorDivProps } from "../ColorDiv/ColorDiv"; +import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; export interface AsideSectionProps { className?: string; diff --git a/src/components/ColorDiv/ColorDiv.scss b/src/components/ColorDiv/ColorDiv.scss index d74729b..ea7b98b 100644 --- a/src/components/ColorDiv/ColorDiv.scss +++ b/src/components/ColorDiv/ColorDiv.scss @@ -1 +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; + } +} \ No newline at end of file diff --git a/src/components/ColorDiv/ColorDiv.tsx b/src/components/ColorDiv/ColorDiv.tsx index fef9c18..de07fb3 100644 --- a/src/components/ColorDiv/ColorDiv.tsx +++ b/src/components/ColorDiv/ColorDiv.tsx @@ -1,6 +1,45 @@ import * as React from "react"; import "./ColorDiv.scss"; -import { ColorEnum, getColor, getBgColor, getHoverColor, getBgHoverColor } from "../.."; + +export enum ColorEnum { + DarkBlue, + LightBlue, + White, + Black, + Grey1, + Grey2, + Orange1, + Orange2, + Blue, + LightTurquoise, + Green, + Sand, + Transparent, + Inherit, +} + +const colors = new Map([ + [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 { textColor?: ColorEnum; diff --git a/src/components/HeroAsideSection/HeroAsideSection.tsx b/src/components/HeroAsideSection/HeroAsideSection.tsx index b60b5e7..3693afb 100644 --- a/src/components/HeroAsideSection/HeroAsideSection.tsx +++ b/src/components/HeroAsideSection/HeroAsideSection.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import "./HeroAsideSection.scss"; -import ColorDiv from "../ColorDiv/index"; -import { ColorDivProps } from "../ColorDiv/ColorDiv"; +import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; export interface HeroAsideSectionProps { } diff --git a/src/components/MainSection/MainSection.tsx b/src/components/MainSection/MainSection.tsx index 16353c6..473a3e9 100644 --- a/src/components/MainSection/MainSection.tsx +++ b/src/components/MainSection/MainSection.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import "./MainSection.scss"; -import ColorDiv from "../ColorDiv"; -import { ColorDivProps } from "../ColorDiv/ColorDiv"; +import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; export interface MainSectionProps { } export interface MainSectionState { } diff --git a/src/components/PageSection/PageSection.tsx b/src/components/PageSection/PageSection.tsx index d0d3cd9..fc7cb7c 100644 --- a/src/components/PageSection/PageSection.tsx +++ b/src/components/PageSection/PageSection.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import "./PageSection.scss"; -import ColorDiv from "../ColorDiv/index"; -import { ColorDivProps } from "../ColorDiv/ColorDiv"; +import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; export interface PageSectionProps { center?: boolean; diff --git a/src/components/SponsorReel/SponsorReel.tsx b/src/components/SponsorReel/SponsorReel.tsx index d53b070..26d4f80 100644 --- a/src/components/SponsorReel/SponsorReel.tsx +++ b/src/components/SponsorReel/SponsorReel.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { Link } from "react-router-dom"; import "./SponsorReel.scss"; import TextAnchor from "../TextAnchor"; -import { ColorEnum } from "../.."; +import { ColorEnum } from "../ColorDiv/ColorDiv"; export interface SponsorReelProps { } export interface SponsorReelState { } diff --git a/src/components/TextAnchor/TextAnchor.tsx b/src/components/TextAnchor/TextAnchor.tsx index 3e7af14..d59e6df 100644 --- a/src/components/TextAnchor/TextAnchor.tsx +++ b/src/components/TextAnchor/TextAnchor.tsx @@ -1,7 +1,8 @@ import * as React from "react"; import "./TextAnchor.scss"; import { Link } from "react-router-dom"; -import { ColorEnum, getColor, getHoverColor } from "../.."; +import { ColorEnum, getColor, getHoverColor } from "../ColorDiv/ColorDiv"; + export enum TextSize { Small, diff --git a/src/index.tsx b/src/index.tsx index e892a87..5ce0b6b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,45 +5,6 @@ import { AppContainer } from "react-hot-loader"; import Routes from "./routes"; import "./index.scss"; -export enum ColorEnum { - DarkBlue, - LightBlue, - White, - Black, - Grey1, - Grey2, - Orange1, - Orange2, - Blue, - LightTurquoise, - Green, - Sand, - Transparent, - Inherit, -} - -const colors = new Map([ - [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`; - console.log("Using API URL: ", process.env.API_URL); const rootEl = document.getElementById("root"); diff --git a/src/pages/ContactsPage/ContactsPage.tsx b/src/pages/ContactsPage/ContactsPage.tsx index dd9333a..bb9005b 100644 --- a/src/pages/ContactsPage/ContactsPage.tsx +++ b/src/pages/ContactsPage/ContactsPage.tsx @@ -1,8 +1,7 @@ import * as React from "react"; import Helmet from "react-helmet"; import "./ContactsPage.scss"; - -import { ColorEnum } from "../.."; +import { ColorEnum } from "../../components/ColorDiv/ColorDiv"; import { StaticContext } from "../../server/StaticContext"; import PageLink from "../../components/PageLink/PageLink"; import Card from "../../components/Card"; diff --git a/src/pages/FrontPage/FrontPage.tsx b/src/pages/FrontPage/FrontPage.tsx index 86a91ff..e92cff9 100644 --- a/src/pages/FrontPage/FrontPage.tsx +++ b/src/pages/FrontPage/FrontPage.tsx @@ -9,7 +9,7 @@ import { StaticContext } from "../../server/StaticContext"; // @ts-ignore import * as BeerImage from "../../assets/img/beer.jpeg"; import PageSection from "../../components/PageSection"; -import { ColorEnum } from "../../index"; +import { ColorEnum } from "../../components/ColorDiv/ColorDiv"; import PageLink from "../../components/PageLink/PageLink"; import HeroMainSection from "../../components/HeroMainSection"; @@ -18,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 { diff --git a/src/pages/GuildPage/GuildPage.tsx b/src/pages/GuildPage/GuildPage.tsx index c6e9832..612886a 100644 --- a/src/pages/GuildPage/GuildPage.tsx +++ b/src/pages/GuildPage/GuildPage.tsx @@ -10,9 +10,9 @@ import HeroAsideSection from "../../components/HeroAsideSection"; import HeroAsideItem from "../../components/HeroAsideItem"; import Ribbon from "../../components/Ribbon"; import InfoBox from "../../components/InfoBox"; -import { ColorEnum } from "../../index"; +import { ColorEnum } from "../../components/ColorDiv/ColorDiv"; 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 { } diff --git a/src/pages/SignUpPage/SignUpPage.tsx b/src/pages/SignUpPage/SignUpPage.tsx index 262925c..e3c33da 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 { ColorEnum } from "../../index"; +import { ColorEnum } from "../../components/ColorDiv/ColorDiv"; import { Question, optionTypes } from "../../components/SignupQuestionsWidget"; export interface SignUpPageProps { diff --git a/src/routes.tsx b/src/routes.tsx index 7177e90..46d5598 100644 --- a/src/routes.tsx +++ b/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 FreshmenPage from "./pages/FreshmenPage/FreshmenPage"; -import StudiesPage from "./pages/StudiesPage/index"; -import CorporatePage from "./pages/CorporatePage/CorporatePage"; -import InEnglishPage from "./pages/InEnglishPage/index"; +import ActualPage from "./pages/ActualPage"; +import FreshmenPage from "./pages/FreshmenPage"; +import StudiesPage from "./pages/StudiesPage"; +import CorporatePage from "./pages/CorporatePage"; +import InEnglishPage from "./pages/InEnglishPage"; const renderPage = (Page) => (props): JSX.Element => { return ; @@ -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/:id", page: EventCreatePage}, + { path: "/admin/events/create", page: EventCreatePage }, + { path: "/admin/events/:id", page: EventCreatePage }, { path: "/admin/signups", page: AdminSignupPage }, - { path: "/admin/signups/create", page: SignupCreatePage}, - { path: "/admin/signups/:id", page: SignupCreatePage}, + { path: "/admin/signups/create", page: SignupCreatePage }, + { path: "/admin/signups/:id", page: SignupCreatePage }, { path: "/admin/logout", page: AdminLogoutPage }, { path: "/admin", page: AdminFrontPage }, ];