feat(AuthorCard): Add profile info for main site authors (#163)

* Create Author Card

* Add author card mdx

* Remove no-var-requires tslint rule

* small padding fix

src/components/AuthorCard/index.mdx

@@ -0,0 +1,24 @@
+---
+name: Author Card
+route: /authorcard
+---
+
+import { Playground, PropsTable } from 'docz'
+import AuthorCard from '.'
+import authorImage from './author.png'
+
+# Author Card
+
+Every author needs a card.
+
+<PropsTable of={AuthorCard} />
+
+<Playground>
+  <AuthorCard
+    name="Joe Bruin Long Name Here"
+    position="Editor in Chief"
+    image={authorImage}
+    twitter="uclachancellor"
+    email="[email protected]"
+  />
+</Playground>

src/components/AuthorCard/index.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react'
+import { css } from 'react-emotion'
+import * as MainSiteStyles from '../../globals/mainsiteGlobalStyles'
+import emailImage from './email.png'
+import twitterImage from './twitter.png'
+
+/**
+ * Author Card properties.
+ */
+interface AuthorCardProps {
+  /** Link to image of author. */
+  image: string
+  /** Author's full name. */
+  name: string
+  /** Author's position/title. */
+  position: string
+  /** Author's twitter handle e.g. "uclachancellor" */
+  twitter?: string
+  /** Author's email address e.g. "[email protected]". */
+  email?: string
+}
+
+interface SocialCircleProps {
+  url: string
+  image: string
+}
+
+const SocialCircle: React.SFC<SocialCircleProps> = props => {
+  return (
+    <a href={props.url}>
+      <div
+        className={css`
+          background-color: ${MainSiteStyles.lightGray};
+          border-style: solid;
+          border-width: 0.5px;
+          border-radius: 50%;
+          border-color: ${MainSiteStyles.gray};
+          height: 35px;
+          width: 35px;
+          margin: 5px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        `}
+      >
+        <img
+          className={css`
+            width: 70%;
+            height: auto;
+          `}
+          src={props.image}
+        />
+      </div>
+    </a>
+  )
+}
+
+/** An author card. */
+export default class AuthorCard extends React.Component<AuthorCardProps> {
+  public render() {
+    return (
+      <div
+        className={css`
+          background-color: white;
+          box-shadow: ${MainSiteStyles.cardShadow};
+        `}
+      >
+        <div
+          className={css`
+            height: 100%;
+            display: block;
+          `}
+        >
+          <div
+            className={css`
+              width: 80%;
+              display: block;
+              margin: auto;
+            `}
+          >
+            <img
+              className={css`
+                border-radius: 50%;
+                margin: auto;
+                padding-top: 20px;
+                width: 100%;
+                height: auto;
+              `}
+              src={this.props.image}
+            />
+          </div>
+          <h1
+            className={css`
+              font-style: 'bold';
+              font-size: 24px;
+              line-height: 1.6rem;
+              text-align: center;
+              font-family: ${MainSiteStyles.headlineFont};
+              color: black;
+              padding: 0px 20px 5px 20px;
+              margin: 0px;
+            `}
+          >
+            {this.props.name}
+          </h1>
+          <div
+            className={css`
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            `}
+          >
+            {this.props.twitter && (
+              <SocialCircle
+                url={'https://twitter.com/' + this.props.twitter}
+                image={twitterImage}
+              />
+            )}
+            {this.props.email && (
+              <SocialCircle
+                url={'mailto:' + this.props.email}
+                image={emailImage}
+              />
+            )}
+          </div>
+        </div>
+        <h3
+          className={css`
+            text-transform: uppercase;
+            text-align: center;
+            color: white;
+            background-color: black;
+            padding: 4px 0px;
+            line-height: 1.6rem;
+            margin: 0px;
+          `}
+        >
+          {this.props.position}
+        </h3>
+      </div>
+    )
+  }
+}

src/components/CoverPhoto/index.tsx

@@ -39,8 +39,8 @@ export default class CoverPhoto extends React.Component<CoverPhotoProps> {
       this.props.xPosition === XPosition.Center
         ? 'center'
         : this.props.xPosition === XPosition.Left
-          ? 'left'
-          : 'right'
+        ? 'left'
+        : 'right'
 
     return (
       <div

src/components/Poll/Choice.tsx

@@ -15,12 +15,12 @@ class Choice extends React.Component<ChoiceProps> {
   }
 
   constructor(props) {
-    super(props);
+    super(props)
   }
 
   public handleClick = () => {
-    this.setState({ votes: this.state.votes+1 });
-    this.props.handler();
+    this.setState({ votes: this.state.votes + 1 })
+    this.props.handler()
   }
 
   public render() {
@@ -46,7 +46,7 @@ class Choice extends React.Component<ChoiceProps> {
             margin: 0px 0px 3px;
           `}
         >
-          <a onClick = {this.handleClick}>
+          <a onClick={this.handleClick}>
             <FontAwesomeIcon
               icon={faCheckCircle}
               className={css`