feat: add bug report button to chrome

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;

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>
+);

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"
+}

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) =>

src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './bug-report';
 export * from './button';
 export * from './chrome';
 export * from './colors';

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>
 		);