From e2eac1bb963efa490efa58b34d716ee2be70fd41 Mon Sep 17 00:00:00 2001
From: Tilman Frick <git@tilman.io>
Date: Tue, 5 Jun 2018 20:15:06 +0200
Subject: [PATCH] feat: add bug report button to chrome

---
 src/components/bug-report/demo.tsx        | 11 +++++++++++
 src/components/bug-report/index.tsx       | 22 ++++++++++++++++++++++
 src/components/bug-report/pattern.json    |  8 ++++++++
 src/components/button/index.tsx           | 12 ++++++------
 src/components/index.ts                   |  1 +
 src/container/chrome/chrome-container.tsx | 11 ++++++++++-
 6 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 src/components/bug-report/demo.tsx
 create mode 100644 src/components/bug-report/index.tsx
 create mode 100644 src/components/bug-report/pattern.json

diff --git a/src/components/bug-report/demo.tsx b/src/components/bug-report/demo.tsx
new file mode 100644
index 000000000..2204060df
--- /dev/null
+++ b/src/components/bug-report/demo.tsx
@@ -0,0 +1,11 @@
+import DemoContainer from '../demo-container';
+import { BugReport } from './index';
+import * as React from 'react';
+
+const BugReportDemo: React.StatelessComponent<void> = (): JSX.Element => (
+	<DemoContainer title="BugReport">
+		<BugReport title="Found a bug?" />
+	</DemoContainer>
+);
+
+export default BugReportDemo;
diff --git a/src/components/bug-report/index.tsx b/src/components/bug-report/index.tsx
new file mode 100644
index 000000000..5c46dd7a3
--- /dev/null
+++ b/src/components/bug-report/index.tsx
@@ -0,0 +1,22 @@
+import { Button, ButtonOrder, ButtonSize } from '../button';
+import * as React from 'react';
+import { getSpace, SpaceSize } from '../space';
+import styled from 'styled-components';
+
+export interface BugReportProps {
+	onClick?: React.MouseEventHandler<HTMLElement>;
+	title: string;
+}
+
+const StyledBugReport = styled.div`
+	justify-self: right;
+	margin-right: -${getSpace(SpaceSize.XXL) * 3 - getSpace(SpaceSize.L)}px; // align to top right corner
+`;
+
+export const BugReport: React.StatelessComponent<BugReportProps> = props => (
+	<StyledBugReport>
+		<Button order={ButtonOrder.Secondary} size={ButtonSize.Small} onClick={props.onClick}>
+			{props.title}
+		</Button>
+	</StyledBugReport>
+);
diff --git a/src/components/bug-report/pattern.json b/src/components/bug-report/pattern.json
new file mode 100644
index 000000000..82ad98124
--- /dev/null
+++ b/src/components/bug-report/pattern.json
@@ -0,0 +1,8 @@
+{
+	"name": "bug-report",
+	"displayName": "Bug Report",
+	"description": "Button to report a bug as Github Issue",
+	"version": "1.0.0",
+	"tags": ["bug", "bug-report"],
+	"flag": "alpha"
+}
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
index 65176860b..b0d279db0 100644
--- a/src/components/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -28,22 +28,21 @@ export enum ButtonSize {
 const StyledButton = styled.button`
 	border: none;
 	border-radius: 3px;
-
-	&:hover {
-		opacity: 0.9;
-	}
+	outline: none;
 
 	${(props: ButtonProps) => {
 		switch (props.order) {
 			case ButtonOrder.Secondary:
 				return css`
-					background: ${Color.Black};
-					color: ${Color.White};
+					background: transparent;
+					border: 1px solid ${Color.Blue};
+					color: ${Color.Blue};
 				`;
 			case ButtonOrder.Primary:
 			default:
 				return css`
 					background: ${Color.Blue};
+					border: 1px solid ${Color.Blue};
 					color: ${Color.White};
 				`;
 		}
@@ -70,6 +69,7 @@ const StyledButton = styled.button`
 		props.inverted
 			? `
 				background: ${Color.White};
+				border-color: ${Color.White};
 			`
 			: ''};
 	${(props: ButtonProps) =>
diff --git a/src/components/index.ts b/src/components/index.ts
index 39bd42745..9562ba256 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from './bug-report';
 export * from './button';
 export * from './chrome';
 export * from './colors';
diff --git a/src/container/chrome/chrome-container.tsx b/src/container/chrome/chrome-container.tsx
index 75a565cd9..d39df1fbf 100644
--- a/src/container/chrome/chrome-container.tsx
+++ b/src/container/chrome/chrome-container.tsx
@@ -1,5 +1,6 @@
 import * as AlvaUtil from '../../alva-util';
-import { Chrome, CopySize, ViewSwitch, ViewTitle } from '../../components';
+import { BugReport, Chrome, CopySize, ViewSwitch, ViewTitle } from '../../components';
+import * as Electron from 'electron';
 import * as MobxReact from 'mobx-react';
 import { OverviewSwitchContainer } from './overview-switch-container';
 import * as React from 'react';
@@ -70,6 +71,14 @@ export const ChromeContainer = MobxReact.inject('store')(
 						title={project ? project.getName() : 'Alva'}
 					/>
 				)}
+				<BugReport
+					title="Found a bug?"
+					onClick={() => {
+						Electron.shell.openExternal(
+							'https://github.com/meetalva/alva/labels/type%3A%20bug'
+						);
+					}}
+				/>
 				{props.children}
 			</Chrome>
 		);