Move button to its own component

fix css linting errors

src/routes/adminPeople/AdminPeople.css

@@ -37,41 +37,10 @@
   color: #616161;
   font-size: 18px;
   line-height: 1.3333333;
-  transition: border-color ease-in-out 0.15s,
-              box-shadow ease-in-out 0.15s,
-              background-color ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, background-color ease-in-out 0.15s;
 }
 
 .input:focus {
   border-color: var(--colour-tertiary);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
 }
-
-.button {
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 10px 16px;
-  width: 100%;
-  outline: 0;
-  border: 1px solid var(--colour-secondary);
-  border-radius: 0;
-  background: var(--colour-primary);;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  font-size: 18px;
-  line-height: 1.3333333;
-  cursor: pointer;
-}
-
-.button:hover {
-  background: var(--colour-secondary);
-}
-
-.button:focus {
-  border-color: var(--colour-tertiary);
-  box-shadow: 0 0 8px var(--colour-secondary);
-}
-
-

src/routes/adminPeople/AdminPeople.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './AdminPeople.css';
 import Link from '../../components/Link';
+import Button from '../../components/Button';
 
 class AdminPeople extends React.Component {
   static propTypes = {
@@ -41,9 +42,9 @@ class AdminPeople extends React.Component {
                   <td>
                     <form method="post" action="/admin/person/delete">
                       <input type="hidden" name="key" value={person.key} />
-                      <button className={s.button} type="submit">
+                      <Button type="submit">
                         Delete
-                      </button>
+                      </Button>
                     </form>
                   </td>
                 </tr>
@@ -98,9 +99,9 @@ class AdminPeople extends React.Component {
               />
             </div>
             <div className={s.formGroup}>
-              <button className={s.button} type="submit">
+              <Button type="submit">
                 Save
-              </button>
+              </Button>
             </div>
           </form>
         </div>

src/routes/adminPerson/AdminPerson.css

@@ -37,41 +37,13 @@
   color: #616161;
   font-size: 18px;
   line-height: 1.3333333;
-  transition: border-color ease-in-out 0.15s,
-              box-shadow ease-in-out 0.15s,
-              background-color ease-in-out 0.15s;
+  transition:
+    border-color ease-in-out 0.15s,
+    box-shadow ease-in-out 0.15s,
+    background-color ease-in-out 0.15s;
 }
 
 .input:focus {
   border-color: var(--colour-tertiary);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
 }
-
-.button {
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 10px 16px;
-  width: 100%;
-  outline: 0;
-  border: 1px solid var(--colour-secondary);
-  border-radius: 0;
-  background: var(--colour-primary);;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  font-size: 18px;
-  line-height: 1.3333333;
-  cursor: pointer;
-}
-
-.button:hover {
-  background: var(--colour-secondary);
-}
-
-.button:focus {
-  border-color: var(--colour-tertiary);
-  box-shadow: 0 0 8px var(--colour-secondary);
-}
-
-

src/routes/adminPerson/AdminPerson.js

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './AdminPerson.css';
+import Button from '../../components/Button';
 
 class AdminPerson extends React.Component {
   static propTypes = {
@@ -86,9 +87,9 @@ class AdminPerson extends React.Component {
               />
             </div>
             <div className={s.formGroup}>
-              <button className={s.button} type="submit">
+              <Button type="submit">
                 Save
-              </button>
+              </Button>
             </div>
           </form>