moved stuff out of app since it is used for routing

src/Fragments/Button/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import styles from './style.module.scss'
+
+const Button = ({
+  children,
+  className,
+  color = 'black',
+  type = 'button',
+  ...props
+}) => (
+  <button
+    className={`${className} Button Button_${color}`}
+    type={type}
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+const ButtonUnobtrusive = ({
+  children,
+  className,
+  type = 'button',
+  ...props
+}) => (
+  <button
+    className={`${className} Button_unobtrusive`}
+    type={type}
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+export { ButtonUnobtrusive };
+
+export default Button;

src/Fragments/Button/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "button",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Sean Strawsburg",
+    "email": "sean@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/Fragments/Button/style.module.scss

@@ -0,0 +1,46 @@
+.Button {
+  padding: 10px;
+  background: none;
+  cursor: pointer;
+  transition: color 0.25s ease-in-out;
+  transition: background 0.25s ease-in-out;
+}
+
+.Button_white {
+  border: 1px solid #fff;
+  color: #fff;
+}
+
+.Button_white:hover {
+  color: #000;
+  background: #fff;
+}
+
+.Button_black {
+  border: 1px solid #000;
+  color: #000;
+}
+
+.Button_black:hover {
+  color: #fff;
+  background: #000;
+}
+
+.Button_unobtrusive {
+  padding: 0;
+  color: #000;
+  background: none;
+  border: none;
+  cursor: pointer;
+  opacity: 1;
+  transition: opacity 0.25s ease-in-out;
+  outline: none;
+}
+
+.Button_unobtrusive:hover {
+  opacity: 0.35;
+}
+
+.Button_unobtrusive:focus {
+  outline: none;
+}