Merge branch 'master' into 'production'

Prod deploy: Contacts page and minor fixes

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!71

.stylelintrc

@@ -1,9 +1,6 @@
 {
-  "processors": [
-    "stylelint-processor-styled-components"
-  ],
   "extends": [
-    "stylelint-config-recommended",
+    "stylelint-config-standard",
     "stylelint-config-styled-components"
   ],
   "syntax": "css"

package.json

@@ -34,40 +34,39 @@
   },
   "devDependencies": {
     "@types/js-cookie": "^2.2.6",
-    "@types/react": "^17.0.5",
+    "@types/react": "^17.0.11",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-csv": "^1.1.1",
-    "@types/react-dom": "^17.0.5",
+    "@types/react-dom": "^17.0.7",
     "@types/react-jsonschema-form": "^1.7.5",
     "@types/shortid": "^0.0.29",
-    "@types/styled-components": "^5.1.9",
+    "@types/styled-components": "^5.1.10",
-    "@typescript-eslint/eslint-plugin": "^4.23.0",
+    "@typescript-eslint/eslint-plugin": "^4.27.0",
-    "@typescript-eslint/parser": "^4.23.0",
+    "@typescript-eslint/parser": "^4.27.0",
     "babel-plugin-styled-components": "^1.12.0",
-    "eslint": "^7.26.0",
+    "eslint": "^7.28.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-plugin-import": "^2.23.1",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^6.0.0",
-    "next-sitemap": "^1.6.57",
+    "next-sitemap": "^1.6.116",
     "npm-run-all": "^4.1.5",
     "stylelint": "^13.13.1",
-    "stylelint-config-recommended": "^5.0.0",
+    "stylelint-config-standard": "^22.0.0",
     "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0",
     "testcafe": "^1.14.2",
-    "typescript": "^4.2.4"
+    "typescript": "^4.3.2"
   },
   "dependencies": {
-    "@next/bundle-analyzer": "^10.2.0",
+    "@next/bundle-analyzer": "^10.2.3",
     "axios": "^0.21.1",
-    "date-fns": "^2.21.3",
+    "date-fns": "^2.22.1",
     "fast-deep-equal": "^3.1.3",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
-    "next": "^10.2.0",
+    "next": "^10.2.3",
     "normalize.css": "^8.0.1",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",

src/components/Accordion/Accordion.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import AccordionIcon from "./AccordionIcon";
 
 const Container = styled.div`
@@ -30,7 +30,6 @@ const Container = styled.div`
       font-size: 1.125rem;
       margin: auto;
     }
-
   }
 
   & > div {

src/components/Accordion/AccordionIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "../../theme/colors";
+import colors from "../../theme/colors";
 
 interface AccordionIconProps {
   open: boolean;

src/components/AddLink.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentProps } from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import { Link } from "@components/index";
 import AddIcon from "@components/AddIcon";
 

src/components/AdminHeader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import HeaderLogo from "./HeaderLogo";
 
 const Header = styled.header`

src/components/Button.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 
 interface ButtonProps {
   onClick: () => void;

src/components/Card.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Image from "next/image";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import { Link } from "@components/index";
 import breakpoints from "@theme/breakpoints";
 
@@ -42,7 +42,6 @@ const StyledCard = styled.article`
     }
   }
 
-
   h3 {
     padding: 0.5rem;
     font-size: 1.5rem;
@@ -54,7 +53,6 @@ const StyledCard = styled.article`
 
     button {
       cursor: pointer;
-
       padding: 0.8rem 2rem;
       margin: 0.5rem;
       font-size: 0.8rem;
@@ -74,7 +72,7 @@ const WrappedCard: React.FC<WrappedCardProps> = ({
 }) => (
   <StyledCard {...props}>
     {image && (
-    <Image src={image.src} alt={image.alt} layout="responsive" width={0} height={0} objectFit="scale-down" />
+      <Image src={image.src} alt={image.alt} layout="responsive" width={0} height={0} objectFit="scale-down" />
     )}
     <p>{startTime}</p>
     <h3>{title}</h3>

src/components/ContactCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Image from "next/image";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 
 const Card = styled.article`
   display: flex;

src/components/CrossFadeImages.tsx

@@ -45,21 +45,22 @@ const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
 
   const animation = keyframes`
     0% {
-      opacity:1;
+      opacity: 1;
     }
     ${(presentationTime / TOTAL_TIME) * 100}% {
-      opacity:1;
+      opacity: 1;
     }
     ${(1 / len) * 100}% {
-      opacity:0;
+      opacity: 0;
     }
     ${100 - ((fadeTime / TOTAL_TIME) * 100)}% {
-      opacity:0;
+      opacity: 0;
     }
+
     100% {
-      opacity:1;
+      opacity: 1;
     }
-  `;
+`;
 
   const delays = images.map((_, idx) => idx * SINGLE_IMAGE_TIME).reverse();
 

src/components/Divider.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 
 const Divider = styled.hr`
   width: 98%;

src/components/DropDownBox.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 
 interface DropDownBoxProps {
   onMouseEnter: () => void;

src/components/Footer/FooterContent.tsx

@@ -7,6 +7,7 @@ import breakpoints from "@theme/breakpoints";
 const Columns = styled.div`
   display: flex;
   justify-content: space-between;
+
   & > div > div {
     margin-bottom: 1rem;
   }
@@ -56,9 +57,11 @@ const MarginSpace = styled.div`
 
 const Map = styled.div`
   flex: 1;
+
   @media screen and (max-width: ${breakpoints.mobile}) {
     display: none;
   }
+
   iframe {
     border: none;
   }

src/components/Header.tsx

@@ -11,6 +11,7 @@ import BlockScroll from "./BlockScroll";
 const StyledHeader = styled.header`
   display: flex;
   flex-flow: row nowrap;
+
   @media screen and (max-width: ${breakpoints.mobile}) {
     flex-flow: column nowrap;
   }
@@ -20,11 +21,9 @@ const Sticky = styled.div<{ $isHidden?: boolean; $mobileMenuOpen?: boolean }>`
   position: sticky;
   top: 0;
   z-index: 10;
-
   padding: 0 1rem;
   background-color: ${colors.darkBlue};
   transition: all 200ms ease-out;
-
   height: ${(p) => (p.$mobileMenuOpen ? "100vh" : "unset")};
 
   ${(p) => (p.$isHidden ? (`

src/components/Hero/Hero.tsx

@@ -9,11 +9,11 @@ const Container = styled.div`
   justify-content: space-between;
   position: relative;
   padding: 0;
-
   min-height: 75vh;
 
   section {
     padding: 2rem 6rem;
+
     @media screen and (max-width: ${breakpoints.mobile}) {
       padding: 1rem;
     }
@@ -40,6 +40,7 @@ const Container = styled.div`
 
   color: ${colors.white};
   background-color: ${colors.darkBlue};
+
   a:hover {
     color: ${colors.white};
   }

src/components/Hero/HeroAside.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import { Link } from "@components/index";
 
 interface HeroAsideItemProps {
@@ -39,6 +39,7 @@ interface HeroAsideProps {
 // TODO: Color combos
 const Aside = styled.aside<{ colors: string }>`
   ${(p) => p.colors}
+
   flex: 4;
   display: flex;
   flex-direction: column;
@@ -58,7 +59,6 @@ const Aside = styled.aside<{ colors: string }>`
       line-height: 2rem;
     }
 
-
     & > p {
       font-weight: 600;
       margin-bottom: 2rem;

src/components/Hero/HeroPrimaryButtons.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 
 const Buttons = styled.div<{ row?: boolean }>`
   min-width: 20%;
@@ -20,7 +20,7 @@ const Buttons = styled.div<{ row?: boolean }>`
     margin: 0.5rem;
     font-size: 0.8rem;
     font-weight: 800;
-    letter-spacing: .1em;
+    letter-spacing: 0.1em;
     text-transform: uppercase;
     border: 1px solid ${colors.lightTurquoise};
 

src/components/Hero/HeroPrimarySection.tsx

@@ -29,7 +29,7 @@ const Section = styled.section`
 
     &:hover {
       color: ${colors.white};
-      text-decoration: none
+      text-decoration: none;
     }
   }
 `;

src/components/Hero/HeroSecondarySection.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 
 const Note = styled.span`
   color: white;

src/components/Loader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 
 const Loader = styled((props) => (
   <div {...props}>
@@ -15,9 +15,9 @@ const Loader = styled((props) => (
   height: 1em;
 
   @keyframes rotation {
-    0% { transform: rotate(0deg) }
+    0% { transform: rotate(0deg); }
-    50% { transform: rotate(180deg) }
+    50% { transform: rotate(180deg); }
-    100% { transform: rotate(360deg) }
+    100% { transform: rotate(360deg); }
   }
 
   & > div {

src/components/Navigation.tsx

@@ -30,7 +30,6 @@ const Nav = styled.div`
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
-
   font-size: 0.8rem;
   color: ${colors.lightBlue};
   margin-left: 5rem;
@@ -53,7 +52,6 @@ const Nav = styled.div`
   svg {
     width: 1.5rem;
     height: 1.5rem;
-
     fill: ${colors.white};
     color: ${colors.white};
   }

src/components/NavigationMobile.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import { renderNavigationItems } from "./Navigation";
 
 const Nav = styled.nav`

src/components/PageLink.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import { Link } from "@components/index";
 
 interface PageLinkProps {
@@ -32,8 +32,8 @@ const StyledPageLink = styled.div`
     margin-left: 1rem;
     text-decoration: none;
     font-weight: normal;
-
     color: ${colors.blue1};
+
     &:hover {
       color: ${colors.darkBlue};
     }

src/components/Sections/CTASection.tsx

@@ -1,17 +1,75 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import { Link } from "@components/index";
 
-const Section = styled.section<{ colors: string }>`
+type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise" | "sik100Blue";
-  ${(p) => p.colors}
+
+const textColors = (bgColor: Colors) => {
+  switch (bgColor) {
+    case "orange1": return (
+      `
+        color: ${colors.white};
+        background-color: ${colors[bgColor]};
+        a:hover {
+          color: ${colors.darkBlue};
+        }
+      `
+    );
+    case "sik100Blue": return (
+      `
+        background-color: ${colors[bgColor]};
+        color: ${colors.sik100Gold};
+      `
+    );
+    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 Section = styled.section<{ bgColor: Colors }>`
+  ${({ bgColor }) => textColors(bgColor)}
 
   display: flex;
   justify-content: center;
   text-align: center;
   align-items: baseline;
   padding: 2rem 0;
-  border: 0.5rem colors.sik100Gold;
+  border: 0.5rem ${colors.sik100Gold};
   flex-flow: row wrap;
 
   a {
@@ -29,71 +87,25 @@ const Section = styled.section<{ colors: string }>`
 
   & > h1 {
     a {
-     
+      text-decoration: underline;
-    text-decoration: underline;
     }
+
     a:hover {
       text-decoration: none;
     }
   }
 `;
 
-type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise" | "sik100Blue";
-
 interface CTASectionProps extends React.HTMLAttributes<HTMLDivElement> {
   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 "sik100Blue": return `
-background-color: ${colors[bgColor]};
-color: ${colors.sik100Gold};
-  `;
-    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<CTASectionProps> = ({
   bgColor = "orange1", link, linkText, children, ...props
 }) => (
-  <Section colors={textColors(bgColor)} {...props}>
+  <Section bgColor={bgColor} {...props}>
     <h1>{children}</h1>
     {link && (
       <Link to={link}>

src/components/Sections/CardSection.tsx

@@ -3,7 +3,6 @@ import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 
 const CardSection = styled.section`
-
   h6 {
     color: ${colors.orange1};
   }

src/components/Sections/FullWidthSection.tsx

@@ -4,7 +4,6 @@ import styled from "styled-components";
 const StyledSection = styled.section`
   display: block;
   padding: 1.5rem;
-
   grid-template-columns: 1fr auto;
   grid-template-rows: auto 1fr;
   grid-template-areas:

src/components/Sections/TextSection.tsx

@@ -6,10 +6,8 @@ import breakpoints from "@theme/breakpoints";
 const StyledSection = styled.section`
   display: grid;
   padding: 1.5rem;
-
   word-break: break-word;
   hyphens: auto;
-
   grid-template-columns: 1fr 2fr 1fr;
   grid-template-rows: 1fr auto;
   grid-template-areas:
@@ -45,7 +43,8 @@ const StyledSection = styled.section`
     margin-top: 0;
   }
 
-  & > div, p {
+  & > div,
+  p {
     grid-area: content;
   }
 
@@ -69,13 +68,16 @@ const StyledSection = styled.section`
   & > aside:first-of-type {
     grid-area: rightaside;
     padding-left: 1.5rem;
+
     @media screen and (max-width: ${breakpoints.mobile}) {
       padding-left: 0;
     }
   }
+
   & > aside:nth-of-type(2) {
     grid-area: leftaside;
     padding-right: 1.5rem;
+
     @media screen and (max-width: ${breakpoints.mobile}) {
       padding-left: 0;
     }

src/components/Widgets/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 
 const Container = styled.label`
   display: block;
@@ -34,7 +34,7 @@ const CustomCBoxElement = styled.span<{ checked?: boolean }>`
   width: 1em;
   background-color: ${(props) => (props.checked ? colors.blue1 : colors.grey2)};
 
-  &:focus &:before {
+  &:focus &::before {
     transition: box-shadow 150ms ease;
     content: '';
     display: block;

src/components/Widgets/RadioButton/RadioButton.tsx

@@ -28,7 +28,9 @@ const CustomRadioElement = styled.span<{ checked?: boolean }>`
   left: 0;
   height: 1em;
   width: 1em;
-  background-color: ${(props) => (props.checked ? "#57b2df" : "#efece4")}; /* blue1 or grey2 */
+
+  /* blue1 or grey2 */
+  background-color: ${(props) => (props.checked ? "#57b2df" : "#efece4")};
   border-radius: 50%;
 `;
 

src/components/Widgets/SignupQuestionsWidget/Question.tsx

@@ -1,6 +1,6 @@
 import React, { ButtonHTMLAttributes } from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 
 const RemoveButton = styled.button`
   background-color: ${colors.orange1} !important;

src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import styled from "styled-components";
 import { Draggable } from "react-beautiful-dnd";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import { Question, InputProps } from "./common";
 import OptionsWidget from "./OptionsWidget";
 import TypeWidget from "./TypeWidget";

src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx

@@ -12,7 +12,6 @@ const Widget = styled.div`
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
-
     background: none;
     padding: 0;
     margin: 1rem 0;
@@ -21,7 +20,6 @@ const Widget = styled.div`
       margin-right: 8px !important;
       margin-top: -2px !important;
     }
-
   }
 `;
 

src/pages/404.tsx

@@ -9,6 +9,7 @@ const NotFound = styled.main`
   display: flex;
   justify-content: center;
   align-items: center;
+
   p {
     text-align: center;
     font-size: 4rem;

src/pages/_app.tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 import { AppProps } from "next/app";
 import styled, { createGlobalStyle } from "styled-components";
 import { ToastContainer } from "react-toastify";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 import LocaleStore from "../i18n";
 
@@ -21,6 +21,7 @@ const GlobalCommonStyles = createGlobalStyle`
 
 html {
   font-family: ${fontFamily};
+
   /* 12px */
   font-size: ${fontSize * 0.75}pt;
   line-height: ${lineHeight};
@@ -106,7 +107,6 @@ li {
   font-weight: 600;
 }
 
-
 a {
   text-decoration: underline;
   color: ${colors.blue1};

src/theme/colors.ts

@@ -1,41 +1,4 @@
-export type Colors =
+const colors = {
-  "sik100-gold"|
-  "sik100-blue"|
-  "dark-blue" |
-  "light-blue" |
-  "white1" |
-  "black1" |
-  "grey1" |
-  "grey2" |
-  "orange1" |
-  "orange2" |
-  "blue1" |
-  "light-turquoise" |
-  "green1" |
-  "sand" |
-  "transparent" |
-  "inherit";
-
-export const ColorMapper = new Map<Colors, string>([
-  ["sik100-gold", "#fee469"],
-  ["sik100-blue", "#12123d"],
-  ["dark-blue", "#002d3a"],
-  ["light-blue", "#bfdbd9"],
-  ["white1", "#fff"],
-  ["black1", "#000"],
-  ["grey1", "#d4d0c7"],
-  ["grey2", "#efece4"],
-  ["orange1", "#d57a2d"],
-  ["orange2", "#dd934e"],
-  ["blue1", "#57b2df"],
-  ["light-turquoise", "#beddeb"],
-  ["green1", "#c0dcd9"],
-  ["sand", "#fdf9d7"],
-  ["transparent", "transparent"],
-  ["inherit", "inherit"],
-]);
-
-export const colors = {
   sik100Gold: "#fee469",
   sik100Blue: "#12123d",
   darkBlue: "#002d3a",
@@ -54,11 +17,4 @@ export const colors = {
   inherit: "inherit",
 };
 
-export type Colors2 = keyof typeof colors;
-
-export const colorToClass = (color: Colors): string => (color ? `color-div__${color}` : undefined);
-export const bgColorToClass = (color: Colors): string => (color ? `color-div__background_${color}` : undefined);
-export const hoverColorToClass = (color: Colors): string => (color ? `color-div__${color}Hoverable` : undefined);
-export const bgHoverColorToClass = (color: Colors): string => (color ? `color-div__background_${color}Hoverable` : undefined);
-
 export default colors;

src/views/ActualPage/ActualPageView.tsx

@@ -22,6 +22,7 @@ const Gallery = styled.div`
 
   @media screen and (max-width: ${breakpoints.mobile}) {
     flex-flow: column;
+
     & > div {
       min-height: 100vw;
     }

src/views/ContactsPage/ContactsPageView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { Divider, TextSection, Link } from "@components/index";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import ContactCard from "@components/ContactCard";
 
 import BoardJson from "./board.json";
@@ -9,11 +9,26 @@ import HvtmkJson from "./hvtmk.json";
 import MtmkJson from "./mtmk.json";
 import OptmkJson from "./optmk.json";
 import OtmkJson from "./otmk.json";
-import PtmkJson from "./ptmk.json";
+import EPtmkJson from "./eptmk.json";
 import SstmkJson from "./sstmk.json";
 import TtmkJson from "./ttmk.json";
 import UtmkJson from "./utmk.json";
 import YtmkJson from "./ytmk.json";
+import Others from "./others.json";
+
+const orderedCommittees = [
+  BoardJson,
+  HvtmkJson,
+  MtmkJson,
+  OptmkJson,
+  OtmkJson,
+  EPtmkJson,
+  SstmkJson,
+  TtmkJson,
+  UtmkJson,
+  YtmkJson,
+  Others,
+];
 
 const blank_profile = "/img/blank_profile.png";
 
@@ -25,6 +40,28 @@ const BlueLink = styled(Link)`
   }
 `;
 
+const IndexUL = styled.ul`
+  padding: 0;
+  list-style: none;
+
+  li::before {
+    content: attr(data-icon);
+    margin-right: 4px;
+  }
+`;
+
+const Index: React.FC<{ committees: typeof orderedCommittees }> = ({ committees }) => (
+  <IndexUL>
+    {committees.map(({ slug, name_fi }) => (
+      <BlueLink to={`#${slug}`} key={slug}>
+        <li data-icon="»">
+          {name_fi}
+        </li>
+      </BlueLink>
+    ))}
+  </IndexUL>
+);
+
 const Container = styled.div`
   color: ${colors.darkBlue};
 
@@ -92,74 +129,33 @@ const ContactsPageView: React.FC = () => (
         Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
         Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
       </p>
+      <aside>
+        <div>
+          <h6>Toimikuntaluettelo</h6>
+          <Index committees={orderedCommittees} />
+        </div>
+      </aside>
     </TextSection>
 
-    <TextSection>
+    {orderedCommittees.map((json) => (
-      <CommitteeContainer committee={BoardJson}>
+      <React.Fragment key={json.slug}>
-        <p>
+        {(json.slug !== "board") && (
-          {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
+          <Divider />
-          <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
+        )}
-            hallitus@sahkoinsinoorikilta.fi
+        <TextSection id={json.slug}>
-          </BlueLink>
+          <CommitteeContainer committee={json}>
-        </p>
+            {(json.slug === "board") && (
-      </CommitteeContainer>
+            <p>
-    </TextSection>
+              {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
-
+              <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
-    <Divider />
+                hallitus@sahkoinsinoorikilta.fi
-
+              </BlueLink>
-    <TextSection>
+            </p>
-      <CommitteeContainer committee={HvtmkJson} />
+            )}
-    </TextSection>
+          </CommitteeContainer>
-
+        </TextSection>
-    <Divider />
+      </React.Fragment>
-
+    ))}
-    <TextSection>
-      <CommitteeContainer committee={MtmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection>
-      <CommitteeContainer committee={OptmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection>
-      <CommitteeContainer committee={OtmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection id="eptmk">
-      <CommitteeContainer committee={PtmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection>
-      <CommitteeContainer committee={SstmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection id="ttmk">
-      <CommitteeContainer committee={TtmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection>
-      <CommitteeContainer committee={UtmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection>
-      <CommitteeContainer committee={YtmkJson} />
-    </TextSection>
-
-    <Divider />
   </>
 );
 

src/views/ContactsPage/board.json

@@ -1,160 +1,161 @@
 {
-    "name_fi": "Hallitus",
+  "slug": "board",
-    "name_en": "Board",
+  "name_fi": "Hallitus",
-    "roles": [
+  "name_en": "Board",
-      {
+  "roles": [
-        "name_fi": "Puheenjohtaja",
+    {
-        "name_en": "Chairman of the Board",
+      "name_fi": "Puheenjohtaja",
-        "representatives": [
+      "name_en": "Chairman of the Board",
-          {
+      "representatives": [
-            "name": "Johannes Ora",
+        {
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/chairman.jpg"
+          "name": "Johannes Ora",
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/chairman.jpg"
-        ]
+        }
-      },
+      ]
-      {
+    },
-        "name_fi": "Sihteeri",
+    {
-        "name_en": "Secretary",
+      "name_fi": "Sihteeri",
-        "representatives": [
+      "name_en": "Secretary",
-          {
+      "representatives": [
-            "name": "Salla Lyytikäinen",
+        {
-            "phone_number": null,
+          "name": "Salla Lyytikäinen",
-            "email": null,
+          "phone_number": null,
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/secretary.jpg"
+          "email": null,
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/secretary.jpg"
-        ] 
+        }
-      },
+      ]
-      {
+    },
-        "name_fi": "Rahastonhoitaja",
+    {
-        "name_en": "Treasurer",
+      "name_fi": "Rahastonhoitaja",
-        "representatives": [
+      "name_en": "Treasurer",
-          {
+      "representatives": [
-            "name": "Santeri Huhtala",
+        {
-            "phone_number": null,
+          "name": "Santeri Huhtala",
-            "email": null,
+          "phone_number": null,
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/treasurer.jpg"
+          "email": null,
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/treasurer.jpg"
-        ] 
+        }
-      },
+      ]
-      {
+    },
-        "name_fi": "Fuksitoimikunnan Puheenjohtaja",
+    {
-        "name_en": "",
+      "name_fi": "Fuksitoimikunnan Puheenjohtaja",
-        "representatives": [
+      "name_en": "",
-          {
+      "representatives": [
-            "name": "Toni Ojala",
+        {
-            "phone_number": null,
+          "name": "Toni Ojala",
-            "email": null,
+          "phone_number": null,
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/captain1.jpg"
+          "email": null,
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/captain1.jpg"
-        ] 
+        }
-      },
+      ]
-      {
+    },
-        "name_fi": "Fuksitoimikunnan puheenjohtajan adjutantti",
+    {
-        "name_en": "",
+      "name_fi": "Fuksitoimikunnan puheenjohtajan adjutantti",
-        "representatives": [
+      "name_en": "",
-          {
+      "representatives": [
-            "name": "Toni Lyttinen",
+        {
-            "phone_number": null,
+          "name": "Toni Lyttinen",
-            "email": null,
+          "phone_number": null,
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/captain2.jpg"
+          "email": null,
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/captain2.jpg"
-        ] 
+        }
-      },
+      ]
-      {
+    },
-        "name_fi": "Hovimestari",
+    {
-        "name_en": "",
+      "name_fi": "Hovimestari",
-        "representatives": [
+      "name_en": "",
-          {
+      "representatives": [
-            "name": "Eveliina Ahonen",
+        {
-            "phone_number": null,
+          "name": "Eveliina Ahonen",
-            "email": null,
+          "phone_number": null,
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/ceremonies.jpg"
+          "email": null,
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/ceremonies.jpg"
-        ] 
+        }
-      },
+      ]
-      {
+    },
-        "name_fi": "Hovineuvos",
+    {
-        "name_en": "",
+      "name_fi": "Hovineuvos",
-        "representatives": [
+      "name_en": "",
-          {
+      "representatives": [
-            "name": "Melisa Dönmez",
+        {
-            "phone_number": null,
+          "name": "Melisa Dönmez",
-            "email": null,
+          "phone_number": null,
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/court_cancelor.jpg"
+          "email": null,
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/court_cancelor.jpg"
-        ] 
+        }
-      },
+      ]
-      {
+    },
-        "name_fi": "ISOvastaava",
+    {
-        "name_en": "",
+      "name_fi": "ISOvastaava",
-        "representatives": [
+      "name_en": "",
-          {
+      "representatives": [
-            "name": "Heidi Mäkitalo",
+        {
-            "phone_number": null,
+          "name": "Heidi Mäkitalo",
-            "email": null,
+          "phone_number": null,
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/isocoordinator.jpg"
+          "email": null,
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/isocoordinator.jpg"
-        ] 
+        }
-      },
+      ]
-      {
+    },
-        "name_fi": "Hyvinvointimestari",
+    {
-        "name_en": "",
+      "name_fi": "Hyvinvointimestari",
-        "representatives": [
+      "name_en": "",
-          {
+      "representatives": [
-            "name": "Sauli Norja",
+        {
-            "phone_number": null,
+          "name": "Sauli Norja",
-            "email": null,
+          "phone_number": null,
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/wellbeing.jpg"
+          "email": null,
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/wellbeing.jpg"
-        ] 
+        }
-      },
+      ]
-      {
+    },
-        "name_fi": "Opintomestari",
+    {
-        "name_en": "",
+      "name_fi": "Opintomestari",
-        "representatives": [
+      "name_en": "",
-          {
+      "representatives": [
-            "name": "Simo Hakanummi",
+        {
-            "phone_number": null,
+          "name": "Simo Hakanummi",
-            "email": null,
+          "phone_number": null,
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/studies.jpg"
+          "email": null,
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/studies.jpg"
-        ] 
+        }
-      },
+      ]
-      {
+    },
-        "name_fi": "Teknologiamestari",
+    {
-        "name_en": "",
+      "name_fi": "Teknologiamestari",
-        "representatives": [
+      "name_en": "",
-          {
+      "representatives": [
-            "name": "Oskari Ponkala",
+        {
-            "phone_number": null,
+          "name": "Oskari Ponkala",
-            "email": null,
+          "phone_number": null,
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/technology.jpg"
+          "email": null,
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/technology.jpg"
-        ] 
+        }
-      },
+      ]
-      {
+    },
-        "name_fi": "Ulkomestari",
+    {
-        "name_en": "",
+      "name_fi": "Ulkomestari",
-        "representatives": [
+      "name_en": "",
-          {
+      "representatives": [
-            "name": "Oliver Hiekkamies",
+        {
-            "phone_number": null,
+          "name": "Oliver Hiekkamies",
-            "email": null,
+          "phone_number": null,
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/external.jpg"
+          "email": null,
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/external.jpg"
-        ] 
+        }
-      },
+      ]
-      {
+    },
-        "name_fi": "Yrityssuhdemestari",
+    {
-        "name_en": "",
+      "name_fi": "Yrityssuhdemestari",
-        "representatives": [
+      "name_en": "",
-          {
+      "representatives": [
-            "name": "Otto Julkunen",
+        {
-            "phone_number": null,
+          "name": "Otto Julkunen",
-            "email": null,
+          "phone_number": null,
-            "image": "https://static.sahkoinsinoorikilta.fi/img/board/corporate.jpg"
+          "email": null,
-          }
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/corporate.jpg"
-        ] 
+        }
-      }
+      ]
-    ]
+    }
-  }
+  ]
+}

src/views/ContactsPage/eptmk.json

@@ -0,0 +1,52 @@
+{
+  "slug": "eptmk",
+  "name_fi": "Elepajatoimikunta",
+  "name_en": "",
+  "roles": [
+    {
+      "name_fi": "Pajavastaava",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Karl Lipping"
+        }
+      ]
+    },
+    {
+      "name_fi": "Pajakisälli",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Tommi Sytelä"
+        },
+        {
+          "name": "Eerikki Eskola"
+        },
+        {
+          "name": "Arkadii Kolchin"
+        },
+        {
+          "name": "Samu Nyman"
+        },
+        {
+          "name": "Konsta Langi"
+        },
+        {
+          "name": "Johannes Viirimäki"
+        },
+        {
+          "name": "Justus Ojala"
+        },
+        {
+          "name": "Ville Tujunen"
+        },
+        {
+          "name": "Antti Tarkka"
+        },
+        {
+          "name": "Pyry Vaara"
+        }
+      ]
+    }
+  ]
+}

src/views/ContactsPage/hvtmk.json

@@ -1,55 +1,82 @@
 {
-    "name_fi": "Hyvinvointitoimikunta",
+  "slug": "hvtmk",
-    "name_en": "Committee of Wellbeing",
+  "name_fi": "Hyvinvointitoimikunta",
-    "roles": [
+  "name_en": "Committee of Wellbeing",
+  "roles": [
+    {
+      "name_fi": "Hyvinvointimestari",
+      "name_en": "Master of Wellbeing",
+      "representatives": [
         {
-            "name_fi": "Hyvinvointimestari",
+          "name": "Sauli Norja"
-            "name_en": "Master of Wellbeing",
-            "representatives": [
-                { "name": "Sauli Norja" }
-            ]
-        },
-        {
-            "name_fi": "Kulttuurivastaava",
-            "name_en": "Culture Representative",
-            "representatives": [
-                { "name": "Juha Anttila" },
-                { "name": "Aino Suomi" },
-                { "name": "Nestori Yrjönkoski" }
-            ]
-        },
-        {
-            "name_fi": "Liikuntavastaava",
-            "name_en": "Sports Representative",
-            "representatives": [
-                { "name": "Elmeri Pälikkö" },
-                { "name": "Joel Wickström" }
-            ]
-        },
-        {
-            "name_fi": "Kiltahuonevastaava",
-            "name_en": "Guild Room Representative",
-            "representatives": [
-                { "name": "Ilari Ojakorpi" }
-            ]
-        },
-        {
-            "name_fi": "Kiltapäiväkerhovastaava",
-            "name_en": "",
-            "representatives": [
-                { "name": "Samuel Laine" },
-                { "name": "Aleksanteri Vesala" }
-            ]
-        },
-        {
-            "name_fi": "Retkivastaava",
-            "name_en": "",
-            "representatives": [
-                { "name": "Jarno Mustonen" },
-                { "name": "Suvi Karanta" },
-                { "name": "Jesse Räisänen" },
-                { "name": "Mikko Suhonen" }
-            ]
         }
-    ]
+      ]
+    },
+    {
+      "name_fi": "Kulttuurivastaava",
+      "name_en": "Culture Representative",
+      "representatives": [
+        {
+          "name": "Juha Anttila"
+        },
+        {
+          "name": "Aino Suomi"
+        },
+        {
+          "name": "Nestori Yrjönkoski"
+        }
+      ]
+    },
+    {
+      "name_fi": "Liikuntavastaava",
+      "name_en": "Sports Representative",
+      "representatives": [
+        {
+          "name": "Elmeri Pälikkö"
+        },
+        {
+          "name": "Joel Wickström"
+        }
+      ]
+    },
+    {
+      "name_fi": "Kiltahuonevastaava",
+      "name_en": "Guild Room Representative",
+      "representatives": [
+        {
+          "name": "Ilari Ojakorpi"
+        }
+      ]
+    },
+    {
+      "name_fi": "Kiltapäiväkerhovastaava",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Samuel Laine"
+        },
+        {
+          "name": "Aleksanteri Vesala"
+        }
+      ]
+    },
+    {
+      "name_fi": "Retkivastaava",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Jarno Mustonen"
+        },
+        {
+          "name": "Suvi Karanta"
+        },
+        {
+          "name": "Jesse Räisänen"
+        },
+        {
+          "name": "Mikko Suhonen"
+        }
+      ]
+    }
+  ]
 }

src/views/ContactsPage/mtmk.json

@@ -1,89 +1,136 @@
 {
-    "name_fi": "Mediatoimikunta",
+  "slug": "mtmk",
-    "name_en": "Media Committee",
+  "name_fi": "Mediatoimikunta",
-    "roles": [
+  "name_en": "Media Committee",
+  "roles": [
+    {
+      "name_fi": "Puheenjohtaja, Päätoimittaja",
+      "name_en": "Chair, Editor in Chief",
+      "representatives": [
         {
-            "name_fi": "Puheenjohtaja, Päätoimittaja",
+          "name": "Sasu Saalasti",
-            "name_en": "Chair, Editor in Chief",
+          "phone_number": null,
-            "representatives": [
+          "email": null,
-                {
+          "image": null
-                    "name": "Sasu Saalasti",
-                    "phone_number": null,
-                    "email": null,
-                    "image": null
-                }
-            ]
-        },
-        {
-            "name_fi": "Mediamestari",
-            "name_en": "Master of Media",
-            "representatives": [
-                { "name": "Salla Lyytikäinen" }
-            ]
-        },
-        {
-            "name_fi": "Toimittaja",
-            "name_en": "Journalist",
-            "representatives": [
-                { "name": "Tuukka Syrjänen" },
-                { "name": "Ilmari Kasvi" },
-                { "name": "Elias Hirvonen" },
-                { "name": "Miika Koskela" },
-                { "name": "Taneli Myllykangas" },
-                { "name": "Emmaleena Ahonen" },
-                { "name": "Ville-Pekka Laakkonen" },
-                { "name": "Sofia Öhman" },
-                { "name": "Nestori Yrjönkoski" },
-                { "name": "Jami Hyytiäinen" },
-                { "name": "Aleksanteri Vesala" }
-            ]
-        },
-        {
-            "name_fi": "Toimittaja & Valokuvaaja",
-            "name_en": "Journalist & Photographer",
-            "representatives": [
-                { "name": "Kiia Einola" }
-            ]
-        },
-        {
-            "name_fi": "Taittaja",
-            "name_en": "Layout Artist",
-            "representatives": [
-                { "name": "Aino Suomi" },
-                { "name": "Olli Komulainen" },
-                { "name": "Emilia Kortelainen" }
-            ]
-        },
-        {
-            "name_fi": "Taittaja & Valokuvaaja",
-            "name_en": "Layout Artist & Photographer",
-            "representatives": [
-                { "name": "Jonna Tammikivi" }
-            ]
-        },
-        {
-            "name_fi": "Valokuvaaja",
-            "name_en": "Photographer",
-            "representatives": [
-                { "name": "Suvi Karanta" },
-                { "name": "Mikko Haaparanta" },
-                { "name": "Johannes Viirimäki" }
-            ]
-        },
-        {
-            "name_fi": "Valokuvaaja & Graafikko",
-            "name_en": "Photographer & Graphic Artist",
-            "representatives": [
-                { "name": "Kalle Petäjäaho" },
-                { "name": "Maria Pöllä" }
-            ]
-        },
-        {
-            "name_fi": "Videokuvaaja",
-            "name_en": "Videographer",
-            "representatives": [
-                { "name": "Aaro Rasilainen" }
-            ]
         }
-    ]
+      ]
+    },
+    {
+      "name_fi": "Mediamestari",
+      "name_en": "Master of Media",
+      "representatives": [
+        {
+          "name": "Salla Lyytikäinen"
+        }
+      ]
+    },
+    {
+      "name_fi": "Toimittaja",
+      "name_en": "Journalist",
+      "representatives": [
+        {
+          "name": "Tuukka Syrjänen"
+        },
+        {
+          "name": "Ilmari Kasvi"
+        },
+        {
+          "name": "Elias Hirvonen"
+        },
+        {
+          "name": "Miika Koskela"
+        },
+        {
+          "name": "Taneli Myllykangas"
+        },
+        {
+          "name": "Emmaleena Ahonen"
+        },
+        {
+          "name": "Ville-Pekka Laakkonen"
+        },
+        {
+          "name": "Sofia Öhman"
+        },
+        {
+          "name": "Nestori Yrjönkoski"
+        },
+        {
+          "name": "Jami Hyytiäinen"
+        },
+        {
+          "name": "Aleksanteri Vesala"
+        }
+      ]
+    },
+    {
+      "name_fi": "Toimittaja & Valokuvaaja",
+      "name_en": "Journalist & Photographer",
+      "representatives": [
+        {
+          "name": "Kiia Einola"
+        }
+      ]
+    },
+    {
+      "name_fi": "Taittaja",
+      "name_en": "Layout Artist",
+      "representatives": [
+        {
+          "name": "Aino Suomi"
+        },
+        {
+          "name": "Olli Komulainen"
+        },
+        {
+          "name": "Emilia Kortelainen"
+        }
+      ]
+    },
+    {
+      "name_fi": "Taittaja & Valokuvaaja",
+      "name_en": "Layout Artist & Photographer",
+      "representatives": [
+        {
+          "name": "Jonna Tammikivi"
+        }
+      ]
+    },
+    {
+      "name_fi": "Valokuvaaja",
+      "name_en": "Photographer",
+      "representatives": [
+        {
+          "name": "Suvi Karanta"
+        },
+        {
+          "name": "Mikko Haaparanta"
+        },
+        {
+          "name": "Johannes Viirimäki"
+        }
+      ]
+    },
+    {
+      "name_fi": "Valokuvaaja & Graafikko",
+      "name_en": "Photographer & Graphic Artist",
+      "representatives": [
+        {
+          "name": "Kalle Petäjäaho"
+        },
+        {
+          "name": "Maria Pöllä"
+        }
+      ]
+    },
+    {
+      "name_fi": "Videokuvaaja",
+      "name_en": "Videographer",
+      "representatives": [
+        {
+          "name": "Aaro Rasilainen"
+        }
+      ]
+    }
+  ]
 }

src/views/ContactsPage/optmk.json

@@ -1,31 +1,46 @@
 {
-    "name_fi": "Opintotoimikunta",
+  "slug": "optmk",
-    "name_en": "Study Committee",
+  "name_fi": "Opintotoimikunta",
-    "roles": [
+  "name_en": "Study Committee",
+  "roles": [
+    {
+      "name_fi": "Opintomestari",
+      "name_en": "Master of Studies",
+      "representatives": [
         {
-            "name_fi": "Opintomestari",
+          "name": "Simo Hakanummi"
-            "name_en": "Master of Studies",
-            "representatives": [
-                { "name": "Simo Hakanummi" }
-            ]
-        },
-        {
-            "name_fi": "Opintovastaava",
-            "name_en": "Study Coordinator",
-            "representatives": [
-                { "name": "Miina-Maija Simonen" },
-                { "name": "Tomi Valkonen" },
-                { "name": "Leo Lahti" },
-                { "name": "Ville-Pekka Laakkonen" },
-                { "name": "Samu Nyman" } 
-            ]
-        },
-        {
-            "name_fi": "Abimarkkinointi Vastaava",
-            "name_en": "",
-            "representatives": [
-                { "name": "Iikka Huttu" }
-            ]
         }
-    ]
+      ]
+    },
+    {
+      "name_fi": "Opintovastaava",
+      "name_en": "Study Coordinator",
+      "representatives": [
+        {
+          "name": "Miina-Maija Simonen"
+        },
+        {
+          "name": "Tomi Valkonen"
+        },
+        {
+          "name": "Leo Lahti"
+        },
+        {
+          "name": "Ville-Pekka Laakkonen"
+        },
+        {
+          "name": "Samu Nyman"
+        }
+      ]
+    },
+    {
+      "name_fi": "Abimarkkinointi Vastaava",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Iikka Huttu"
+        }
+      ]
+    }
+  ]
 }

src/views/ContactsPage/others.json

@@ -0,0 +1,61 @@
+{
+  "slug": "others",
+  "name_fi": "Muut",
+  "name_en": "Other officials",
+  "roles": [
+    {
+      "name_fi": "Kiltapatruuna",
+      "name_en": "Guild elder",
+      "representatives": [
+        {
+          "name": "Erna Virtanen",
+          "phone_number": null,
+          "email": null
+        },
+        {
+          "name": "Emmaleena Ahonen",
+          "phone_number": null,
+          "email": null
+        }
+      ]
+    },
+    {
+      "name_fi": "TEK-yhdyshenkilö",
+      "name_en": "TEK contact person",
+      "representatives": [
+        {
+          "name": "Mikael Liimatainen",
+          "phone_number": null,
+          "email": null
+        }
+      ]
+    },
+    {
+      "name_fi": "Sklubi-yhdyshenkilö",
+      "name_en": "Sklubi contact person",
+      "representatives": [
+        {
+          "name": "Ella Eilola",
+          "phone_number": null,
+          "email": null
+        }
+      ]
+    },
+    {
+      "name_fi": "Arkistonhoitaja",
+      "name_en": "Archivist",
+      "representatives": [
+        {
+          "name": "Antti Mäki",
+          "phone_number": null,
+          "email": null
+        },
+        {
+          "name": "Jonna Tammikivi",
+          "phone_number": null,
+          "email": null
+        }
+      ]
+    }
+  ]
+}

src/views/ContactsPage/otmk.json

@@ -1,66 +1,115 @@
 {
-    "name_fi": "Ohjelmatoimikunta",
+  "slug": "otmk",
-    "name_en": "Entertainment Committee",
+  "name_fi": "Ohjelmatoimikunta",
-    "roles": [
+  "name_en": "Entertainment Committee",
+  "roles": [
+    {
+      "name_fi": "Hovimestari",
+      "name_en": "Master of Ceremonies",
+      "representatives": [
         {
-            "name_fi": "Hovimestari",
+          "name": "Eveliina Ahonen"
-            "name_en": "Master of Ceremonies",
-            "representatives": [
-                { "name": "Eveliina Ahonen" }
-            ]
-        },
-        {
-            "name_fi": "Hovineuvos",
-            "name_en": "Court Counsellor",
-            "representatives": [
-                { "name": "Melisa Dönmez" }
-            ]
-        },
-        {
-            "name_fi": "Emäntä",
-            "name_en": "",
-            "representatives": [
-                { "name": "Oona Karjalainen" },
-                { "name": "Emilia Kortelainen" },
-                { "name": "Venla Vastamäki" }
-            ]
-        },
-        {
-            "name_fi": "Isäntä",
-            "name_en": "",
-            "representatives": [
-                { "name": "Henry Jaakkola" },
-                { "name": "Sakke Kangas" },
-                { "name": "Otto Torkkeli" },
-                { "name": "Tommi Oinonen" },
-                { "name": "Eero Ketonen" }
-            ]
-        },
-        {
-            "name_fi": "Lukkari",
-            "name_en": "",
-            "representatives": [
-                { "name": "Tuomo Leino" },
-                { "name": "Jami Hyytiäinen" },
-                { "name": "Tuomas Pajunpää" },
-                { "name": "Samuel Laine" },
-                { "name": "Toni Miilunpalo" },
-                { "name": "Ville Kaakinen"},
-                { "name": "Eero Torpo"},
-                { "name": "Sauli Norja"}
-            ]
-        },
-        {
-            "name_fi": "Lukkarikisällit",
-            "name_en": "",
-            "representatives": [
-                { "name": "Jesse Räisänen" },
-                { "name": "Eino Laakso" },
-                { "name": "Sakari Harjunpää" },
-                { "name": "Niilo Ojala" },
-                { "name": "Iikka Huttu" },
-                { "name": "Akseli Järvinen" }
-            ]
         }
-    ]
+      ]
+    },
+    {
+      "name_fi": "Hovineuvos",
+      "name_en": "Court Counsellor",
+      "representatives": [
+        {
+          "name": "Melisa Dönmez"
+        }
+      ]
+    },
+    {
+      "name_fi": "Emäntä",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Oona Karjalainen"
+        },
+        {
+          "name": "Emilia Kortelainen"
+        },
+        {
+          "name": "Venla Vastamäki"
+        }
+      ]
+    },
+    {
+      "name_fi": "Isäntä",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Henry Jaakkola"
+        },
+        {
+          "name": "Sakke Kangas"
+        },
+        {
+          "name": "Otto Torkkeli"
+        },
+        {
+          "name": "Tommi Oinonen"
+        },
+        {
+          "name": "Eero Ketonen"
+        }
+      ]
+    },
+    {
+      "name_fi": "Lukkari",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Tuomo Leino"
+        },
+        {
+          "name": "Jami Hyytiäinen"
+        },
+        {
+          "name": "Tuomas Pajunpää"
+        },
+        {
+          "name": "Samuel Laine"
+        },
+        {
+          "name": "Toni Miilunpalo"
+        },
+        {
+          "name": "Ville Kaakinen"
+        },
+        {
+          "name": "Eero Torpo"
+        },
+        {
+          "name": "Sauli Norja"
+        }
+      ]
+    },
+    {
+      "name_fi": "Lukkarikisällit",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Jesse Räisänen"
+        },
+        {
+          "name": "Eino Laakso"
+        },
+        {
+          "name": "Sakari Harjunpää"
+        },
+        {
+          "name": "Niilo Ojala"
+        },
+        {
+          "name": "Iikka Huttu"
+        },
+        {
+          "name": "Akseli Järvinen"
+        }
+      ]
+    }
+  ]
 }

src/views/ContactsPage/ptmk.json

@@ -1,29 +0,0 @@
-{
-    "name_fi": "Elepajatoimikunta",
-    "name_en": "",
-    "roles": [
-        {
-            "name_fi": "Pajavastaava",
-            "name_en": "",
-            "representatives": [
-                { "name": "Karl Lipping" }
-            ]
-        },
-        {
-            "name_fi": "Pajakisälli",
-            "name_en": "",
-            "representatives": [
-                { "name": "Tommi Sytelä" },
-                { "name": "Eerikki Eskola" },
-                { "name": "Arkadii Kolchin" },
-                { "name": "Samu Nyman" },
-                { "name": "Konsta Langi" },
-                { "name": "Johannes Viirimäki" },
-                { "name": "Justus Ojala" },
-                { "name": "Ville Tujunen" },
-                { "name": "Antti Tarkka" },
-                { "name": "Pyry Vaara" }
-            ]
-        }
-    ]
-}

src/views/ContactsPage/sstmk.json

@@ -1,70 +1,91 @@
 {
-    "name_fi": "SIK100-toimikunta",
+  "slug": "sstmk",
-    "name_en": "",
+  "name_fi": "SIK100-toimikunta",
-    "roles": [
+  "name_en": "",
+  "roles": [
+    {
+      "name_fi": "Puheenjohtaja",
+      "name_en": "",
+      "representatives": [
         {
-            "name_fi": "Puheenjohtaja",
+          "name": "Erna Virtanen"
-            "name_en": "",
-            "representatives": [
-                { "name": "Erna Virtanen" }
-            ]
-        },
-        {
-            "name_fi": "Webivastaava",
-            "name_en": "",
-            "representatives": [
-                { "name": "Jaakko Koskela" }
-            ]
-        },
-        {
-            "name_fi": "Markkinointivastaava",
-            "name_en": "",
-            "representatives": [
-                { "name": "Sasu Saalasti" }
-            ]
-        },
-        {
-            "name_fi": "Yritysvastaava",
-            "name_en": "",
-            "representatives": [
-                { "name": "Juuli Leppänen" }
-            ]
-        },
-        {
-            "name_fi": "Seminaarivastaava",
-            "name_en": "",
-            "representatives": [
-                { "name": "Sini Huhtinen" }
-            ]
-        },
-        {
-            "name_fi": "Kevätkarnevaalimajuri",
-            "name_en": "",
-            "representatives": [
-                { "name": "Olli Komulainen" }
-            ]
-        },
-        {
-            "name_fi": "PoTa100-pääjuhlatirehtööri",
-            "name_en": "",
-            "representatives": [
-                { "name": "Emmaleena Ahonen" },
-                { "name": "Jonna Tammikivi" }
-            ]
-        },
-        {
-            "name_fi": "PoTa100-jatkokuvernööri",
-            "name_en": "",
-            "representatives": [
-                { "name": "Mikael Liimatainen" }
-            ]
-        },
-        {
-            "name_fi": "PoTa100-sillistirehtööri",
-            "name_en": "",
-            "representatives": [
-                { "name": "Tuomo Leino" }
-            ]
         }
-    ]
+      ]
-}
+    },
+    {
+      "name_fi": "Webivastaava",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Jaakko Koskela"
+        }
+      ]
+    },
+    {
+      "name_fi": "Markkinointivastaava",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Sasu Saalasti"
+        }
+      ]
+    },
+    {
+      "name_fi": "Yritysvastaava",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Juuli Leppänen"
+        }
+      ]
+    },
+    {
+      "name_fi": "Seminaarivastaava",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Sini Huhtinen"
+        }
+      ]
+    },
+    {
+      "name_fi": "Kevätkarnevaalimajuri",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Olli Komulainen"
+        }
+      ]
+    },
+    {
+      "name_fi": "PoTa100-pääjuhlatirehtööri",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Emmaleena Ahonen"
+        },
+        {
+          "name": "Jonna Tammikivi"
+        }
+      ]
+    },
+    {
+      "name_fi": "PoTa100-jatkokuvernööri",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Mikael Liimatainen"
+        }
+      ]
+    },
+    {
+      "name_fi": "PoTa100-sillistirehtööri",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Tuomo Leino"
+        }
+      ]
+    }
+  ]
+}

src/views/ContactsPage/ttmk.json

@@ -1,35 +1,55 @@
 {
-    "name_fi": "Teknologiatoimikunta",
+  "slug": "ttmk",
-    "name_en": "",
+  "name_fi": "Teknologiatoimikunta",
-    "roles": [
+  "name_en": "",
+  "roles": [
+    {
+      "name_fi": "Teknologiamestari",
+      "name_en": "",
+      "representatives": [
         {
-            "name_fi": "Teknologiamestari",
+          "name": "Oskari Ponkala"
-            "name_en": "",
-            "representatives": [
-                { "name": "Oskari Ponkala" }
-            ]
-        },
-        {
-            "name_fi": "Tekniikkavastaava",
-            "name_en": "",
-            "representatives": [
-                { "name": "Antti Mäki" }
-            ]
-        },
-        {
-            "name_fi": "Web-Kisälli",
-            "name_en": "",
-            "representatives": [
-                { "name": "Ilari Ojakorpi" },
-                { "name": "Leo Lahti" },
-                { "name": "Jyri Korhonen" },
-                { "name": "Tuukka Syrjänen" },
-                { "name": "Emmaleena Ahonen" },
-                { "name": "Mikko Suhonen" },
-                { "name": "Jaakko Koskela" },
-                { "name": "Justus Ojala" }
-            ]
         }
-    ]
+      ]
+    },
+    {
+      "name_fi": "Tekniikkavastaava",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Antti Mäki"
+        }
+      ]
+    },
+    {
+      "name_fi": "Web-Kisälli",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Ilari Ojakorpi"
+        },
+        {
+          "name": "Leo Lahti"
+        },
+        {
+          "name": "Jyri Korhonen"
+        },
+        {
+          "name": "Tuukka Syrjänen"
+        },
+        {
+          "name": "Emmaleena Ahonen"
+        },
+        {
+          "name": "Mikko Suhonen"
+        },
+        {
+          "name": "Jaakko Koskela"
+        },
+        {
+          "name": "Justus Ojala"
+        }
+      ]
+    }
+  ]
 }
-        

src/views/ContactsPage/utmk.json

@@ -1,43 +1,58 @@
 {
-    "name_fi": "Ulkotoimikunta",
+  "slug": "utmk",
-    "name_en": "External Affairs Committeee",
+  "name_fi": "Ulkotoimikunta",
-    "roles": [
+  "name_en": "External Affairs Committeee",
+  "roles": [
+    {
+      "name_fi": "Ulkomestari",
+      "name_en": "Master of External Affairs",
+      "representatives": [
         {
-            "name_fi": "Ulkomestari",
+          "name": "Oliver Hiekkamies"
-            "name_en": "Master of External Affairs",
-            "representatives": [
-                { "name": "Oliver Hiekkamies" }
-            ]
-        },
-        {
-            "name_fi": "Kv-ISOvastaava",
-            "name_en": "International Tutor Coordinator",
-            "representatives": [
-                { "name": "Elias Hirvonen" }
-            ]
-        },
-        {
-            "name_fi": "International Helper",
-            "name_en": "International Helper",
-            "representatives": [
-                { "name": "Ville-Pekka Laakkonen" }
-            ]
-        },
-        {
-            "name_fi": "Ulkosuhdevastaava",
-            "name_en": "Apprentice of External Affairs",
-            "representatives": [
-                { "name": "Leo Müller" },
-                { "name": "Eino Tyrvänen" },
-                { "name": "Pekka Aho" }
-            ]
-        },
-        {
-            "name_fi": "Ulkowanhus",
-            "name_en": "",
-            "representatives": [
-                { "name": "Jyri Korhonen" }
-            ]
         }
-    ]
+      ]
+    },
+    {
+      "name_fi": "Kv-ISOvastaava",
+      "name_en": "International Tutor Coordinator",
+      "representatives": [
+        {
+          "name": "Elias Hirvonen"
+        }
+      ]
+    },
+    {
+      "name_fi": "International Helper",
+      "name_en": "International Helper",
+      "representatives": [
+        {
+          "name": "Ville-Pekka Laakkonen"
+        }
+      ]
+    },
+    {
+      "name_fi": "Ulkosuhdevastaava",
+      "name_en": "Apprentice of External Affairs",
+      "representatives": [
+        {
+          "name": "Leo Müller"
+        },
+        {
+          "name": "Eino Tyrvänen"
+        },
+        {
+          "name": "Pekka Aho"
+        }
+      ]
+    },
+    {
+      "name_fi": "Ulkowanhus",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Jyri Korhonen"
+        }
+      ]
+    }
+  ]
 }

src/views/ContactsPage/ytmk.json

@@ -1,33 +1,52 @@
 {
-    "name_fi": "Yrityssuhdetoimikunta",
+  "slug": "ytmk",
-    "name_en": "Corporate Relations Committee",
+  "name_fi": "Yrityssuhdetoimikunta",
-    "roles": [
+  "name_en": "Corporate Relations Committee",
+  "roles": [
+    {
+      "name_fi": "Yrityssuhdemestari",
+      "name_en": "Master of Corporate Relations",
+      "representatives": [
         {
-            "name_fi": "Yrityssuhdemestari",
+          "name": "Otto Julkunen"
-            "name_en": "Master of Corporate Relations",
-            "representatives": [
-                { "name": "Otto Julkunen" }
-            ]
-        },
-        {
-            "name_fi": "Excursiopäävastaava",
-            "name_en": "Head of Excursions",
-            "representatives": [
-                { "name": "Henry Gustafsson" }
-            ]
-        },
-        {
-            "name_fi": "Yrityssuhdevastaava",
-            "name_en": "Apprentice of Corporate Relations",
-            "representatives": [
-                { "name": "Iikka Huttu" },
-                { "name": "Arkadii Kolchin" },
-                { "name": "Oskari Luukkonen" },
-                { "name": "Niilo Ojala" },
-                { "name": "Emma Reinikainen" },
-                { "name": "Melina Sundell" },
-                { "name": "Elma Tuohimetsä" }
-            ]
         }
-    ]
+      ]
+    },
+    {
+      "name_fi": "Excursiopäävastaava",
+      "name_en": "Head of Excursions",
+      "representatives": [
+        {
+          "name": "Henry Gustafsson"
+        }
+      ]
+    },
+    {
+      "name_fi": "Yrityssuhdevastaava",
+      "name_en": "Apprentice of Corporate Relations",
+      "representatives": [
+        {
+          "name": "Iikka Huttu"
+        },
+        {
+          "name": "Arkadii Kolchin"
+        },
+        {
+          "name": "Oskari Luukkonen"
+        },
+        {
+          "name": "Niilo Ojala"
+        },
+        {
+          "name": "Emma Reinikainen"
+        },
+        {
+          "name": "Melina Sundell"
+        },
+        {
+          "name": "Elma Tuohimetsä"
+        }
+      ]
+    }
+  ]
 }

src/views/CorporatePage/JobAdList.tsx

@@ -12,6 +12,7 @@ interface JobAdListProps {
 
 const List = styled.ul`
   padding: 0;
+
   li {
     margin: 1rem 0;
     list-style: none;

src/views/EventPage/EventPageView.tsx

@@ -22,6 +22,7 @@ const StyledTextSection = styled(TextSection)`
 
   & > h1 {
     color: ${colors.darkBlue};
+
     p {
       color: ${colors.orange1};
     }

src/views/FeedPage/FeedPageView.tsx

@@ -19,6 +19,7 @@ const StyledTextSection = styled(TextSection)`
 
   & > h1 {
     color: ${colors.darkBlue};
+
     p {
       color: ${colors.orange1};
     }

src/views/FreshmenPage/FreshmenPageView.tsx

@@ -14,7 +14,7 @@ const EMAIL_LINK_MAILTO = `mailto:${EMAIL_LINK}`;
 
 const ImageContainer = styled.div`
   width: 100%;
-  display: block
+  display: block;
 `;
 
 const FreshmenPageView: React.FC = () => (

src/views/FrontPage/FrontPageView.tsx

@@ -11,7 +11,7 @@ import {
 } from "@components/index";
 import Event from "@models/Event";
 import Post from "@models/Feed";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 
 import FullWidthSection from "@components/Sections/FullWidthSection";
 import noop from "@utils/noop";
@@ -42,6 +42,7 @@ const cardTimeOpts: Intl.DateTimeFormatOptions = {
 
 const SponsorReel = styled.div`
   text-align: center;
+
   & > div {
     display: flex;
     flex-flow: row wrap;
@@ -54,6 +55,7 @@ const SponsorReel = styled.div`
       min-width: 200px;
     }
   }
+
   a {
     color: ${colors.blue1};
     text-decoration: underline;

src/views/GuildPage/GuildPageView.tsx

@@ -30,16 +30,18 @@ const Column = styled.div`
 
   section:last-of-type {
     background-color: ${colors.lightBlue};
+
     p {
       a {
         font-weight: normal;
       }
     }
   }
+
   ul {
     list-style: none;
 
-    li:before {
+    li::before {
       content: attr(data-icon);
       margin-right: 4px;
     }

src/views/InEnglishPage/InEnglishPageView.tsx

@@ -22,6 +22,7 @@ const Gallery = styled.div`
 
   @media screen and (max-width: ${breakpoints.mobile}) {
     flex-flow: column;
+
     & > div {
       min-height: 100vw;
     }

src/views/SignUpPage/SignUpPageView.tsx

@@ -5,7 +5,7 @@ import { SignupForm } from "@models/Signup";
 import Checkboxes from "@components/Widgets/Checkbox/Checkboxes";
 import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget";
 import { TextSection, ChangeLanguageButton } from "@components/index";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import FormWrapper from "@views/common/FormWrapper";
 import Loader from "@components/Loader";
 import { buildFormSchema, buildUISchema } from "./FormUtils";
@@ -32,6 +32,7 @@ const StyledSection = styled(TextSection)`
 
   & > aside {
     justify-content: start;
+
     li {
       padding-bottom: 0.3rem;
     }

src/views/admin/AdminCreateCommon.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { ISubmitEvent, IChangeEvent, ErrorSchema } from "react-jsonschema-form";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import Event from "@models/Event";
 import Post from "@models/Feed";
 import { SignupForm } from "@models/Signup";

src/views/admin/AdminListCommon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
 import AdminPageWrapper from "@views/common/AdminPageWrapper";
 
 const Main = styled.div`

src/views/common/FormWrapper.tsx

@@ -53,8 +53,7 @@ const FormStyleWrapper = styled(Form)`
   input[type="email"],
   input[type="number"],
   textarea,
-  select
+  select {
-  {
     display: block;
     width: 100%;
   }

src/views/common/LoadingView.tsx

@@ -22,10 +22,13 @@ const DotPulse = styled.div`
     0% {
       box-shadow: 9984px 0 0 -5px ${colors.white};
     }
+
     30% {
       box-shadow: 9984px 0 0 2px ${colors.white};
     }
-    60%, 100% {
+
+    60%,
+    100% {
       box-shadow: 9984px 0 0 -5px ${colors.white};
     }
   }
@@ -34,10 +37,13 @@ const DotPulse = styled.div`
     0% {
       box-shadow: 9999px 0 0 -5px ${colors.white};
     }
+
     30% {
       box-shadow: 9999px 0 0 2px ${colors.white};
     }
-    60%, 100% {
+
+    60%,
+    100% {
       box-shadow: 9999px 0 0 -5px ${colors.white};
     }
   }
@@ -46,17 +52,19 @@ const DotPulse = styled.div`
     0% {
       box-shadow: 10014px 0 0 -5px ${colors.white};
     }
+
     30% {
       box-shadow: 10014px 0 0 2px ${colors.white};
     }
-    60%, 100% {
+
+    60%,
+    100% {
       box-shadow: 10014px 0 0 -5px ${colors.white};
     }
   }
 
   display: inline-block;
   margin-left: 1.5rem;
-
   position: relative;
   left: -9999px;
   width: 10px;
@@ -66,9 +74,10 @@ const DotPulse = styled.div`
   color: ${colors.white};
   box-shadow: 9999px 0 0 -5px ${colors.white};
   animation: dotPulse 1.5s infinite linear;
-  animation-delay: .25s;
+  animation-delay: 0.25s;
 
-  &::before, &::after {
+  &::before,
+  &::after {
     content: '';
     display: inline-block;
     position: absolute;
@@ -89,7 +98,7 @@ const DotPulse = styled.div`
   &::after {
     box-shadow: 10014px 0 0 -5px ${colors.white};
     animation: dotPulseAfter 1.5s infinite linear;
-    animation-delay: .5s;
+    animation-delay: 0.5s;
   }
 `;
 

src/views/common/MarkdownStyles.tsx

@@ -7,7 +7,8 @@ const MarkdownStyles = styled(ReactMarkdown)`
     color: ${colors.black};
   }
 
-  h1, h3 {
+  h1,
+  h3 {
     color: ${colors.orange2};
   }