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

Total color overhaul on Front and Guild page

Browse Source
This commit is contained in:
Aarni Halinen
2019-07-02 20:43:44 +03:00
parent 8ae0783c69
commit 02daa01d25
42 changed files with 439 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/scss/_globals.scss
+86 -56
View File
@@ -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;
}
src/components/Accordion/Accordion.scss
+4 -3
View File
@@ -1,12 +1,13 @@
@import "../../assets/scss/globals";
.accordion {
margin: 0.2em;
padding: 0.2em;
display: flex;
flex-flow: column nowrap;
border-style: solid;
border-color: $light-turquoise;
border-color: color(light-turquoise);
border-width: 1px;
&__desc {
@@ -38,7 +39,7 @@
button {
display: flex;
flex-flow: row nowrap;
background-color: $white;
background-color: color(white);
width: 100%;
margin: 0;
padding: 0;
@@ -51,7 +52,7 @@
flex: 1;
text-align: center;
padding-left: 1em;
color: $blue;
color: color(blue);
font-size: 1.125em;
margin: auto;
}
src/components/AccordionIcon/AccordionIcon.scss
+4 -3
View File
@@ -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);
}
}
src/components/AdminSidebarLink/AdminSidebarLink.scss
+4 -3
View File
@@ -1,13 +1,14 @@
@import "../../assets/scss/globals";
.admin-sidebar-link {
padding: 1rem 3rem 1rem 1rem;
background-color: $blue;
background-color: color(blue);
letter-spacing: 3px;
text-transform: uppercase;
line-height: 20px;
font-weight: bold;
border-left: 4px solid $blue;
border-left: 4px solid color(blue);
white-space: nowrap;
@media screen and (max-width: 800px - 1px) {
@@ -16,7 +17,7 @@
&:hover,
&.active {
border-left: 4px solid $white;
border-left: 4px solid color(white);
}
&::after {
src/components/AsideSection/AsideSection.scss
+7 -6
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.aside-section {
display: flex;
flex: 1;
@@ -8,27 +9,27 @@
padding: 4rem;
&.dark-blue {
background-color: $dark-blue;
background-color: color(dark-blue);
h2 {
color: $light-blue;
color: color(light-blue);
}
p {
color: $white;
color: color(white);
}
}
&.light-turquoise {
background-color: $light-turquoise;
background-color: color(light-turquoise);
h2,
p {
color: $dark-blue;
color: color(dark-blue);
}
}
&.light-blue {
background-color: $light-blue;
background-color: color(light-blue);
}
}
src/components/AsideSection/AsideSection.tsx
+12 -6
View File
@@ -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<AsideSectionProps, AsideSectionState> {
class AsideSection extends React.Component<AsideSectionProps & ColorDivProps, AsideSectionState> {
render() {
const {children, className} = this.props;
const { children, className, ...props } = this.props;
const classNames = [
"aside-section",
];
if (className) classNames.push(className);
return (
<div className={`${className} aside-section`}>
<ColorDiv className={classNames.join(" ")} {...props}>
{children}
</div>
</ColorDiv>
);
}
}
src/components/Button/Button.scss
+6 -5
View File
@@ -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;
src/components/Card/Card.scss
+6 -5
View File
@@ -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;
src/components/ColorDiv/ColorDiv.scss
+66
View File
@@ -0,0 +1,66 @@
@import "../../assets/scss/globals";
.color-div {
@mixin hoverableColor($colorName) {
&__#{$colorName} {
color: color($colorName);
}
&__#{$colorName}Hoverable {
&:hover,
&:active {
color: hover($colorName);
}
}
}
@mixin backgroundColor($colorName) {
&__background_#{$colorName} {
background-color: color($colorName);
}
&__background_#{$colorName}Hoverable {
&:hover,
&:active {
background-color: hover($colorName);
}
}
}
@mixin backgroundAndHoverableColor($colorName) {
@include hoverableColor($colorName);
@include backgroundColor($colorName);
}
@include backgroundAndHoverableColor(dark-blue);
@include backgroundAndHoverableColor(light-blue);
@include backgroundAndHoverableColor(white);
@include backgroundAndHoverableColor(black);
@include backgroundAndHoverableColor(grey1);
@include backgroundAndHoverableColor(grey2);
@include backgroundAndHoverableColor(orange1);
@include backgroundAndHoverableColor(orange2);
@include backgroundAndHoverableColor(blue);
@include backgroundAndHoverableColor(light-turquoise);
@include backgroundAndHoverableColor(green);
@include backgroundAndHoverableColor(sand);
&__inherit {
color: inherit;
}
&__transparent {
color: transparent;
}
&__inheritHoverable {
&:hover,
&:active {
color: inherit;
}
}
&__background_transparent {
background-color: transparent;
}
}
src/components/ColorDiv/ColorDiv.tsx
+31
View File
@@ -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<HTMLDivElement> {
textColor?: ColorEnum;
backgroundColor?: ColorEnum;
hoverColor?: ColorEnum;
backgroundHoverColor?: ColorEnum;
}
export interface ColorDivState { }
class ColorDiv extends React.Component<ColorDivProps, ColorDivState> {
render() {
const { children, className, textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props } = this.props;
const classNames = [];
if (className) classNames.push(className);
if (textColor !== undefined) classNames.push(getColor(textColor));
if (backgroundColor !== undefined) classNames.push(getBgColor(backgroundColor));
if (hoverColor !== undefined) classNames.push(getHoverColor(hoverColor));
if (backgroundHoverColor !== undefined) classNames.push(getBgHoverColor(backgroundHoverColor));
return (
<div {...props} className={classNames.join(" ")} >
{children}
</div>
);
}
}
export default ColorDiv;
src/components/ColorDiv/index.ts
+2
View File
@@ -0,0 +1,2 @@
import ColorDiv from "./ColorDiv";
export default ColorDiv;
src/components/ContactCard/ContactCard.scss
+6 -5
View File
@@ -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;
src/components/DropDownBox/DropDownBox.scss
+3 -2
View File
@@ -1,7 +1,8 @@
@import "../../assets/scss/globals";
.drop-down-box {
background-color: $white;
background-color: color(white);
margin-top: 0.8rem;
position: absolute;
left: 0;
@@ -10,7 +11,7 @@
&,
& a {
color: $dark-blue !important;
color: color(dark-blue) !important;
text-transform: uppercase;
}
}
src/components/Footer/Footer.scss
+5 -4
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.footer {
display: flex;
flex-direction: column;
@@ -9,19 +10,19 @@
}
h4 {
color: $light-blue;
color: color(light-blue);
padding: 1.5rem 0;
}
& a {
color: $white;
color: color(white);
text-decoration: underline;
padding: 0.4rem 0;
font-size: 14px;
}
& p {
color: $white;
color: color(white);
margin: 0;
padding: 0.4rem 0;
font-size: 14px;
@@ -71,7 +72,7 @@
&__copyright {
display: flex;
flex-flow: row nowrap;
background-color: $black;
background-color: color(black);
text-align: center;
justify-content: center;
font-size: 12px;
src/components/Header/Header.scss
+2 -1
View File
@@ -1,11 +1,12 @@
@import "../../assets/scss/globals";
.header {
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 0 1rem;
background-color: $dark-blue;
background-color: color(dark-blue);
@media screen and (min-width: 600px) {
position: sticky;
src/components/HeroAsideItem/HeroAsideItem.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.hero-aside-item {
max-width: 300px;
line-height: 16px;
@@ -25,11 +26,11 @@
}
h6 {
color: $blue;
color: color(blue);
font-weight: 600;
}
h6:hover {
color: $white;
color: color(white);
}
}
src/components/HeroAsideSection/HeroAsideSection.scss
+7 -6
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.hero-aside-section {
display: flex;
flex-flow: column nowrap;
@@ -15,28 +16,28 @@
padding: 3rem 1rem 2rem;
&.dark-blue {
background-color: $dark-blue;
background-color: color(dark-blue);
h2 {
color: $light-blue;
color: color(light-blue);
}
p {
font-weight: 100;
color: $white;
color: color(white);
}
}
&.light-turquoise {
background-color: $light-turquoise;
background-color: color(light-turquoise);
h2,
p {
color: $dark-blue;
color: color(dark-blue);
}
}
&.light-blue {
background-color: $light-blue;
background-color: color(light-blue);
}
}
src/components/HeroAsideSection/HeroAsideSection.tsx
+7 -10
View File
@@ -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<HeroAsideSectionProps, HeroAsideSectionState> {
class HeroAsideSection extends React.Component<HeroAsideSectionProps & ColorDivProps, HeroAsideSectionState> {
render() {
const { backgroundColor } = this.props;
const bgClass = colors.get(backgroundColor);
const className = `hero-aside-section ${bgClass}`;
const className = `hero-aside-section`;
return (
<div className={className}>
<ColorDiv className={className} {...this.props}>
<div className="hero-aside-section-block">
{this.props.children}
</div>
</div>
</ColorDiv>
);
}
}
src/components/MainSection/MainSection.tsx
+12 -6
View File
@@ -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<MainSectionProps, MainSectionState> {
class MainSection extends React.Component<MainSectionProps & ColorDivProps, MainSectionState> {
constructor(props: MainSectionProps) {
super(props);
}
render() {
const {children} = this.props;
const { children, className, ...props } = this.props;
const classNames = [
"main-section",
];
if (className) classNames.push(className);
return (
<div className="main-section">
<ColorDiv className={classNames.join(" ")} {...props}>
{children}
</div>
</ColorDiv>
);
}
}
src/components/NavbarChildLink/NavbarChildLink.scss
+4 -2
View File
@@ -1,4 +1,6 @@
@import "../../assets/scss/globals";
$border-width: 2px;
.navbar-child-link {
@@ -9,14 +11,14 @@ $border-width: 2px;
font-weight: 400;
@media screen and (max-width: 1200px - 1px) {
border-bottom: 1px dotted $light-blue;
border-bottom: 1px dotted color(light-blue);
margin-left: 2rem;
padding-left: 0;
}
&:hover {
@media screen and (min-width: 1200px) {
background-color: $light-blue;
background-color: color(light-blue);
}
}
}
src/components/NavbarDropdownLink/NavbarDropdownLink.scss
+4 -2
View File
@@ -1,4 +1,6 @@
@import "../../assets/scss/globals";
$border-width: 2px;
.navbar-dropdown-link {
@@ -11,7 +13,7 @@ $border-width: 2px;
padding: 20px 0;
@media screen and (max-width: 1200px - 1px) {
border-bottom: 1px solid $light-blue;
border-bottom: 1px solid color(light-blue);
}
}
@@ -25,7 +27,7 @@ $border-width: 2px;
bottom: 5px;
left: 0;
width: 100%;
border-bottom: 4px solid $light-blue;
border-bottom: 4px solid color(light-blue);
}
}
}
src/components/Navigation/Navigation.scss
+9 -7
View File
@@ -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);
}
}
}
src/components/PageLink/PageLink.scss
+4 -3
View File
@@ -1,7 +1,8 @@
@import "../../assets/scss/globals";
.page-link {
border-left-color: $blue;
border-left-color: color(blue);
border-left-width: 0.8rem;
border-left-style: solid;
margin: 0 1rem 1rem 0;
@@ -10,7 +11,7 @@
display: flex;
margin-block-start: 0;
margin-block-end: 0;
color: $dark-blue;
color: color(dark-blue);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
@@ -21,7 +22,7 @@
}
& a {
color: $dark-blue;
color: color(dark-blue);
margin-left: 1rem;
display: flex;
}
src/components/PageSection/PageSection.scss
+2 -27
View File
@@ -1,7 +1,7 @@
@import "../../assets/scss/globals";
.page-section {
background-color: $dark-blue;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
@@ -17,31 +17,6 @@
}
}
&.dark-blue {
background-color: $dark-blue;
color: $white;
}
&.white {
background-color: $white;
color: $dark-blue;
}
&.orange {
background-color: $orange1;
color: $white;
}
&.light-turquoise {
background-color: $light-turquoise;
color: $dark-blue;
}
&.light-blue {
background-color: $light-blue;
color: $black;
}
&.center {
justify-content: center;
}
@@ -53,7 +28,7 @@
bottom: 0;
width: 98%;
left: 1%;
border-bottom: 1px solid rgba($blue, 0.4);
border-bottom: 1px solid rgba(color(blue), 0.4);
}
}
}
src/components/PageSection/PageSection.tsx
+14 -7
View File
@@ -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<PageSectionProps, PageSectionState> {
class PageSection extends React.Component<PageSectionProps & ColorDivProps, PageSectionState> {
render() {
const { backgroundColor, children, center, bottomBorder, cardSection, fullSize } = this.props;
const { children, className, center, bottomBorder, cardSection, fullSize, ...props } = this.props;
const centerClass = center ? "center" : "";
const borderClass = bottomBorder ? "bottom-border" : "";
const cardsClass = cardSection ? "card-section" : "";
const nonPaddedClass = fullSize ? "" : "padded";
const className = `page-section ${colors.get(backgroundColor)} ${centerClass} ${borderClass} ${cardsClass} ${nonPaddedClass}`;
const classNames = [
"page-section",
centerClass,
borderClass,
cardsClass,
nonPaddedClass
];
if (className) classNames.push(className);
return (
<div className={className}>
<ColorDiv className={classNames.join(" ")} {...props}>
{children}
</div>
</ColorDiv>
);
}
}
src/components/Ribbon/Ribbon.scss
+1 -1
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.ribbon {
display: flex;
flex-flow: row nowrap;
@@ -9,7 +10,6 @@
margin: auto;
p {
color: $white;
font-size: 2rem;
font-weight: 100;
line-height: 30px;
src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.signup-questions-widget {
button.add-link {
background: none;
@@ -8,7 +9,7 @@
}
button.remove {
background-color: $orange1;
background-color: color(orange1);
margin-left: auto;
margin-bottom: 0.5rem;
padding: 0.3rem 0.5rem;
@@ -20,6 +21,6 @@
display: flex;
flex-flow: column nowrap;
padding: 0.5rem;
background-color: $light-blue;
background-color: color(light-blue);
}
}
src/components/SponsorReel/SponsorReel.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.sponsor-reel {
text-align: center;
@@ -7,7 +8,7 @@
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
color: $dark-blue;
color: color(dark-blue);
margin: 1rem 0 4rem;
font-size: 14px;
@@ -17,7 +18,7 @@
}
a {
color: $blue;
color: color(blue);
text-decoration: underline;
}
src/components/SponsorReel/SponsorReel.tsx
+5 -3
View File
@@ -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<SponsorReelProps, SponsorReelState> {
render() {
@@ -17,7 +19,7 @@ class SponsorReel extends React.Component<SponsorReelProps, SponsorReelState> {
<Link to="#"><img src="https://placehold.it/200x200" /></Link>
<Link to="#"><img src="https://placehold.it/200x200" /></Link>
</div>
<Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
<TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.LightTurquoise} to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</TextAnchor>
</div>
);
}
src/components/TextAnchor/TextAnchor.tsx
+7 -7
View File
@@ -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<TextAnchorProps, TextAnchorState> {
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 (
<Link style={style} to={to} className={className}>
src/index.scss
+3 -149
View File
@@ -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);
}
src/index.tsx
+39 -18
View File
@@ -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, string>([
[ColorEnum.DarkBlue, "dark-blue"],
[ColorEnum.LightBlue, "light-blue"],
[ColorEnum.White, "white"],
[ColorEnum.Black, "black"],
[ColorEnum.Grey1, "grey1"],
[ColorEnum.Grey2, "grey2"],
[ColorEnum.Orange1, "orange1"],
[ColorEnum.Orange2, "orange2"],
[ColorEnum.Blue, "blue"],
[ColorEnum.LightTurquoise, "light-turquoise"],
[ColorEnum.Green, "green"],
[ColorEnum.Sand, "sand"],
[ColorEnum.Transparent, "transparent"],
[ColorEnum.Inherit, "inherit"]
]);
export const getColor = (color: ColorEnum): string => `color-div__${colors.get(color)}`;
export const getBgColor = (color: ColorEnum): string => `color-div__background_${colors.get(color)}`;
export const getHoverColor = (color: ColorEnum): string => `color-div__${colors.get(color)}Hoverable`;
export const getBgHoverColor = (color: ColorEnum): string => `color-div__background_${colors.get(color)}Hoverable`;
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, string>([
[ColorEnum.DarkBlue, "dark-blue"],
[ColorEnum.White, "white"],
[ColorEnum.Orange, "orange"],
[ColorEnum.LightTurquoise, "light-turquoise"],
[ColorEnum.LightBlue, "light-blue"],
[ColorEnum.Blue, "blue"],
]);
render(
<AppContainer>
<BrowserRouter>
src/pages/AdminCommonPage/AdminCommonPage.scss
+8 -7
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.admin-container {
display: flex;
flex-flow: row nowrap;
@@ -33,9 +34,9 @@
input[type="submit"] {
border: none;
outline: none;
background-color: $orange2;
background-color: color(orange2);
padding: 0.5rem 1rem;
color: $white;
color: color(white);
}
h1 {
@@ -44,17 +45,17 @@
.error {
margin-bottom: 0.5rem;
border: 1px solid $orange2;
border: 1px solid color(orange2);
padding: 8px 16px;
color: $orange2;
color: color(orange2);
display: inline-block;
}
.success {
margin-bottom: 0.5rem;
border: 1px solid $green;
border: 1px solid color(green);
padding: 8px 16px;
color: $green;
color: color(green);
display: inline-block;
}
@@ -65,7 +66,7 @@
margin-bottom: 1rem;
&:hover {
color: $orange2;
color: color(orange2);
}
img {
src/pages/AdminEventPage/AdminEventPage.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.admin-event-page {
table {
border-collapse: collapse;
@@ -8,11 +9,11 @@
table,
th,
td {
border: 1px solid $white;
border: 1px solid color(white);
padding: 0.5rem;
a {
color: $orange1;
color: color(orange1);
text-decoration: underline;
}
}
src/pages/AdminFeedPage/AdminFeedPage.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.admin-feed-page {
table {
border-collapse: collapse;
@@ -8,11 +9,11 @@
table,
th,
td {
border: 1px solid $white;
border: 1px solid color(white);
padding: 0.5rem;
a {
color: $orange1;
color: color(orange1);
text-decoration: underline;
}
}
src/pages/AdminSignupPage/AdminSignupPage.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.admin-signup-page {
table {
border-collapse: collapse;
@@ -8,11 +9,11 @@
table,
th,
td {
border: 1px solid $white;
border: 1px solid color(white);
padding: 0.5rem;
a {
color: $orange1;
color: color(orange1);
text-decoration: underline;
}
}
src/pages/EventCreatePage/EventCreatePage.scss
+3 -2
View File
@@ -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;
src/pages/FeedCreatePage/FeedCreatePage.scss
+3 -2
View File
@@ -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;
src/pages/FrontPage/FrontPage.tsx
+4 -5
View File
@@ -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<FrontPageProps, FrontPageState> {
</div>
</HeroMainSection>
<HeroAsideSection backgroundColor={HeroAsideColor.DarkBlue}>
<HeroAsideSection textColor={ColorEnum.LightBlue} backgroundColor={ColorEnum.DarkBlue}>
<HeroAsideItem
title="Vasta-aloittanut opiskelija"
linkHref="/kilta/fuksi"
@@ -160,10 +159,10 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
</PageLink>
</div>
</PageSection>
<PageSection backgroundColor={PageSectionColor.Orange}>
<PageSection backgroundColor={PageSectionColor.Orange1}>
<Ribbon>
<h3>Sössöä vuodesta 1969.</h3>
<TextAnchor size={TextSize.SmallRibbon} to="https://sosso.fi">
<TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://sosso.fi">
<h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
</TextAnchor>
</Ribbon>
src/pages/GuildPage/GuildPage.tsx
+36 -52
View File
@@ -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<GuildPageProps, GuildPageState> {
<link rel="canonical" href="https://sik.ayy.fi/kilta" />
</Helmet>
<div className="front-page">
<PageSection backgroundColor={PageSectionColor.DarkBlue} fullSize>
<PageSection backgroundColor={ColorEnum.DarkBlue} fullSize>
<HeroMainSection>
<h1>Kilta koostuu sähkötekniikan ja elektroniikan (ELEC) tutkinto-ohjelmissa opiskelevista opiskelijoista</h1>
<p>Vapaa-ajan <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.White} to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.White} to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.White} to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.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={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="https://sosso.fi">Sössöä</TextAnchor>, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.</p>
<p>Arvot estrumquias doluptatur aut quam fugiti cus debit landisciis eatemperes eumquibus di blat que sim etus idis dolut labor ad magnat.</p>
</HeroMainSection>
<HeroAsideSection backgroundColor={HeroAsideColor.LightTurquoise}>
<HeroAsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
<HeroAsideItem
title="Toverielämää ja sähkötekniikkaa"
linkHref="/kilta/tehtavat"
@@ -56,25 +55,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</HeroAsideItem>
</HeroAsideSection>
</PageSection>
<PageSection backgroundColor={PageSectionColor.White}>
<AsideSection className="page__white" />
<MainSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} >
<h3>Killan tehtävät ja tarina</h3>
<p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää
esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja
saunailtoja. Valinnanvaraa on, joten <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.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={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>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.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 color={PageSectionColor.Blue} hoverColor={PageSectionColor.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 color={PageSectionColor.Blue} hoverColor={PageSectionColor.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={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>
<h6>Takana lähes satavuotinen historia</h6>
@@ -98,11 +85,8 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
määritelmä kuuluukin: “teekkarius on kaikkea sitä, mitä teekkarit tekevät”. Yksi asia
meitä kaikkia kuitenkin yhdistää. Opiskelemme jotain tekniikkaan liittyvää täällä
Aalto-yliopistossa.
Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} 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>
Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
yhdistyksistä</TextAnchor>. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä kiinnostavaa.</p>
<p>Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa
tutustua, jotta saa jonkinlaisen kuvan siitä vahvasta teekkarihengestä, joka
@@ -110,7 +94,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
Teekkariuteen kuuluu olennaisena osana mukautuminen ajan vaatimuksiin. Jos asiat
tehtäisiin aina vanhaa toistaen, ei voitaisi enää edes puhua teekkariudesta.</p>
</MainSection>
<AsideSection className="page__white">
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} >
<div>
<PageLink to="/jasenedut/" desc="vuonna 2018&nbsp;›">
Yliopiston jäsenedut
@@ -126,27 +110,27 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</div>
</AsideSection>
</PageSection>
<PageSection backgroundColor={PageSectionColor.LightBlue}>
<PageSection backgroundColor={ColorEnum.LightBlue} textColor={ColorEnum.DarkBlue}>
<Ribbon>
<p>Killan hallinto koostuu XXX henkilöstä.</p>
</Ribbon>
</PageSection>
<PageSection backgroundColor={PageSectionColor.White}>
<AsideSection className="page__white" />
<MainSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} />
<MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.DarkBlue} >
<h2>Organisaatio</h2>
<p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.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 color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
<p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/valtuusto">valtuusto</TextAnchor>, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 1–2 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
<h6>Valtuuston toimintaa</h6>
<p>Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/dokumenttiarkisto">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
<p>Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/dokumenttiarkisto">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
<h6>Hallituksen toimintaa</h6>
<p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.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 color={PageSectionColor.Blue} hoverColor={PageSectionColor.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={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/toimikunnat">toimikuntansa</TextAnchor> kanssa. Puheenjohtajan tehtävä on pitää langat käsissään, ja olla perillä kaikesta, mitä killassa tapahtuu. Hallitus tekee päätökset ja sopii menettelytavat viikottaisessa kokouksessaan. Hallitus on vastuussa kaikesta killan näkyvästä ja näkymättömästä toiminnasta, ja se on myös oikea osoite, jos joku asia vaivaa mieltä, tai mielessä on <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
</MainSection>
<AsideSection className="page__white">
<AsideSection backgroundColor={ColorEnum.White}>
<div>
<PageLink to="/yhteystiedot/" desc="yhteystiedot&nbsp;›">
Vuoden 2019 hallinto
@@ -157,13 +141,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</div>
</AsideSection>
</PageSection>
<PageSection backgroundColor={PageSectionColor.DarkBlue}>
<PageSection backgroundColor={ColorEnum.DarkBlue}>
<Ribbon>
<p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} size={TextSize.Ribbon} to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} size={TextSize.Ribbon} to="/jaokset">jaokset</TextAnchor>.</p>
<p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.Ribbon} to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.Ribbon} to="/jaokset">jaokset</TextAnchor>.</p>
</Ribbon>
</PageSection>
<div style={{ display: "flex", }}>
<AsideSection className="page__light-turquoise">
<AsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
<h3>Miksi alkaa kilta-aktiiviksi?</h3>
<p>
Näitä töitä tehdessä saa väkisinkin paljon uusia kavereita ja oppii monia palkallisessa työelämässä tarpeellisia taitoja. Eikä laajasta tuttavapiiristä ja monista kontakteista varmasti haittaa ole tulevaa työuraakaan ajatellen. Rahallista tai materiaalista hyötyä kiltatoiminnasta ei saa, eikä kukaan killan toimintaan mukaan tuleva sitä pyrikään tavoittelemaan. Mikä tärkeintä, kiltatoiminta on kivaa!
@@ -178,16 +162,16 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
» Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt
</p>
</AsideSection>
<AsideSection className="page__light-blue">
<AsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightBlue}>
<h3>Runsaasti erilaisia tehtäviä</h3>
<p>
Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.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={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to="/jaostot">Jaostoiminta</TextAnchor> mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.
</p>
<p>
» Haluatko <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={""} >valtuustoon</TextAnchor>, <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={""}>hallitukseen</TextAnchor> tai <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={""}>toimariksi</TextAnchor>?
» Haluatko <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""} >valtuustoon</TextAnchor>, <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>hallitukseen</TextAnchor> tai <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>toimariksi</TextAnchor>?
</p>
<p>
» <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
» <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
</p>
<p>
» Lorem ipsum
@@ -195,8 +179,8 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</AsideSection>
</div>
<PageSection backgroundColor={PageSectionColor.White}>
<AsideSection className="page__white">
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
<div>
<h2>Sähkötekniikan korkeakoulun toimikunnat</h2>
<p>
@@ -218,7 +202,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
<Accordion title="Ipsum" />
</div>
</AsideSection>
<AsideSection className="page__white">
<AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
<div>
<h2>Jaokset—kokeile kiltatoimintaa vapaammin</h2>
<p>
@@ -227,23 +211,23 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</div>
</AsideSection>
</PageSection>
<PageSection backgroundColor={PageSectionColor.Orange}>
<PageSection backgroundColor={ColorEnum.Orange1}>
<Ribbon>
<p>Jäsenedut vuonna 2019</p>
</Ribbon>
</PageSection>
<PageSection backgroundColor={PageSectionColor.White}>
<AsideSection className="page__white" />
<MainSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} />
<MainSection textColor={ColorEnum.Black}>
<h2>Aalto-yliopiston tarjoamat monenlaiset edut</h2>
<p>
Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.
</p>
<p>
» <TextAnchor color={PageSectionColor.Blue} hoverColor={PageSectionColor.DarkBlue} to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
» <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
</p>
</MainSection>
<AsideSection className="page__white">
<AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
<InfoBox>
<TextAnchor to={""}>Jäseneksi liittyminen</TextAnchor> on helppoa, hauskaa ja hyödyllistä 8 € jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
</InfoBox>
src/pages/SignUpPage/SignUpPage.tsx
+2 -2
View File
@@ -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<SignUpPageProps, SignUpPageState> {
<Helmet>
<link rel="canonical" href={`https://sik.ayy.fi/signup/${id}`} />
</Helmet>
<PageSection backgroundColor={PageSectionColor.DarkBlue}>
<PageSection backgroundColor={ColorEnum.DarkBlue}>
{content}
</PageSection>
</div>
src/pages/SignupCreatePage/SignupCreatePage.scss
+3 -2
View File
@@ -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;