docs(website): add footer

Author: christianalfoni

packages/overmind-website/api/action.md

@@ -8,4 +8,4 @@ An action is where you write the logic of the application. Every action receives
 
 This context gives Overmind the ability to understand what state you are changing and what effects you are running. Additionally this context makes your actions highly testable as it can easily be mocked.
 
-State changes are restricted to these actions, even though they run asynchronously, and any components currently accessing the state will render.
+State changes are restricted to these actions. That means if you try to change the state outside of an action you will get an error. The state changes are also scoped to the action. That means it does not matter if you perform the state change asynchronously, either by defining the action as an **async** function or for example use a **setTimeout**. You can change the state at any time within the action.

packages/overmind-website/src/components/Api/styles.ts

@@ -13,7 +13,6 @@ export const listWrapper = css`
   width: 150px;
 
   padding-top: 50px;
-  height: 100vh;
   right: calc(50% + 350px);
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;

packages/overmind-website/src/components/App/index.tsx

@@ -10,6 +10,7 @@ import Videos from '../Videos'
 import Api from '../Api'
 import MobileTopBar from '../MobileTopBar'
 import { useIsMobile, useScrollToTop } from '../../utils'
+import Footer from '../Footer'
 
 const pages = {
   [Page.HOME]: FrontPage,
@@ -50,6 +51,7 @@ const App: SFC = () => {
     <div ref={mainRef} className={styles.wrapper}>
       {isMobile ? <MobileTopBar /> : <TopBar />}
       <Page />
+      <Footer />
     </div>
   )
 }

packages/overmind-website/src/components/Footer/index.tsx

@@ -0,0 +1,33 @@
+import { createElement, SFC } from 'react'
+import * as styles from './styles'
+import Icon from '../Icon'
+
+const Footer: SFC = () => {
+  return (
+    <div className={styles.wrapper}>
+      <a
+        href="https://github.com/cerebral/overmind"
+        target="_new"
+        className={styles.github}
+      >
+        <Icon>github</Icon>
+      </a>
+      <div className={styles.copy}>
+        Released under the{' '}
+        <a href="https://opensource.org/licenses/MIT" target="_new">
+          MIT License
+        </a>
+        <div> Copyright © 2019 Christian Alfoni</div>
+      </div>
+      <a
+        href="https://spectrum.chat/?t=ddc61ecd-56c7-4c54-8029-c42118d52975"
+        target="_new"
+        className={styles.chat}
+      >
+        <Icon>chat</Icon>
+      </a>
+    </div>
+  )
+}
+
+export default Footer

packages/overmind-website/src/components/Footer/styles.ts

@@ -0,0 +1,38 @@
+import { css } from 'emotion'
+
+export const wrapper = css`
+  display: flex;
+  background-color: var(--color-dark-1);
+  height: 100px;
+  justify-content: center;
+  align-items: center;
+  > * {
+    margin: 0 var(--padding-4);
+  }
+`
+
+export const copy = css`
+  font-size: var(--font-size-3);
+  color: var(--color-white-1);
+  text-align: center;
+  a {
+    color: var(--color-primary);
+    text-decoration: none;
+    font-weight: bold;
+  }
+  div {
+    font-size: var(--font-size-2);
+  }
+`
+
+export const github = css`
+  font-size: var(--font-size-6);
+  color: var(--color-white-1);
+  text-decoration: none;
+`
+
+export const chat = css`
+  font-size: var(--font-size-6);
+  color: var(--color-white-1);
+  text-decoration: none;
+`

packages/overmind-website/src/components/Icon/styles.ts

@@ -8,6 +8,7 @@ export const icons = {
   chat: '\f086',
   guide: '\f0f6',
   bars: '\f0c9',
+  github: '\f09b',
 }
 
 export const icon = (icon: string) => css`