{header}
+ {text && ( +{text}
+ )} +{props.children}
-);
-
-class Accordion extends React.Component
-
-
+
+
+ );
}
export default Accordion;
diff --git a/src/components/Accordion/AccordionIcon.tsx b/src/components/Accordion/AccordionIcon.tsx
new file mode 100644
index 0000000..25d5e4c
--- /dev/null
+++ b/src/components/Accordion/AccordionIcon.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "../../theme/colors";
+
+interface AccordionIconProps {
+ open: boolean;
+}
+
+const Icon = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: ${(p) => p.open ? colors.orange1 : colors.blue1};
+ color: ${colors.white};
+ min-width: 40px;
+ max-width: 40px;
+ min-height: 40px;
+ max-height: 40px;
+ margin: 0.2em;
+ font-size: 40px;
+
+ ${(p) => p.open && (`
+ span {
+ transform: rotate(45deg);
+ }
+ `)}
+
+`;
+
+const AccordionIcon: React.FC = ({ open } ) => (
+
+ +
+
+);
+
+export default AccordionIcon;
diff --git a/src/components/Accordion/index.ts b/src/components/Accordion/index.ts
deleted file mode 100644
index f653ec7..0000000
--- a/src/components/Accordion/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import Accordion from "./Accordion";
-export default Accordion;
diff --git a/src/components/AccordionIcon/AccordionIcon.scss b/src/components/AccordionIcon/AccordionIcon.scss
deleted file mode 100644
index 7933042..0000000
--- a/src/components/AccordionIcon/AccordionIcon.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.accordion-icon {
- display: flex;
- background-color: color(blue1);
- color: color(white1);
- align-items: center;
- justify-content: center;
- min-width: 40px;
- max-width: 40px;
- min-height: 40px;
- max-height: 40px;
- margin: 0.2em;
- font-size: 40px;
-
- &.open {
- background-color: color(orange1);
- }
-}
-
-.accordion-text {
- &.open {
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- transform: rotate(45deg);
- }
-}
diff --git a/src/components/AccordionIcon/AccordionIcon.tsx b/src/components/AccordionIcon/AccordionIcon.tsx
deleted file mode 100644
index 753a7ad..0000000
--- a/src/components/AccordionIcon/AccordionIcon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import "./AccordionIcon.scss";
-
-export interface AccordionIconProps {
- open: boolean;
-}
-export interface AccordionIconState {}
-
-class AccordionIcon extends React.Component {
- render() {
- const { open } = this.props;
- return (
- & {
+ text: string;
+}
+
+const AddLink: React.FC = ({ text, ...props }) => (
+
+ 
+ {text}
+
+)
+
+export default AddLink;
\ No newline at end of file
diff --git a/src/components/AdminHeader.tsx b/src/components/AdminHeader.tsx
new file mode 100644
index 0000000..2596349
--- /dev/null
+++ b/src/components/AdminHeader.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "styled-components";
+import HeaderLogo from "./HeaderLogo";
+import { colors } from "@theme/colors";
+
+const Header = styled.header`
+ background-color: ${colors.darkBlue};
+
+ a {
+ img {
+ display: block;
+ margin: 0.5rem auto;
+ padding: 2rem;
+ width: 100%;
+ max-width: 800px;
+ fill: ${colors.white};
+ }
+ }
+`;
+
+const AdminHeader: React.FC = () => (
+
+
+);
+
+export default AdminHeader;
diff --git a/src/components/AdminHeader/AdminHeader.scss b/src/components/AdminHeader/AdminHeader.scss
deleted file mode 100644
index a236b27..0000000
--- a/src/components/AdminHeader/AdminHeader.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import "../../assets/scss/globals";
-
-.admin-header {
- margin-bottom: 0.5rem;
-
- .heading {
- margin: 0 2rem;
- font-weight: 500;
- font-size: 24px;
-
- @media screen and (max-width: 600px - 1px) {
- display: none;
- }
- }
-
- a {
- max-width: 100%;
- display: flex;
- flex-flow: column nowrap;
- align-items: center;
-
- img {
- margin: 1rem 0.5rem;
-
- @media screen and (max-width: 600px - 1px) {
- max-width: 300px !important;
- width: 100%;
- margin: 1rem auto;
- }
- }
- }
-}
diff --git a/src/components/AdminHeader/AdminHeader.tsx b/src/components/AdminHeader/AdminHeader.tsx
deleted file mode 100644
index c299094..0000000
--- a/src/components/AdminHeader/AdminHeader.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import TitleImage from "@assets/img/SIK_RGB_W_side.png";
-import "./AdminHeader.scss";
-
-export interface AdminHeaderProps { }
-export interface AdminHeaderState { }
-
-class AdminHeader extends React.Component {
- render() {
- return (
-
-
-
- 
-
-
-
- );
- }
-}
-
-export default AdminHeader;
diff --git a/src/components/AdminHeader/index.ts b/src/components/AdminHeader/index.ts
deleted file mode 100644
index 8c087b1..0000000
--- a/src/components/AdminHeader/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import AdminHeader from "./AdminHeader";
-export default AdminHeader;
diff --git a/src/components/AdminSidebar.tsx b/src/components/AdminSidebar.tsx
new file mode 100644
index 0000000..6581f91
--- /dev/null
+++ b/src/components/AdminSidebar.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import styled from "styled-components";
+import Anchor from "@components/Anchor";
+import { colors } from "@theme/colors";
+
+interface AdminSidebarProps {
+ path: string;
+}
+
+const SideBar = styled.nav`
+ display: flex;
+ flex-flow: column nowrap;
+ margin-right: 1rem;
+ background-color: ${colors.blue1};
+
+ @media screen and (max-width: 800px) {
+ margin-right: 0;
+ margin-bottom: 1rem;
+ }
+`;
+
+const StyledLink = styled(Anchor)<{path: string}>`
+ padding: 1rem 3rem 1rem 1rem;
+ letter-spacing: 3px;
+ text-transform: uppercase;
+ line-height: 20px;
+ font-weight: bold;
+ white-space: nowrap;
+ color: ${colors.white};
+ border-left: 4px solid transparent;
+
+ ${p => p.path === p.to && `
+ border-left: 4px solid ${colors.white};
+ `}
+
+ &:hover {
+ border-left: 4px solid ${colors.white};
+ }
+
+ @media screen and (max-width: 800px) {
+ margin-bottom: 1px;
+ }
+`;
+
+const AdminSidebar: React.FC = ({ path }) => (
+
+ Home ›
+ Events ›
+ Feed ›
+ Signup forms ›
+ Job advertisements ›
+ Files ›
+ Logout ›
+
+);
+
+export default AdminSidebar;
diff --git a/src/components/AdminSidebar/AdminSidebar.scss b/src/components/AdminSidebar/AdminSidebar.scss
deleted file mode 100644
index 30037c7..0000000
--- a/src/components/AdminSidebar/AdminSidebar.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "../../assets/scss/globals";
-
-.admin-sidebar {
- display: flex;
- flex-flow: column nowrap;
- align-self: stretch;
- margin-right: 1rem;
-
- @media screen and (max-width: 800px - 1px) {
- margin-right: 0;
- margin-bottom: 1rem;
- }
-}
diff --git a/src/components/AdminSidebar/AdminSidebar.tsx b/src/components/AdminSidebar/AdminSidebar.tsx
deleted file mode 100644
index ef84fe7..0000000
--- a/src/components/AdminSidebar/AdminSidebar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import "./AdminSidebar.scss";
-import AdminSidebarLink from "../AdminSidebarLink";
-
-export interface AdminSidebarProps {
- path: string;
-}
-export interface AdminSidebarState {}
-
-class AdminSidebar extends React.Component {
- render() {
- const { path } = this.props;
- return (
- {
- render() {
- const { to, path, children, id } = this.props;
- const activeClass = to === path ? "active" : "";
-
- return (
-
- {children}
-
- );
- }
-}
-
-export default AdminSidebarLink;
diff --git a/src/components/AdminSidebarLink/index.ts b/src/components/AdminSidebarLink/index.ts
deleted file mode 100644
index d87b2bf..0000000
--- a/src/components/AdminSidebarLink/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import AdminSidebarLink from "./AdminSidebarLink";
-export default AdminSidebarLink;
diff --git a/src/components/Anchor.tsx b/src/components/Anchor.tsx
new file mode 100644
index 0000000..e9ef6b4
--- /dev/null
+++ b/src/components/Anchor.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { HashLink } from "react-router-hash-link";
+
+interface AnchorProps extends React.HTMLAttributes {
+ to: string;
+}
+
+const Anchor: React.FC = ({ to, ...props }) => {
+ if (to.startsWith("/")) {
+ return (
+
+ );
+ } else if (to.startsWith("#")) {
+ return (
+ {
- to: string;
-}
-
-class Anchor extends React.Component {
- render() {
- const { children, to, ...props } = this.props;
-
- if (to.startsWith("/")) {
- return (
- {children}
- );
- } else if (to.startsWith("#")) {
- return (
- {children}
- );
- }
- else {
- return (
- {children}
- );
- }
- }
-}
-export default Anchor;
diff --git a/src/components/Anchor/index.ts b/src/components/Anchor/index.ts
deleted file mode 100644
index dcc717e..0000000
--- a/src/components/Anchor/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import Anchor from "./Anchor";
-export default Anchor;
diff --git a/src/components/AsideSection/AsideSection.scss b/src/components/AsideSection/AsideSection.scss
deleted file mode 100644
index 80f731a..0000000
--- a/src/components/AsideSection/AsideSection.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.aside-section {
- display: flex;
- flex: 1;
- flex-flow: column;
- justify-content: space-between;
- padding: 3rem 4rem;
-}
diff --git a/src/components/AsideSection/AsideSection.tsx b/src/components/AsideSection/AsideSection.tsx
deleted file mode 100644
index 9dce772..0000000
--- a/src/components/AsideSection/AsideSection.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import "./AsideSection.scss";
-import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
-
-export interface AsideSectionProps {
- className?: string;
-}
-export interface AsideSectionState { }
-
-class AsideSection extends React.Component {
- render() {
- const { children, className, ...props } = this.props;
- const classNames = [
- "aside-section",
- ];
- if (className) classNames.push(className);
- return (
-
- {children}
-
- );
- }
-}
-
-export default AsideSection;
diff --git a/src/components/AsideSection/index.ts b/src/components/AsideSection/index.ts
deleted file mode 100644
index a8a5279..0000000
--- a/src/components/AsideSection/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import AsideSection from "./AsideSection";
-export default AsideSection;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..50d95bc
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+
+interface ButtonProps {
+ onClick: () => void;
+ type: "hero" | "filled" | "filter" | "bordered";
+ selected?: boolean;
+}
+
+const StyledButton = styled.button`
+ border-radius: none;
+ padding: 0.8rem 2rem;
+ margin: 0.5rem;
+ font-size: 13px;
+ background: none;
+ text-transform: uppercase;
+
+ @media screen and (max-width: 800px) {
+ font-size: 13px;
+ }
+
+ &.hero {
+ background-color: ${colors.darkBlue};
+ color: ${colors.blue1};
+ font-weight: 800;
+ letter-spacing: 1.5px;
+ border: 1px solid ${colors.lightTurquoise};
+ }
+
+ &.filled {
+ justify-content: center;
+ background-color: ${colors.blue1};
+ color: ${colors.white};
+ font-weight: 800;
+ letter-spacing: 1.5px;
+ border: none;
+ }
+
+ &.bordered {
+ font-size: 12px;
+ font-weight: 800;
+ color: ${colors.blue1};
+ border: 1px solid ${colors.blue1};
+ }
+
+ &.filter {
+ text-transform: none;
+ color: ${colors.grey1};
+ font-weight: 300;
+ border: 2px solid ${colors.grey1};
+
+ ${(p) => p.selected && (`
+ background-color: ${colors.grey1};
+ color: ${colors.white};
+ `)}
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &:active,
+ &:focus {
+ outline: none;
+ }
+`;
+
+const Button: React.FC = ({ type, selected, onClick, ...props }) => (
+ {
- render() {
- const { type, selected } = this.props;
- const classes = classNames(
- "button",
- type,
- { "selected": selected }
- )
- return (
-
- );
- }
-}
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
deleted file mode 100644
index 846ff85..0000000
--- a/src/components/Button/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import Button from "./Button";
-export default Button;
\ No newline at end of file
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..7199742
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,119 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+import Anchor from "@components/Anchor";
+
+interface WrappedCardProps {
+ title: string;
+ start_time: string;
+ text: string;
+ link: string;
+ image?: string;
+ imageAlt?: string;
+ buttonOnClick?: () => void;
+}
+
+interface CardProps {
+ title: string;
+ start_time: string;
+ text: string;
+ img: JSX.Element;
+ button: JSX.Element;
+}
+
+const StyledCard = styled.article`
+ color: ${colors.black};
+ margin: 1rem;
+ text-align: center;
+
+ img {
+ width: 100%;
+ max-height: 300px;
+ margin-bottom: 1rem;
+ }
+
+ p {
+ font-size: 16px;
+ text-overflow: ellipsis;
+ margin: 0 0 0.5rem;
+ font-weight: 200;
+ line-height: 22px;
+ }
+
+ p:first-of-type {
+ color: ${colors.orange1};
+ font-size: 0.9rem !important;
+ font-weight: 600 !important;
+
+ @media screen and (max-width: 1200px) {
+ margin: 0.5rem 0;
+ font-size: 16px;
+ }
+ }
+
+
+ h3 {
+ padding: 0.5rem;
+ font-size: 1.5rem;
+ font-weight: 300;
+ }
+
+ button {
+ cursor: pointer;
+
+ padding: 0.8rem 2rem;
+ margin: 0.5rem;
+ font-size: 13px;
+ background: none;
+ text-transform: uppercase;
+ background-color: ${colors.blue1};
+ color: ${colors.white};
+ font-weight: 800;
+ letter-spacing: 1.5px;
+ border: none;
+ }
+`;
+
+const Card: React.FC = ({ title, start_time, text, img, button }) => (
+
+ {img}
+
+);
+
+const WrappedCard: React.FC = ({ title, text, link, image, imageAlt, start_time, buttonOnClick }) => {
+ const options = {
+ day: "numeric",
+ month: "numeric",
+ year: "numeric",
+ hour: "numeric",
+ minute: "2-digit"
+ };
+ const datetime = new Date(start_time).toLocaleString("fi-FI", options);
+ const img = image ? (
+ 
+ ) : null;
+
+ const button = (
+
+
+
+ );
+
+ return (
+ {
- render() {
- const { title, text, link, image, button } = this.props;
- const options = {
- day: "numeric",
- month: "numeric",
- year: "numeric",
- hour: "numeric",
- minute: "2-digit"
- };
- const datetime = new Date(this.props.start_time).toLocaleString("fi-FI", options);
-
- const imageElem = image ? (
-
- ) : null;
- if (link) {
- return (
-
- {imageElem}
-
- );
- }
- return (
- {
- textColor?: Colors;
- backgroundColor?: Colors;
- hoverColor?: Colors;
- backgroundHoverColor?: Colors;
-}
-export interface ColorDivState { }
-
-
-class ColorDiv extends React.Component {
- render() {
- const { children, className, textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props } = this.props;
- const classes = classNames(
- className,
- colorToClass(textColor),
- bgColorToClass(backgroundColor),
- hoverColorToClass(hoverColor),
- bgHoverColorToClass(backgroundHoverColor)
- );
-
- return (
- = ({ name_fi, name_en, contacts }) => (
+
+
+);
+
+export default CommitteeContainer;
diff --git a/src/components/CommitteeContainer/CommitteeContainer.scss b/src/components/CommitteeContainer/CommitteeContainer.scss
deleted file mode 100644
index a6f33c0..0000000
--- a/src/components/CommitteeContainer/CommitteeContainer.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import "../../assets/scss/globals";
-
-.committee-container {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- color: color('dark-blue');
-
- .committee-name {
- display: flex;
- justify-content: center;
- text-transform: uppercase;
- letter-spacing: 3px;
- line-height: 14px;
- font-weight: bold;
- }
-
- &__contacts {
- display: flex;
- flex-flow: row wrap;
- justify-content: flex-start;
- }
-}
diff --git a/src/components/CommitteeContainer/CommitteeContainer.tsx b/src/components/CommitteeContainer/CommitteeContainer.tsx
deleted file mode 100644
index 03bc91a..0000000
--- a/src/components/CommitteeContainer/CommitteeContainer.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-import "./CommitteeContainer.scss";
-import { Occupation } from "@models/Contacts";
-import ContactCard from "../ContactCard/ContactCard";
-
-export interface CommitteeContainerProps {
- name_fi: string;
- name_en: string;
- contacts: Occupation[];
-}
-export interface CommitteeContainerState { }
-
-class CommitteeContainer extends React.Component {
- render() {
- const { name_fi, name_en, contacts } = this.props;
- return (
- = ({ first_name, last_name, phone, email, image, role }) => {
+ const fullName = `${first_name} ${last_name}`;
+ return(
+
+
+ 
+
+
+
+
+ )
+}
+
+export default ContactCard;
diff --git a/src/components/ContactCard/ContactCard.scss b/src/components/ContactCard/ContactCard.scss
deleted file mode 100644
index 7f87a42..0000000
--- a/src/components/ContactCard/ContactCard.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.contact-card {
- display: flex;
- flex-flow: row nowrap;
- color: color(dark-blue);
- margin: 1rem 1rem;
-
- &__notBoard {
- order: 1;
- }
-
- &__chair {
- order: -1;
- }
-
- &__info {
- display: flex;
- flex-direction: column;
- padding: 0.5rem;
- justify-content: flex-start;
- font-size: 1rem;
- font-weight: 300;
- color: color('dark-blue');
- }
-
- &__image {
- width: 100%;
- height: 100%;
- border-radius: 50%;
-
- &__container {
- padding: 15px;
- display: flex;
- flex-shrink: 0;
- justify-content: center;
- align-items: center;
- max-height: 100px;
- max-width: 100px;
- }
- }
-}
diff --git a/src/components/ContactCard/ContactCard.tsx b/src/components/ContactCard/ContactCard.tsx
deleted file mode 100644
index 34187bd..0000000
--- a/src/components/ContactCard/ContactCard.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-import "./ContactCard.scss";
-import blank_profile from "@assets/img/blank_profile.png";
-import { Role } from "@models/Contacts";
-
-export interface ContactCardProps {
- first_name: string;
- last_name: string;
- phone: number;
- email: string;
- image: string;
- role: Role;
-}
-export interface ContactCardState { }
-
-class ContactCard extends React.Component {
- render() {
- const { first_name, last_name, phone, email, image, role } = this.props;
- let className = "contact-card"
- if (!role.is_board) {
- className += " contact-card__notBoard"
- } else if (role.name_fi === "Puheenjohtaja") {
- className += " contact-card__chair"
- }
- return (
- {
- render() {
- const { value, onChange, onFocus, onBlur, required, disabled } = this.props;
-
- let date;
- let time;
- if (value && value.length !== 0) {
- let rest;
- [date, rest] = value.split("T");
- time = rest.slice(0, 5);
- }
-
- const commonProps = {
- onFocus,
- onBlur,
- required,
- disabled,
- };
-
- return (
- = ({ children, onMouseEnter, onMouseLeave, visible }) => (
+
+ {children}
+
+);
+
+export default DropDownBox;
diff --git a/src/components/DropDownBox/DropDownBox.scss b/src/components/DropDownBox/DropDownBox.scss
deleted file mode 100644
index fa14622..0000000
--- a/src/components/DropDownBox/DropDownBox.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.drop-down-box {
- background-color: color(white1);
- margin-top: 0.8rem;
- position: absolute;
- left: 0;
- top: 30px;
- z-index: 20;
-
- &,
- & a {
- color: color(dark-blue) !important;
- text-transform: uppercase;
- }
-}
diff --git a/src/components/DropDownBox/DropDownBox.tsx b/src/components/DropDownBox/DropDownBox.tsx
deleted file mode 100644
index 572b1f3..0000000
--- a/src/components/DropDownBox/DropDownBox.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import "./DropDownBox.scss";
-
-export interface DropDownBoxProps {
- onMouseEnter: () => void;
- onMouseLeave: () => void;
- visible: boolean;
-}
-export interface DropDownBoxState {}
-
-class DropDownBox extends React.Component {
- render() {
- const { children, onMouseEnter, onMouseLeave, visible } = this.props;
- return (
- {
- render() {
- return
- ;
+const CopyRight = styled.div`
+ display: flex;
+ flex-flow: row nowrap;
+ color: ${colors.white};
+ background-color: ${colors.black};
+ text-align: center;
+ justify-content: center;
+ font-size: 12px;
+ padding: 1rem 0;
+
+ p {
+ padding: 0.5rem 1rem;
+ margin: 0;
+ font-size: 14px;
}
-}
+
+ a {
+ display: block;
+ text-decoration: underline;
+ padding: 0.4rem 0;
+ font-size: 14px;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+
+ @media screen and (max-width: 600px) {
+ flex-flow: column nowrap;
+ }
+`;
+
+const Footer: React.FC = () => (
+
+
+
+
+)
export default Footer;
diff --git a/src/components/Footer/FooterContent.tsx b/src/components/Footer/FooterContent.tsx
new file mode 100644
index 0000000..fdf11dc
--- /dev/null
+++ b/src/components/Footer/FooterContent.tsx
@@ -0,0 +1,104 @@
+import React from "react";
+import styled from "styled-components";
+import Anchor from "../Anchor";
+import { colors } from "@theme/colors";
+
+const Content = styled.div`
+ display: flex;
+
+ & > div:first-of-type {
+ padding: 48px 0;
+ flex: 2 1;
+
+ & > * {
+ padding: 0 24px;
+ }
+ }
+
+ h4 {
+ color: ${colors.lightBlue};
+ padding: 24px 0;
+ }
+
+ a {
+ color: ${colors.white};
+ display: block;
+ text-decoration: underline;
+ padding: 0.4rem 0;
+ font-size: 14px;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+
+ p {
+ color: ${colors.white};
+ margin: 0;
+ padding: 0.4rem 0;
+ font-size: 14px;
+ }
+`;
+
+const MarginSpace = styled.div`
+ max-width: 600px;
+ margin: auto;
+`;
+
+const Columns = styled.div`
+ display: flex;
+ justify-content: space-between;
+ & > div > div {
+ margin-bottom: 1rem;
+ }
+`;
+
+const Map = styled.div`
+ flex: 1;
+ @media screen and (max-width: 800px) {
+ display: none;
+ }
+ iframe {
+ border: none;
+ }
+`;
+
+const FooterContent: React.FC = () => (
+
+
+)
+
+export default FooterContent;
diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts
deleted file mode 100644
index ccb5e78..0000000
--- a/src/components/Footer/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import Footer from "./Footer";
-export default Footer;
diff --git a/src/components/FooterMap/FooterMap.scss b/src/components/FooterMap/FooterMap.scss
deleted file mode 100644
index 09a3654..0000000
--- a/src/components/FooterMap/FooterMap.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "../../assets/scss/globals";
-
-.footer-map {
- display: flex;
-
- @media screen and (max-width: 1200px - 1px) {
- display: none;
- }
-
- iframe {
- border: none;
- }
-}
diff --git a/src/components/FooterMap/FooterMap.tsx b/src/components/FooterMap/FooterMap.tsx
deleted file mode 100644
index bddca1a..0000000
--- a/src/components/FooterMap/FooterMap.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import "./FooterMap.scss";
-
-const AnyReactComponent = ({ text }) => {
- render() {
- return (
-
+
+
+
+ )
+}
+
+export default Header;
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
deleted file mode 100644
index fd5611b..0000000
--- a/src/components/Header/Header.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.header {
- position: sticky;
- top: 0;
- z-index: 10;
- display: flex;
- flex-flow: column nowrap;
- background-color: color(dark-blue);
- transition: all 200ms ease-out;
-
- &.hidden {
- transition: all 200ms ease-in;
- transform: translateY(-100%);
- }
-}
-
-.nav-container {
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- width: 100%;
- padding: 0 1rem;
-
- @media screen and (max-width: 600px - 1px) {
- flex-flow: column nowrap;
-
- img {
- max-width: 100% !important;
- margin: 1rem 0 !important;
- }
- }
-
- img {
- max-width: 300px;
- margin: 1rem 1rem;
- }
-}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
deleted file mode 100644
index 7978d32..0000000
--- a/src/components/Header/Header.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { FC, useState, useEffect, useRef } from "react";
-import { Link } from "react-router-dom";
-import "./Header.scss";
-import NavbarDropdownLink from "../NavbarDropdownLink/NavbarDropdownLink";
-import NavbarChildLink from "../NavbarChildLink/NavbarChildLink";
-import Navigation from "../Navigation";
-import TitleImage from "@assets/img/SIK_RGB_W_side.png";
-import classNames from "classnames";
-import throttle from "lodash/throttle";
-
-export interface HeaderProps { }
-export interface HeaderState {
- mobileMenuOpen: boolean;
-}
-
-const renderNavigationDesktopItems = () => {
- return (
- <>
-
- Toiminta
- Fuksi
- Arkisto
-
-
- {/* Simo Höglund */}
-
-
- Toiminta
- Fuksi
- Arkisto
-
-
- {/* Simo Höglund */}
-
- = () => {
- const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
- const [isHidden, setHidden] = useState(false);
- const yCoord = useRef(0);
-
- const handleScroll = () => {
- const newCoord = window.pageYOffset;
- if (!mobileMenuOpen && newCoord > yCoord.current && newCoord > PREVENT_IS_HIDDEN_Y) {
- setHidden(true);
- } else {
- setHidden(false);
- }
- yCoord.current = newCoord;
- };
-
- const handleMobileMenuClick = () => setMobileMenuOpen(!mobileMenuOpen);
-
- useEffect(() => {
- const func = throttle(handleScroll, 200);
- // Prevents hide when clicking mobileMenuOpen
- handleScroll();
- window.addEventListener("scroll", func);
- return () => window.removeEventListener("scroll", func);
- }, [isHidden, mobileMenuOpen]);
-
- const desktopItems = renderNavigationDesktopItems();
- const mobileItems = renderNavigationMobileItems();
-
- const classes = classNames(
- "header",
- { "hidden": isHidden }
- )
-
- return (
-
-
- )
-}
-
-export default Header;
diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts
deleted file mode 100644
index aa3e4e8..0000000
--- a/src/components/Header/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import Header from "./Header";
-export default Header;
diff --git a/src/components/HeaderLogo.tsx b/src/components/HeaderLogo.tsx
new file mode 100644
index 0000000..c502809
--- /dev/null
+++ b/src/components/HeaderLogo.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import TitleImage from "@assets/img/SIK_RGB_W_side.png";
+
+const Logo = styled.img`
+ max-width: 300px;
+ margin: 1rem 1rem;
+
+ @media screen and (max-width: 600px) {
+ max-width: 100% !important;
+ margin: 1rem 0 !important;
+ }
+`;
+
+const HeaderLogo: React.FC = () => (
+
+
+ {children}
+
+)
+
+export default Hero;
\ No newline at end of file
diff --git a/src/components/Hero/HeroAside.tsx b/src/components/Hero/HeroAside.tsx
new file mode 100644
index 0000000..79484c6
--- /dev/null
+++ b/src/components/Hero/HeroAside.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+import Anchor from "@components/Anchor";
+
+interface HeroAsideItemProps {
+ header: string;
+ text?: string;
+ link: string;
+ linkText: string;
+}
+
+const Article = styled.article`
+ margin-bottom: 1rem;
+`;
+
+export const HeroAsideItem: React.FC = ({ header, text, link, linkText }) => (
+
+
+
+
+)
+
+type Colors = "darkBlue" | "lightTurquoise";
+
+interface HeroAsideProps {
+ bgColor: Colors;
+}
+
+// TODO: Color combos
+const Aside = styled.aside<{ colors: string }>`
+ ${(p) => p.colors}
+ flex: 4;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ & > div {
+ max-width: 350px;
+
+ h2 {
+ word-break: break-word;
+ hyphens: auto;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ line-height: 1.5rem;
+ }
+
+ p {
+ margin: 0;
+ line-height: 2rem;
+ }
+
+
+ & > p {
+ font-weight: 600;
+ margin-bottom: 2rem;
+ }
+
+ a {
+ line-height: 2rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ text-decoration: none;
+ letter-spacing: 0.1rem;
+ }
+ }
+`;
+
+const textColors = (bgColor: Colors) => {
+ switch(bgColor) {
+ case "darkBlue":
+ return `
+background-color: ${colors[bgColor]};
+color: ${colors.lightBlue};
+`;
+ case "lightTurquoise":
+ return `
+background-color: ${colors[bgColor]};
+color: ${colors.darkBlue};
+ `;
+ default: return ""
+ }
+}
+
+const HeroAside: React.FC = ({ bgColor, children}) => (
+
+)
+
+export default HeroAside;
diff --git a/src/components/Hero/HeroAsideItem/HeroAsideItem.scss b/src/components/Hero/HeroAsideItem/HeroAsideItem.scss
deleted file mode 100644
index 4b4b047..0000000
--- a/src/components/Hero/HeroAsideItem/HeroAsideItem.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@import "../../../assets/scss/globals";
-
-
-.hero-aside-item {
- max-width: 300px;
- line-height: 16px;
- margin-bottom: 1rem;
-
- @media screen and (max-width: 600px - 1px) {
- p,
- a {
- font-size: 16px !important;
- line-height: 20px;
- }
- }
-
- h2 {
- text-transform: uppercase;
- letter-spacing: 3px;
- line-height: 20px;
- }
-
- p {
- font-size: 14px;
- line-height: 20px;
- }
-
- h6 {
- color: color(blue1);
- font-weight: 600;
- }
-
- h6:hover {
- color: color(white1);
- }
-}
diff --git a/src/components/Hero/HeroAsideItem/HeroAsideItem.tsx b/src/components/Hero/HeroAsideItem/HeroAsideItem.tsx
deleted file mode 100644
index a1143a9..0000000
--- a/src/components/Hero/HeroAsideItem/HeroAsideItem.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import "./HeroAsideItem.scss";
-import Anchor from "../../Anchor";
-
-interface HeroAsideItemProps {
- title: string;
- linkText: string;
- linkHref: string;
-}
-
-const HeroAsideItem: React.FC = ({ title, linkText, linkHref, children }) => (
- {
- render() {
- const className = "hero-aside-section";
- return (
-
-
- );
- }
-}
-
-export default HeroAsideSection;
diff --git a/src/components/Hero/HeroMainSection/HeroMainSection.tsx b/src/components/Hero/HeroMainSection/HeroMainSection.tsx
deleted file mode 100644
index 2d413a3..0000000
--- a/src/components/Hero/HeroMainSection/HeroMainSection.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const Container = styled.div`
- display: flex;
- flex-flow: column nowrap;
- align-items: center;
- margin-top: 15vh;
- flex: 6;
- text-align: center;
- font-weight: 100;
- line-height: 24px;
-
- & > div {
- padding: 2rem 1rem 2rem;
- }
-
- h1 {
- max-width: 600px;
- line-height: 40px;
-
- @media screen and (max-width: 500px) {
- font-size: 2rem;
- }
- }
-
- p {
- max-width: 400px;
- font-weight: 100;
- }
-
- .hero-button-container {
- display: flex;
- flex-direction: column;
- min-width: 20%;
-
- &-row {
- flex-direction: row;
- }
- }
-`;
-
-const HeroMainSection: React.FC = ({children}) => {
- return (
-
- {children}
-
- );
-}
-
-export default HeroMainSection;
diff --git a/src/components/Hero/HeroPrimaryButtons.tsx b/src/components/Hero/HeroPrimaryButtons.tsx
new file mode 100644
index 0000000..251ad6f
--- /dev/null
+++ b/src/components/Hero/HeroPrimaryButtons.tsx
@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+
+const Buttons = styled.div<{row?: boolean}>`
+ min-width: 20%;
+ max-width: fit-content;
+ margin: auto;
+ display: flex;
+ flex-flow: ${(p) => p.row ? "row" : "column"} wrap;
+
+ a {
+ display: contents;
+ text-decoration: none;
+ }
+
+ button {
+ color: ${colors.blue1};
+ background-color: transparent;
+ padding: 0.8rem 2rem;
+ margin: 0.5rem;
+ font-size: 0.8rem;
+ font-weight: 800;
+ letter-spacing: .1em;
+ text-transform: uppercase;
+ border: 1px solid ${colors.lightTurquoise};
+
+ &:hover {
+ cursor: pointer;
+ color: ${colors.white};
+ }
+
+ &:active,
+ &:focus {
+ outline: none;
+ }
+ }
+`;
+
+export default Buttons;
\ No newline at end of file
diff --git a/src/components/Hero/HeroPrimarySection.tsx b/src/components/Hero/HeroPrimarySection.tsx
new file mode 100644
index 0000000..59a2fe6
--- /dev/null
+++ b/src/components/Hero/HeroPrimarySection.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+
+interface HeroPrimarySectionProps {
+ header: string;
+ text?: string;
+}
+
+const Section = styled.section`
+ margin: 10vh auto 0;
+ max-width: 800px;
+ text-align: center;
+ line-height: 1.5rem;
+
+ h1 {
+ line-height: 40px;
+ }
+
+ p {
+ max-width: 400px;
+ margin: 1em auto;
+ font-weight: 200;
+ }
+
+ a {
+ color: ${colors.blue1};
+ font-weight: 600;
+ text-decoration: underline;
+
+ &:hover {
+ color: ${colors.white};
+ text-decoration: none
+ }
+ }
+`;
+
+const HeroPrimarySection: React.FC = ({ header, text, children }) => (
+
+
+)
+
+export default HeroPrimarySection;
\ No newline at end of file
diff --git a/src/components/Hero/HeroSecondarySection/HeroSecondarySection.tsx b/src/components/Hero/HeroSecondarySection.tsx
similarity index 67%
rename from src/components/Hero/HeroSecondarySection/HeroSecondarySection.tsx
rename to src/components/Hero/HeroSecondarySection.tsx
index a7234ee..098bf4c 100644
--- a/src/components/Hero/HeroSecondarySection/HeroSecondarySection.tsx
+++ b/src/components/Hero/HeroSecondarySection.tsx
@@ -1,10 +1,6 @@
import React from "react";
import styled from "styled-components";
-import ColorDiv from "../../ColorDiv/ColorDiv";
-
-interface HeroSecondarySectionItemProps {
- note?: string;
-}
+import { colors } from "@theme/colors";
const Note = styled.span`
color: white;
@@ -16,6 +12,10 @@ const Note = styled.span`
font-weight: bold;
margin-right: 2rem;
margin-top: -0.5rem;
+
+ @media screen and (max-width: 800px) {
+ font-size: 1.25rem;
+ }
`;
const Item = styled.div`
@@ -25,6 +25,10 @@ const Item = styled.div`
margin: 1rem 2rem 1rem;
`;
+interface HeroSecondarySectionItemProps {
+ note?: string;
+}
+
export const HeroSecondarySectionItem: React.FC = ({note, children}) => (
-
@@ -34,33 +38,32 @@ export const HeroSecondarySectionItem: React.FC =
)
-const Container = styled(ColorDiv)`
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+const Section = styled.section`
+ background-color: ${colors.green1};
+ color: ${colors.darkBlue};
h1 {
- padding: 1em 0;
+ padding: 1rem 0;
+ text-align: center;
}
`;
const Items = styled.div`
display: flex;
- flex-direction: row;
+ flex-flow: row wrap;
`;
interface HeroSecondarySectionProps {
- title: string;
+ heading: string;
}
-const HeroSecondarySection: React.FC = ({title, children}) => (
-
- = ({ heading, children }) => (
+
+
{children}
-
+
)
-export default HeroSecondarySection;
+export default HeroSecondarySection;
\ No newline at end of file
diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx
new file mode 100644
index 0000000..f380770
--- /dev/null
+++ b/src/components/Hero/index.tsx
@@ -0,0 +1,7 @@
+export { default as Hero } from "./Hero";
+export { default as HeroPrimarySection } from "./HeroPrimarySection";
+export { default as HeroSecondarySection } from "./HeroSecondarySection";
+export { HeroSecondarySectionItem } from "./HeroSecondarySection";
+export { default as HeroAside } from "./HeroAside";
+export { HeroAsideItem as HeroAsideItem } from "./HeroAside";
+export { default as HeroPrimaryButtons } from "./HeroPrimaryButtons";
\ No newline at end of file
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon.tsx
similarity index 87%
rename from src/components/Icon/Icon.tsx
rename to src/components/Icon.tsx
index 46f1bcc..9ed3539 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import "./Icon.scss";
+import styled from "styled-components";
export enum IconType {
Facebook,
@@ -10,12 +10,11 @@ export enum IconType {
GBFlag,
}
-export interface IconProps {
+interface IconProps {
name: IconType;
link?: string;
onClick?: (event?: any) => void;
}
-export interface IconState { }
const nameToIcon = (name: IconType): JSX.Element | string => {
if (name === IconType.Facebook) {
@@ -68,27 +67,40 @@ const nameToIcon = (name: IconType): JSX.Element | string => {
return null;
};
-class Icon extends React.Component {
- render() {
- const { link, name, onClick } = this.props;
- const elem = nameToIcon(name);
- if (link) {
- return (
-
- {elem}
-
- );
- }
+const SomeIcon = styled.a`
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: center;
+ margin: 1em;
+
+ svg {
+ width: 20px;
+ height: 20px;
+ }
+`;
+
+const NormalIcon = styled.span`
+/* stylelint-disable-next-line no-empty-source */
+`;
+
+const Icon: React.FC = ({ link, name, onClick }) => {
+ const elem = nameToIcon(name);
+ if (link) {
return (
-
+
{elem}
-
+
);
}
+
+ return (
+
+ {elem}
+
+ );
}
export default Icon;
diff --git a/src/components/Icon/Icon.scss b/src/components/Icon/Icon.scss
deleted file mode 100644
index 1a1e873..0000000
--- a/src/components/Icon/Icon.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "../../assets/scss/globals";
-
-.so-me-icon {
- display: flex;
- flex-flow: row nowrap;
- justify-content: center;
- margin: 1em;
-
- svg {
- width: 20px;
- height: 20px;
- }
-}
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
deleted file mode 100644
index 86b8c41..0000000
--- a/src/components/Icon/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import Icon from "./Icon";
-export default Icon;
diff --git a/src/components/InfoBox.tsx b/src/components/InfoBox.tsx
new file mode 100644
index 0000000..2126318
--- /dev/null
+++ b/src/components/InfoBox.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+
+const Box = styled.div`
+ justify-content: flex-end;
+ text-align: center;
+`;
+
+const InfoBox: React.FC = ({ children }) => (
+
+ {children}
+
+)
+
+export default InfoBox;
diff --git a/src/components/InfoBox/InfoBox.scss b/src/components/InfoBox/InfoBox.scss
deleted file mode 100644
index 63d25b6..0000000
--- a/src/components/InfoBox/InfoBox.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "../../assets/scss/globals";
-
-.info-box {
- justify-content: flex-end;
- text-align: center;
-}
diff --git a/src/components/InfoBox/InfoBox.tsx b/src/components/InfoBox/InfoBox.tsx
deleted file mode 100644
index 7f9f844..0000000
--- a/src/components/InfoBox/InfoBox.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import "./InfoBox.scss";
-
-export interface InfoBoxProps {}
-export interface InfoBoxState {}
-
-class InfoBox extends React.Component {
- constructor(props: InfoBoxProps) {
- super(props);
- }
-
- render() {
- const { children } = this.props;
- return (
- ;
+}
+
+const JsonLD: React.FC = ({ data }) => (
+
+);
+
+export default JsonLD;
diff --git a/src/components/JsonLD/JsonLD.tsx b/src/components/JsonLD/JsonLD.tsx
deleted file mode 100644
index cb73cb8..0000000
--- a/src/components/JsonLD/JsonLD.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-
-export interface JsonLDProps {
- data: object;
-}
-
-class JsonLD extends React.Component {
- render() {
- return (
-
- );
- }
-}
-
-export default JsonLD;
diff --git a/src/components/JsonLD/index.ts b/src/components/JsonLD/index.ts
deleted file mode 100644
index e9b2e76..0000000
--- a/src/components/JsonLD/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import JsonLD from "./JsonLD";
-export default JsonLD;
diff --git a/src/components/MainSection/MainSection.scss b/src/components/MainSection/MainSection.scss
deleted file mode 100644
index ed09469..0000000
--- a/src/components/MainSection/MainSection.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import "../../assets/scss/globals";
-
-.main-section {
- display: flex;
- flex: 2;
- flex-flow: column;
- padding: 0 3rem;
-
- & > h3 {
- margin: auto;
- }
-
- & > h6 {
- color: color(orange1);
- }
-
- & > p {
- margin-block-start: 0.5rem;
- margin-block-end: 1rem;
- }
-}
diff --git a/src/components/MainSection/MainSection.tsx b/src/components/MainSection/MainSection.tsx
deleted file mode 100644
index a96a12a..0000000
--- a/src/components/MainSection/MainSection.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import "./MainSection.scss";
-import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
-import classNames from "classnames";
-
-export interface MainSectionProps { }
-export interface MainSectionState { }
-
-class MainSection extends React.Component {
- render() {
- const { children, className, ...props } = this.props;
- const classes = classNames(
- "main-section",
- className
- );
-
- return (
-
- {children}
-
- );
- }
-}
-
-export default MainSection;
diff --git a/src/components/MainSection/index.ts b/src/components/MainSection/index.ts
deleted file mode 100644
index 50928f2..0000000
--- a/src/components/MainSection/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import MainSection from "./MainSection";
-export default MainSection;
diff --git a/src/components/NavbarChildLink.tsx b/src/components/NavbarChildLink.tsx
new file mode 100644
index 0000000..785b04e
--- /dev/null
+++ b/src/components/NavbarChildLink.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+import Anchor from "./Anchor";
+import { colors } from "@theme/colors";
+
+interface NavbarChildLinkProps {
+ to: string;
+}
+
+const StyledLink = styled(Anchor)`
+ display: block;
+ padding: 1rem;
+ letter-spacing: 1.5px;
+ padding-right: 4rem;
+ font-weight: 400;
+
+ @media screen and (max-width: 1200px) {
+ border-bottom: 1px dotted ${colors.lightBlue};
+ margin-left: 2rem;
+ padding-left: 0;
+ }
+
+ &:hover {
+ @media screen and (min-width: 1200px) {
+ background-color: ${colors.lightBlue};
+ }
+ }
+`;
+
+const NavbarChildLink: React.FC = (props) => (
+ {
- render() {
- return (
-
- {this.props.children}
-
- );
- }
-}
-
-export default NavbarChildLink;
diff --git a/src/components/NavbarChildLink/index.ts b/src/components/NavbarChildLink/index.ts
deleted file mode 100644
index 614b1c1..0000000
--- a/src/components/NavbarChildLink/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import NavbarChildLink from "./NavbarChildLink";
-export default NavbarChildLink;
diff --git a/src/components/NavbarDropdownLink.tsx b/src/components/NavbarDropdownLink.tsx
new file mode 100644
index 0000000..651bd24
--- /dev/null
+++ b/src/components/NavbarDropdownLink.tsx
@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import DropDownBox from "./DropDownBox";
+import Anchor from "./Anchor";
+import { colors } from "@theme/colors";
+
+const Container = styled.div`
+ position: relative;
+
+ &:hover {
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: 5px;
+ left: 0;
+ width: 100%;
+ border-bottom: 4px solid ${colors.lightBlue};
+ }
+ }
+`;
+
+const StyledLink = styled(Anchor)`
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ padding: 20px 0;
+
+ @media screen and (max-width: 1200px) {
+ border-bottom: 1px solid ${colors.lightBlue};
+ }
+`;
+
+interface NavbarDropdownLinkProps {
+ to: string;
+ text: string;
+ exploded?: boolean; // if exploded, show items directly underneath without a dropdown menu
+}
+
+const NavbarDropdownLink: React.FC = ({ to, text, exploded, children }) => {
+ const [mouseOverLink, setMouseOverLink] = useState(false);
+ const [mouseOverBox, setMouseOverBox] = useState(false);
+
+ const handleMouseEnterLink = () => setMouseOverLink(true);
+ const handleMouseLeaveLink = () => setMouseOverLink(false);
+ const handleMouseEnterBox = () => setMouseOverBox(true);
+ const handleMouseLeaveBox = () => setMouseOverBox(false);
+
+ const open = mouseOverLink || mouseOverBox;
+
+ if (exploded) {
+ return (
+ <>
+
+ {text}
+
+ {children}
+
+ );
+ }
+
+ return (
+
+
+ {text}
+
+
+ {children}
+
+
+ );
+}
+
+export default NavbarDropdownLink;
diff --git a/src/components/NavbarDropdownLink/NavbarDropdownLink.scss b/src/components/NavbarDropdownLink/NavbarDropdownLink.scss
deleted file mode 100644
index cd25198..0000000
--- a/src/components/NavbarDropdownLink/NavbarDropdownLink.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-$border-width: 2px;
-
-.navbar-dropdown-link {
- display: flex;
- flex-flow: row nowrap;
- justify-content: flex-start;
- font-weight: 500;
- text-transform: uppercase;
- letter-spacing: 2px;
- padding: 20px 0;
-
- @media screen and (max-width: 1200px - 1px) {
- border-bottom: 1px solid color(light-blue);
- }
-}
-
-.navbar-dropdown-container {
- position: relative;
-
- &:hover {
- &::after {
- content: "";
- position: absolute;
- bottom: 5px;
- left: 0;
- width: 100%;
- border-bottom: 4px solid color(light-blue);
- }
- }
-}
diff --git a/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx b/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx
deleted file mode 100644
index c29df71..0000000
--- a/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from "react";
-import "./NavbarDropdownLink.scss";
-import DropDownBox from "../DropDownBox/DropDownBox";
-import Anchor from "../Anchor";
-
-export interface NavbarDropdownLinkProps {
- to: string;
- text: string;
- exploded?: boolean; // if exploded, show items directly underneath without a dropdown menu
-}
-export interface NavbarDropdownLinkState {
- mouseOverLink: boolean;
- mouseOverBox: boolean;
-}
-
-class NavbarDropdownLink extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- mouseOverLink: false,
- mouseOverBox: false,
- };
- }
-
- handleMouseEnterLink = () => {
- this.setState({
- mouseOverLink: true,
- });
- }
-
- handleMouseLeaveLink = () => {
- this.setState({
- mouseOverLink: false,
- });
- }
-
- handleMouseEnterBox = () => {
- this.setState({
- mouseOverBox: true,
- });
- }
-
- handleMouseLeaveBox = () => {
- this.setState({
- mouseOverBox: false,
- });
- }
-
- render() {
- const { children, exploded, text, to } = this.props;
- const { mouseOverLink, mouseOverBox } = this.state;
- const open = mouseOverLink || mouseOverBox;
-
- if (exploded) {
- return (
-
- {text}
- {children}
-
- );
- }
-
- return (
-
+ Toiminta
+ Fuksi
+ Arkisto
+
+
+ {/* Simo Höglund */}
+
+ = ({ onMobileMenuOpen }) => {
+ const desktopItems = renderNavigationDesktopItems();
+ return (
+
+ )};
+
+export default Navigation;
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
deleted file mode 100644
index f9b7cc9..0000000
--- a/src/components/Navigation/Navigation.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-$border-width: 2px;
-
-.navigation,
-.navigation-mobile-menu {
- a,
- a:-webkit-any-link {
- fill: color(light-blue);
- color: color(light-blue);
- }
-}
-
-.navigation {
- width: 100%;
- display: flex;
- flex-flow: row nowrap;
- justify-content: space-between;
- align-items: center;
- font-size: 14px;
- color: color(light-blue);
- margin-left: 5rem;
-
- @media screen and (min-width: 600px) and (max-width: 1200px - 1px) {
- justify-content: flex-end;
- }
-
- @media screen and (max-width: 600px - 1px) {
- justify-content: center;
- margin-left: 0;
- }
-
- .navbar-dropdown-container {
- @media screen and (max-width: 1200px - 1px) {
- display: none;
- }
- }
-
- & .navigation-some {
- display: flex;
- flex-flow: row nowrap;
-
- a,
- a:-webkit-any-link {
- fill: color(white1);
- color: color(white1);
- }
- }
-
- & .navigation-mobile {
- display: flex;
- margin: 0 1rem;
- cursor: pointer;
-
- span {
- display: flex;
- }
-
- @media screen and (min-width: 1200px) {
- display: none;
- }
-
- @media screen and (max-width: 600px - 1px) {
- margin-left: 3rem;
- }
-
- svg {
- width: 26px;
- height: 26px;
- fill: color(white1);
- color: color(white1);
- }
- }
-}
-
-.navigation-mobile-menu {
- padding: 1rem 2rem;
-}
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
deleted file mode 100644
index a584cd1..0000000
--- a/src/components/Navigation/Navigation.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-import "./Navigation.scss";
-import NavbarDropdownLink from "../NavbarDropdownLink/NavbarDropdownLink";
-import NavbarChildLink from "../NavbarChildLink/NavbarChildLink";
-import Icon from "../Icon";
-import { IconType } from "../Icon/Icon";
-
-export interface NavigationProps {
- onMobileMenuOpen: () => void;
- items: JSX.Element;
-}
-export interface NavigationState {
- menuOpen: boolean;
-}
-
-class Navigation extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- menuOpen: false
- };
- }
-
- handleMobileMenuClick = () => {
- const { onMobileMenuOpen } = this.props;
- onMobileMenuOpen();
- }
-
- render() {
- const { menuOpen } = this.state;
- const { items } = this.props;
- return (
-
-
- );
- }
-}
-
-export default Navigation;
diff --git a/src/components/Navigation/index.ts b/src/components/Navigation/index.ts
deleted file mode 100644
index 9315d7d..0000000
--- a/src/components/Navigation/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import Navigation from "./Navigation";
-export default Navigation;
diff --git a/src/components/NavigationMobile.tsx b/src/components/NavigationMobile.tsx
new file mode 100644
index 0000000..8d50633
--- /dev/null
+++ b/src/components/NavigationMobile.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+import NavbarDropdownLink from "./NavbarDropdownLink";
+import NavbarChildLink from "./NavbarChildLink";
+
+const renderNavigationMobileItems = () => {
+ return (
+ <>
+
+ Toiminta
+ Fuksi
+ Arkisto
+
+
+ {/* Simo Höglund */}
+
+ = ({ mobileMenuOpen }) => (
+
+)
+
+export default NavigationMobile;
diff --git a/src/components/PageLink.tsx b/src/components/PageLink.tsx
new file mode 100644
index 0000000..e768f3d
--- /dev/null
+++ b/src/components/PageLink.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+import Anchor from "@components/Anchor";
+
+interface PageLinkProps {
+ to: string;
+ desc: string;
+}
+
+const StyledPageLink = styled.div`
+ border-left-color: ${colors.blue1};
+ border-left-width: 0.8rem;
+ border-left-style: solid;
+ margin: 0 1rem 1rem 0;
+
+ p {
+ margin-block-start: 0;
+ margin-block-end: 0;
+ color: ${colors.darkBlue};
+ font-size: 1rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-weight: 800;
+ margin-left: 1rem;
+ margin-bottom: 0.5rem;
+ padding: 0;
+ }
+
+ a {
+ display: block;
+ margin-left: 1rem;
+ text-decoration: none;
+ font-weight: normal;
+
+ color: ${colors.blue1};
+ &:hover {
+ color: ${colors.darkBlue};
+ }
+ }
+`;
+
+const PageLink: React.FC = ({ to, desc, children }) => (
+
+ {desc}
+
+);
+
+export default PageLink;
diff --git a/src/components/PageLink/PageLink.scss b/src/components/PageLink/PageLink.scss
deleted file mode 100644
index f8f1ba5..0000000
--- a/src/components/PageLink/PageLink.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.page-link {
- border-left-color: color(blue1);
- border-left-width: 0.8rem;
- border-left-style: solid;
- margin: 0 1rem 1rem 0;
-
- & p {
- display: flex;
- margin-block-start: 0;
- margin-block-end: 0;
- color: color(dark-blue);
- font-size: 1rem;
- text-transform: uppercase;
- letter-spacing: 1px;
- font-weight: 800;
- margin-left: 1rem;
- margin-bottom: 0.5rem;
- padding: 0;
- }
-
- & a {
- color: color(dark-blue);
- margin-left: 1rem;
- display: flex;
- text-decoration: none;
- font-weight: normal;
- }
-}
diff --git a/src/components/PageLink/PageLink.tsx b/src/components/PageLink/PageLink.tsx
deleted file mode 100644
index 5562210..0000000
--- a/src/components/PageLink/PageLink.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import "./PageLink.scss";
-import TextAnchor from "../TextAnchor";
-
-export interface PageLinkProps {
- to: string;
- desc: string;
-}
-export interface PageLinkState { }
-
-class PageLink extends React.Component {
- render() {
- const { to, desc } = this.props;
- return (
- {
- render() {
- 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 classNames = [
- "page-section",
- centerClass,
- borderClass,
- cardsClass,
- nonPaddedClass
- ];
- if (className) classNames.push(className);
- return (
-
- {children}
-
- );
- }
-}
-
-export default PageSection;
diff --git a/src/components/PageSection/index.ts b/src/components/PageSection/index.ts
deleted file mode 100644
index f3fe81c..0000000
--- a/src/components/PageSection/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import PageSection from "./PageSection";
-export default PageSection;
diff --git a/src/components/Ribbon/Ribbon.scss b/src/components/Ribbon/Ribbon.scss
deleted file mode 100644
index f85144f..0000000
--- a/src/components/Ribbon/Ribbon.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.ribbon {
- display: flex;
- flex-flow: row nowrap;
- align-items: flex-end;
- text-align: center;
- justify-content: center;
- margin: auto;
-
- p {
- font-size: 2rem;
- font-weight: 100;
- line-height: 30px;
- margin-block-start: 0;
- margin-block-end: 0;
- }
-
- @media screen and (max-width: 600px - 1px) {
- flex-flow: column nowrap;
- align-items: center;
- }
-}
diff --git a/src/components/Ribbon/Ribbon.tsx b/src/components/Ribbon/Ribbon.tsx
deleted file mode 100644
index 240bb27..0000000
--- a/src/components/Ribbon/Ribbon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import "./Ribbon.scss";
-
-export interface RibbonProps {}
-export interface RibbonState {}
-
-class Ribbon extends React.Component {
- render() {
- return (
- {
- render() {
- const { label } = this.props;
-
- return (
- {
+ bgColor?: Colors;
+ link?: string;
+ linkText?: string;
+}
+
+const textColors = (bgColor: Colors) => {
+ switch(bgColor) {
+ case "orange1": return `
+color: ${colors.white};
+background-color: ${colors[bgColor]};
+a:hover {
+ color: ${colors.darkBlue};
+}
+`;
+
+ case "darkBlue": return `
+background-color: ${colors[bgColor]};
+color: ${colors.white};
+ `;
+
+ case "lightBlue": return `
+background-color: ${colors[bgColor]};
+color: ${colors.darkBlue};
+a:hover {
+ color: ${colors.white};
+}
+ `;
+
+ case "lightTurquoise": return `
+background-color: ${colors[bgColor]};
+color: ${colors.darkBlue};
+a:hover {
+ color: ${colors.white};
+}
+ `;
+ case "blue1": return `
+background-color: ${colors[bgColor]};
+color: ${colors.white};
+a:hover {
+ color: ${colors.darkBlue};
+}
+ `;
+ default: return ""
+ }
+}
+
+const CTASection: React.FC = ({ bgColor = "orange1", link, linkText, children, ...props }) => (
+
+
+
+ )}
+
+);
+
+export default CTASection;
\ No newline at end of file
diff --git a/src/components/Sections/CardSection.tsx b/src/components/Sections/CardSection.tsx
new file mode 100644
index 0000000..ac32fc7
--- /dev/null
+++ b/src/components/Sections/CardSection.tsx
@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+
+const CardSection = styled.section`
+
+ h6 {
+ color: ${colors.orange1};
+ }
+
+ display: flex;
+ flex-flow: row wrap;
+ padding: 2rem 1rem;
+
+ @media screen and (max-width: 800px) {
+ flex-flow: column nowrap;
+ }
+
+ & > aside {
+ margin-left: auto;
+ }
+
+ & > * {
+ width: calc(25% - 2rem);
+
+ @media screen and (min-width: 800px) and (max-width: 1200px) {
+ width: calc(50% - 2rem);
+ margin-bottom: 2rem;
+ }
+
+ @media screen and (max-width: 800px) {
+ width: 100%;
+ margin: 0 0 3rem 0;
+ }
+ }
+`;
+
+export default CardSection;
diff --git a/src/components/Sections/FullWidthSection.tsx b/src/components/Sections/FullWidthSection.tsx
new file mode 100644
index 0000000..87bbce6
--- /dev/null
+++ b/src/components/Sections/FullWidthSection.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledSection = styled.section`
+ display: grid;
+ padding: 24px;
+
+ grid-template-columns: 1fr auto;
+ grid-template-areas:
+ "title"
+ "content";
+
+ * {
+ grid-area: content;
+ }
+
+ & > h1,
+ & > h2,
+ & > h3,
+ & > h4,
+ & > h5,
+ & > h6 {
+ text-align: center;
+ grid-area: title;
+ }
+`;
+
+const FullWidthSection: React.FC> = (props) => (
+ > = (props) => (
+ {
- render() {
- const { children, onRemove } = this.props;
-
- return (
- {
- onValueChange = (questions: Question[]) => {
- const { onChange } = this.props;
- const newValue = JSON.stringify(questions);
- onChange(newValue);
- }
-
- handleNewRowClick = (questions) => () => {
- const newRow: Question = {
- id: shortid.generate(),
- name: `Question #${questions.length + 1}`,
- options: [],
- type: "text",
- };
- const newQuestions: Question[] = questions.concat([newRow]);
-
- this.onValueChange(newQuestions);
- }
-
- handleDragEnd = (questions: Question[]) => (result) => {
- const srcIndex = result.source.index;
- const dstIndex = result.destination.index;
- const srcCopy = { ...questions[srcIndex] };
- questions.splice(srcIndex, 1);
- questions.splice(dstIndex, 0, srcCopy);
-
- this.onValueChange(questions);
- }
-
- render() {
- const { value, onFocus } = this.props;
-
- const questions = JSON.parse(value) as Question[];
-
- return (
- {
- render() {
- return (
- ([
- ["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?: Colors;
- hoverColor?: Colors;
-}
-export interface TextAnchorState { }
-
-class TextAnchor extends React.Component {
- render() {
- const { children, size, to, textColor, hoverColor } = this.props;
- const classes = classNames(
- "text-anchor",
- colorToClass(textColor),
- hoverColorToClass(hoverColor),
- textSizeToClassName.get(size)
- )
- return (
-
- {children}
-
- );
- }
-}
-
-export default TextAnchor;
diff --git a/src/components/TextAnchor/index.ts b/src/components/TextAnchor/index.ts
deleted file mode 100644
index cf2f85a..0000000
--- a/src/components/TextAnchor/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import TextAnchor from "./TextAnchor";
-export default TextAnchor;
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Widgets/Checkbox/Checkbox.tsx
similarity index 91%
rename from src/components/Checkbox/Checkbox.tsx
rename to src/components/Widgets/Checkbox/Checkbox.tsx
index 451e962..d19589c 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Widgets/Checkbox/Checkbox.tsx
@@ -1,5 +1,6 @@
import React from "react";
import styled from "styled-components";
+import { colors } from "@theme/colors";
const Container = styled.label`
display: block;
@@ -31,7 +32,7 @@ const CustomCBoxElement = styled.span<{checked?: boolean}>`
left: 0;
height: 1em;
width: 1em;
- background-color: ${(props) => props.checked ? "#57b2df" : "#efece4"}; /* blue1 or grey2 */
+ background-color: ${(props) => props.checked ? colors.blue1 : colors.grey2};
&:focus &:before {
transition: box-shadow 150ms ease;
@@ -43,7 +44,7 @@ const CustomCBoxElement = styled.span<{checked?: boolean}>`
left: -4px;
right: -4px;
border-radius: 6px;
- border: 2px solid color(blue);
+ border: 2px solid ${colors.blue1};
}
`;
diff --git a/src/components/Checkbox/Checkboxes.tsx b/src/components/Widgets/Checkbox/Checkboxes.tsx
similarity index 100%
rename from src/components/Checkbox/Checkboxes.tsx
rename to src/components/Widgets/Checkbox/Checkboxes.tsx
diff --git a/src/components/Widgets/DatetimeWidget.tsx b/src/components/Widgets/DatetimeWidget.tsx
new file mode 100644
index 0000000..7bfb2a6
--- /dev/null
+++ b/src/components/Widgets/DatetimeWidget.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import styled from "styled-components";
+
+const Widget = styled.div`
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+ width: 100%;
+ margin: 0 -0.5rem 0.5rem;
+
+ > input {
+ margin: 0 0.5rem;
+ }
+`;
+
+interface DatetimeWidgetProps {
+ value: string;
+ onChange: (value: string) => void;
+ onFocus: () => void;
+ onBlur: () => void;
+ required: boolean;
+ disabled: boolean;
+}
+
+const DatetimeWidget: React.FC = ({ value, onChange, onFocus, onBlur, required, disabled }) => {
+ let date;
+ let time;
+ if (value && value.length !== 0) {
+ let rest;
+ [date, rest] = value.split("T");
+ time = rest.slice(0, 5);
+ }
+
+ const commonProps = {
+ onFocus,
+ onBlur,
+ required,
+ disabled,
+ };
+
+ return (
+
+ onChange(`${event.target.value}T${time}`)}
+ value={date}
+ {...commonProps} />
+ onChange(`${date}T${event.target.value}:00`)}
+ value={time}
+ {...commonProps} />
+
+ );
+}
+
+export default DatetimeWidget;
diff --git a/src/components/Widgets/MarkdownEditorWidget.scss b/src/components/Widgets/MarkdownEditorWidget.scss
new file mode 100644
index 0000000..b06144e
--- /dev/null
+++ b/src/components/Widgets/MarkdownEditorWidget.scss
@@ -0,0 +1 @@
+@import "~react-mde/lib/styles/css/react-mde-all.css";
\ No newline at end of file
diff --git a/src/components/Widgets/MarkdownEditorWidget.tsx b/src/components/Widgets/MarkdownEditorWidget.tsx
new file mode 100644
index 0000000..70ee954
--- /dev/null
+++ b/src/components/Widgets/MarkdownEditorWidget.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components";
+import ReactMde from "react-mde";
+import ReactMarkdown from "react-markdown";
+import { WidgetProps } from "react-jsonschema-form";
+import "./MarkdownEditorWidget.scss"
+
+type MarkdownEditorWidgetProps = Omit & {
+ options: any;
+};
+
+const Container = styled.div`
+ background: white;
+ color: black;
+
+ button {
+ color: black;
+ }
+`;
+
+const MarkdownEditorWidget: React.FC = ({ value, onChange }) => {
+ const [selectedTab, setSelectedTab] = React.useState<"write" | "preview">("write");
+ return (
+
+
+ Promise.resolve(
+ )
+}
+
+export default MarkdownEditorWidget;
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/Widgets/RadioButton/RadioButton.tsx
similarity index 100%
rename from src/components/RadioButton/RadioButton.tsx
rename to src/components/Widgets/RadioButton/RadioButton.tsx
diff --git a/src/components/RadioButton/RadioButtonWidget.tsx b/src/components/Widgets/RadioButton/RadioButtonWidget.tsx
similarity index 100%
rename from src/components/RadioButton/RadioButtonWidget.tsx
rename to src/components/Widgets/RadioButton/RadioButtonWidget.tsx
diff --git a/src/components/SectionDividerWidget/SectionDividerWidget.scss b/src/components/Widgets/SectionDividerWidget/SectionDividerWidget.scss
similarity index 100%
rename from src/components/SectionDividerWidget/SectionDividerWidget.scss
rename to src/components/Widgets/SectionDividerWidget/SectionDividerWidget.scss
diff --git a/src/components/Widgets/SectionDividerWidget/SectionDividerWidget.tsx b/src/components/Widgets/SectionDividerWidget/SectionDividerWidget.tsx
new file mode 100644
index 0000000..267e485
--- /dev/null
+++ b/src/components/Widgets/SectionDividerWidget/SectionDividerWidget.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import "./SectionDividerWidget.scss";
+import Icon from "../../Icon";
+import { IconType } from "../../Icon";
+
+interface SectionDividerWidgetProps {
+ label: string;
+}
+
+const getIconByLabel = (label: string) => {
+ if (label === "Finnish") {
+ return = ({ label }) => (
+ , "type">;
+
+const Question: React.FC = ({ children, ...props }) => (
+
return (
{(provided) => (
-
{nameWidget}
{typeSelectWidget}
{optionsWidget}
-
+
)}
);
diff --git a/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx b/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx
new file mode 100644
index 0000000..e8905ba
--- /dev/null
+++ b/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+import styled from "styled-components";
+import shortid from "shortid";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
+import { Question } from "."
+import AddIcon from "@assets/img/add-icon.png";
+import QuestionList from "./QuestionList";
+
+const Widget = styled.div`
+ & > button {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+
+ background: none;
+ padding: 0;
+ margin: 1rem 0;
+
+ & > img {
+ margin-right: 8px;
+ margin-top: -2px;
+ width: 20px;
+ }
+ }
+`;
+
+interface SignupQuestionsWidgetProps {
+ value: string;
+ onChange: (value: string) => void;
+ onFocus: () => void;
+ required: boolean;
+ disabled: boolean;
+}
+
+const SignupQuestionsWidget: React.FC = ({ value, onFocus, onChange }) => {
+ const onValueChange = (questions: Question[]) => {
+ const newValue = JSON.stringify(questions);
+ onChange(newValue);
+ }
+
+ const handleNewRowClick = (questions) => () => {
+ const newRow: Question = {
+ id: shortid.generate(),
+ name: `Question #${questions.length + 1}`,
+ options: [],
+ type: "text",
+ };
+ const newQuestions: Question[] = questions.concat([newRow]);
+
+ onValueChange(newQuestions);
+ }
+
+ const handleDragEnd = (questions: Question[]) => (result) => {
+ const srcIndex = result.source.index;
+ const dstIndex = result.destination.index;
+ const srcCopy = { ...questions[srcIndex] };
+ questions.splice(srcIndex, 1);
+ questions.splice(dstIndex, 0, srcCopy);
+
+ onValueChange(questions);
+ }
+ const questions = JSON.parse(value) as Question[];
+
+ return (
+
+
+
+ {(provided) => (
+
+
+
+
+ );
+}
+
+export default SignupQuestionsWidget;
diff --git a/src/components/SignupQuestionsWidget/TypeWidget.tsx b/src/components/Widgets/SignupQuestionsWidget/TypeWidget.tsx
similarity index 100%
rename from src/components/SignupQuestionsWidget/TypeWidget.tsx
rename to src/components/Widgets/SignupQuestionsWidget/TypeWidget.tsx
diff --git a/src/components/SignupQuestionsWidget/index.ts b/src/components/Widgets/SignupQuestionsWidget/index.ts
similarity index 100%
rename from src/components/SignupQuestionsWidget/index.ts
rename to src/components/Widgets/SignupQuestionsWidget/index.ts
diff --git a/src/components/index.tsx b/src/components/index.tsx
new file mode 100644
index 0000000..befd1d7
--- /dev/null
+++ b/src/components/index.tsx
@@ -0,0 +1,10 @@
+export { default as Card } from "./Card";
+export { default as PageLink } from "./PageLink";
+export { default as Button } from "./Button";
+export { default as Divider } from "./Divider";
+export { default as CardSection } from "./Sections/CardSection";
+export { default as CTASection } from "./Sections/CTASection";
+export { default as TextSection } from "./Sections/TextSection";
+export { default as FullWidthSection } from "./Sections/FullWidthSection";
+export { default as InfoBox } from "./InfoBox";
+export { default as Accordion } from "./Accordion/Accordion";
diff --git a/src/hooks/useFetchJobAd.ts b/src/hooks/useFetchJobAd.ts
new file mode 100644
index 0000000..a5cb1bb
--- /dev/null
+++ b/src/hooks/useFetchJobAd.ts
@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+import { JobAd, getJobAd } from "@models/JobAd";
+
+const useFetchJobAd = (id: number) => {
+ const [jobAd, setJobAd] = useState(null);
+
+ useEffect(() => {
+ getJobAd(id)
+ .then(res => setJobAd(res))
+ }, []);
+
+ return jobAd;
+}
+
+export default useFetchJobAd;
diff --git a/src/hooks/useFetchJobAds.ts b/src/hooks/useFetchJobAds.ts
new file mode 100644
index 0000000..6111add
--- /dev/null
+++ b/src/hooks/useFetchJobAds.ts
@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+import { JobAd, getJobAds, GetJobAdsOptions } from "@models/JobAd";
+
+const useFetchJobAds = (options: GetJobAdsOptions = {}) => {
+ const [jobAds, setJobAds] = useState([]);
+
+ useEffect(() => {
+ getJobAds(options)
+ .then(res => setJobAds(res))
+ }, []);
+
+ return jobAds;
+}
+
+export default useFetchJobAds;
diff --git a/src/index.scss b/src/index.scss
index 0820280..2509fac 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -7,11 +7,15 @@
html,
body {
- font-size: 100%;
+ font-size: 12pt;
background-color: color(dark-blue);
height: 100%;
font-family: $font;
- color: color(white1);
+}
+
+body {
+ padding: 0;
+ margin: auto !important;
}
#root {
@@ -19,11 +23,23 @@ body {
min-height: 100vh;
display: flex;
flex-flow: column nowrap;
+ color: color(black1);
+ background-color: color(white1);
}
-body {
- padding: 0;
- margin: auto !important;
+p {
+ font-size: 1.2rem;
+ font-weight: 300;
+ word-break: break-word;
+ hyphens: auto;
+
+ &.large {
+ font-size: 2rem;
+ }
+
+ @media screen and (max-width: 800px) {
+ font-size: 1rem;
+ }
}
h1 {
@@ -32,22 +48,30 @@ h1 {
margin-block-start: 0;
margin-block-end: 0;
- .lg {
+ &.large {
font-size: 2.75rem;
}
+
+ @media screen and (max-width: 800px) {
+ font-size: 1.5rem;
+ }
}
h2 {
- font-size: 1rem;
+ font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.1em;
margin-block-start: 0;
margin-block-end: 0;
text-transform: uppercase;
- .lg {
+ &.large {
font-size: 2rem;
}
+
+ @media screen and (max-width: 800px) {
+ font-size: 1rem;
+ }
}
h3 {
@@ -56,32 +80,32 @@ h3 {
margin-block-start: 0;
margin-block-end: 0;
- .lg {
- font-size: 2.3rem;
+ &.large {
+ font-size: 2rem;
}
}
h4 {
font-size: 1rem;
font-weight: 700;
- letter-spacing: 0.1rem;
+ letter-spacing: 0.1em;
margin-block-start: 0;
margin-block-end: 0;
text-transform: uppercase;
- .lg {
+ &.large {
font-size: 2rem;
}
}
h5 {
- font-size: 1.2rem;
+ font-size: 1.125rem;
font-weight: 600;
margin-block-start: 0;
margin-block-end: 0;
- .lg {
- font-size: 2rem;
+ &.large {
+ font-size: 2.3rem;
}
}
@@ -93,22 +117,27 @@ h6 {
margin-block-end: 0;
text-transform: uppercase;
- .lg {
+ &.large {
font-size: 2rem;
}
}
-p {
- font-size: 16px;
- font-weight: 300;
+// TODO: List item style »
+li {
+ font-size: 1.2rem;
+ font-weight: 600;
- .lg {
+ &.large {
font-size: 2rem;
}
}
-a,
+
+a {
+ text-decoration: underline;
+ color: color(blue1);
+}
+
a:hover {
text-decoration: none;
- color: color(white1);
}
diff --git a/src/index.tsx b/src/index.tsx
index 33bec6e..2778e0e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -23,6 +23,7 @@ declare const module: { hot: any };
if (module.hot) {
module.hot.accept("./routes", () => {
+ // eslint-disable-next-line @typescript-eslint/no-var-requires
const NewRoutes = require("./routes").default;
render(
diff --git a/src/models/Event.ts b/src/models/Event.ts
index 3ce1b27..a29c236 100644
--- a/src/models/Event.ts
+++ b/src/models/Event.ts
@@ -13,6 +13,8 @@ export interface Event {
description_en: string;
content_fi: string;
content_en: string;
+ location_fi: string;
+ location_en: string;
start_time: string;
end_time: string;
image: string;
@@ -21,7 +23,13 @@ export interface Event {
signupForm: SignupForm[];
}
-export async function getEvents(options: any = {}): Promise {
+interface Options {
+ onlyNonPast?: boolean;
+ limit?: number;
+ auth?: boolean;
+}
+
+export async function getEvents(options: Options = {}): Promise {
const { onlyNonPast, limit, auth } = options;
try {
const params = {
diff --git a/src/models/Feed.ts b/src/models/Feed.ts
index 633381d..cd33b38 100644
--- a/src/models/Feed.ts
+++ b/src/models/Feed.ts
@@ -1,10 +1,14 @@
import axios from "axios";
import { getAuthHeader } from "@utils/auth";
+import { Tag } from "./Tag";
const url = `${process.env.API_URL}/feed/`;
export interface Post {
id: number;
+ tags: Tag[];
+ visible: boolean;
+ image: string;
title_fi: string;
title_en: string;
description_fi: string;
@@ -13,13 +17,18 @@ export interface Post {
content_en: string;
publish_time: string;
autohide: string;
- tags: number[];
- visible: boolean;
+ autohide_enabled: boolean;
}
-export async function getFeed(): Promise {
+interface Options {
+ auth?: boolean;
+}
+
+export async function getFeed(options: Options = {}): Promise {
+ const { auth } = options;
+ const headers = auth ? { "Authorization": getAuthHeader() } : null;
try {
- const resp = await axios.get(url);
+ const resp = await axios.get(url, { headers });
return resp.data["results"];
} catch (err) {
console.error(err);
diff --git a/src/models/JobAd.ts b/src/models/JobAd.ts
new file mode 100644
index 0000000..784e6e9
--- /dev/null
+++ b/src/models/JobAd.ts
@@ -0,0 +1,83 @@
+import axios from "axios";
+import qs from "query-string";
+import { getAuthHeader } from "@utils/auth";
+const url = `${process.env.API_URL}/jobads/`;
+
+export interface JobAd {
+ id: number;
+ title_fi: string;
+ title_en: string;
+ description_fi: string;
+ description_en: string;
+ content_fi: string;
+ content_en: string;
+ autohide_at: Date;
+ autohide_enabled: boolean;
+}
+
+export interface GetJobAdsOptions {
+ onlyNonPast?: boolean;
+ limit?: number;
+ auth?: boolean;
+}
+
+export const getJobAds = async (options: GetJobAdsOptions = {}): Promise => {
+ const { onlyNonPast, limit, auth } = options;
+ try {
+ const params = {
+ since: onlyNonPast ? (new Date()).toISOString() : undefined,
+ limit,
+ };
+ const search = qs.stringify(params);
+ const headers = auth ? { "Authorization": getAuthHeader() } : null;
+ const resp = await axios.get(`${url}?${search}`, {
+ headers
+ });
+ return resp.data["results"];
+ } catch (err) {
+ console.error(err);
+ throw err;
+ }
+}
+
+export const getJobAd = async (id: number, auth = false): Promise => {
+ try {
+ const headers = auth ? { "Authorization": getAuthHeader() } : null;
+ const resp = await axios.get(`${url}${id}/`, {
+ headers
+ });
+ return resp.data;
+ } catch (err) {
+ console.error(err);
+ throw err;
+ }
+}
+
+export const createJobAd = async (data: any): Promise => {
+ try {
+ const resp = await axios.post(url, data, {
+ headers: {
+ "Authorization": getAuthHeader(),
+ },
+ });
+ return resp.data;
+ } catch (err) {
+ console.error(err);
+ throw err;
+ }
+}
+
+export const updateJobAd = async (data: any): Promise => {
+ try {
+ const putUrl = `${url}${data.id}/`;
+ const resp = await axios.put(putUrl, data, {
+ headers: {
+ "Authorization": getAuthHeader(),
+ },
+ });
+ return resp.data;
+ } catch (err) {
+ console.error(err);
+ throw err;
+ }
+}
\ No newline at end of file
diff --git a/src/models/Signup.ts b/src/models/Signup.ts
index 3e11a4e..d788e8f 100644
--- a/src/models/Signup.ts
+++ b/src/models/Signup.ts
@@ -8,7 +8,7 @@ export interface Signup {
answer: string;
}
-export async function getSignup(id: number): Promise {
+export const getSignup = async (id: number): Promise => {
try {
const resp = await axios.get(`${url}${id}`, {
headers: {
@@ -22,7 +22,7 @@ export async function getSignup(id: number): Promise {
}
}
-export async function createSignup(data: Signup): Promise {
+export const createSignup = async (data: Signup): Promise => {
try {
const resp = await axios.post(url, data);
return resp.data;
@@ -32,7 +32,7 @@ export async function createSignup(data: Signup): Promise {
}
}
-export async function updateSignup(data: Signup, uuid: string): Promise {
+export const updateSignup = async (data: Signup, uuid: string): Promise => {
try {
const { id } = data;
if (!id) throw new Error("SignupId required!");
@@ -46,7 +46,7 @@ export async function updateSignup(data: Signup, uuid: string): Promise
}
}
-export async function getSignupUUID(id: number, uuid: string): Promise {
+export const getSignupUUID = async (id: number, uuid: string): Promise => {
try {
const resp = await axios.get(`${url}${id}/edit/`, {
params: {
@@ -59,3 +59,17 @@ export async function getSignupUUID(id: number, uuid: string): Promise {
throw err;
}
}
+
+export const deleteSignup = async (id: number): Promise => {
+ try {
+ const resp = await axios.delete(`${url}${id}`, {
+ headers: {
+ "Authorization": getAuthHeader()
+ },
+ });
+ return resp.data;
+ } catch (err) {
+ console.error(err);
+ throw err;
+ }
+}
diff --git a/src/models/SignupForm.ts b/src/models/SignupForm.ts
index 750f751..b17f737 100644
--- a/src/models/SignupForm.ts
+++ b/src/models/SignupForm.ts
@@ -1,11 +1,13 @@
import axios from "axios";
import { getAuthHeader } from "@utils/auth";
const url = `${process.env.API_URL}/signupForm/`;
-import { Question } from "@components/SignupQuestionsWidget";
+import { Question } from "@components/Widgets/SignupQuestionsWidget";
+import { Signup } from "./Signup";
export interface SignupForm {
id?: number;
- title: string;
+ title_fi: string;
+ title_en: string;
visible: boolean;
start_time: string;
end_time: string;
@@ -76,3 +78,31 @@ export async function updateForm(data): Promise {
throw err;
}
}
+
+export const signupFormSendEmail = async (data, id): Promise => {
+ try {
+ const resp = await axios.post(`${process.env.API_URL}/signupForm/${id}/sendemail/`, data, {
+ headers: {
+ "Authorization": getAuthHeader(),
+ },
+ });
+ return resp.data;
+ } catch (err) {
+ console.error(err);
+ throw err;
+ }
+}
+
+export const getSignups = async (id): Promise => {
+ try {
+ const resp = await axios.get(`${process.env.API_URL}/signupForm/${id}/signups/`, {
+ headers: {
+ "Authorization": getAuthHeader(),
+ },
+ });
+ return resp.data;
+ } catch (err) {
+ console.error(err);
+ throw err;
+ }
+}
diff --git a/src/pages/CommonPage.tsx b/src/pages/CommonPage.tsx
index fe83558..0cfbe76 100644
--- a/src/pages/CommonPage.tsx
+++ b/src/pages/CommonPage.tsx
@@ -1,6 +1,6 @@
import React from "react";
import Header from "@components/Header";
-import Footer from "@components/Footer";
+import Footer from "@components/Footer/Footer";
export interface CommonPageProps {
page: any;
@@ -11,11 +11,11 @@ class CommonPage extends React.Component {
render() {
const Page = this.props.page;
return (
-
+ <>
+
);
}
}
diff --git a/src/pages/CorporatePage.tsx b/src/pages/CorporatePage.tsx
index 80c9035..4ec19c1 100644
--- a/src/pages/CorporatePage.tsx
+++ b/src/pages/CorporatePage.tsx
@@ -1,21 +1,18 @@
import React from "react";
import { Helmet } from "react-helmet";
import CorporatePageView from "@views/CorporatePage/CorporatePageView";
+import useFetchJobAds from "@hooks/useFetchJobAds";
-export interface CorporatePageProps {}
-export interface CorporatePageState {}
-
-class CorporatePage extends React.Component {
- render() {
- return (
- <>
-
-
-
-
+
+
+ {
const { events, feed } = this.state;
return (
<>
-
-
+
+ <>
{
- constructor(props: AdminEventPageProps) {
- super(props);
- const { staticContext } = props;
-
- if (staticContext) {
- /* The static context is an object that manages promises when
- rendering on the server. If staticContext exists, that means
- we have to store all promises in it. Otherwise, operate
- normally. See server/index.ts. */
- if (staticContext.resolutions.getEvents) {
- const events = staticContext.resolutions.getEvents as Event[];
- this.state = {
- events,
- };
- } else {
- this.state = {
- events: [],
- };
- const promiseEvents = this.fetchEvents();
- staticContext.promises.getEvents = promiseEvents;
- }
- } else {
- this.state = {
- events: [],
- };
- this.fetchEvents();
- }
+const renderData = (events: Event[]) => {
+ if (!events || events.length === 0) {
+ return
- Create event
-
- )
-
- renderData = () => {
- const { events, error } = this.state;
-
- if (error) {
- return
-
-
+ );
+}
+const AdminEventPage: React.FC = () => {
+ const [events, setEvents] = useState(null);
- render() {
- return (
-
+
+
+
+
+ );
}
export default AdminEventPage;
diff --git a/src/pages/admin/AdminFeedPage.scss b/src/pages/admin/AdminFeedPage.scss
deleted file mode 100644
index 9d04a29..0000000
--- a/src/pages/admin/AdminFeedPage.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.admin-feed-page {
- table {
- border-collapse: collapse;
- }
-
- table,
- th,
- td {
- border: 1px solid color(white1);
- padding: 0.5rem;
-
- a {
- color: color(orange1);
- text-decoration: underline;
- }
- }
-}
diff --git a/src/pages/admin/AdminFeedPage.tsx b/src/pages/admin/AdminFeedPage.tsx
index a72ac1e..8a6d601 100644
--- a/src/pages/admin/AdminFeedPage.tsx
+++ b/src/pages/admin/AdminFeedPage.tsx
@@ -1,118 +1,58 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
import { Helmet } from "react-helmet";
-import Anchor from "@components/Anchor";
-import "./AdminFeedPage.scss";
-import { StaticContext } from "@server/StaticContext";
-import { Post, getFeed } from "@models/Feed";
-import { getEvents } from "@models/Event";
import { formatRelative } from "date-fns";
-import { th } from "date-fns/esm/locale";
-import AddIcon from "@assets/img/add-icon.png";
+import AdminListCommon from "@views/admin/AdminListCommon";
+import Anchor from "@components/Anchor";
+import AddLink from "@components/AddLink";
+import { Post, getFeed } from "@models/Feed";
-export interface AdminFeedPageProps {
- staticContext: StaticContext;
-}
-export interface AdminFeedPageState {
- feed: Post[];
- error?: string;
-}
+const URL = "/admin/feed"
-class AdminFeedPage extends React.Component {
- constructor(props: AdminFeedPageProps) {
- super(props);
- const { staticContext } = props;
-
- if (staticContext) {
- /* The static context is an object that manages promises when
- rendering on the server. If staticContext exists, that means
- we have to store all promises in it. Otherwise, operate
- normally. See server/index.ts. */
- if (staticContext.resolutions.getFeed) {
- const feed = staticContext.resolutions.getFeed as Post[];
- this.state = {
- feed,
- };
- } else {
- this.state = {
- feed: [],
- };
- const promiseFeed = this.fetchFeed();
- staticContext.promises.getFeed = promiseFeed;
- }
- } else {
- this.state = {
- feed: [],
- };
- this.fetchFeed();
- }
+const renderData = (feed: Post[]) => {
+ if (!feed || feed.length === 0) {
+ return
- Create post
-
- )
-
- renderData = () => {
- const { feed, error } = this.state;
-
- if (error) {
- return
-
-
+ );
+}
- render() {
- return (
- (null);
+
+ useEffect(() => {
+ getFeed({ auth: true })
+ .then(res => setForms(res))
+ }, []);
+
+ return (
+
+
+
+
+
+ );
}
export default AdminFeedPage;
diff --git a/src/pages/admin/AdminFrontPage.scss b/src/pages/admin/AdminFrontPage.scss
deleted file mode 100644
index 44ba612..0000000
--- a/src/pages/admin/AdminFrontPage.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.admin-front-page {
- a {
- text-decoration: underline;
- display: block;
- }
-}
diff --git a/src/pages/admin/AdminFrontPage.tsx b/src/pages/admin/AdminFrontPage.tsx
deleted file mode 100644
index a111b10..0000000
--- a/src/pages/admin/AdminFrontPage.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import { Helmet } from "react-helmet";
-import Anchor from "@components/Anchor";
-import "./AdminFrontPage.scss";
-
-export interface AdminFrontPageProps { }
-export interface AdminFrontPageState { }
-
-class AdminFrontPage extends React.Component {
- render() {
- return (
-
+
+
+
+
+);
+
+export default AdminFrontView;
diff --git a/src/pages/admin/AdminJobAdPage.tsx b/src/pages/admin/AdminJobAdPage.tsx
new file mode 100644
index 0000000..723daed
--- /dev/null
+++ b/src/pages/admin/AdminJobAdPage.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { Helmet } from "react-helmet";
+import { formatRelative } from "date-fns";
+import AdminListCommon from "@views/admin/AdminListCommon";
+import Anchor from "@components/Anchor";
+import AddLink from "@components/AddLink";
+import useFetchJobAds from "@hooks/useFetchJobAds";
+import { JobAd } from "@models/JobAd";
+
+const URL = "/admin/jobads"
+
+const renderData = (jobAds: JobAd[]) => {
+
+ if (!jobAds || jobAds.length === 0) {
+ return
+
+
+ );
+}
+
+const AdminJobAdPage: React.FC = () => {
+ const jobAds = useFetchJobAds({ auth: true });
+ return (
+
+
+
+
+
+ )
+}
+
+export default AdminJobAdPage;
\ No newline at end of file
diff --git a/src/pages/admin/AdminLoginPage.scss b/src/pages/admin/AdminLoginPage.scss
deleted file mode 100644
index db089c0..0000000
--- a/src/pages/admin/AdminLoginPage.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.admin-login-page {
- input {
- display: block;
- }
-}
diff --git a/src/pages/admin/AdminLoginPage.tsx b/src/pages/admin/AdminLoginPage.tsx
index e4edc32..3121a16 100644
--- a/src/pages/admin/AdminLoginPage.tsx
+++ b/src/pages/admin/AdminLoginPage.tsx
@@ -1,11 +1,17 @@
import React from "react";
+import styled from "styled-components";
import { Helmet } from "react-helmet";
import { Redirect } from "react-router-dom";
import qs from "query-string";
import { generateToken, setTokenCookie, isAuthenticated } from "@utils/auth";
-import "./AdminLoginPage.scss";
-export interface AdminLoginPageProps {
+const Main = styled.div`
+ input {
+ display: block;
+ }
+`;
+
+interface AdminLoginPageProps {
history: {
push: (to: string | string[]) => void;
};
@@ -13,7 +19,7 @@ export interface AdminLoginPageProps {
search: string;
};
}
-export interface AdminLoginPageState {
+interface AdminLoginPageState {
username: string;
password: string;
isAuthenticated: boolean;
@@ -104,7 +110,7 @@ class AdminLoginPage extends React.Component
+
@@ -122,7 +128,7 @@ class AdminLoginPage extends React.Component
+
);
}
}
diff --git a/src/pages/admin/AdminSignupPage.scss b/src/pages/admin/AdminSignupPage.scss
deleted file mode 100644
index ddf5c3a..0000000
--- a/src/pages/admin/AdminSignupPage.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "../../assets/scss/globals";
-
-.signup-create-page {
- a {
- color: color(orange1);
- text-decoration: underline;
- }
-}
-
-.admin-signup-page {
- table {
- border-collapse: collapse;
- }
-
- table,
- th,
- td {
- border: 1px solid color(white1);
- padding: 0.5rem;
-
- a {
- color: color(orange1);
- text-decoration: underline;
- }
- }
-}
diff --git a/src/pages/admin/AdminSignupPage.tsx b/src/pages/admin/AdminSignupPage.tsx
index 8fca13d..1b1d425 100644
--- a/src/pages/admin/AdminSignupPage.tsx
+++ b/src/pages/admin/AdminSignupPage.tsx
@@ -1,117 +1,62 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
import { Helmet } from "react-helmet";
import { formatRelative } from "date-fns";
+import AdminListCommon from "@views/admin/AdminListCommon";
import Anchor from "@components/Anchor";
-
-import "./AdminSignupPage.scss";
+import AddLink from "@components/AddLink";
import { SignupForm, getForms } from "@models/SignupForm";
-import { StaticContext } from "@server/StaticContext";
-import AddIcon from "@assets/img/add-icon.png";
-export interface AdminSignupPageProps {
- staticContext: StaticContext;
-}
-export interface AdminSignupPageState {
- signupForms: SignupForm[];
- error?: string;
-}
+const URL = "/admin/signups"
-class AdminSignupPage extends React.Component
- {this.props.children}
-
+ return (
+
+
+ {children}
+
- );
- }
+
-
- );
- }
-}
-
-export default AccordionIcon;
diff --git a/src/components/AccordionIcon/index.ts b/src/components/AccordionIcon/index.ts
deleted file mode 100644
index bc97054..0000000
--- a/src/components/AccordionIcon/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import AccordionIcon from "./AccordionIcon";
-export default AccordionIcon;
diff --git a/src/components/AddLink.tsx b/src/components/AddLink.tsx
new file mode 100644
index 0000000..47471fd
--- /dev/null
+++ b/src/components/AddLink.tsx
@@ -0,0 +1,35 @@
+import React, { ComponentProps } from "react";
+import styled from "styled-components";
+import { colors }from "@theme/colors";
+import Anchor from "@components/Anchor";
+import AddIcon from "@assets/img/add-icon.png";
+
+const Link = styled(Anchor)`
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ margin-bottom: 1rem;
+
+ &:hover {
+ color: ${colors.orange2};
+ }
+
+ img {
+ margin-right: 8px;
+ margin-top: -2px;
+ width: 20px;
+ }
+`;
+
+type AddLinkProps = ComponentProps+
- Admin panel
-
- Home
- Events
- Feed
- Signup forms
- Files
- Logout
-
- );
- }
-}
-
-export default AdminSidebar;
diff --git a/src/components/AdminSidebar/index.ts b/src/components/AdminSidebar/index.ts
deleted file mode 100644
index a4ca9be..0000000
--- a/src/components/AdminSidebar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import AdminSidebar from "./AdminSidebar";
-export default AdminSidebar;
diff --git a/src/components/AdminSidebarLink/AdminSidebarLink.scss b/src/components/AdminSidebarLink/AdminSidebarLink.scss
deleted file mode 100644
index 27028ec..0000000
--- a/src/components/AdminSidebarLink/AdminSidebarLink.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.admin-sidebar-link {
- padding: 1rem 3rem 1rem 1rem;
- background-color: color(blue1);
- letter-spacing: 3px;
- text-transform: uppercase;
- line-height: 20px;
- font-weight: bold;
- border-left: 4px solid color(blue1);
- white-space: nowrap;
-
- @media screen and (max-width: 800px - 1px) {
- margin-bottom: 1px;
- }
-
- &:hover,
- &.active {
- border-left: 4px solid color(white1);
- }
-
- &::after {
- content: " ›";
- }
-}
diff --git a/src/components/AdminSidebarLink/AdminSidebarLink.tsx b/src/components/AdminSidebarLink/AdminSidebarLink.tsx
deleted file mode 100644
index e77888b..0000000
--- a/src/components/AdminSidebarLink/AdminSidebarLink.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import Anchor from "../Anchor";
-import "./AdminSidebarLink.scss";
-
-export interface AdminSidebarLinkProps {
- to: string;
- path: string;
- id?: string;
-}
-export interface AdminSidebarLinkState { }
-
-class AdminSidebarLink extends React.Component{start_time}
+{title}
+{text}
+ {button} +{datetime}
- {title}
- {text}
- {button}
-
- {imageElem}
-
- );
- }
-}
-
-export default Card;
diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts
deleted file mode 100644
index af0084f..0000000
--- a/src/components/Card/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import Card from "./Card";
-export default Card;
diff --git a/src/components/ColorDiv/ColorDiv.scss b/src/components/ColorDiv/ColorDiv.scss
deleted file mode 100644
index 4b4ee2d..0000000
--- a/src/components/ColorDiv/ColorDiv.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@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(white1);
- @include backgroundAndHoverableColor(black1);
- @include backgroundAndHoverableColor(grey1);
- @include backgroundAndHoverableColor(grey2);
- @include backgroundAndHoverableColor(orange1);
- @include backgroundAndHoverableColor(orange2);
- @include backgroundAndHoverableColor(blue1);
- @include backgroundAndHoverableColor(light-turquoise);
- @include backgroundAndHoverableColor(green1);
- @include backgroundAndHoverableColor(sand);
-
- &__inherit {
- color: inherit;
- }
-
- &__transparent {
- color: transparent;
- }
-
- &__inheritHoverable {
- &:hover,
- &:active {
- color: inherit;
- }
- }
-
- &__background_transparent {
- background-color: transparent;
- }
-}
\ No newline at end of file
diff --git a/src/components/ColorDiv/ColorDiv.tsx b/src/components/ColorDiv/ColorDiv.tsx
deleted file mode 100644
index 05a9b1c..0000000
--- a/src/components/ColorDiv/ColorDiv.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import "./ColorDiv.scss";
-import { Colors, colorToClass, bgColorToClass, hoverColorToClass, bgHoverColorToClass } from "@theme/colors";
-import classNames from "classnames";
-
-export interface ColorDivProps extends React.HTMLAttributes{datetime}
- {title}
- {text}
- {button}
-
- {children}
-
- );
- }
-}
-
-export default ColorDiv;
diff --git a/src/components/CommitteeContainer.tsx b/src/components/CommitteeContainer.tsx
new file mode 100644
index 0000000..de50b47
--- /dev/null
+++ b/src/components/CommitteeContainer.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import styled from "styled-components";
+import { Occupation } from "@models/Contacts";
+import ContactCard from "./ContactCard";
+import { colors } from "@theme/colors";
+
+interface CommitteeContainerProps {
+ name_fi: string;
+ name_en: string;
+ contacts: Occupation[];
+}
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ color: ${colors.darkBlue};
+
+ & > p {
+ display: flex;
+ justify-content: center;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ line-height: 14px;
+ font-weight: bold;
+ }
+
+ & > div {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: flex-start;
+ }
+`;
+
+const CommitteeContainer: React.FC+ {name_fi} +
++ {name_en} +
+
+ {contacts.map(occupation => (
+ occupation.officials.map(official => (
+
+
-
- );
- }
-}
-
-export default CommitteeContainer;
diff --git a/src/components/CommitteeContainer/index.ts b/src/components/CommitteeContainer/index.ts
deleted file mode 100644
index 8d276d1..0000000
--- a/src/components/CommitteeContainer/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import CommitteeContainer from "./CommitteeContainer";
-export default CommitteeContainer;
diff --git a/src/components/ContactCard.tsx b/src/components/ContactCard.tsx
new file mode 100644
index 0000000..c1fa8ca
--- /dev/null
+++ b/src/components/ContactCard.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import styled from "styled-components";
+import blank_profile from "@assets/img/blank_profile.png";
+import { Role } from "@models/Contacts";
+import { colors } from "@theme/colors";
+
+const Card = styled.article`
+ display: flex;
+ flex-flow: row nowrap;
+ color: ${colors.darkBlue};
+ margin: 1rem;
+`;
+
+const ImageContainer = styled.div`
+ padding: 15px;
+ display: flex;
+ flex-shrink: 0;
+ justify-content: center;
+ align-items: center;
+ max-height: 100px;
+ max-width: 100px;
+
+ & > img {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ }
+`;
+
+const Info = styled.div`
+ display: flex;
+ flex-direction: column;
+ padding: 0.5rem;
+ justify-content: flex-start;
+ font-size: 1rem;
+ font-weight: 300;
+ color: ${colors.darkBlue};
+`;
+
+interface ContactCardProps {
+ first_name: string;
+ last_name: string;
+ phone: number;
+ email: string;
+ image: string;
+ role: Role;
+}
+
+const ContactCard: React.FC
- {name_fi}
-
-
- {name_en}
-
-
- {contacts.map(occupation => (
- occupation.officials.map(official => (
-
- {fullName}
+{phone}
+{email}
+{role.name_fi}
+{role.name_en}
+
-
- );
- }
-}
-
-export default ContactCard;
diff --git a/src/components/ContactCard/index.ts b/src/components/ContactCard/index.ts
deleted file mode 100644
index a5b2f63..0000000
--- a/src/components/ContactCard/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import ContactCard from "./ContactCard";
-export default ContactCard;
diff --git a/src/components/DatetimeWidget/DatetimeWidget.scss b/src/components/DatetimeWidget/DatetimeWidget.scss
deleted file mode 100644
index 015bf69..0000000
--- a/src/components/DatetimeWidget/DatetimeWidget.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.datetime-widget {
- display: flex;
- flex-flow: row nowrap;
- justify-content: flex-start;
- width: 100%;
- margin: 0 -0.5rem 0.5rem;
-
- > input {
- margin: 0 0.5rem;
- }
-}
diff --git a/src/components/DatetimeWidget/DatetimeWidget.tsx b/src/components/DatetimeWidget/DatetimeWidget.tsx
deleted file mode 100644
index 9ace004..0000000
--- a/src/components/DatetimeWidget/DatetimeWidget.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-import "./DatetimeWidget.scss";
-
-export interface DatetimeWidgetProps {
- value: string;
- onChange: (value: string) => void;
- onFocus: () => void;
- onBlur: () => void;
- required: boolean;
- disabled: boolean;
-}
-export interface DatetimeWidgetState { }
-
-class DatetimeWidget extends React.Component
-
-
-
-
- {`${first_name} ${last_name}`}
- {phone}
- {email}
- {role.name_fi}
- {role.name_en}
-
- onChange(`${event.target.value}T${time}`)}
- value={date}
- {...commonProps} />
- onChange(`${date}T${event.target.value}:00`)}
- value={time}
- {...commonProps} />
-
- );
- }
-}
-
-export default DatetimeWidget;
diff --git a/src/components/DatetimeWidget/index.ts b/src/components/DatetimeWidget/index.ts
deleted file mode 100644
index 396b80b..0000000
--- a/src/components/DatetimeWidget/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import DatetimeWidget from "./DatetimeWidget";
-export default DatetimeWidget;
diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
new file mode 100644
index 0000000..1093cdd
--- /dev/null
+++ b/src/components/Divider.tsx
@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+
+const Divider = styled.hr`
+ width: 98%;
+ border: 0;
+ border-bottom: 2px solid ${colors.blue1};
+ margin: 0 auto;
+`;
+
+export default Divider;
diff --git a/src/components/DropDownBox.tsx b/src/components/DropDownBox.tsx
new file mode 100644
index 0000000..f27eb1b
--- /dev/null
+++ b/src/components/DropDownBox.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+
+interface DropDownBoxProps {
+ onMouseEnter: () => void;
+ onMouseLeave: () => void;
+ visible: boolean;
+}
+
+const Box = styled.div`
+ background-color: ${colors.white};
+ margin-top: 0.8rem;
+ position: absolute;
+ left: 0;
+ top: 30px;
+ z-index: 20;
+
+ a {
+ text-decoration: underline;
+ color: ${colors.darkBlue} !important;
+ text-transform: uppercase;
+ }
+`;
+
+const DropDownBox: React.FC
- {children}
-
- );
- }
-}
-
-export default DropDownBox;
diff --git a/src/components/DropDownBox/index.ts b/src/components/DropDownBox/index.ts
deleted file mode 100644
index 64e87ea..0000000
--- a/src/components/DropDownBox/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import DropDownBox from "./DropDownBox";
-export default DropDownBox;
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
deleted file mode 100644
index 2def50a..0000000
--- a/src/components/Footer/Footer.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.footer {
- display: flex;
- flex-direction: column;
-
- &__content {
- display: flex;
- padding: 16px;
- }
-
- h4 {
- color: color(light-blue);
- padding: 1.5rem 0;
- }
-
- & a {
- color: color(white1);
- text-decoration: underline;
- padding: 0.4rem 0;
- font-size: 14px;
- }
-
- & p {
- color: color(white1);
- margin: 0;
- padding: 0.4rem 0;
- font-size: 14px;
- }
-
- &__info {
- display: flex;
- flex-direction: column;
- flex-basis: 100%;
- align-items: center;
-
- &__block {
- padding: 1rem 0;
- }
- }
-
- &__contacts {
- display: flex;
- justify-content: space-between;
- flex-flow: row nowrap;
- font-weight: 200;
-
- @media screen and (max-width: 600px - 1px) {
- flex-flow: column nowrap;
- }
- }
-
- &__text {
- display: flex;
- flex-flow: column;
- min-width: 180px;
-
- @media screen and (min-width: 600px) {
- padding-right: 3rem;
- }
- }
-
- &__links {
- display: flex;
- flex-flow: column;
-
- @media screen and (max-width: 600px - 1px) {
- margin-top: 2rem;
- }
- }
-
- &__copyright {
- display: flex;
- flex-flow: row nowrap;
- background-color: color(black1);
- text-align: center;
- justify-content: center;
- font-size: 12px;
- padding: 1rem 0;
-
- p {
- padding: 0.5rem 1rem;
- }
-
- @media screen and (max-width: 600px - 1px) {
- flex-flow: column nowrap;
- }
- }
-}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index c816204..04cfabf 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,48 +1,54 @@
import React from "react";
-import FooterMap from "../FooterMap";
-import Anchor from "../Anchor";
-import "./Footer.scss";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+import FooterContent from "./FooterContent";
-export interface FooterProps { }
-export interface FooterState { }
+const StyledFooter = styled.footer`
+ display: flex;
+ flex-direction: column;
+ background-color: ${colors.darkBlue};
+`;
-class Footer extends React.Component
-
-
-
-
-
-
-
- Aalto-yliopiston Sähköinsinöörikilta ry
-
-
-
-
-
-Yhteystiedot
-
- TUAS-Talo
-Maarintie 8
-PL 15500, 00076 Aalto
--
-
Y-tunnus: 1627010-1
-sik-hallitus@list.ayy.fi
-
- Jäseneksi
- Palaute
- Arkisto
- Materiaalipankki
-
-
-
- © Aalto-yliopiston Sähköinsinöörikilta ry
-webmaster: sik-vtmk@list.ayy.fi
-© Aalto-yliopiston Sähköinsinöörikilta ry
+ webmaster: sik-vtmk@list.ayy.fi +
+
+
+
+
+
+
+
+ Aalto-yliopiston Sähköinsinöörikilta ry
+
+
+
+
+ TUAS-Talo
+Maarintie 8
+PL 15500, 00076 Aalto
+
+ Yhteystiedot
+
+ Y-tunnus: 1627010-1
+sik-hallitus@list.ayy.fi
+
+ Jäseneksi
+ Palaute
+ Arkisto
+ Materiaalipankki
+
+ {text}
;
-
-export interface FooterMapProps {}
-
-export interface FooterMapState {}
-
-class FooterMap extends React.Component
-
-
-
- );
- }
-}
-
-export default FooterMap;
diff --git a/src/components/FooterMap/index.ts b/src/components/FooterMap/index.ts
deleted file mode 100644
index dc2e662..0000000
--- a/src/components/FooterMap/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import FooterMap from "./FooterMap";
-export default FooterMap;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..8a28282
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,72 @@
+import React, { useState, useEffect, useRef } from "react";
+import Navigation from "./Navigation";
+import throttle from "lodash/throttle";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+import NavigationMobile from "./NavigationMobile";
+import HeaderLogo from "./HeaderLogo";
+
+const StyledHeader = styled.header<{isHidden?: boolean}>`
+ display: flex;
+ flex-flow: row nowrap;
+ @media screen and (max-width: 600px) {
+ flex-flow: column nowrap;
+ }
+`;
+
+const Sticky = styled.div`
+ position: sticky;
+ top: 0;
+ z-index: 10;
+
+ padding: 0 1rem;
+ background-color: ${colors.darkBlue};
+ transition: all 200ms ease-out;
+
+ ${(p) => p.isHidden ? (`
+ transition: all 200ms ease-in;
+ transform: translateY(-100%);
+ `) : null}
+`;
+
+
+const PREVENT_IS_HIDDEN_Y = 150;
+
+const Header: React.FC = () => {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+ const [isHidden, setHidden] = useState(false);
+ const yCoord = useRef(0);
+
+ const handleScroll = () => {
+ const newCoord = window.pageYOffset;
+ if (!mobileMenuOpen && newCoord > yCoord.current && newCoord > PREVENT_IS_HIDDEN_Y) {
+ setHidden(true);
+ } else {
+ setHidden(false);
+ }
+ yCoord.current = newCoord;
+ };
+
+ const handleMobileMenuClick = () => setMobileMenuOpen(!mobileMenuOpen);
+
+ useEffect(() => {
+ const func = throttle(handleScroll, 200);
+ // Prevents hide when clicking mobileMenuOpen
+ handleScroll();
+ window.addEventListener("scroll", func);
+ return () => window.removeEventListener("scroll", func);
+ }, [isHidden, mobileMenuOpen]);
+
+
+ return (
+
-
-
-
-
-
- {mobileItems}
-
-
-
-
-
-)
-
-export default HeroAsideItem;
diff --git a/src/components/Hero/HeroAsideSection/HeroAsideSection.scss b/src/components/Hero/HeroAsideSection/HeroAsideSection.scss
deleted file mode 100644
index c632179..0000000
--- a/src/components/Hero/HeroAsideSection/HeroAsideSection.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import "../../../assets/scss/globals";
-
-
-.hero-aside-section {
- display: flex;
- flex-flow: column nowrap;
- align-items: flex-start;
- justify-content: center;
- flex: 4;
-
- @media screen and (max-width: 800px - 1px) {
- align-items: center;
- }
-
- text-align: left;
- padding: 3rem 1rem 2rem;
-
- &.dark-blue {
- background-color: color(dark-blue);
-
- h2 {
- color: color(light-blue);
- }
-
- p {
- font-weight: 100;
- color: color(white1);
- }
- }
-
- &.light-turquoise {
- background-color: color(light-turquoise);
-
- h2,
- p {
- color: color(dark-blue);
- }
- }
-
- &.light-blue {
- background-color: color(light-blue);
- }
-}
diff --git a/src/components/Hero/HeroAsideSection/HeroAsideSection.tsx b/src/components/Hero/HeroAsideSection/HeroAsideSection.tsx
deleted file mode 100644
index 505a0db..0000000
--- a/src/components/Hero/HeroAsideSection/HeroAsideSection.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import "./HeroAsideSection.scss";
-import ColorDiv, { ColorDivProps } from "../../ColorDiv/ColorDiv";
-
-
-export interface HeroAsideSectionProps { }
-export interface HeroAsideSectionState { }
-
-class HeroAsideSection extends React.Component{title}
-{children}
-{linkText} ›
-
- {this.props.children}
-
- {header}
+ {text && ( +{text}
+ )} + {children} +{title}
+const HeroSecondarySection: React.FC{heading}
- {children}
-
- );
- }
-}
-
-export default InfoBox;
diff --git a/src/components/InfoBox/index.ts b/src/components/InfoBox/index.ts
deleted file mode 100644
index df5a48f..0000000
--- a/src/components/InfoBox/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import InfoBox from "./InfoBox";
-export default InfoBox;
diff --git a/src/components/JsonLD.tsx b/src/components/JsonLD.tsx
new file mode 100644
index 0000000..db17eb0
--- /dev/null
+++ b/src/components/JsonLD.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+interface JsonLDProps {
+ data: Record
- {text}
-
- {children}
-
-
- );
- }
-}
-
-export default NavbarDropdownLink;
diff --git a/src/components/NavbarDropdownLink/index.ts b/src/components/NavbarDropdownLink/index.ts
deleted file mode 100644
index 9875695..0000000
--- a/src/components/NavbarDropdownLink/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import NavbarDropdownLink from "./NavbarDropdownLink";
-export default NavbarDropdownLink;
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
new file mode 100644
index 0000000..3426512
--- /dev/null
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,122 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+import Icon, { IconType } from "./Icon";
+import NavbarDropdownLink from "./NavbarDropdownLink";
+import NavbarChildLink from "./NavbarChildLink";
+
+const renderNavigationDesktopItems = () => {
+ return (
+ <>
+
- {items}
-
-
-
-
-
- {children}
+
- {desc}
-
- );
- }
-}
-
-export default PageLink;
diff --git a/src/components/PageLink/index.ts b/src/components/PageLink/index.ts
deleted file mode 100644
index 118b0a5..0000000
--- a/src/components/PageLink/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import PageLink from "./PageLink";
-export default PageLink;
diff --git a/src/components/PageSection/PageSection.scss b/src/components/PageSection/PageSection.scss
deleted file mode 100644
index 99752d3..0000000
--- a/src/components/PageSection/PageSection.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.page-section {
- display: flex;
- flex-flow: row wrap;
- justify-content: space-between;
- position: relative;
-
- &.lander-hero {
- @media screen and (min-width: 800px) {
- min-height: 85vh;
- }
- }
-
- &.padded {
- padding: 2rem 1rem 2rem;
- }
-
- &:not(.card-section) {
- @media screen and (max-width: 800px - 1px) {
- flex-flow: column nowrap;
- }
- }
-
- &.center {
- justify-content: center;
- }
-
- &.bottom-border {
- &::after {
- content: "";
- position: absolute;
- bottom: 0;
- width: 98%;
- left: 1%;
- border-bottom: 1px solid rgba(color(blue1), 0.4);
- }
- }
-}
diff --git a/src/components/PageSection/PageSection.tsx b/src/components/PageSection/PageSection.tsx
deleted file mode 100644
index e6e7c0b..0000000
--- a/src/components/PageSection/PageSection.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import "./PageSection.scss";
-import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
-
-export interface PageSectionProps {
- center?: boolean;
- bottomBorder?: boolean;
- cardSection?: boolean; // does section contain a grid of cards
- fullSize?: boolean;
-}
-export interface PageSectionState { }
-
-class PageSection extends React.Component{this.props.children}
-
- {this.props.children}
-
- );
- }
-}
-
-export default Ribbon;
diff --git a/src/components/Ribbon/index.ts b/src/components/Ribbon/index.ts
deleted file mode 100644
index 896a201..0000000
--- a/src/components/Ribbon/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import Ribbon from "./Ribbon";
-export default Ribbon;
diff --git a/src/components/SectionDividerWidget/SectionDividerWidget.tsx b/src/components/SectionDividerWidget/SectionDividerWidget.tsx
deleted file mode 100644
index 46e9c3e..0000000
--- a/src/components/SectionDividerWidget/SectionDividerWidget.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import "./SectionDividerWidget.scss";
-import Icon from "../Icon";
-import { IconType } from "../Icon/Icon";
-
-export interface SectionDividerWidgetProps {
- label: string;
-}
-export interface SectionDividerWidgetState { }
-
-const getIconByLabel = (label: string) => {
- if (label === "Finnish") {
- return - {label} {getIconByLabel(label)} -
- ); - } -} - -export default SectionDividerWidget; diff --git a/src/components/SectionDividerWidget/index.ts b/src/components/SectionDividerWidget/index.ts deleted file mode 100644 index 27d7f9c..0000000 --- a/src/components/SectionDividerWidget/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import SectionDividerWidget from "./SectionDividerWidget"; -export default SectionDividerWidget; diff --git a/src/components/Sections/CTASection.tsx b/src/components/Sections/CTASection.tsx new file mode 100644 index 0000000..eebedfe --- /dev/null +++ b/src/components/Sections/CTASection.tsx @@ -0,0 +1,101 @@ + +import React from "react"; +import styled from "styled-components"; +import { colors } from "@theme/colors"; +import Anchor from "@components/Anchor"; + +const Section = styled.section<{ colors: string }>` + ${(p) => p.colors} + + display: flex; + justify-content: center; + text-align: center; + align-items: baseline; + padding: 2rem 0; + + flex-flow: row wrap; + + a { + color: inherit; + } + + & > a { + font-weight: 700; + text-decoration: none; + margin: 0.5rem 1rem 0; + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 0.1rem; + } + + & > h1 { + a { + text-decoration: underline; + } + a:hover { + text-decoration: none; + } + } +`; + +type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise"; + +interface CTASectionProps extends React.HTMLAttributes{children}
+ {link && ( +{linkText}
+
-
- {children}
-
- );
- }
-}
-
-export default Question;
diff --git a/src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss b/src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss
deleted file mode 100644
index a239ce4..0000000
--- a/src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.signup-questions-widget {
- button.add-link {
- background: none;
- padding: 0;
- margin: 1rem 0;
- }
-
- button.remove {
- background-color: color(orange1);
- margin-left: auto;
- margin-bottom: 0.5rem;
- padding: 0.3rem 0.5rem;
- float: right;
- }
-
- .signup-questions-widget-row {
- margin-bottom: 1rem;
- display: flex;
- flex-flow: column nowrap;
- padding: 0.5rem;
- background-color: color(light-blue);
- }
-}
diff --git a/src/components/SignupQuestionsWidget/SignupQuestionsWidget.tsx b/src/components/SignupQuestionsWidget/SignupQuestionsWidget.tsx
deleted file mode 100644
index 361dd81..0000000
--- a/src/components/SignupQuestionsWidget/SignupQuestionsWidget.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from "react";
-import shortid from "shortid";
-import { DragDropContext, Droppable } from "react-beautiful-dnd";
-import { Question } from "."
-import AddIcon from "@assets/img/add-icon.png";
-import "./SignupQuestionsWidget.scss";
-import QuestionList from "./QuestionList";
-
-export interface SignupQuestionsWidgetProps {
- value: string;
- onChange: (value: string) => void;
- onFocus: () => void;
- required: boolean;
- disabled: boolean;
-}
-export interface SignupQuestionsWidgetState { }
-
-class SignupQuestionsWidget extends React.Component
-
-
- {(provided) => (
-
-
-
-
- );
- }
-}
-
-export default SignupQuestionsWidget;
diff --git a/src/components/SponsorReel/SponsorReel.scss b/src/components/SponsorReel/SponsorReel.scss
deleted file mode 100644
index 6652cef..0000000
--- a/src/components/SponsorReel/SponsorReel.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.sponsor-reel {
- text-align: center;
-
- h3 {
- text-transform: uppercase;
- letter-spacing: 2px;
- font-weight: 500;
- color: color(dark-blue);
- margin: 1rem 0 4rem;
- font-size: 14px;
-
- @media screen and (max-width: 1200px - 1px) {
- font-size: 16px;
- }
- }
-
- a {
- color: color(blue1);
- text-decoration: underline;
- }
-
- &-logos {
- display: flex;
- flex-flow: row wrap;
- justify-content: center;
- margin-bottom: 3rem;
-
- img {
- margin: 0.5rem 0.5rem;
- }
- }
-}
diff --git a/src/components/SponsorReel/SponsorReel.tsx b/src/components/SponsorReel/SponsorReel.tsx
deleted file mode 100644
index 694cc3d..0000000
--- a/src/components/SponsorReel/SponsorReel.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import "./SponsorReel.scss";
-import TextAnchor from "../TextAnchor";
-import Anchor from "../Anchor";
-
-export interface SponsorReelProps { }
-export interface SponsorReelState { }
-
-class SponsorReel extends React.Component
- Haluatko kuulla lisää yhteistyöstä kanssamme?
-
- );
- }
-}
-
-export default SponsorReel;
diff --git a/src/components/SponsorReel/index.ts b/src/components/SponsorReel/index.ts
deleted file mode 100644
index 3a66715..0000000
--- a/src/components/SponsorReel/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import SponsorReel from "./SponsorReel";
-export default SponsorReel;
diff --git a/src/components/TextAnchor/TextAnchor.scss b/src/components/TextAnchor/TextAnchor.scss
deleted file mode 100644
index ad1d68d..0000000
--- a/src/components/TextAnchor/TextAnchor.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@import "../../assets/scss/globals";
-
-.text-anchor {
- text-decoration: underline;
- font-weight: 600;
-
- &__no-weight {
- font-weight: 100;
- }
-
- &__small {
- text-decoration: none;
- margin: 0 1rem;
- font-size: 0.8rem;
- text-transform: uppercase;
- margin-top: 10px;
- }
-}
diff --git a/src/components/TextAnchor/TextAnchor.tsx b/src/components/TextAnchor/TextAnchor.tsx
deleted file mode 100644
index 193fab5..0000000
--- a/src/components/TextAnchor/TextAnchor.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-import "./TextAnchor.scss";
-import { Colors, colorToClass, hoverColorToClass } from "@theme/colors";
-import Anchor from "../Anchor";
-import classNames from "classnames";
-
-
-export type TextSize =
- "normal" |
- "small" |
- "large" |
- "ribbon" |
- "small-ribbon";
-
-
-const textSizeToClassName = new MapYhteistyössä
-
- 
- + {label} {getIconByLabel(label)} +
+); + +export default SectionDividerWidget; diff --git a/src/components/SignupQuestionsWidget/OptionsWidget.tsx b/src/components/Widgets/SignupQuestionsWidget/OptionsWidget.tsx similarity index 98% rename from src/components/SignupQuestionsWidget/OptionsWidget.tsx rename to src/components/Widgets/SignupQuestionsWidget/OptionsWidget.tsx index 966757a..623311a 100644 --- a/src/components/SignupQuestionsWidget/OptionsWidget.tsx +++ b/src/components/Widgets/SignupQuestionsWidget/OptionsWidget.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Question, InputProps, optionTypes, SignupQuestionError } from "./index"; -import Checkbox from "@components/Checkbox/Checkbox"; +import Checkbox from "@components/Widgets/Checkbox/Checkbox"; export interface OptionsWidgetProps { inputProps: InputProps; diff --git a/src/components/Widgets/SignupQuestionsWidget/Question.tsx b/src/components/Widgets/SignupQuestionsWidget/Question.tsx new file mode 100644 index 0000000..d271bf9 --- /dev/null +++ b/src/components/Widgets/SignupQuestionsWidget/Question.tsx @@ -0,0 +1,24 @@ +import React, { ButtonHTMLAttributes } from "react"; +import styled from "styled-components"; +import { colors } from "@theme/colors"; + +const RemoveButton = styled.button` + background-color: ${colors.orange1} !important; + margin-left: auto !important; + margin-bottom: 0.5rem !important; + padding: 0.3rem 0.5rem !important; + float: right !important; +`; + +type QuestionProps = Omit
+
+ Delete
+
+ {children}
+
+);
+
+export default Question;
diff --git a/src/components/SignupQuestionsWidget/QuestionList.tsx b/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx
similarity index 86%
rename from src/components/SignupQuestionsWidget/QuestionList.tsx
rename to src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx
index 3103166..079a290 100644
--- a/src/components/SignupQuestionsWidget/QuestionList.tsx
+++ b/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx
@@ -1,9 +1,19 @@
import React from "react";
+import styled from "styled-components";
import { Draggable } from "react-beautiful-dnd";
import { Question, InputProps } from "./index";
import OptionsWidget from "./OptionsWidget";
import TypeWidget from "./TypeWidget";
import QuestionElement from "./Question";
+import { colors } from "@theme/colors";
+
+const WidgetRow = styled.div`
+ margin-bottom: 1rem;
+ display: flex;
+ flex-flow: column nowrap;
+ padding: 0.5rem;
+ background-color: ${colors.lightBlue};
+`;
export interface QuestionListProps {
questions: Question[];
@@ -44,20 +54,19 @@ class QuestionList extends React.Component
+
-
+
+
);
}
}
diff --git a/src/pages/admin/AdminEventPage.scss b/src/pages/admin/AdminEventPage.scss
deleted file mode 100644
index adaa320..0000000
--- a/src/pages/admin/AdminEventPage.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.admin-event-page {
- table {
- border-collapse: collapse;
- }
-
- table,
- th,
- td {
- border: 1px solid color(white1);
- padding: 0.5rem;
-
- a {
- color: color(orange1);
- text-decoration: underline;
- }
- }
-}
diff --git a/src/pages/admin/AdminEventPage.tsx b/src/pages/admin/AdminEventPage.tsx
index e21ff2b..34e448d 100644
--- a/src/pages/admin/AdminEventPage.tsx
+++ b/src/pages/admin/AdminEventPage.tsx
@@ -1,118 +1,57 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
import { Helmet } from "react-helmet";
-import Anchor from "@components/Anchor";
import { formatRelative } from "date-fns";
-
-import "./AdminEventPage.scss";
+import AdminListCommon from "@views/admin/AdminListCommon";
+import Anchor from "@components/Anchor";
+import AddLink from "@components/AddLink";
import { Event, getEvents } from "@models/Event";
-import { StaticContext } from "@server/StaticContext";
-import AddIcon from "@assets/img/add-icon.png";
+const URL = "/admin/events"
-export interface AdminEventPageProps {
- staticContext: StaticContext;
-}
-export interface AdminEventPageState {
- events: Event[];
- error?: string;
-}
-
-class AdminEventPage extends React.ComponentNo events.
;
}
- fetchEvents = async () => {
- const getEventsPromise = getEvents({ auth: true });
- try {
- const events = await getEventsPromise;
- this.setState({
- events,
- });
- return getEventsPromise;
- } catch (err) {
- this.setState({
- error: String(err),
- });
- }
- }
-
- renderAddLink = () => (
- {error}
;
- }
-
- if (!events || events.length === 0) {
- return No events.
;
- }
-
- return (
- | Title | -Start time | -End time | + return ( +
|---|
| Title | +Start time | +End time | +
|---|---|---|
| {formatRelative(new Date(event.start_time), new Date())} | +{formatRelative(new Date(event.end_time), new Date())} | |
| {formatRelative(new Date(event.start_time), new Date())} | -{formatRelative(new Date(event.end_time), new Date())} | -
-
-
-
-
- );
- }
+ useEffect(() => {
+ getEvents({ auth: true })
+ .then(res => setEvents(res))
+ }, []);
+
+ return (
+ Events
- {this.renderAddLink()} - {this.renderData()} -Events
+No posts.
;
}
- fetchFeed = async () => {
- const getFeedPromise = getFeed();
- try {
- const feed = await getFeedPromise;
- this.setState({
- feed,
- });
- return getFeedPromise;
- } catch (err) {
- this.setState({
- error: String(err),
- });
- }
- }
-
- renderAddLink = () => (
- {error}
;
- }
-
- if (!feed || feed.length === 0) {
- return No posts.
;
- }
-
- return (
- | Title | -Description | -Publish time | + return ( +
|---|
| Title | +Description | +Publish time | +
|---|---|---|
| {post.description_fi} | +{formatRelative(new Date(post.publish_time), new Date())} | |
| {post.description_fi} | -{formatRelative(new Date(post.publish_time), new Date())} | -
-
-
-
-
- );
- }
+const AdminFeedPage: React.FC = () => {
+ const [forms, setForms] = useStateFeed
- {this.renderAddLink()} - {this.renderData()} -Feed
+
-
-
-
- Events
- Feed
- Files
-
- );
- }
-}
-
-export default AdminFrontPage;
diff --git a/src/pages/admin/AdminFrontView.tsx b/src/pages/admin/AdminFrontView.tsx
new file mode 100644
index 0000000..179d9b8
--- /dev/null
+++ b/src/pages/admin/AdminFrontView.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Helmet } from "react-helmet";
+
+const AdminFrontView: React.FC = () => (
+ SIK Admin
-SIK Admin
+No advertisements.
;
+ }
+
+ return (
+ | Title | +Description | +Autohide | +
|---|---|---|
| {ad.description_fi} | ++ {ad.autohide_enabled ? + formatRelative(new Date(ad.autohide_at), new Date()) + : "Disabled"} + | +
Job advertisements
+No signup forms.
;
}
- fetchSignupForms = async () => {
- const getSignupFormsPromise = getForms(true);
- try {
- const signupForms = await getSignupFormsPromise;
- this.setState({
- signupForms,
- });
- return getSignupFormsPromise;
- } catch (err) {
- this.setState({
- error: String(err),
- });
- }
- }
-
- renderAddLink = () => (
- {error}
;
- }
-
- if (!signupForms || signupForms.length === 0) {
- return No signup forms.
;
- }
-
- return (
- | Title | -Start time | -End time | + return ( +
|---|
| Title | +Start time | +End time | +Sign-ups | +Send email | +
|---|---|---|---|---|
| {formatRelative(new Date(signupForm.start_time), new Date())} | +{formatRelative(new Date(signupForm.end_time), new Date())} | +|||
| {formatRelative(new Date(signupForm.start_time), new Date())} | -{formatRelative(new Date(signupForm.end_time), new Date())} | -
-
-
-
-
- );
- }
+const AdminSignupPage: React.FC = () => {
+ const [forms, setForms] = useStateSign-up forms
- {this.renderAddLink()} - {this.renderData()} -Sign-up forms
+
-
-
-
-
- );
- }
+ return (
+ <>
+ {title}
- {statusMessage &&{statusMessage}
}
-
- {error && {error}
}
-
-
-
-
-
- );
- }
+ return (
+ <>
+ {title}
- {statusMessage &&{statusMessage}
}
-
- {error && {error}
}
-
-
-
-
-
- );
- }
+ return (
+ <>
+ {title}
- {statusMessage &&{statusMessage}
}
- {formData.id && - Check out the signup form here: {formData.title} -
} - - {error &&{error}
}
- + Check out the signup form here: {formData.title_fi} +
} */} + + ); } export default SignupCreatePage; diff --git a/src/pages/admin/SignupEmailPage.tsx b/src/pages/admin/SignupEmailPage.tsx new file mode 100644 index 0000000..8cd84bf --- /dev/null +++ b/src/pages/admin/SignupEmailPage.tsx @@ -0,0 +1,105 @@ +import React, { useEffect, useState } from "react"; +import { Helmet } from "react-helmet"; +import { RouteComponentProps } from "react-router-dom"; +import AdminCreateCommon from "@views/admin/AdminCreateCommon"; +import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget"; +import { SignupForm, getForm, signupFormSendEmail } from "@models/SignupForm"; + +const widgets = { + markdownEditor: MarkdownEditorWidget +}; + +const buildSchema = (title: string) => { + return { + title, + type: "object", + required: ["subject", "content", "mode"], + properties: { + subject: { + type: "string", + title: "Title", + default: "" + }, + content: { + type: "string", + title: "Content", + default: "", + }, + mode: { + type: "string", + title: "Send to", + enum : [ + "all", + "actual", + "reserved" + ], + default: "all", + } + } + }; +} + +const buildUISchema = () => ({ + content: { + "ui:widget": "markdownEditor", + }, +}); + +interface MatchParams { + id?: string; +} + +type SignupEmailPageProps = RouteComponentProps{title}: Sign-ups
+| {q.title} | + ))} +
+ |
+
|---|---|
| + {s.answer[q.id]} + | + ))} +
+ |
+
+ Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa: +
+
-
-
-
-
- Killan hallitus päivystää kiltahuoneella maanantaisin klo 12.15–13.15. Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.
-
-
- 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!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Sinustako kilta-aktiivi?
+
+
+
+
- Jotain elepajasta
-
-
- Jotain elepajasta
-
-
- Jotain elepajasta
-
-
- Jotain elepajasta
-
-
- Jotain elepajasta
-
-
-
+
+
);
}
diff --git a/src/views/ActualPage/EventCalendar.tsx b/src/views/ActualPage/EventCalendar.tsx
index 436c437..f252272 100644
--- a/src/views/ActualPage/EventCalendar.tsx
+++ b/src/views/ActualPage/EventCalendar.tsx
@@ -1,10 +1,10 @@
import React, { useState } from "react";
import { Event } from "@models/Event";
-import Card from "@components/Card";
import Button from "@components/Button";
-import PageSection from "@components/PageSection";
import FilterContainer from "./FilterContainer";
+import { CardSection, Card, FullWidthSection } from "@components/index";
+import noop from "@utils/noop";
interface EventCalendarProps {
events: Event[];
@@ -15,19 +15,23 @@ const EventCalendar: React.FCYritystapahtumia ja vastapainoa opiskelulle
-- Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin. -
-
-
-
-
- - Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa: -
-Tapahtumat
-Uutiset
-Kuvia tapahtumista.
-Kuvagalleria ›
-
+ <>
+
+ Kuvia tapahtumista.
+
+
+
-
- Sinustako kilta-aktiivi?
-Tule mukaan kiltatoimintaan ›
-Yritystapahtumia ja vastapainoa opiskelulle
+ + +Yritystapahtumia ja vastapainoa opiskelulle
+Toimintaa ylläpitää ja järjestää jaokset ja toimikunnat.
-
+
+ Jotain elepajasta
+
+
+ Jotain elepajasta
+
+
+ Jotain elepajasta
+
+
+ Jotain elepajasta
+
+
+ Jotain elepajasta
+
+
+
-
+ <>
+
-
+
+
+
+
+
- x.role.committee.name_fi === committee.name_fi)} />
-
+ <>
+
+ x.role.committee.name_fi === committee.name_fi)} />
+
+
+
);
}
}
diff --git a/src/views/CorporatePage/CorporatePage.scss b/src/views/CorporatePage/CorporatePage.scss
deleted file mode 100644
index 84ee338..0000000
--- a/src/views/CorporatePage/CorporatePage.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.corporate-page {
- display: flex;
- flex-flow: column wrap;
- justify-content: flex-start;
-}
diff --git a/src/views/CorporatePage/CorporatePageHero.tsx b/src/views/CorporatePage/CorporatePageHero.tsx
new file mode 100644
index 0000000..a16c222
--- /dev/null
+++ b/src/views/CorporatePage/CorporatePageHero.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/Hero";
+
+const CorporatePageHero: React.FC = () => (
+
Asiaa olisi, mutta kehen ottaa yhteyttä?
Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
{"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
-
-
-
-
-
-
-
-
-
- = ({ jobAds }) => (
+ <>
+
+
+
+
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ Tee yhteistyötä tulevaisuuden huippuosaajien kanssa!
-- Aalto-yliopiston Sähköinsinöörikilta on loistava ja hyvinvoiva opiskelijayhteisö, joka vie sähkötekniikan avulla maailmaa eteenpäin. Kilta pitää jäsenistään huolta ja työelämän taitojen oppiminen onkin yksi killan tärkeistä arvoista. Siksi myös yritysyhteistyö on killalle hyvin arvokasta. Kilta järjestää paljon yhteistyötapahtumia, joissa kiltalaiset pääsevät tutustumaan yhteistyöyrityksiin ja killan tärkeänä tehtävänä on jakaa esimerkiksi työpaikkailmoituksia jäsenistölle. -
-Lyhyesti killasta ja sen toiminnasta
- -Aalto-yliopiston Sähköinsinöörikillan jäsenistöstä valmistuvat maan parhaimmat matematiikkaa ja fysiikkaa soveltavat huippuosaajat. Killan tehtävänä on pitää jäsenistään huolta ja edistää aktiivisesti jäsenten ja toimijoiden jaksamista. Killassa opitaan myös tärkeitä työelämätaitoja ammattimaisen killan johtamisen kautta.
+interface CorporatePageViewProps { + jobAds: JobAd[]; +} -Yhteistyömahdollisuudet
+const CorporatePageView: React.FCLyhyesti killasta ja sen toiminnasta
+Aalto-yliopiston Sähköinsinöörikillan jäsenistöstä valmistuvat maan parhaimmat matematiikkaa ja fysiikkaa soveltavat huippuosaajat. Killan tehtävänä on pitää jäsenistään huolta ja edistää aktiivisesti jäsenten ja toimijoiden jaksamista. Killassa opitaan myös tärkeitä työelämätaitoja ammattimaisen killan johtamisen kautta.
+ +Yhteistyömahdollisuudet
+Yhteistyömahdollisuuksista voi tiedustella lisää killan yrityssuhdemestarilta.
Yritysbrunssi
@@ -56,49 +44,43 @@ const CorporatePageView: React.FC = () => (Excursioiden tarkoituksena on tarjota opiskelijoille mahdollisuus tutustua yritysmaailmaan. Excursioita, tai tuttavallisemmin excuja, järjestetään niin lähelle kuin kauaskin ja niillä tarkoituksena on päästä vierailemaan yrityksen tiloihin ja tutustumaan yrityksen kiinnostaviin työntekijöihin ja työtehtäviin. Hauskanpito ja teekkariperinteiden vaaliminen ovat tärkeä osa jokaista excua.
Potentiaalin Tasaus
-Kiltamme viettää perinteikkäitä vuosijuhliaan helmikuun kolmantena lauantaina. Potentiaalin Tasaus on kiltamme juhlavin ja rakkain tapahtuma. Yrityksillä on mahdollisuus osallistua vuosijuhliin niin pienellä kuin suurellakin panoksella. Killan 100-vuotisjuhla PoTa100 lähestyy myös kovaa vauhtia. Jos yrityksesi on kiinnostunut 100-vuotisjuhlasta, kannattaa ohjautua osoitteeseen sik100.fi.
+Kiltamme viettää perinteikkäitä vuosijuhliaan helmikuun kolmantena lauantaina. Potentiaalin Tasaus on kiltamme juhlavin ja rakkain tapahtuma. Yrityksillä on mahdollisuus osallistua vuosijuhliin niin pienellä kuin suurellakin panoksella. Killan 100-vuotisjuhla PoTa100 lähestyy myös kovaa vauhtia. Jos yrityksesi on kiinnostunut 100-vuotisjuhlasta, kannattaa ohjautua osoitteeseen sik100.fi.
Killan nettisivut ja työpaikkamainokset
Killan nettisivuilla on listattu killan yritysyhteistyökumppanit. Killan sivuilta löytyvät myös yritysyhteistyökumppaneiden avoimet työpaikkamainokset. Nämä mainokset ohjataan killan jäsenistölle eteenpäin myös viikottaisin kiltamailin kautta, jotta kaikki mainokset saavat parhaan mahdollisen näkyvyyden kiltalaisten arjessa.
Sössö
-Sössö on Sähköinsinöörikillan hauska ja rakas opiskelijalehti. Sössö on kerännyt suosiota ja kartuttanut lukijamäärää jo vuodesta 1969 asti. Sössö ilmestyy perinteisesti paperisena, mutta myös Netti-Sössössä julkaistaan jatkuvasti uusia artikkeleja. Sössö tavoittaa noin tuhat elektroniikan, sähkötekniikan ja tietoliikennetekniikan opiskelijaa sekä koko tiedekunnan henkilökunnan. Lisäksi lehti lähetetään muille opiskelijajärjestöille. Yritysten on mahdollista saada mainostilaa Sössön sivuilta.
+Sössö on Sähköinsinöörikillan hauska ja rakas opiskelijalehti. Sössö on kerännyt suosiota ja kartuttanut lukijamäärää jo vuodesta 1969 asti. Sössö ilmestyy perinteisesti paperisena, mutta myös Netti-Sössössä julkaistaan jatkuvasti uusia artikkeleja. Sössö tavoittaa noin tuhat elektroniikan, sähkötekniikan ja tietoliikennetekniikan opiskelijaa sekä koko tiedekunnan henkilökunnan. Lisäksi lehti lähetetään muille opiskelijajärjestöille. Yritysten on mahdollista saada mainostilaa Sössön sivuilta.
+Olethan yhteydessä!
+Olethan yhteydessä!
+Yllämainituista mahdollisuuksista, sekä muista ideoista kiinnostuneena, voit olla yhteydessä Yrityssuhdemestariimme Jarnoon.
Yrityssuhdemestari
-Jarno Mustonen
050 123 4567
Jarno.mustonen (ät) aalto.fi
-
- Excursiosäännöt
-
-
- Liity jäseneksi
-
-
- Mainos Sössöön?
-Killan lehden mediakortin löydät täältä›
-Työpaikkailmoitukset
-TODO: Miten listataan yritykset?
- {/* TODO: Fix links */} -Voit saada yrityksesi työpaikkailmoituksen listalle lähettämällä sen osoitteeseen sik-yritys@list.ayy.fi
-Jarno Mustonen
050 123 4567
jarno.mustonen@aalto.fi
Työpaikkailmoitukset
+
+
+
+ Voit saada yrityksesi työpaikkailmoituksen listalle lähettämällä sen osoitteeseen {YTMK_MAIL}
+-
+ {jobAds.map((ad) => (
+
+
+ + {ad.description_fi} +
+Loading
-
- return (
-
- 
-
- - {event.title_fi} -
-- {event.description_fi} -
-- {event.content_fi} -
- {/* We may have multiple signup forms. Generate own Button for each one */} -
- {event.signupForm.map(sf => (
-
-
-
- )
- )}
-
- Loading
+ return (
+ + {event.title_fi} +
++ {event.description_fi} +
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
+ Killassa tapahtuu kaikenlaista!
+
+
+
+
+
+
);
export default FreshmenPageView;
diff --git a/src/views/FrontPage/FrontPage.scss b/src/views/FrontPage/FrontPage.scss
deleted file mode 100644
index bbedfd6..0000000
--- a/src/views/FrontPage/FrontPage.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "../../assets/scss/globals";
-
-.front-page {
- display: flex;
- flex-flow: column wrap;
- justify-content: flex-start;
-}
diff --git a/src/views/FrontPage/FrontPageHero.tsx b/src/views/FrontPage/FrontPageHero.tsx
new file mode 100644
index 0000000..7cf15b8
--- /dev/null
+++ b/src/views/FrontPage/FrontPageHero.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import Anchor from "@components/Anchor";
+import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem, HeroPrimaryButtons } from "@components/Hero";
+import noop from "@utils/noop";
+
+const FrontPageHero: React.FC = () => (
+ Tervetuloa opiskelemaan Otaniemeen!
-- Me olemme Emmaleena ja Jonna, sinun Fuksikapteenisi. Päätehtävämme on huolehtia fuksivuodestasi Aalto-yliopiston Sähköinsinöörikillassa. -
-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. -
-Onnittelut hyvästä opiskeluvalinnasta
+const FOPAS_LINK = ""; +const FUKSI_POINTS_LINK = ""; +const TG_GROUP_CHAT_LINK = "https://t.me/joinchat/GsmJjhst3-BYIHQSefVhHg"; +const TG_NOTIFICATIONS_LINK = ""; +const EMAIL_LINK = "sik-ftmk@list.ayy.fi"; +const EMAIL_LINK_MAILTO = `mailto:${EMAIL_LINK}`; +const FreshmenPageView: React.FC = () => ( + <> +Onnittelut hyvästä opiskeluvalinnasta
+Olet tehnyt upean valinnan ottamalla askeleen matkalla, jossa sinusta ensin kehkeytyy teekkari ja myöhemmin diplomi-insinööri. Sinusta on juuri tullut tekniikan ylioppilas ja fuksi. Hieno saavutus, jota tietysti on syytä juhlia, ja tähän juhlaan paras sijainti on ehdottomasti Otaniemi. Tervetuloa!
-Ensi askeleina suosittelen, että liityt teille fukseille tehdyille Telegram-kanaville. Tästä pääset tiedotuskanavalle ja
Ensi askeleina suosittelen, että liityt teille fukseille tehdyille Telegram-kanaville. Tästä pääset tiedotuskanavalle ja tästä tutustumaan fuksikavereihin ja ISOihisi.
+Matka nimeltä Teekkarius
-Teekkarin matka on jokaiselle oman näköisensä. Kilta, ylioppilaskunta ja Otaniemen muut järjestöt tarjoavat varmasti jokaiselle omanlaista tekemistä ja harrastusta. Olet nyt osa Aalto-yliopiston Sähköinsinöörikiltaa ja me tulemme tukemaan sinua teekkariuden matkalla, jotta löydät juuri sinulle sopivat paikat, joissa vaikuttaa ja harrastaa. Jotta tämä onnistuisi, olemme esimerkiksi sijoittaneet sinut fuksiryhmään, johon tulet Orientaatioviikolla tutustumaan ja josta saat oman tukiryhmän uusiin seikkailuihin. Fuksiryhmääsi kuuluu myös muutama ISO. Heistä löydät lisää tietoa alempaa.
+Teekkarin matka on jokaiselle oman näköisensä. Kilta, ylioppilaskunta ja Otaniemen muut järjestöt tarjoavat varmasti jokaiselle omanlaista tekemistä ja harrastusta. Olet nyt osa Aalto-yliopiston Sähköinsinöörikiltaa ja me tulemme tukemaan sinua teekkariuden matkalla, jotta löydät juuri sinulle sopivat paikat, joissa vaikuttaa ja harrastaa. Jotta tämä onnistuisi, olemme esimerkiksi sijoittaneet sinut fuksiryhmään, johon tulet Orientaatioviikolla tutustumaan ja josta saat oman tukiryhmän uusiin seikkailuihin. Fuksiryhmääsi kuuluu myös muutama ISO. Heistä löydät lisää tietoa alempaa.
Fuksikapteenit
-Me olemme fuksikapteenisi Emmaleena ja Jonna ja tulemme olemaan tukenasi sekä valvomassa suorituksiasi fuksivuoden seikkailuissa kohti teekkarilakkia, jonka voit ansaita mahdollisesti järjestettävänä Wappuna ensi keväällä. Jos sinulla on mitään kysymyksiä, ota ihmeessä meihin yhteyttä esimerkiksi Telegramissa tai sähköpostitse.
+Me olemme fuksikapteenisi Emmaleena ja Jonna ja tulemme olemaan tukenasi sekä valvomassa suorituksiasi fuksivuoden seikkailuissa kohti teekkarilakkia, jonka voit ansaita mahdollisesti järjestettävänä Wappuna ensi keväällä. Jos sinulla on mitään kysymyksiä, ota ihmeessä meihin yhteyttä esimerkiksi Telegramissa tai sähköpostitse.
Hymyillään, kun tavataan!
Vaikka ensimmäiset päivät Otaniemessä saattavatkin tuoda tullessaan hupsuja ja kummallisia kokemuksia, älä säikähdä niitä! Ajan myötä palapelin palat muodostavat sinun näköisesi kuvan ja pääset itse vaikuttamaan siihen, miltä lopputulos näyttää.
-Orientaatioviikko järjestetään 31.8-4.9, mutta jo ennen sitä sinulla on mahdollisuus tulla tutustumaan meihin, muihin fuksiehin ja ISOihin Varaslähtöön. Varaslähtö fuksivuoteen järjestetään 22.8. Siitä lisää Telegram-ryhmissä ja fuksioppaassa!
+Orientaatioviikko järjestetään 31.8-4.9, mutta jo ennen sitä sinulla on mahdollisuus tulla tutustumaan meihin, muihin fuksiehin ja ISOihin Varaslähtöön. Varaslähtö fuksivuoteen järjestetään 22.8. Siitä lisää Telegram-ryhmissä ja fuksioppaassa!
Emmaleena
0504392855
emmaleena.ahonen (ät) aalto.fi
Jonna
0504327695
jonna.tammikivi (ät) aalto.fi
Killassa tapahtuu kaikenlaista!
-Seuraa killan tapahtumia
-Isoryhmät
+ + +Isoryhmät
+SIK:n fuksit nauttivat hurmaavien ISOhenkilöidensä opastuksesta ja hellästä huolenpidosta somissa ja omissa fuksiryhmissään.
-ISOt ovat hiukan vanhempia opiskelijoita ja kiltalaisia, joiden tehtävänä on olla tukenasi fuksivuoden ajan. Ensimmäisenä päivänä teidät jaetaan noin kymmenen hengen fuksiryhmiin ja jokaiseen ryhmään kuuluu kolmesta viiteen ISOa, joista yksi toimii opintoISOna. ISOilta voit kysyä mitä vain opiskeluun ja opiskelijaelämään liittyen. Vaikka he eivät tietäisi vastausta, he luultavimmin osaavat auttaa sinua vastausten löytämisessä.
-Kuten sanottu ISOt tukevat sinua koko fuksivuoden ajan, mutta eniten tulet näkemään heitä Orientaatioviikolla, jolloin he kulkevat fuksiryhmäsi kanssa ympäri Otaniemeä ja avaavat ovia teekkariuden saloihin. He auttavat sinua myös löytämään opintojen aloittamiseen tarvittavat asiat ja tukevat esimerkiksi lukujärjestyksen tekemisessä ja kirjastokortin, sekä matkakortin ja opiskelijakortin hankkimisessa.
-ISOT ovat myös kutsuttuna fuksivuotesi ensimmäiseen tapahtumaan, eli Varaslähtöön. Tule tutustumaan heihin sinne!
- - -
-
-
-
-
-
- Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet.
-
-
- Oletko abi, vaihtamassa uraa tai valmistumassa?
-
-
- Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja
- sponsseille.
-
-
-
-
- {events.map(event => (
- { }}>
-
-
-
-
-
-
-
-
- {feed.map(inst => (
- { }}>
-
-
-
-
+ <>
+ Aalto-yliopiston Sähköinsinöörikilta
-- on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta - kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa - vauhdilla sähköistyvän maailmamme kehityksessä. -
-
-
-
-
- Lue lisää ›
- - } - /> - ))} -
-
- Kaikki tapahtumat
-
-
- Sössöä vuodesta 1969.
-Lue opiskelijalehden viimeisin numero ›
-Lue lisää ›
- - } - /> - ))} -
-
- Lue tuoreimmat uutiset
-
-
- Kuvia tapahtumista
-
-
- Yhteistyössä:
+
+
+ + Killan tehtäviin kuuluu varmistaa, että sen jäsenet saavat laadukasta opetusta, ja että heistä valmistuu alansa huippuosaajia. Uusille opiskelijoille kilta järjestää fuksikasvatusta, joka tutustuttaa teekkarikulttuuriin ja opiskeluun yliopistossa. Kilta tarjoaa vastapainoa opiskelulle erilaisten tapahtumien muodossa ja välittää jäsenilleen tietoa alan työpaikoista ja yrityksistä. +
+Kilta toimii opiskelijoiden voimin. Killan vapaaehtoisena pääset kartuttamaan kokemusta, josta on valtavasti hyötyä myös myöhemmin työelämässä.
+
-
+ Kiltatoimintaa järjestää ja ylläpitää hallitus, toimihenkilöt ja jaokset
+
+
+
+
+
+
+ Kilta on toimijoidensa näköinen
+
+
+
+
+
+
+
+
+
+
+
+
);
export default GuildPageView;
diff --git a/src/views/InEnglishPage/InEnglishPage.scss b/src/views/InEnglishPage/InEnglishPage.scss
deleted file mode 100644
index 78efa16..0000000
--- a/src/views/InEnglishPage/InEnglishPage.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.in-english-page {
- display: flex;
- flex-flow: column wrap;
- justify-content: flex-start;
-}
diff --git a/src/views/InEnglishPage/InEnglishPageHero.tsx b/src/views/InEnglishPage/InEnglishPageHero.tsx
new file mode 100644
index 0000000..5b9eeda
--- /dev/null
+++ b/src/views/InEnglishPage/InEnglishPageHero.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/Hero";
+
+const InEnglishPageHero: React.FC = () => (
+
+
+
+
+);
+
+export default InEnglishPageHero;
diff --git a/src/views/InEnglishPage/InEnglishPageView.tsx b/src/views/InEnglishPage/InEnglishPageView.tsx
index 66a93a3..6d06695 100644
--- a/src/views/InEnglishPage/InEnglishPageView.tsx
+++ b/src/views/InEnglishPage/InEnglishPageView.tsx
@@ -1,10 +1,21 @@
import React from "react";
-import "./InEnglishPage.scss";
+import { TextSection } from "@components/index";
+import InEnglishPageHero from "./InEnglishPageHero";
const InEnglishPageView: React.FC = () => (
-
+
+
);
export default InEnglishPageView;
diff --git a/src/views/SignUpPage/FormUtils.tsx b/src/views/SignUpPage/FormUtils.tsx
index 43c126b..7636779 100644
--- a/src/views/SignUpPage/FormUtils.tsx
+++ b/src/views/SignUpPage/FormUtils.tsx
@@ -1,11 +1,11 @@
-import { Question } from "@components/SignupQuestionsWidget";
+import { Question } from "@components/Widgets/SignupQuestionsWidget";
import { SignupForm } from "@models/SignupForm";
import { EMAIL_REGEX } from "@utils/regexes";
import escapeRegExp from "lodash/escapeRegExp";
-const questionToUISchemaProp = (question: Question): {} => {
- let obj = {};
+const questionToUISchemaProp = (question: Question) => {
+ let obj: Record<"ui:widget", string>;
if (question.type == "checkbox") {
obj = {
"ui:widget": "checkboxes",
@@ -16,16 +16,13 @@ const questionToUISchemaProp = (question: Question): {} => {
"ui:widget": "radio",
}
}
- // else {
- // throw new Error(`No mapping to UI schema prop for question type ${question.type}`);
- // }
return {
[question.id]: obj,
};
}
const questionToValidationSchema = (question: Question) => {
- let obj = {};
+ let obj: Record;
if (question.type === "text" || question.type === "name") {
obj = {
type: "string",
@@ -119,7 +116,7 @@ export const buildFormSchema = (signUpForm: SignupForm) => {
});
const schema = {
- title: signUpForm.id ? signUpForm.title : "Loading...",
+ title: signUpForm.id ? signUpForm.title_fi : "Loading...",
type: "object",
required: requiredIds,
properties: schemaProps,
diff --git a/src/views/SignUpPage/SignUpPage.scss b/src/views/SignUpPage/SignUpPage.scss
deleted file mode 100644
index 402bd34..0000000
--- a/src/views/SignUpPage/SignUpPage.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@import "../../assets/scss/globals";
-@import "../../components//Button/Button.scss";
-
-.sign-up-page {
- flex: 1 0 auto;
-
- .sign-up-statusmessage {
- color: color(orange1);
- }
-
- .sign-up-list {
- justify-content: start;
- li {
- padding-bottom: 0.3rem;
- }
-
- .reserved {
- color: color(blue1);
- }
- }
-
- .sign-up-form {
- legend {
- display: none;
- }
-
- & > div:last-child {
- display: flex;
- justify-content: center;
-
- button[type="submit"] {
- @extend .button;
- @extend .filled;
- }
- }
-
- fieldset {
- border: none;
- padding: 0;
- margin: 1rem 0;
-
- .form-group {
- padding-bottom: 0.5rem;
-
- & > label {
- margin: 0.5rem 0;
- font-weight: 600;
- display: block;
- }
- }
-
- input[type="text"], input[type="email"], input[type="number"] {
- display: block;
- height: 48px;
- width: 100%;
- font-size: 1.5rem;
- padding: 0 16px;
- }
- }
- }
-}
diff --git a/src/views/SignUpPage/SignUpPageView.tsx b/src/views/SignUpPage/SignUpPageView.tsx
index 92ea3e1..7d425f6 100644
--- a/src/views/SignUpPage/SignUpPageView.tsx
+++ b/src/views/SignUpPage/SignUpPageView.tsx
@@ -1,13 +1,12 @@
import React from "react";
+import styled from "styled-components";
import Form, { IChangeEvent, ISubmitEvent, ErrorSchema } from "react-jsonschema-form";
-import "./SignUpPage.scss";
-import PageSection from "@components/PageSection";
import { SignupForm } from "@models/SignupForm";
import { buildFormSchema, buildUISchema } from "./FormUtils";
-import AsideSection from "@components/AsideSection";
-import MainSection from "@components/MainSection";
-import Checkboxes from "@components/Checkbox/Checkboxes";
-import RadioButtonWidget from "@components/RadioButton/RadioButtonWidget";
+import Checkboxes from "@components/Widgets/Checkbox/Checkboxes";
+import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget";
+import { TextSection } from "@components/index";
+import { colors } from "@theme/colors";
const customWidgets = {
"radio": RadioButtonWidget,
@@ -37,6 +36,65 @@ const renderList = (signUpForm: SignupForm) => {
)
}
+const StyledSection = styled(TextSection)`
+
+ & > div {
+ & > span {
+ color: ${colors.orange1};
+ }
+ }
+
+ & > aside {
+ justify-content: start;
+ li {
+ padding-bottom: 0.3rem;
+ }
+
+ .reserved {
+ color: ${colors.blue1};
+ }
+ }
+
+ form {
+ legend {
+ display: none;
+ }
+
+ & > div:last-child {
+ display: flex;
+ justify-content: center;
+
+ button[type="submit"] {
+ color: blue;
+ }
+ }
+ }
+
+ fieldset {
+ border: none;
+ padding: 0;
+ margin: 1rem 0;
+
+ .form-group {
+ padding-bottom: 0.5rem;
+
+ & > label {
+ margin: 0.5rem 0;
+ font-weight: 600;
+ display: block;
+ }
+ }
+
+ input[type="text"], input[type="email"], input[type="number"] {
+ display: block;
+ height: 48px;
+ width: 100%;
+ font-size: 1.5rem;
+ padding: 0 16px;
+ }
+ }
+`;
+
const SignUpPageView: React.FC = ({
signUpForm,
formData,
@@ -51,9 +109,6 @@ const SignUpPageView: React.FC = ({
return (
<>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ Kilta koostuu sähkötekniikan ja elektroniikan (ELEC) tutkinto-ohjelmissa opiskelevista opiskelijoista
-Vapaa-ajan
Arvot estrumquias doluptatur aut quam fugiti cus debit landisciis eatemperes eumquibus di blat que sim etus idis dolut labor ad magnat.
-Killan tehtävät ja tarina
-Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja saunailtoja. Valinnanvaraa on, joten
Yhteistyössä korkeakoulun kanssa, kilta kehittää
Takana lähes satavuotinen historia
- -Vaikka kilta onkin ajan hermolla, on sillä takana lähes satavuotinen historia. - Sähköinsinööriklubin tuore puheenjohtaja lausahti klubin ensimmäisessä - varsinaisessa kokouksessa 16. helmikuuta 1921: “Koska klubi nyt ensi kerran - kokoontuu, niin pyydän lausua toivomuksena, että klubin jäsenillä aina tulisi - olemaan hauskaa, että toverielämä kukoistaisi ja että myös sähkötekniikkaa - klubissa harrastettaisiin.”.
- -Vaikka ajat ovat muuttuneet, klubi on muuttunut killaksi ja jäsenmäärä kasvanut - alkuajoista valtavasti, ohjaavat nämä kolme asiaa edelleen killan toimintaa. Vaikka - pitkästä historiasta kannattaa olla ylpeä, ei sitä tarvitse kokea taakkana. Uutta - historiaa luodaan koko ajan ja tässä on meillä kaikilla mahdollista olla mukana. Ole - aktiivinen, ota asioista selvää ja osallistu kaikkeen mahdolliseen. Tulet varmasti - yllättymään kaikesta siitä mitä täältä keskuudestamme löytyy.
- -Meitä teekkareita on todella moneen lähtöön
- -Minkäänlaista perus- tai ihanneteekkaria ei ole olemassa, vaan paras teekkariuden
- 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
Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa - tutustua, jotta saa jonkinlaisen kuvan siitä vahvasta teekkarihengestä, joka - meillä täällä opinahjossamme vallitsee ja on vallinnut koko sen historian ajan. - Teekkariuteen kuuluu olennaisena osana mukautuminen ajan vaatimuksiin. Jos asiat - tehtäisiin aina vanhaa toistaen, ei voitaisi enää edes puhua teekkariudesta.
-
-
- Yliopiston jäsenedut
-
-
- Liity jäseneksi
-
-
-
-
- Herrasmies- tai herrasnaisuus kuuluu olennaisena osana teekkariuteen. Hyvät käytöstavat on syytä aina pitää mielessä, liikuttiin sitten puku päällä excuilla tai sitseillä tai haalarit päällä Tukholman illassa.
-
-
- Killan hallinto koostuu XXX henkilöstä.
-Organisaatio
- -Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama
Valtuuston toimintaa
- -Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta.
Hallituksen toimintaa
-Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen
-
- Vuoden 2019 hallinto
-
-
- Dolor sit amet
-
-
- Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit,
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Jäseneksi liittyminen on helppoa, hauskaa ja hyödyllistä 8 € jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
-
-
-
-
- Miksi alkaa kilta-aktiiviksi?
-- Näitä töitä tehdessä saa väkisinkin paljon uusia kavereita ja oppii monia palkallisessa työelämässä tarpeellisia taitoja. Eikä laajasta tuttavapiiristä ja monista kontakteista varmasti haittaa ole tulevaa työuraakaan ajatellen. Rahallista tai materiaalista hyötyä kiltatoiminnasta ei saa, eikä kukaan killan toimintaan mukaan tuleva sitä pyrikään tavoittelemaan. Mikä tärkeintä, kiltatoiminta on kivaa! -
-- » Uusia ystäviä, samanhenkistä seuraa -
-- » Loistava mahdollisuus kokeilla omia kykyjään -
-- » Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt -
-Runsaasti erilaisia tehtäviä
-
- Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle.
- » Haluatko
- »
- » Lorem ipsum -
-
+
- Aalto-yliopiston Sähköinsinöörikilta ry
+on opiskelijajärjestö, joka kokoaa yhteen laaja-alaisesti sähkötekniikan osaajia elektroniikasta nanoteknologiaan ja akustiikkaan. Sähköinsinöörikilta, tuttavallisemmin SIK, on perustettu vuonna 1921, ja sillä on nykyään yli 500 sähkötekniikkaa opiskelevaa tai yhdistyksestä muuten kiinnostunutta jäsentä. Killan tarkoitus on ajaa jäsentensä etua Aalto-yliopistossa ja Sähkötekniikan korkeakoulussa ELEC:ssä, huolehtia jäsenten hyvinvoinnista, edistää jäsenten ammatillista osaamista ja ylläpitää teekkarihenkeä.
+Jäsenten hyvinvoinnista kilta huolehtii järjestämällä vastapainoa opiskelulle erilaisten tapahtumien, kuten juhlien, saunailtojen ja urheilun muodossa. Kiltalaisten kokoontumispaikkana toimiva kiltahuone sijaitsee osoitteessa Maarintie 8. Kiltahuoneella jäsenet voivat opiskella, rentoutua opiskelun ohessa ja tavata muita kiltalaisia.
+Kilta järjestää vierailuja monipuolisesti alan yrityksiin ja järjestää yritystapahtumia. Kiltatoiminnassa käytetään samoja työkaluja, kuin yritysmaailmassa, ja kiltatoiminta pyrkii myös valmentamaan opiskelijoita työelämään. Ammatillista osaamista ja sähkötekniikan harrastamista tuetaan ylläpitämällä Elektroniikkapajaa, jossa kiltalaiset voivat tehdä omia projektejaan. Kiltalaisten voimin julkaistaan myös kiltalehti Sössöä, jossa on artikkeleita koskien niin kiltatoimintaa, opiskelua kuin vapaa-ajan harrastuksiakin.
-
- Sähkötekniikan korkeakoulun toimikunnat
-- Ylioppilaskunnalla on edustus suuressa osassa Aalto-yliopiston tiedekuntia. Elektroniikan, tietoliikenteen ja automaation tiedekunnan toimikuntiin eli hallopedeihin opiskelijavalinna EST- ja TLT-tutkinto-ohjelmien osalta tehdään osin ylioppilaskunnan edustajistossa Sähköinsinöörikillan esityksestä ja osin Sähköinsinöörikillassa. -
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus feugiat ante. Nam eget venenatis dui. Morbi purus dui, cursus at velit id, placerat scelerisque turpis. Nulla a mauris odio. Nulla at tempor mi. Maecenas et sapien eu lorem interdum luctus. Proin interdum, tortor eget tempor tristique, massa arcu suscipit ipsum, sit amet lacinia erat lorem sit amet ipsum. Praesent dictum odio auctor odio sodales pharetra. Quisque accumsan iaculis diam, a laoreet odio aliquet eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Pellentesque at hendrerit mi. Morbi at lacus finibus, pharetra urna sed, molestie tellus. Duis fermentum sodales leo. Nullam varius, massa in convallis sagittis, mi felis lacinia ipsum, viverra rhoncus nibh ipsum vel mi. Pellentesque ornare hendrerit malesuada.
- Suspendisse porta diam in massa suscipit congue. Nulla facilisi. Nulla egestas tempus arcu, vitae ultrices risus rhoncus ac. Ut porta orci neque, vel fermentum turpis fermentum in. Curabitur condimentum, mi in tristique pulvinar, mauris nibh bibendum neque, quis tincidunt purus eros quis dolor. Aliquam imperdiet nibh ac quam iaculis, at ullamcorper diam ultricies. Vestibulum egestas consequat justo non vehicula. Nam non egestas tellus.
- Praesent vel auctor ligula. Phasellus faucibus vulputate erat, non fringilla sem ultrices non. In vitae elit sit amet nisl interdum ultrices nec in ligula. Ut et turpis risus. Sed mattis varius nisl, in euismod diam fringilla ac. Nunc sed eros augue. Donec sit amet quam ex. Integer luctus nulla at est rutrum, a commodo est dapibus. Maecenas sagittis scelerisque blandit. Morbi congue tortor eros, sit amet vestibulum dolor tempor vitae. In pretium tellus at velit porttitor, vitae rutrum lacus suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum ultricies metus, nec placerat urna efficitur auctor. Morbi non purus magna. Ut at ex nec nunc dictum ultricies.
- Mauris volutpat nec sem sed malesuada. Sed eu scelerisque libero. Phasellus at mauris in ligula congue interdum et sit amet ante. Sed vestibulum, sem non congue molestie, quam massa euismod sem, non porta sem mauris vitae justo. Donec et fringilla tortor. Cras sed purus eget ante elementum mattis. Nunc elit nunc, volutpat sed congue ac, varius a ligula. Aenean sit amet laoreet dolor. Aenean finibus iaculis diam, quis lacinia nisi semper id. Phasellus eu nulla sed risus accumsan finibus. Nulla vel ante id mi vulputate ultrices. Cras finibus elementum tortor, at fringilla arcu facilisis ut. Cras vitae lectus pretium, posuere risus venenatis, congue metus. Phasellus vel dapibus felis.
- Maecenas tincidunt orci nulla. Sed maximus tellus nec lorem dignissim aliquet. Maecenas tincidunt dolor sed est laoreet, nec suscipit augue dictum. Vivamus venenatis rutrum molestie. Vestibulum in maximus leo. Duis a euismod nulla. Aenean luctus sodales quam, ut fringilla elit bibendum in. Ut in purus sit amet libero hendrerit hendrerit ac eget nisl. In ac mauris at felis suscipit scelerisque eu eget erat. Fusce accumsan tempus mauris, porta sagittis odio venenatis ac. Integer mollis nulla in velit dignissim imperdiet. Nunc ac magna ullamcorper, pretium mauris et, semper enim. Morbi aliquet accumsan turpis id rutrum. Donec purus tellus, pellentesque non nunc ac, ornare scelerisque ex.
-
-
-
-
- Jaokset—kokeile kiltatoimintaa vapaammin
-- Kiinnostaako kiltatoiminta, mutta vuoden kestävä sitoutuminen pelottaa? Jaokset mahdollistavat kiltatoiminnan kokeilemisen pienemmässä mittakaavassa. Jaokset toimivat varsin vapaamuotoisesti, mutta siltikin hyvässä hengessä. Mikäli Sinulla olisi hyvä idea, mitä kilta voisi jaosmaisesti toteuttaa, voit myös perustaa oman jaoksen. -
-Jäsenedut vuonna 2019
-Aalto-yliopiston tarjoamat monenlaiset edut
-- Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet. -
-
- »
+
+
+ Killan jokapäiväisestä toiminnasta on vastuussa 3-13 kiltalaisen muodostama hallitus. Hallituksen jäseniä ovat esimerkiksi puheenjohtaja, rahastonhoitaja ja sihteeri. Lisäksi hallituksessa saattaa olla killan erilaisten toimikuntien puheenjohtajia, joilla jokaisella on oma vastuualueensa. Hallitus kokoontuu normaalitilanteessa kerran viikossa tekemään päätöksiä ja keskustelemaan kiltaan liittyvistä aiheista. Jos jokin asia vaivaa mieltäsi tai sinulla on parannusehdotus, hallitus on yleensä oikea taho lähestyä.
+Hallituksen lisäksi killan arkea pyörittää lukuisa määrä toimihenkilöitä, joiden tehtävät ja vastuu riippuvat virasta. Hallitus ja toimihenkilöt valitaan aina vuodeksi jokasykysyisessä vaalikokouksessa, jota edeltää kaikille avoin haku tehtäviin. Vuoden kestävien tehtävien lisäksi killassa on useita jaoksia, joissa voi vapaamuotoisemmin toteuttaa ideoitaan ilman sitoutumista tiettyyn virkaan.
+Miksi lähteä kiltatoimintaan?
+Kiltatoiminnassa tutustut uusiin ihmisiin ja opit monia työelämässä tarpeellisia taitoja. Kiltatoiminta on hyvä tilaisuus kokeilla ja opetella aivan uusia asioita, sillä missään tehtävässä ei vaadita pitkää listaa esitietoja. Tehtävien työmäärä riippuu tehtävästä ja toimikunnasta, mutta yleisesti toiminta on hyvin joustavaa. Jos sinulla on kysymyksiä koskien kiltatoimintaa tai jotain tiettyä tehtävää, ota yhteyttä nykyisiin toimijoihin!
+Runsaasti erilaisia tehtäviä
+
+
+ Killassa löytyy tehtäviä moneen lähtöön. Olitpa koodaaja, urheilija, kulttuurin ystävä tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. Toimihenkilönä pääset esimerkiksi
+-
+
- » Edistämään opintoja ja abimarkkinointia +
- » Luomaan ja ylläpitämään yrityssuhteita +
- » Järjestämään juhlia ja saunailtoja +
- » Luomaan suhteita muiden yliopistojen opiskelijoihin +
Kilta tarjoaa palveluita
+
+
+
+ Tapahtumien, edunvalvonnan ja yrityskontaktien lisäksi kilta ylläpitää Maarintie 8:ssa sijaitsevaa kiltahuonetta, jossa kiltalaiset voivat viettää vapaasti aikaa opiskellen tai vapaa-ajan merkeissä. Kiltahuone on kaikille avoin tila, johon voi kuka tahansa vapaasti tulla rakennuksen aukioloaikojen puitteissa. Kiltahuoneella voi pelailla, lukea lehtiä ja nauttia kiltahuoneen myyntituotteista. Kiltahuoneella pidetään monesti kokouksia, peli-iltoja ja käytetään sitä myös opiskeluun. Tilavaan huoneeseen mahtuu tekemään monenlaista samaan aikaan!
+Kilta toimittaa myös Sössöä, joka on Sähköinsinöörikillan oma kiltalehti. Lehti ilmestyy fyysisenä lehtenä pari kertaa vuodessa, ja lisäksi artikkeleita ilmestyy sähköisessä muodossa painettujen lehtien välillä.
+Kiltalaisten omia projekteja varten kilta ylläpitää Otakaari 1:ssä sijaitsevaa Elektroniikkapajaa, josta löytyy tarvikkeita, työkaluja ja tilat monenlaisia töitä varten. Jos haluat tutustua tiloihin, ota yhteyttä pajavastaavaan!
+
- In English Page
-
+ <>
+ + Hey hey heyy +
+
+
+ + In English Page +
+