feat(vote): add information about influence, their value, and disclaimer, basic styling

Author: TheLarkInn

components/vote/app-style.scss

@@ -1,7 +1,33 @@
 @import 'vars';
 @import 'mixins';
+@import 'functions';
 
 .vote-app {
+  margin: 1.5em;
+
+  &__influence-descriptions {
+    display: flex;
+    flex-direction: column;
+
+    @include break(medium) {
+      flex-direction: row;
+    }
+  }
+
+  &__influence-section {
+    flex: 0 0 100%;
+  }
+
+  &__influence-disclaimer {
+    padding: 1em 0;
+    flex: 0 0 100%;
+    font-size: smaller;
+    color: red;
+    @include break(medium) {
+      text-align: center;
+    }
+  }
+
   &__self-info {
     margin-top: 10px;
   }

components/vote/app.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import SidebarItem from '../sidebar-item/sidebar-item';
 import * as api from "./api";
 import './app-style';
+import './influence-style';
 import VoteButton from './button/button';
+import Influence from './influence.jsx';
 
 function updateByProperty(array, property, propertyValue, update) {
   return array.map(item => {
@@ -176,6 +178,15 @@ export default class VoteApp extends React.Component {
 
     return (
       <div className="vote-app">
+        <div className="vote-app__influence">
+          <div className="vote-app__influence-descriptions">  
+            <Influence className="vote-app__influence-section" type="normal"/>
+            <Influence className="vote-app__influence-section" type="golden"/>
+          </div>
+          <div className="vote-app__influence-disclaimer">
+            DISCLAIMER: Since this feature is its Alpha stages, the formula for calculating influence may change.
+          </div>
+        </div>
         {this.renderSelf()}
         { listInfo && <div>
           <button className="vote-app__update-button" disabled={inProgress} onClick={() => {

components/vote/influence-style.scss

@@ -0,0 +1,19 @@
+@import 'mixins';
+@import 'functions';
+
+.influence-info {
+  em {
+    font-weight: bolder;
+  }
+
+  i {
+    font-style: italic; 
+  }
+
+  &__section {
+    padding: 0.5em 0;
+    @include break(medium) {
+      padding: 0 .5em;
+    }
+  }
+}

components/vote/influence.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import './influence-style.scss';
+
+export default class InfluenceComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    
+    render() {
+        return (this.props.type === "normal" ? ( 
+            <section className="influence-info influence-info__section">
+                <h1 className="influence-info__header">What is Influence?</h1>
+                <p><em>Influence</em> is a unit of measure based on time you have been a member on github. However, in 2017 and on you will recieve one influence per day.</p>            
+            </section>
+        ) : (
+            <section className="influence-info influence-info__section">
+                <h1 className="influence-info__header">What is Golden Influence?</h1>
+                <p><em>Golden Influence</em> is equal to 10 <i>normal influence</i>. Golden Influence is obtained by being a backer or sponsor on our <a href="https://opencollective.com/webpack">Open Collective page</a>.</p>            
+            </section>
+        ));
+    }
+}