Merge branch 'chore/stylelint-fix' into 'master'

Chore: Stylelint fix

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

.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",
-    "@typescript-eslint/eslint-plugin": "^4.23.0",
-    "@typescript-eslint/parser": "^4.23.0",
+    "@types/styled-components": "^5.1.10",
+    "@typescript-eslint/eslint-plugin": "^4.27.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) }
-    50% { transform: rotate(180deg) }
-    100% { transform: rotate(360deg) }
+    0% { transform: rotate(0deg); }
+    50% { transform: rotate(180deg); }
+    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 }>`
-  ${(p) => p.colors}
+type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise" | "sik100Blue";
+
+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 =
-  "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 = {
+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";

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};
   }