Merge branch 'master' into feature/next-js

src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import AccordionIcon from "./AccordionIcon";
 import { colors } from "@theme/colors";
@@ -12,7 +12,7 @@ const Container = styled.div`
   border-color: ${colors.lightTurquoise};
   border-width: 1px;
 
-  button {
+  & > button {
     display: flex;
     flex-flow: row nowrap;
     background-color: ${colors.white};
@@ -21,16 +21,16 @@ const Container = styled.div`
     padding: 0;
     border: 0;
     outline: none;
-  }
 
-  h5 {
-    display: flex;
-    flex: 1;
-    text-align: center;
-    padding-left: 1em;
-    color: ${colors.blue1};
-    font-size: 1.125rem;
-    margin: auto;
+    h5 {
+      flex: 1;
+      text-align: left;
+      padding-left: 1em;
+      color: ${colors.blue1};
+      font-size: 1.125rem;
+      margin: auto;
+    }
+
   }
 
   & > div {
@@ -45,55 +45,34 @@ const Panel = styled.div<{visible?: boolean}>`
   max-height: 15rem;
   transition: margin-top 400ms ease-in-out;
 
-  div {
-    min-width: 40px;
-    max-width: 40px;
-    margin: 0.6em;
-  }
-
-  p {
+  & > * {
     padding-left: 1em;
-    margin: auto;
   }
 `;
 
-export interface AccordionProps {
+interface AccordionProps {
   title: string;
 }
-export interface AccordionState {
-  isOpen: boolean;
-}
 
-class Accordion extends React.Component<AccordionProps, AccordionState> {
-  constructor(props: AccordionProps) {
-    super(props);
-    this.state = {
-      isOpen: false,
-    };
-  }
+const Accordion: React.FC<AccordionProps> = ({ title, children }) => {
+  const [isOpen, setOpen] = useState(false);
 
-  handleClick() {
-    this.setState((prevState) => ({
-      isOpen: !prevState.isOpen,
-    }));
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    return (
-      <Container>
-        <button type="button" onClick={() => this.handleClick()}>
-          <AccordionIcon open={isOpen} />
-          <h5>{this.props.title}</h5>
-        </button>
-        <div>
-          <Panel visible={isOpen}>
-            {this.props.children}
-          </Panel>
-        </div>
-      </Container>
-    );
+  const handleClick = () => {
+    setOpen(!isOpen);
   }
+  return (
+    <Container>
+      <button type="button" onClick={handleClick}>
+        <AccordionIcon open={isOpen} />
+        <h5>{title}</h5>
+      </button>
+      <div>
+        <Panel visible={isOpen}>
+          {children}
+        </Panel>
+      </div>
+    </Container>
+  );
 }
 
 export default Accordion;

src/components/Accordion/AccordionIcon.tsx

@@ -12,12 +12,12 @@ const Icon = styled.div<AccordionIconProps>`
   align-items: center;
   background-color: ${(p) => p.open ? colors.orange1 : colors.blue1};
   color: ${colors.white};
-  min-width: 40px;
-  max-width: 40px;
-  min-height: 40px;
-  max-height: 40px;
+  min-width: 2.5rem;
+  max-width: 2.5rem;
+  min-height: 2.5rem;
+  max-height: 2.5rem;
   margin: 0.2em;
-  font-size: 40px;
+  font-size: 2.5rem;
 
   ${(p) => p.open && (`
     span {

src/components/AdminSidebar.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import styled from "styled-components";
 import Anchor from "@components/Anchor";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 
 interface AdminSidebarProps {
   path: string;
@@ -13,7 +14,7 @@ const SideBar = styled.nav`
   margin-right: 1rem;
   background-color: ${colors.blue1};
 
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: ${breakpoints.mobile}) {
     margin-right: 0;
     margin-bottom: 1rem;
   }
@@ -23,7 +24,7 @@ const StyledLink = styled(Anchor)<{path: string}>`
   padding: 1rem 3rem 1rem 1rem;
   letter-spacing: 3px;
   text-transform: uppercase;
-  line-height: 20px;
+  line-height: 1.25;
   font-weight: bold;
   white-space: nowrap;
   color: ${colors.white};
@@ -37,7 +38,7 @@ const StyledLink = styled(Anchor)<{path: string}>`
     border-left: 4px solid ${colors.white};
   }
 
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: ${breakpoints.mobile}) {
     margin-bottom: 1px;
   }
 `;

src/components/Button.tsx

@@ -12,14 +12,10 @@ const StyledButton = styled.button<ButtonProps>`
   border-radius: none;
   padding: 0.8rem 2rem;
   margin: 0.5rem;
-  font-size: 13px;
+  font-size: 0.8rem;
   background: none;
   text-transform: uppercase;
 
-  @media screen and (max-width: 800px) {
-    font-size: 13px;
-  }
-
   &.hero {
     background-color: ${colors.darkBlue};
     color: ${colors.blue1};
@@ -38,7 +34,7 @@ const StyledButton = styled.button<ButtonProps>`
   }
 
   &.bordered {
-    font-size: 12px;
+    font-size: 0.75rem;
     font-weight: 800;
     color: ${colors.blue1};
     border: 1px solid ${colors.blue1};

src/components/Card.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
 import Anchor from "@components/Anchor";
+import breakpoints from "@theme/breakpoints";
 
 interface WrappedCardProps {
   title: string;
@@ -33,21 +34,19 @@ const StyledCard = styled.article`
   }
 
   p {
-    font-size: 16px;
+    font-size: 1rem;
     text-overflow: ellipsis;
     margin: 0 0 0.5rem;
     font-weight: 200;
-    line-height: 22px;
+    line-height: 1.375;
   }
 
   p:first-of-type {
     color: ${colors.orange1};
-    font-size: 0.9rem !important;
     font-weight: 600 !important;
 
-    @media screen and (max-width: 1200px) {
+    @media screen and (max-width: ${breakpoints.medium}) {
       margin: 0.5rem 0;
-      font-size: 16px;
     }
   }
 
@@ -63,7 +62,7 @@ const StyledCard = styled.article`
 
     padding: 0.8rem 2rem;
     margin: 0.5rem;
-    font-size: 13px;
+    font-size: 0.8rem;
     background: none;
     text-transform: uppercase;
     background-color: ${colors.blue1};

src/components/CommitteeContainer.tsx

@@ -21,7 +21,7 @@ const Container = styled.div`
     justify-content: center;
     text-transform: uppercase;
     letter-spacing: 3px;
-    line-height: 14px;
+    line-height: 0.75;
     font-weight: bold;
   }
 

src/components/ContactCard.tsx

@@ -12,7 +12,7 @@ const Card = styled.article`
 `;
 
 const ImageContainer = styled.div`
-  padding: 15px;
+  padding: 1rem;
   display: flex;
   flex-shrink: 0;
   justify-content: center;

src/components/DropDownBox.tsx

@@ -13,7 +13,7 @@ const Box = styled.div`
   margin-top: 0.8rem;
   position: absolute;
   left: 0;
-  top: 30px;
+  top: 2.5rem;
   z-index: 20;
 
   a {

src/components/Footer/Footer.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 import FooterContent from "./FooterContent";
 
 const StyledFooter = styled.footer`
@@ -16,27 +17,27 @@ const CopyRight = styled.div`
   background-color: ${colors.black};
   text-align: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: 0.75rem;
   padding: 1rem 0;
 
   p {
     padding: 0.5rem 1rem;
     margin: 0;
-    font-size: 14px;
+    font-size: 0.8rem;
   }
 
   a {
     display: block;
     text-decoration: underline;
     padding: 0.4rem 0;
-    font-size: 14px;
+    font-size: 0.8rem;
 
     &:hover {
       text-decoration: none;
     }
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: ${breakpoints.mobile}) {
     flex-flow: column nowrap;
   }
 `;

src/components/Footer/FooterContent.tsx

@@ -1,23 +1,32 @@
 import React from "react";
 import styled from "styled-components";
 import Anchor from "../Anchor";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
+
+const Columns = styled.div`
+  display: flex;
+  justify-content: space-between;
+  & > div > div {
+    margin-bottom: 1rem;
+  }
+`;
 
 const Content = styled.div`
   display: flex;
 
   & > div:first-of-type {
-    padding: 48px 0;
+    padding: 3rem 0;
     flex: 2 1;
 
     & > * {
-      padding: 0 24px;
+      padding: 0 1.5rem;
     }
   }
 
   h4 {
     color: ${colors.lightBlue};
-    padding: 24px 0;
+    padding: 1.5rem 0;
   }
 
   a {
@@ -25,7 +34,7 @@ const Content = styled.div`
     display: block;
     text-decoration: underline;
     padding: 0.4rem 0;
-    font-size: 14px;
+    font-size: 0.8rem;
 
     &:hover {
       text-decoration: none;
@@ -36,26 +45,18 @@ const Content = styled.div`
     color: ${colors.white};
     margin: 0;
     padding: 0.4rem 0;
-    font-size: 14px;
+    font-size: 0.8rem;
   }
 `;
 
 const MarginSpace = styled.div`
-  max-width: 600px;
+  max-width: 67%;
   margin: auto;
 `;
 
-const Columns = styled.div`
-  display: flex;
-  justify-content: space-between;
-  & > div > div {
-    margin-bottom: 1rem;
-  }
-`;
-
 const Map = styled.div`
   flex: 1;
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: ${breakpoints.mobile}) {
     display: none;
   }
   iframe {

src/components/Header.tsx

@@ -2,14 +2,15 @@ import React, { useState, useEffect, useRef } from "react";
 import Navigation from "./Navigation";
 import throttle from "lodash/throttle";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 import NavigationMobile from "./NavigationMobile";
 import HeaderLogo from "./HeaderLogo";
 
 const StyledHeader = styled.header<{isHidden?: boolean}>`
   display: flex;
   flex-flow: row nowrap;
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: ${breakpoints.mobile}) {
     flex-flow: column nowrap;
   }
 `;

src/components/HeaderLogo.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 import TitleImage from "@assets/img/SIK_RGB_W_side.png";
+import breakpoints from "@theme/breakpoints";
 
+// TODO: Responsive size
 const Logo = styled.img`
   max-width: 300px;
   margin: 1rem 1rem;
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: ${breakpoints.mobile}) {
     max-width: 100% !important;
     margin: 1rem 0 !important;
   }

src/components/Hero/Hero.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 
 const Container = styled.div`
   display: flex;
@@ -13,14 +14,18 @@ const Container = styled.div`
 
   section {
     padding: 2rem 6rem;
-    @media screen and (max-width: 800px) {
+    @media screen and (max-width: ${breakpoints.mobile}) {
       padding: 1rem;
     }
   }
 
   aside {
-    padding: 0 6rem;
-    @media screen and (max-width: 800px) {
+    max-width: 50%;
+    padding: 3rem 6rem;
+    align-items: center;
+
+    @media screen and (max-width: ${breakpoints.mobile}) {
+      max-width: unset;
       padding: 2rem 1rem;
     }
   }
@@ -29,7 +34,7 @@ const Container = styled.div`
     flex: 8;
   }
 
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: ${breakpoints.mobile}) {
     flex-direction: column;
   }
 

src/components/Hero/HeroAside.tsx

@@ -11,7 +11,6 @@ interface HeroAsideItemProps {
 }
 
 const Article = styled.article`
-  max-width: 350px;
   margin-bottom: 1rem;
 `;
 
@@ -43,29 +42,33 @@ const Aside = styled.aside<{ colors: string }>`
   flex-direction: column;
   justify-content: center;
 
-  h2 {
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    line-height: 1.5rem;
-  }
+  & > div {
+    h2 {
+      word-break: break-word;
+      hyphens: auto;
+      text-transform: uppercase;
+      letter-spacing: 3px;
+      line-height: 1.5rem;
+    }
 
-  p {
-    margin: 0;
-    line-height: 2rem;
-  }
+    p {
+      margin: 0;
+      line-height: 2rem;
+    }
 
 
-  & > p {
-    font-weight: 600;
-    margin-bottom: 2rem;
-  }
+    & > p {
+      font-weight: 600;
+      margin-bottom: 2rem;
+    }
 
-  a {
-    line-height: 2rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    text-decoration: none;
-    letter-spacing: 0.1rem;
+    a {
+      line-height: 2rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      text-decoration: none;
+      letter-spacing: 0.1rem;
+    }
   }
 `;
 
@@ -87,7 +90,9 @@ color: ${colors.darkBlue};
 
 const HeroAside: React.FC<HeroAsideProps> = ({ bgColor, children}) => (
   <Aside colors={textColors(bgColor)}>
-    {children}
+    <div>
+      {children}
+    </div>
   </Aside>
 )
 

src/components/Hero/HeroPrimarySection.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 
 interface HeroPrimarySectionProps {
   header: string;
@@ -8,20 +9,15 @@ interface HeroPrimarySectionProps {
 }
 
 const Section = styled.section`
+  max-width: 50%;
   margin: 10vh auto 0;
-  max-width: 800px;
   text-align: center;
-  line-height: 1.5rem;
 
-  h1 {
-    line-height: 40px;
-    @media screen and (max-width: 500px) {
-      font-size: 2rem;
-    }
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    max-width: unset;
   }
 
   p {
-    max-width: 400px;
     margin: 1em auto;
     font-weight: 200;
   }

src/components/Hero/HeroSecondarySection.tsx

@@ -10,8 +10,7 @@ const Note = styled.span`
   text-transform: uppercase;
   font-size: 2.5rem;
   font-weight: bold;
-  margin-right: 2rem;
-  margin-top: -0.5rem;
+  margin: -1rem 2rem 3rem;
 `;
 
 const Item = styled.div`

src/components/Icon.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import styled from "styled-components";
 
 export enum IconType {
   Facebook,
@@ -58,48 +57,32 @@ const nameToIcon = (name: IconType): JSX.Element | string => {
       </svg>
     );
   }
-  if (name == IconType.FinlandFlag) {
+  if (name === IconType.FinlandFlag) {
     return "🇫🇮";
   }
-  if (name == IconType.GBFlag) {
+  if (name === IconType.GBFlag) {
     return "🇬🇧";
   }
   return null;
 };
 
-const SomeIcon = styled.a`
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-  margin: 1em;
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-`;
-
-const NormalIcon = styled.span`
-/* stylelint-disable-next-line no-empty-source */
-`;
-
 const Icon: React.FC<IconProps> = ({ link, name, onClick }) => {
   const elem = nameToIcon(name);
   if (link) {
     return (
-      <SomeIcon
+      <a
         href={link}
         onClick={onClick}
       >
         {elem}
-      </SomeIcon>
+      </a>
     );
   }
 
   return (
-    <NormalIcon role="img" onClick={onClick}>
+    <span role="img" onClick={onClick}>
       {elem}
-    </NormalIcon>
+    </span>
   );
 }
 

src/components/NavbarChildLink.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import styled from "styled-components";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 import Anchor from "./Anchor";
-import { colors } from "@theme/colors";
 
 interface NavbarChildLinkProps {
   to: string;
@@ -14,14 +15,14 @@ const StyledLink = styled(Anchor)`
   padding-right: 4rem;
   font-weight: 400;
 
-  @media screen and (max-width: 1200px) {
+  @media screen and (max-width: ${breakpoints.medium}) {
     border-bottom: 1px dotted ${colors.lightBlue};
     margin-left: 2rem;
     padding-left: 0;
   }
 
   &:hover {
-    @media screen and (min-width: 1200px) {
+    @media screen and (min-width: ${breakpoints.medium}) {
       background-color: ${colors.lightBlue};
     }
   }

src/components/NavbarDropdownLink.tsx

@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import DropDownBox from "./DropDownBox";
 import Anchor from "./Anchor";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 
 const Container = styled.div`
   position: relative;
@@ -11,7 +12,7 @@ const Container = styled.div`
     &::after {
       content: "";
       position: absolute;
-      bottom: 5px;
+      bottom: 0.4rem;
       left: 0;
       width: 100%;
       border-bottom: 4px solid ${colors.lightBlue};
@@ -26,9 +27,9 @@ const StyledLink = styled(Anchor)`
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 2px;
-  padding: 20px 0;
+  padding: 1.25rem 0;
 
-  @media screen and (max-width: 1200px) {
+  @media screen and (max-width: ${breakpoints.medium}) {
     border-bottom: 1px solid ${colors.lightBlue};
   }
 `;

src/components/Navigation.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 import Icon, { IconType } from "./Icon";
 import NavbarDropdownLink from "./NavbarDropdownLink";
 import NavbarChildLink from "./NavbarChildLink";
@@ -11,6 +12,7 @@ const renderNavigationDesktopItems = () => {
       <NavbarDropdownLink to="/kilta" text="Kilta ›">
         <NavbarChildLink to="/kilta/toiminta">Toiminta</NavbarChildLink>
         <NavbarChildLink to="/kilta/fuksi">Fuksi</NavbarChildLink>
+        <NavbarChildLink to="/kilta/kunnia">Kunnianosoitukset</NavbarChildLink>
         <NavbarChildLink to="https://static.sika.sik.party">Arkisto</NavbarChildLink>
       </NavbarDropdownLink>
       <NavbarDropdownLink to="/opinnot_ja_ura" text="Opinnot ja ura"></NavbarDropdownLink>
@@ -31,7 +33,7 @@ const Nav = styled.div`
   justify-content: space-between;
   align-items: center;
 
-  font-size: 14px;
+  font-size: 0.8rem;
   color: ${colors.lightBlue};
   margin-left: 5rem;
 
@@ -41,14 +43,22 @@ const Nav = styled.div`
     text-decoration: none;
   }
 
-  @media screen and (min-width: 600px) and (max-width: 1200px) {
+  @media screen and (min-width: ${breakpoints.mobile}) and (max-width: ${breakpoints.medium}) {
     justify-content: flex-end;
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: ${breakpoints.mobile}) {
     justify-content: center;
     margin-left: 0;
   }
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+
+    fill: ${colors.white};
+    color: ${colors.white};
+  }
 `;
 
 const DesktopContainer = styled.div`
@@ -57,7 +67,7 @@ const DesktopContainer = styled.div`
   flex-flow: row nowrap;
   justify-content: space-between;
 
-  @media screen and (max-width: 1200px) {
+  @media screen and (max-width: ${breakpoints.medium}) {
     display: none;
   }
 `;
@@ -67,8 +77,10 @@ const SomeContainer = styled.div`
   flex-flow: row nowrap;
 
   a {
-    fill: ${colors.white};
-    color: ${colors.white};
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    margin: 1rem;
   }
 `;
 
@@ -81,20 +93,13 @@ const MobileMenu = styled.div`
     display: flex;
   }
 
-  @media screen and (min-width: 1200px) {
+  @media screen and (min-width: ${breakpoints.medium}) {
     display: none;
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: ${breakpoints.mobile}) {
     margin-left: 3rem;
   }
-
-  svg {
-    width: 26px;
-    height: 26px;
-    fill: ${colors.white};
-    color: ${colors.white};
-  }
 `;
 
 interface NavigationProps {

src/components/NavigationMobile.tsx

@@ -10,6 +10,7 @@ const renderNavigationMobileItems = () => {
       <NavbarDropdownLink to="/kilta" text="Kilta ›" exploded>
         <NavbarChildLink to="/kilta/toiminta">Toiminta</NavbarChildLink>
         <NavbarChildLink to="/kilta/fuksi">Fuksi</NavbarChildLink>
+        <NavbarChildLink to="/kilta/kunnia">Kunnianosoitukset</NavbarChildLink>
         <NavbarChildLink to="https://static.sika.sik.party">Arkisto</NavbarChildLink>
       </NavbarDropdownLink>
       <NavbarDropdownLink to="/opinnot_ja_ura" text="Opinnot ja ura" exploded />

src/components/Sections/CTASection.tsx

@@ -13,10 +13,7 @@ const Section = styled.section<{ colors: string }>`
   align-items: baseline;
   padding: 2rem 0;
 
-  flex-direction: row;
-  @media screen and (max-width: 600px) {
-    flex-direction: column;
-  }
+  flex-flow: row wrap;
 
   a {
     color: inherit;

src/components/Sections/CardSection.tsx

@@ -1,5 +1,6 @@
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 
 const CardSection = styled.section`
 
@@ -11,7 +12,7 @@ const CardSection = styled.section`
   flex-flow: row wrap;
   padding: 2rem 1rem;
 
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: ${breakpoints.mobile}) {
     flex-flow: column nowrap;
   }
 
@@ -22,12 +23,12 @@ const CardSection = styled.section`
   & > * {
     width: calc(25% - 2rem);
 
-    @media screen and (min-width: 800px) and (max-width: 1200px) {
+    @media screen and (min-width: ${breakpoints.mobile}) and (max-width: ${breakpoints.medium}) {
       width: calc(50% - 2rem);
       margin-bottom: 2rem;
     }
 
-    @media screen and (max-width: 800px) {
+    @media screen and (max-width: ${breakpoints.mobile}) {
       width: 100%;
       margin: 0 0 3rem 0;
     }

src/components/Sections/FullWidthSection.tsx

@@ -3,9 +3,10 @@ import styled from "styled-components";
 
 const StyledSection = styled.section`
   display: grid;
-  padding: 24px;
+  padding: 1.5rem;
 
   grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
   grid-template-areas:
     "title"
     "content";
@@ -22,6 +23,11 @@ const StyledSection = styled.section`
   & > h6 {
     text-align: center;
     grid-area: title;
+    margin: 1rem 0;
+  }
+
+  p {
+    margin-top: 0;
   }
 `;
 

src/components/Sections/TextSection.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 
 const StyledSection = styled.section`
   display: grid;
-  padding: 24px;
+  padding: 1.5rem;
 
   word-break: break-word;
   hyphens: auto;
@@ -12,10 +13,10 @@ const StyledSection = styled.section`
   grid-template-columns: 1fr 2fr 1fr;
   grid-template-rows: 1fr auto;
   grid-template-areas:
-    "title title title"
+    ". title ."
     "leftaside content rightaside";
 
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: ${breakpoints.mobile}) {
     grid-template-columns: 1fr;
     grid-template-rows: 1fr auto auto auto;
     grid-template-areas:
@@ -37,13 +38,15 @@ const StyledSection = styled.section`
   & > h6 {
     text-align: center;
     grid-area: title;
+    margin: 1rem 0;
   }
 
+  p {
+    margin-top: 0;
+  }
 
   & > div, p {
     grid-area: content;
-    max-width: 1000px;
-
   }
 
   & > aside {
@@ -51,11 +54,11 @@ const StyledSection = styled.section`
     flex-direction: column;
     justify-content: space-between;
 
-    @media screen and (max-width: 800px) {
+    @media screen and (max-width: ${breakpoints.mobile}) {
       align-items: center;
       max-width: unset;
       margin-left: unset;
-      margin-top: 48px;
+      margin-top: 3rem;
 
       * {
         flex: 1;
@@ -65,15 +68,15 @@ const StyledSection = styled.section`
 
   & > aside:first-of-type {
     grid-area: rightaside;
-    padding-left: 24px;
-    @media screen and (max-width: 800px) {
+    padding-left: 1.5rem;
+    @media screen and (max-width: ${breakpoints.mobile}) {
       padding-left: 0;
     }
   }
   & > aside:nth-of-type(2) {
     grid-area: leftaside;
-    padding-right: 24px;
-    @media screen and (max-width: 800px) {
+    padding-right: 1.5rem;
+    @media screen and (max-width: ${breakpoints.mobile}) {
       padding-left: 0;
     }
   }

src/components/Widgets/MarkdownEditorWidget.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import styled from "styled-components";
 import ReactMde from "react-mde";
-import ReactMarkdown from "react-markdown";
 import { WidgetProps } from "react-jsonschema-form";
+import MarkdownStyles from "@views/common/MarkdownStyles";
 import "./MarkdownEditorWidget.scss"
 
 type MarkdownEditorWidgetProps = Omit<WidgetProps, "options"> & {
@@ -28,7 +28,7 @@ const MarkdownEditorWidget: React.FC<MarkdownEditorWidgetProps> = ({ value, onCh
         selectedTab={selectedTab}
         onTabChange={setSelectedTab}
         generateMarkdownPreview={markdown =>
-          Promise.resolve(<ReactMarkdown source={markdown} />)
+          Promise.resolve(<MarkdownStyles source={markdown} />)
         }
       />
     </Container>

src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx

@@ -4,6 +4,7 @@ import shortid from "shortid";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { Question } from "."
 import AddIcon from "@assets/img/add-icon.png";
+import colors from "@theme/colors";
 import QuestionList from "./QuestionList";
 
 const Widget = styled.div`
@@ -24,6 +25,14 @@ const Widget = styled.div`
   }
 `;
 
+const AddQuestionButton = styled.button`
+  background-color: ${colors.blue1};
+  color: ${colors.white};
+  border: none;
+  outline: none;
+  cursor: pointer;
+`;
+
 interface SignupQuestionsWidgetProps {
   value: string;
   onChange: (value: string) => void;
@@ -78,9 +87,10 @@ const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, on
           )}
         </Droppable>
       </DragDropContext>
-      <button type="button" onClick={handleNewRowClick(questions)}>
-        <img src={AddIcon} /> New Question
-      </button>
+      <AddQuestionButton type="button" onClick={handleNewRowClick(questions)}>
+        <img src={AddIcon} />
+        New Question
+      </AddQuestionButton>
     </Widget>
   );
 }