feat(buttons): add fork me on github and IYS button

Author: jdrouet

public/logo.png

@@ -0,0 +1,28 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = () => ({
+  image: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    boder: 0,
+    zIndex: 2000,
+  },
+});
+
+const GithubButton = (props) => (
+  <a
+    href="https://github.com/in-your-saas/material-ui-theme-editor"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <img
+      className={props.classes.image}
+      src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
+      alt="Fork me on GitHub"
+    />
+  </a>
+);
+
+export default withStyles(styles)(GithubButton);

src/component/github-button.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = (theme) => ({
+  root: {
+    display: 'block',
+    textAlign: 'center',
+    padding: theme.spacing.unit,
+    paddingBottom: 0,
+  },
+  image: {
+    maxWidth: 100,
+  },
+});
+
+class LogoButton extends React.PureComponent {
+  render() {
+    return (
+      <a
+        className={this.props.classes.root}
+        href="https://www.inyoursaas.io/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="In Your Saas Logo"
+          className={this.props.classes.image}
+          src="logo.png"
+        />
+      </a>
+    );
+  }
+}
+
+export default withStyles(styles)(LogoButton);

src/component/logo-button.js

@@ -2,6 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 
+import LogoButton from './logo-button';
 import PaletteEditionCard from './palette-edition-card';
 
 const styles = (theme) => ({
@@ -11,6 +12,9 @@ const styles = (theme) => ({
   card: {
     margin: theme.spacing.unit,
   },
+  logo: {
+    maxWidth: 150,
+  },
 });
 
 const paletteFields = {
@@ -63,6 +67,7 @@ class SectionEdition extends React.PureComponent {
     const { classes, rootClassName } = this.props;
     return (
       <aside className={cn(classes.root, rootClassName)}>
+        <LogoButton />
         <PaletteEditionCard
           label="Common colors"
           name="common"

src/component/section-edition.js

@@ -3,6 +3,7 @@ import { createMuiTheme, withStyles } from '@material-ui/core/styles';
 import SectionEdition from '../component/section-edition';
 import SectionPreview from '../component/section-preview';
 import DownloadButton from '../component/download-button';
+import GithubButton from '../component/github-button';
 
 const styles = (theme) => ({
   root: {
@@ -42,6 +43,7 @@ class Editor extends React.Component {
     const { classes } = this.props;
     return (
       <main className={classes.root}>
+        <GithubButton />
         <SectionEdition
           rootClassName={classes.edition}
           onChange={this.handleChangeTheme}