TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor style enums to string literals

Browse Source
This commit is contained in:
Aarni Halinen
2020-07-06 16:46:44 +03:00
parent 623a9e5cd2
commit 284864316b
16 changed files with 161 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ColorDiv/ColorDiv.tsx
+15 -51
View File
@@ -1,51 +1,13 @@
import React from "react";
import "./ColorDiv.scss";
export enum ColorEnum {
DarkBlue,
LightBlue,
White,
Black,
Grey1,
Grey2,
Orange1,
Orange2,
Blue,
LightTurquoise,
Green,
Sand,
Transparent,
Inherit,
}
const colors = new Map<ColorEnum, string>([
[ColorEnum.DarkBlue, "dark-blue"],
[ColorEnum.LightBlue, "light-blue"],
[ColorEnum.White, "white1"],
[ColorEnum.Black, "black1"],
[ColorEnum.Grey1, "grey1"],
[ColorEnum.Grey2, "grey2"],
[ColorEnum.Orange1, "orange1"],
[ColorEnum.Orange2, "orange2"],
[ColorEnum.Blue, "blue1"],
[ColorEnum.LightTurquoise, "light-turquoise"],
[ColorEnum.Green, "green1"],
[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`;
import { Colors, colorToClass, bgColorToClass, hoverColorToClass, bgHoverColorToClass } from "../../theme/colors";
import classNames from "classnames";
export interface ColorDivProps extends React.HTMLAttributes<HTMLDivElement> {
textColor?: ColorEnum;
backgroundColor?: ColorEnum;
hoverColor?: ColorEnum;
backgroundHoverColor?: ColorEnum;
textColor?: Colors;
backgroundColor?: Colors;
hoverColor?: Colors;
backgroundHoverColor?: Colors;
}
export interface ColorDivState { }
@@ -53,14 +15,16 @@ export interface ColorDivState { }
class ColorDiv extends React.Component<ColorDivProps, ColorDivState> {
render() {
const { children, className, textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props } = this.props;
const classNames = [];
if (className) classNames.push(className);
if (textColor !== undefined) classNames.push(getColor(textColor));
if (backgroundColor !== undefined) classNames.push(getBgColor(backgroundColor));
if (hoverColor !== undefined) classNames.push(getHoverColor(hoverColor));
if (backgroundHoverColor !== undefined) classNames.push(getBgHoverColor(backgroundHoverColor));
const classes = classNames(
className,
colorToClass(textColor),
bgColorToClass(backgroundColor),
hoverColorToClass(hoverColor),
bgHoverColorToClass(backgroundHoverColor)
);
return (
<div {...props} className={classNames.join(" ")}>
<div {...props} className={classes}>
{children}
</div>
);
src/components/Header/Header.tsx
-1
View File
@@ -7,7 +7,6 @@ import Navigation from "../Navigation";
import TitleImage from "../../assets/img/SIK_RGB_W_side.png";
import classNames from "classnames";
import throttle from "lodash/throttle";
import { tr } from "date-fns/locale";
export interface HeaderProps { }
export interface HeaderState {
src/components/PageLink/PageLink.tsx
-1
View File
@@ -1,7 +1,6 @@
import React from "react";
import "./PageLink.scss";
import TextAnchor from "../TextAnchor";
import { TextSize } from "../TextAnchor/TextAnchor";
export interface PageLinkProps {
to: string;
src/components/SponsorReel/SponsorReel.tsx
+1 -2
View File
@@ -2,7 +2,6 @@ import React from "react";
import "./SponsorReel.scss";
import TextAnchor from "../TextAnchor";
import Anchor from "../Anchor";
import { ColorEnum } from "../ColorDiv/ColorDiv";
export interface SponsorReelProps { }
export interface SponsorReelState { }
@@ -19,7 +18,7 @@ class SponsorReel extends React.Component<SponsorReelProps, SponsorReelState> {
<Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
<Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
</div>
<TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.LightTurquoise} to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</TextAnchor>
<TextAnchor textColor="blue1" hoverColor="light-turquoise" to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</TextAnchor>
</div>
);
}
src/components/TextAnchor/TextAnchor.tsx
+24 -21
View File
@@ -1,42 +1,45 @@
import React from "react";
import "./TextAnchor.scss";
import { ColorEnum, getColor, getHoverColor } from "../ColorDiv/ColorDiv";
import { Colors, colorToClass, hoverColorToClass } from "../../theme/colors";
import Anchor from "../Anchor";
import classNames from "classnames";
export enum TextSize {
Normal,
Small,
Large,
Ribbon,
SmallRibbon,
}
export type TextSize =
"normal" |
"small" |
"large" |
"ribbon" |
"small-ribbon";
const sizes = new Map<TextSize, string>([
[TextSize.Normal, ""],
[TextSize.Small, "text-anchor__small"],
[TextSize.Large, "text-anchor__large"],
[TextSize.SmallRibbon, "text-anchor__no-weight text-anchor__small"],
[TextSize.Ribbon, "text-anchor__no-weight"],
const textSizeToClassName = new Map<TextSize, string>([
["normal", ""],
["small", "text-anchor__small"],
["large", "text-anchor__large"],
["small-ribbon", "text-anchor__no-weight text-anchor__small"],
["ribbon", "text-anchor__no-weight"],
]);
export interface TextAnchorProps {
size?: TextSize;
to: string;
textColor?: ColorEnum;
hoverColor?: ColorEnum;
textColor?: Colors;
hoverColor?: Colors;
}
export interface TextAnchorState { }
class TextAnchor extends React.Component<TextAnchorProps, TextAnchorState> {
render() {
const { children, size, to, 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.Normal);
const className = `text-anchor ${classSize} ${classColor} ${classHoverColor}`;
const classes = classNames(
"text-anchor",
colorToClass(textColor),
hoverColorToClass(hoverColor),
textSizeToClassName.get(size)
)
return (
<Anchor to={to} className={className}>
<Anchor to={to} className={classes}>
{children}
</Anchor>
);
src/pages/ActualPage/ActualPage.tsx
+9 -12
View File
@@ -2,16 +2,13 @@ import React from "react";
import { Helmet } from "react-helmet";
import "./ActualPage.scss";
import PageSection from "../../components/PageSection";
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
import HeroMainSection from "../../components/HeroMainSection";
import HeroAsideSection from "../../components/HeroAsideSection";
import HeroAsideItem from "../../components/HeroAsideItem";
import AsideSection from "../../components/AsideSection";
import MainSection from "../../components/MainSection/index";
import PageLink from "../../components/PageLink/index";
import Ribbon from "../../components/Ribbon/index";
import TextAnchor from "../../components/TextAnchor/index";
import { TextSize } from "../../components/TextAnchor/TextAnchor";
import Button, { ButtonType } from "../../components/Button/index";
import Accordion from "../../components/Accordion";
@@ -25,7 +22,7 @@ class ActualPage extends React.Component<ActualPageProps, ActualPageState> {
<Helmet>
<link rel="canonical" href="https://sik.ayy.fi/kilta/toiminta" />
</Helmet>
<PageSection backgroundColor={ColorEnum.DarkBlue} fullSize className="lander-hero">
<PageSection backgroundColor="dark-blue" fullSize className="lander-hero">
<HeroMainSection>
<div>
<h1>Yritystapahtumia ja vastapainoa opiskelulle</h1>
@@ -47,7 +44,7 @@ class ActualPage extends React.Component<ActualPageProps, ActualPageState> {
<p>Kiltapäiväkerho Kiltis kokoontuu torstaisin klo XX.XX kiltahuoneella. Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!</p>
</div>
</HeroMainSection>
<HeroAsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
<HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
<p>
Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa:
</p>
@@ -78,34 +75,34 @@ class ActualPage extends React.Component<ActualPageProps, ActualPageState> {
</HeroAsideItem>
</HeroAsideSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<PageSection backgroundColor="white1" textColor="black1">
<MainSection>
<h3>Tapahtumat</h3>
</MainSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<PageSection backgroundColor="white1" textColor="black1">
<MainSection>
<h3>Uutiset</h3>
</MainSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.LightTurquoise} textColor={ColorEnum.DarkBlue}>
<PageSection backgroundColor="light-turquoise" textColor="dark-blue">
<Ribbon>
<h3>Kuvia tapahtumista.</h3>
<TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://sosso.fi">
<TextAnchor textColor="dark-blue" hoverColor="blue1" size="small-ribbon" to="https://sosso.fi">
<h6>Kuvagalleria&nbsp;›</h6>
</TextAnchor>
</Ribbon>
</PageSection>
Kuva-galleriasta hyviä kuvia 3kpl. (Esim. wireframen kuvat)
<PageSection backgroundColor={ColorEnum.Blue}>
<PageSection backgroundColor="blue1">
<Ribbon>
<h3>Sinustako kilta-aktiivi?</h3>
<TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://sosso.fi">
<TextAnchor textColor="white1" hoverColor="blue1" size="small-ribbon" to="https://sosso.fi">
<h6>Tule mukaan kiltatoimintaan&nbsp;›</h6>
</TextAnchor>
</Ribbon>
</PageSection>
<PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<PageSection backgroundColor="white1" textColor="black1">
<AsideSection />
<MainSection>
<h3>Yritystapahtumia ja vastapainoa opiskelulle</h3>
src/pages/ContactsPage/ContactsPage.tsx
+9 -8
View File
@@ -1,12 +1,11 @@
import React from "react";
import { Helmet } from "react-helmet";
import "./ContactsPage.scss";
import { ColorEnum, getColor, getHoverColor } from "../../components/ColorDiv/ColorDiv";
import { StaticContext } from "../../server/StaticContext";
import PageSection from "../../components/PageSection";
import { getContacts, Occupation, Committee, getCommittees } from "../../models/Contacts";
import CommitteeContainer from "../../components/CommitteeContainer";
import Anchor from "../../components/Anchor/index";
import TextAnchor from "../../components/TextAnchor/index";
interface ContactsPageProps {
staticContext: StaticContext;
@@ -82,28 +81,30 @@ class ContactsPage extends React.Component<ContactsPageProps, ContactsPageState>
<Helmet>
<link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
</Helmet>
<PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.DarkBlue} center>
<PageSection backgroundColor="white1" textColor="dark-blue" center>
<p>
Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
</p>
</PageSection>
<PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.DarkBlue} bottomBorder center>
<PageSection backgroundColor="white1" textColor="dark-blue" bottomBorder center>
<div>
<CommitteeContainer name_fi="Hallitus" name_en="Board" contacts={board} />
<p>
Hallitukseen saa yhteyden lähettämällä sähköpostia <Anchor
className={`${getColor(ColorEnum.Blue)} ${getHoverColor(ColorEnum.LightBlue)}`}
{"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
<TextAnchor
textColor="blue1"
hoverColor="light-blue"
to="mailto:sik-hallitus@list.ayy.fi">
sik-hallitus@list.ayy.fi
</Anchor>
</TextAnchor>
</p>
</div>
</PageSection>
{committees.map((committee, index) => {
const order = committee.name_fi === "Toimikunnattomat" ? 1 : 0;
return (
<PageSection key={index} style={{order}} backgroundColor={ColorEnum.White} center>
<PageSection key={index} style={{order}} backgroundColor="white1" center>
<CommitteeContainer name_fi={committee.name_fi} name_en={committee.name_en} contacts={contacts.filter(x => x.role.committee.name_fi === committee.name_fi)} />
</PageSection>
)
src/pages/CorporatePage/CorporatePage.tsx
+12 -14
View File
@@ -2,7 +2,6 @@ import React from "react";
import { Helmet } from "react-helmet";
import "./CorporatePage.scss";
import PageSection from "../../components/PageSection";
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
import HeroMainSection from "../../components/HeroMainSection";
import HeroAsideSection from "../../components/HeroAsideSection";
import HeroAsideItem from "../../components/HeroAsideItem";
@@ -11,7 +10,6 @@ import MainSection from "../../components/MainSection/index";
import PageLink from "../../components/PageLink/index";
import Ribbon from "../../components/Ribbon/index";
import TextAnchor from "../../components/TextAnchor/index";
import { TextSize } from "../../components/TextAnchor/TextAnchor";
export interface CorporatePageProps {}
export interface CorporatePageState {}
@@ -23,14 +21,14 @@ class CorporatePage extends React.Component<CorporatePageProps, CorporatePageSta
<Helmet>
<link rel="canonical" href="https://sik.ayy.fi/yritysyhteistyo" />
</Helmet>
<PageSection backgroundColor={ColorEnum.DarkBlue} fullSize>
<PageSection backgroundColor="dark-blue" fullSize>
<HeroMainSection>
<h1>Tee yhteistyötä tulevaisuuden huippuosaajien kanssa!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula aliquam enim, in lacinia nunc rutrum fringilla. Phasellus dui dolor, pellentesque vitae feugiat non, maximus in felis. Praesent feugiat vehicula mi, sed tincidunt enim venenatis quis. In euismod gravida ullamcorper. Phasellus a sagittis nisi, vitae blandit ipsum. Nunc rhoncus ultrices ante, id commodo dolor convallis id. Morbi ullamcorper vulputate risus id sodales.
</p>
</HeroMainSection>
<HeroAsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
<HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
<HeroAsideItem
title="Mainos sivulle, opiskelijoita vierailulle?"
linkHref="#yhteistyomahdollisuudet"
@@ -45,9 +43,9 @@ class CorporatePage extends React.Component<CorporatePageProps, CorporatePageSta
linkText="Killan LinkedIn ryhmä" />
</HeroAsideSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<PageSection backgroundColor="white1">
<AsideSection backgroundColor="white1" textColor="black1" />
<MainSection backgroundColor="white1" textColor="black1">
<h3 id="yhteistyomahdollisuudet">Yhteistyömahdollisuudet</h3>
<p><strong>TODO: Tähän nostoja yhteistyöstä!</strong> Yhteistyömahdollisuuksista voi tiedustella lisää killan yrityssuhdemestarilta.</p>
@@ -64,7 +62,7 @@ class CorporatePage extends React.Component<CorporatePageProps, CorporatePageSta
<h6>Potentiaalin Tasaus</h6>
<p>Kiltamme viettää vuosijuhliaan helmikuun kolmantena lauantaina. Potentiaalin Tasaus on kiltamme juhlavin tapahtuma. Yrityksillä on mahdollisuus osallistua vuosijuhliin niin pienellä kuin suurellakin panoksella.</p>
</MainSection>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<AsideSection backgroundColor="white1" textColor="black1">
<div>
<PageLink to="https:https://static.sika.sik.party/saannot/excursiosaannot.pdf" desc="Lue täältä›">
Excursiosäännöt
@@ -75,23 +73,23 @@ class CorporatePage extends React.Component<CorporatePageProps, CorporatePageSta
</div>
</AsideSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.Orange1}>
<PageSection backgroundColor="orange1">
<Ribbon>
<h3>Mainos Sössöön?</h3>
<TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://sosso.fi">
<TextAnchor textColor="white1" hoverColor="blue1" size="small-ribbon" to="https://sosso.fi">
<h4>Killan lehden mediakortin löydät täältä›</h4>
</TextAnchor>
</Ribbon>
</PageSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<PageSection backgroundColor="white1">
<AsideSection backgroundColor="white1" textColor="black1" />
<MainSection backgroundColor="white1" textColor="black1">
<h3 id="tyopaikat">Työpaikkaulmoitukset</h3>
<p>TODO: Miten listataan yritykset?</p>
{/* TODO: Fix links */}
<p>Voit saada yrityksesi työpaikkailmoituksen listalle lähettämällä sen osoitteeseen <a style={{color: "black"}} href="mailto:sik-yritys@list.ayy.fi">sik-yritys@list.ayy.fi</a> </p>
</MainSection>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<AsideSection backgroundColor="white1" textColor="black1" />
</PageSection>
</div>
);
src/pages/EventPage/EventPage.tsx
+4 -5
View File
@@ -6,7 +6,6 @@ import { RouteComponentProps } from "react-router-dom";
import Button, { ButtonType } from "../../components/Button";
import Anchor from "../../components/Anchor";
import PageSection from "../../components/PageSection";
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
import MainSection from "../../components/MainSection";
import AsideSection from "../../components/AsideSection/AsideSection";
@@ -52,9 +51,9 @@ class EventPage extends React.Component<EventPageProps, EventPageState> {
<Helmet>
<link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
</Helmet>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection textColor={ColorEnum.Black} />
<MainSection textColor={ColorEnum.Black}>
<PageSection backgroundColor="white1">
<AsideSection textColor="black1" />
<MainSection textColor="black1">
<img className="event-banner" src={event.tags[0].icon} alt={event.title_fi} ></img>
<h1 className="event-title">{event.title_fi}</h1>
<p>
@@ -75,7 +74,7 @@ class EventPage extends React.Component<EventPageProps, EventPageState> {
)}
</div>
</MainSection>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<AsideSection backgroundColor="white1" textColor="black1" />
</PageSection>
</div>
);
src/pages/FreshmenPage/FreshmenPage.tsx
+12 -14
View File
@@ -7,11 +7,9 @@ import HeroAsideSection from "../../components/HeroAsideSection/index";
import HeroAsideItem from "../../components/HeroAsideItem/index";
import AsideSection from "../../components/AsideSection/index";
import MainSection from "../../components/MainSection/index";
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
import PageLink from "../../components/PageLink/index";
import Ribbon from "../../components/Ribbon/index";
import TextAnchor from "../../components/TextAnchor/index";
import { TextSize } from "../../components/TextAnchor/TextAnchor";
import InfoBox from "../../components/InfoBox/index";
export interface FreshmenPageProps {}
@@ -24,7 +22,7 @@ class FreshmenPage extends React.Component<FreshmenPageProps, FreshmenPageState>
<Helmet>
<link rel="canonical" href="https://sik.ayy.fi/toiminta/fuksit" />
</Helmet>
<PageSection backgroundColor={ColorEnum.DarkBlue} fullSize>
<PageSection backgroundColor="dark-blue" fullSize>
<HeroMainSection>
<h1>Tervetuloa opiskelemaan Otaniemeen!</h1>
<p>
@@ -33,7 +31,7 @@ class FreshmenPage extends React.Component<FreshmenPageProps, FreshmenPageState>
<p>Tämä on fuksien oma etusivu ja olemmekin keränneet tänne kaikki tärkeimmät tiedot, joita fuksivuotenasi tarvitset. Tietysti kannattaa katsoa myös yleisiä sivuja, sillä tänne ei mahdu kaikki, mitä killassa tapahtuu.
</p>
</HeroMainSection>
<HeroAsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
<HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
<HeroAsideItem
title="Seuraa killan tiedotusta"
linkHref="https://t.me/joinchat/GsmJjhst3-BYIHQSefVhHg"
@@ -52,9 +50,9 @@ class FreshmenPage extends React.Component<FreshmenPageProps, FreshmenPageState>
linkText="Tsekkaa ISO-henkilöiden tiedot" />
</HeroAsideSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<PageSection backgroundColor="white1">
<AsideSection backgroundColor="white1" textColor="black1" />
<MainSection backgroundColor="white1" textColor="black1">
<h3 id="abeille">Onnittelut hyvästä opiskeluvalinnasta</h3>
<h6>Lorem</h6>
@@ -70,7 +68,7 @@ class FreshmenPage extends React.Component<FreshmenPageProps, FreshmenPageState>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula aliquam enim, in lacinia nunc rutrum fringilla. Phasellus dui dolor, pellentesque vitae feugiat non, maximus in felis. Praesent feugiat vehicula mi, sed tincidunt enim venenatis quis. In euismod gravida ullamcorper. Phasellus a sagittis nisi, vitae blandit ipsum. Nunc rhoncus ultrices ante, id commodo dolor convallis id. Morbi ullamcorper vulputate risus id sodales.
</p>
</MainSection>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<AsideSection backgroundColor="white1" textColor="black1">
<div>
<PageLink to="mailto:sik-ftmk@list.ayy.fi" desc="sik-ftmk@list.ayy.fi">
Fuksikipparit tavoitat
@@ -96,23 +94,23 @@ class FreshmenPage extends React.Component<FreshmenPageProps, FreshmenPageState>
</div>
</AsideSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.LightTurquoise}>
<PageSection backgroundColor="light-turquoise">
<Ribbon>
<h3>Killassa tapahtuu kaikenlaista!</h3>
<TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="/kilta/toiminta">
<TextAnchor textColor="white1" hoverColor="blue1" size="small-ribbon" to="/kilta/toiminta">
<h4>Seuraa killan tapahtumia</h4>
</TextAnchor>
</Ribbon>
</PageSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<PageSection backgroundColor="white1">
<AsideSection backgroundColor="white1" textColor="black1" />
<MainSection backgroundColor="white1" textColor="black1">
<h3 id="isot">Isoryhmät</h3>
<p>Lorem jotain ISOryhmiä X kpl</p>
<p>Mikä ihmeen ISO...</p>
<p>TODO: Kuvia</p>
</MainSection>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<AsideSection backgroundColor="white1" textColor="black1" />
</PageSection>
</div>
);
src/pages/FrontPage/FrontPage.tsx
+7 -9
View File
@@ -7,7 +7,6 @@ import { Post, getFeed } from "../../models/Feed";
import { StaticContext } from "../../server/StaticContext";
import PageSection from "../../components/PageSection";
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
import PageLink from "../../components/PageLink/PageLink";
import HeroMainSection from "../../components/HeroMainSection";
@@ -17,7 +16,6 @@ import Ribbon from "../../components/Ribbon";
import SponsorReel from "../../components/SponsorReel";
import HeroAsideItem from "../../components/HeroAsideItem";
import TextAnchor from "../../components/TextAnchor";
import { TextSize } from "../../components/TextAnchor/TextAnchor";
interface FrontPageProps {
staticContext: StaticContext;
@@ -92,7 +90,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
const { events, feed } = this.state;
return (
<div className="front-page">
<PageSection backgroundColor={ColorEnum.DarkBlue} fullSize className="lander-hero">
<PageSection backgroundColor="dark-blue" fullSize className="lander-hero">
<HeroMainSection>
<h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
<p>
@@ -109,7 +107,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
</Button>
</div>
</HeroMainSection>
<HeroAsideSection textColor={ColorEnum.LightBlue} backgroundColor={ColorEnum.DarkBlue}>
<HeroAsideSection textColor="light-blue" backgroundColor="dark-blue">
<HeroAsideItem
title="Vasta-aloittanut opiskelija"
linkHref="/kilta/fuksi"
@@ -134,7 +132,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
</HeroAsideItem>
</HeroAsideSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.White} cardSection>
<PageSection backgroundColor="white1" cardSection>
{events.map(event => (
<Card
key={event.id}
@@ -156,16 +154,16 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
</PageLink>
</div>
</PageSection>
<PageSection backgroundColor={ColorEnum.Orange1}>
<PageSection backgroundColor="orange1">
<Ribbon>
<h3>Sössöä vuodesta 1969.</h3>
<TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://sosso.fi">
<TextAnchor textColor="white1" hoverColor="blue1" size="small-ribbon" to="https://sosso.fi">
<h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
</TextAnchor>
</Ribbon>
</PageSection>
<PageSection
backgroundColor={ColorEnum.White}
backgroundColor="white1"
bottomBorder
cardSection
>
@@ -192,7 +190,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
</PageLink>
</div>
</PageSection>
<PageSection center backgroundColor={ColorEnum.White}>
<PageSection center backgroundColor="white1">
<SponsorReel />
</PageSection>
</div>
src/pages/GuildPage/GuildPage.tsx
+34 -35
View File
@@ -10,7 +10,6 @@ import HeroAsideSection from "../../components/HeroAsideSection";
import HeroAsideItem from "../../components/HeroAsideItem";
import Ribbon from "../../components/Ribbon";
import InfoBox from "../../components/InfoBox";
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
import Accordion from "../../components/Accordion";
import TextAnchor from "../../components/TextAnchor";
import { TextSize } from "../../components/TextAnchor/TextAnchor";
@@ -26,13 +25,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
<link rel="canonical" href="https://sik.ayy.fi/kilta" />
</Helmet>
<div className="front-page">
<PageSection backgroundColor={ColorEnum.DarkBlue} fullSize>
<PageSection backgroundColor="dark-blue" fullSize>
<HeroMainSection>
<h1>Kilta koostuu sähkötekniikan ja elektroniikan (ELEC) tutkinto-ohjelmissa opiskelevista opiskelijoista</h1>
<p>Vapaa-ajan <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="https://sosso.fi">Sössöä</TextAnchor>, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.</p>
<p>Vapaa-ajan <TextAnchor textColor="blue1" hoverColor="white1" to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor textColor="blue1" hoverColor="white1" to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor textColor="blue1" hoverColor="white1" to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <TextAnchor textColor="blue1" hoverColor="white1" to="https://sosso.fi">Sössöä</TextAnchor>, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.</p>
<p>Arvot estrumquias doluptatur aut quam fugiti cus debit landisciis eatemperes eumquibus di blat que sim etus idis dolut labor ad magnat.</p>
</HeroMainSection>
<HeroAsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
<HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
<HeroAsideItem
title="Toverielämää ja sähkötekniikkaa"
linkHref="#tehtavat"
@@ -55,13 +54,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</HeroAsideItem>
</HeroAsideSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} >
<PageSection backgroundColor="white1">
<AsideSection backgroundColor="white1" textColor="black1" />
<MainSection backgroundColor="white1" textColor="black1" >
<h3 id="tehtavat">Killan tehtävät ja tarina</h3>
<p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja saunailtoja. Valinnanvaraa on, joten <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>
<p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja saunailtoja. Valinnanvaraa on, joten <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>
<p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/opinnot">opetusta</TextAnchor>. Kilta on mukana kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun henkilöstöä lähemmäs kiltalaisia. Kilta avaa oven <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> järjestämällä yritysten kanssa excursioita, saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa uusista avoimista työpaikoista. Killalla on Otaniemen mukavin <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/kiltahuone">kiltahuone</TextAnchor>, jossa voi käydä hengähtämässä luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.</p>
<p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/opinnot">opetusta</TextAnchor>. Kilta on mukana kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun henkilöstöä lähemmäs kiltalaisia. Kilta avaa oven <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> järjestämällä yritysten kanssa excursioita, saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa uusista avoimista työpaikoista. Killalla on Otaniemen mukavin <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kiltahuone">kiltahuone</TextAnchor>, jossa voi käydä hengähtämässä luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.</p>
<h6>Takana lähes satavuotinen historia</h6>
@@ -85,7 +84,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
määritelmä kuuluukin: “teekkarius on kaikkea sitä, mitä teekkarit tekevät”. Yksi asia
meitä kaikkia kuitenkin yhdistää. Opiskelemme jotain tekniikkaan liittyvää täällä
Aalto-yliopistossa.
Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor textColor="blue1" hoverColor="dark-blue" to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
yhdistyksistä</TextAnchor>. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä kiinnostavaa.</p>
<p>Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa
@@ -94,7 +93,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
Teekkariuteen kuuluu olennaisena osana mukautuminen ajan vaatimuksiin. Jos asiat
tehtäisiin aina vanhaa toistaen, ei voitaisi enää edes puhua teekkariudesta.</p>
</MainSection>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<AsideSection backgroundColor="white1" textColor="black1">
<div>
<PageLink to="#jasenedut" desc="vuonna 2018&nbsp;›">
Yliopiston jäsenedut
@@ -110,27 +109,27 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</div>
</AsideSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.LightBlue} textColor={ColorEnum.DarkBlue}>
<PageSection backgroundColor="light-blue" textColor="dark-blue">
<Ribbon>
<p>Killan hallinto koostuu XXX henkilöstä.</p>
</Ribbon>
</PageSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} />
<MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.DarkBlue} >
<PageSection backgroundColor="white1">
<AsideSection backgroundColor="white1" />
<MainSection backgroundColor="white1" textColor="dark-blue" >
<h3 id="organisaatio">Organisaatio</h3>
<p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/valtuusto">valtuusto</TextAnchor>, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 1–2 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
<p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/valtuusto">valtuusto</TextAnchor>, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 1–2 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
<h6>Valtuuston toimintaa</h6>
<p>Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="https://static.sika.sik.party">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
<p>Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. <TextAnchor textColor="blue1" hoverColor="dark-blue" to="https://static.sika.sik.party">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
<h6>Hallituksen toimintaa</h6>
<p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/toimikunnat">toimikuntansa</TextAnchor> kanssa. Puheenjohtajan tehtävä on pitää langat käsissään, ja olla perillä kaikesta, mitä killassa tapahtuu. Hallitus tekee päätökset ja sopii menettelytavat viikottaisessa kokouksessaan. Hallitus on vastuussa kaikesta killan näkyvästä ja näkymättömästä toiminnasta, ja se on myös oikea osoite, jos joku asia vaivaa mieltä, tai mielessä on <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
<p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/toimikunnat">toimikuntansa</TextAnchor> kanssa. Puheenjohtajan tehtävä on pitää langat käsissään, ja olla perillä kaikesta, mitä killassa tapahtuu. Hallitus tekee päätökset ja sopii menettelytavat viikottaisessa kokouksessaan. Hallitus on vastuussa kaikesta killan näkyvästä ja näkymättömästä toiminnasta, ja se on myös oikea osoite, jos joku asia vaivaa mieltä, tai mielessä on <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
</MainSection>
<AsideSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor="white1">
<div>
<PageLink to="/yhteystiedot/" desc="yhteystiedot&nbsp;›">
Vuoden 2019 hallinto
@@ -141,13 +140,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</div>
</AsideSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.DarkBlue}>
<PageSection backgroundColor="dark-blue">
<Ribbon>
<p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.Ribbon} to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.Ribbon} to="/jaokset">jaokset</TextAnchor>.</p>
<p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor textColor="white1" hoverColor="blue1" size="ribbon" to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor textColor="white1" hoverColor="blue1" size="ribbon" to="/jaokset">jaokset</TextAnchor>.</p>
</Ribbon>
</PageSection>
<div style={{ display: "flex" }}>
<AsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
<AsideSection textColor="dark-blue" backgroundColor="light-turquoise">
<h6>Miksi alkaa kilta-aktiiviksi?</h6>
<p>
Näitä töitä tehdessä saa väkisinkin paljon uusia kavereita ja oppii monia palkallisessa työelämässä tarpeellisia taitoja. Eikä laajasta tuttavapiiristä ja monista kontakteista varmasti haittaa ole tulevaa työuraakaan ajatellen. Rahallista tai materiaalista hyötyä kiltatoiminnasta ei saa, eikä kukaan killan toimintaan mukaan tuleva sitä pyrikään tavoittelemaan. Mikä tärkeintä, kiltatoiminta on kivaa!
@@ -162,16 +161,16 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
» Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt
</p>
</AsideSection>
<AsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightBlue}>
<AsideSection textColor="dark-blue" backgroundColor="light-blue">
<h6>Runsaasti erilaisia tehtäviä</h6>
<p>
Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to="/jaostot">Jaostoiminta</TextAnchor> mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.
Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to="/jaostot">Jaostoiminta</TextAnchor> mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.
</p>
<p>
» Haluatko <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>valtuustoon</TextAnchor>, <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>hallitukseen</TextAnchor> tai <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>toimariksi</TextAnchor>?
» Haluatko <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>valtuustoon</TextAnchor>, <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>hallitukseen</TextAnchor> tai <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>toimariksi</TextAnchor>?
</p>
<p>
» <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
» <TextAnchor textColor="dark-blue" hoverColor="dark-blue" to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
</p>
<p>
» Lorem ipsum
@@ -179,8 +178,8 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</AsideSection>
</div>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
<PageSection backgroundColor="white1">
<AsideSection textColor="black1" backgroundColor="white1">
<div>
<h3>Sähkötekniikan korkeakoulun toimikunnat</h3>
<p>
@@ -202,7 +201,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
<Accordion title="Ipsum" />
</div>
</AsideSection>
<AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
<AsideSection textColor="black1" backgroundColor="white1">
<div>
<h3>Jaokset—kokeile kiltatoimintaa vapaammin</h3>
<p>
@@ -211,23 +210,23 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</div>
</AsideSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.Orange1}>
<PageSection backgroundColor="orange1">
<Ribbon>
<p id="jasenedut">Jäsenedut vuonna 2019</p>
</Ribbon>
</PageSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} />
<MainSection textColor={ColorEnum.Black}>
<PageSection backgroundColor="white1">
<AsideSection backgroundColor="white1" />
<MainSection textColor="black1">
<h3>Aalto-yliopiston tarjoamat monenlaiset edut</h3>
<p>
Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.
</p>
<p>
» <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
» <TextAnchor textColor="blue1" hoverColor="dark-blue" to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
</p>
</MainSection>
<AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
<AsideSection textColor="black1" backgroundColor="white1">
<InfoBox>
<TextAnchor to={""}>Jäseneksi liittyminen</TextAnchor> on helppoa, hauskaa ja hyödyllistä 8 € jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
</InfoBox>
src/pages/SignUpPage/SignUpPage.tsx
+1 -2
View File
@@ -5,7 +5,6 @@ import "./SignUpPage.scss";
import { getForm, SignupForm } from "../../models/SignupForm";
import { createSignup, Signup } from "../../models/Signup";
import PageSection from "../../components/PageSection";
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
import { Question } from "../../components/SignupQuestionsWidget";
export interface SignUpPageProps {
@@ -236,7 +235,7 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
<link rel="canonical" href={`https://sik.ayy.fi/signup/${id}`} />
</Helmet>
{statusMessage}
<PageSection backgroundColor={ColorEnum.DarkBlue}>
<PageSection backgroundColor="dark-blue">
{form}
{signups}
</PageSection>
src/pages/StudiesPage/StudiesPage.tsx
+12 -14
View File
@@ -7,11 +7,9 @@ import HeroAsideSection from "../../components/HeroAsideSection/index";
import HeroAsideItem from "../../components/HeroAsideItem/index";
import AsideSection from "../../components/AsideSection/index";
import MainSection from "../../components/MainSection/index";
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
import PageLink from "../../components/PageLink/index";
import Ribbon from "../../components/Ribbon/index";
import TextAnchor from "../../components/TextAnchor/index";
import { TextSize } from "../../components/TextAnchor/TextAnchor";
export interface StudiesPageProps {}
export interface StudiesPageState {}
@@ -23,14 +21,14 @@ class StudiesPage extends React.Component<StudiesPageProps, StudiesPageState> {
<Helmet>
<link rel="canonical" href="https://sik.ayy.fi/opinnot" />
</Helmet>
<PageSection backgroundColor={ColorEnum.DarkBlue} fullSize>
<PageSection backgroundColor="dark-blue" fullSize>
<HeroMainSection>
<h1>Suomen parasta elektroniikan opetusta</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula aliquam enim, in lacinia nunc rutrum fringilla. Phasellus dui dolor, pellentesque vitae feugiat non, maximus in felis. Praesent feugiat vehicula mi, sed tincidunt enim venenatis quis. In euismod gravida ullamcorper. Phasellus a sagittis nisi, vitae blandit ipsum. Nunc rhoncus ultrices ante, id commodo dolor convallis id. Morbi ullamcorper vulputate risus id sodales.
</p>
</HeroMainSection>
<HeroAsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
<HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
<HeroAsideItem
title="Opiskelemaan sähkölle"
linkHref="#abeille"
@@ -45,9 +43,9 @@ class StudiesPage extends React.Component<StudiesPageProps, StudiesPageState> {
linkText="Tietopaketti fukseille" />
</HeroAsideSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<PageSection backgroundColor="white1">
<AsideSection backgroundColor="white1" textColor="black1" />
<MainSection backgroundColor="white1" textColor="black1">
<h3 id="abeille">Abeille</h3>
<p><strong>TODO: Tähän nostoja yhteistyöstä!</strong> Yhteistyömahdollisuuksista voi tiedustella lisää killan yrityssuhdemestarilta.</p>
@@ -61,7 +59,7 @@ class StudiesPage extends React.Component<StudiesPageProps, StudiesPageState> {
<h6>Raketteja ja mikropiirejä</h6>
<p>Excursioiden tarkoituksena on tarjota opiskelijoille mahdollisuus tutustua yritysmaailmaan. Pidemmillä excursiolla hauskanpito ja teekkariperinteiden vaaliminen on tärkeä osa excursiota.</p>
</MainSection>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<AsideSection backgroundColor="white1" textColor="black1">
<div>
<PageLink to="https:https://static.sika.sik.party/saannot/excursiosaannot.pdf" desc="Lue täältä&nbsp;›">
Kurssitarjonta
@@ -72,22 +70,22 @@ class StudiesPage extends React.Component<StudiesPageProps, StudiesPageState> {
</div>
</AsideSection>
</PageSection>
<PageSection backgroundColor={ColorEnum.Orange1}>
<PageSection backgroundColor="orange1">
<Ribbon>
<h3>Hae opiskelemaan!</h3>
<TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://aalto.fi">
<TextAnchor textColor="white1" hoverColor="blue1" size="small-ribbon" to="https://aalto.fi">
<h4>Lue lisää Aallon sivuilta</h4>
</TextAnchor>
</Ribbon>
</PageSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
<PageSection backgroundColor="white1">
<AsideSection backgroundColor="white1" textColor="black1" />
<MainSection backgroundColor="white1" textColor="black1">
<h3 id="yliopisto">Yliopiston järjestelmiä</h3>
<p>TODO: Tänne varmaan mielummin Akateemiset komiteat etc.</p>
<p>Valmistuvalle juttuja, oodi, tenttiarkisto etc.</p>
</MainSection>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<AsideSection backgroundColor="white1" textColor="black1" />
</PageSection>
</div>
);
src/theme/colors.ts
+21
View File
@@ -0,0 +1,21 @@
export type Colors =
"dark-blue" |
"light-blue" |
"white1" |
"black1" |
"grey1" |
"grey2" |
"orange1" |
"orange2" |
"blue1" |
"light-turquoise" |
"green1" |
"sand" |
"transparent" |
"inherit";
export const colorToClass = (color: Colors): string => `color-div__${color}`;
export const bgColorToClass = (color: Colors): string => `color-div__background_${color}`;
export const hoverColorToClass = (color: Colors): string => `color-div__${color}Hoverable`;
export const bgHoverColorToClass = (color: Colors): string => `color-div__background_${color}Hoverable`;
src/theme/fontSizes.ts
View File