implement about us page

package.json

@@ -1,11 +1,20 @@
 {
   "name": "merge-request-notifier",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "description": "This app shows your merge requests grouped by projects and WIP status. It is accessible from the system tray.",
   "main": "./dist/main.js",
   "engines": {
     "yarn": "1.19.1"
   },
+  "homepage": "https://github.com/codecentric/merge-request-notifier",
+  "author": {
+    "name": "Matthias Rütten",
+    "email": "matthias.ruetten@codecentric.de"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:codecentric/merge-request-notifier.git"
+  },
   "scripts": {
     "build-main": "cross-env NODE_ENV=production webpack --config webpack.main.prod.config.js",
     "build-renderer": "cross-env NODE_ENV=production webpack --config webpack.renderer.prod.config.js",
@@ -39,23 +48,6 @@
       "git add"
     ]
   },
-  "jest": {
-    "transform": {
-      "^.+\\.tsx?$": "ts-jest"
-    },
-    "testRegex": "(/test/.+\\.spec)\\.tsx?$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "json",
-      "node"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/fileMock.js",
-      "\\.(s?css|sass)$": "<rootDir>/mocks/styleMock.js"
-    }
-  },
   "build": {
     "productName": "Merge Request Notifier",
     "appId": "de.codecentric.ruettenm.mergeRequestNotifier",
@@ -82,15 +74,6 @@
       "github"
     ]
   },
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:codecentric/merge-request-notifier.git"
-  },
-  "author": {
-    "name": "Matthias Rütten",
-    "email": "matthias.ruetten@codecentric.de"
-  },
-  "homepage": "https://github.com/codecentric/merge-request-notifier",
   "devDependencies": {
     "@babel/core": "^7.4.5",
     "@babel/plugin-proposal-class-properties": "^7.4.4",

src/renderer/components/Content.tsx

@@ -5,6 +5,7 @@ import { Box } from 'rebass'
 import { useConfig } from '../hooks/config'
 import { MergeRequestsPage } from './merge-requests/MergeRequestsPage'
 import { SettingsPage } from './settings/SettingsPage'
+import { AboutUsPage } from './about-us/AboutUsPage'
 
 export const Content: React.FunctionComponent = () => {
     const { config } = useConfig()
@@ -15,6 +16,9 @@ export const Content: React.FunctionComponent = () => {
                 <Route path='/config'>
                     <SettingsPage />
                 </Route>
+                <Route path='/about-us'>
+                    <AboutUsPage />
+                </Route>
                 {config ? (
                     <Route path='/'>
                         <MergeRequestsPage />

src/renderer/components/about-us/AboutUsPage.tsx

@@ -0,0 +1,51 @@
+import { remote, shell } from 'electron'
+import * as React from 'react'
+import { Box, Text } from 'rebass'
+
+const openUrl = (url: string): React.MouseEventHandler<HTMLAnchorElement> => event => {
+    event.preventDefault()
+    shell.openExternal(url)
+}
+
+export const AboutUsPage = () => {
+    const appVersion = remote.app.getVersion()
+
+    return (
+        <Box p={2}>
+            <Text fontSize='14px'>
+                This app was build because our team was searching for a tool to see the number of our current open merge requests and make them easily
+                accessible. We didn't found such a tool and so we decided to build one by our own ;-)
+            </Text>
+
+            <Text mt={3} fontWeight='bold'>
+                Thanks
+            </Text>
+            <Text fontSize='14px'>
+                We want to thank our employers (
+                <a href='#' onClick={openUrl('https://codecentric.de')}>
+                    codecentric
+                </a>{' '}
+                and{' '}
+                <a href='#' onClick={openUrl('https://uxi.de')}>
+                    UX&I
+                </a>
+                ) to make it possible to develop this app in our +1 time.
+            </Text>
+
+            <Text mt={3} fontWeight='bold'>
+                Issues / Feedback
+            </Text>
+            <Text fontSize='14px'>
+                You found an issue or missed some feature? We are very keen about your feedback and appreciate any help. Please{' '}
+                <a href='#' onClick={openUrl('https://github.com/codecentric/merge-request-notifier/issues/new')}>
+                    create an issue
+                </a>{' '}
+                on GitHub.
+            </Text>
+
+            <Text mt={3} textAlign='right'>
+                <small>Version: {appVersion}</small>
+            </Text>
+        </Box>
+    )
+}

src/renderer/components/layout/Footer.tsx

@@ -3,6 +3,7 @@ import { ipcRenderer } from 'electron'
 import { Flex, Box, Link } from 'rebass'
 import { Link as RouterLink } from 'react-router-dom'
 
+import InfoIcon from '@material-ui/icons/Info'
 import SettingsIcon from '@material-ui/icons/Settings'
 import ExitToAppIcon from '@material-ui/icons/ExitToApp'
 import { LoadingIndicator } from '../util/LoadingIndicator'
@@ -20,6 +21,11 @@ export const Footer: React.FunctionComponent = () => {
             <Box py={1} flex='1 0 auto'>
                 <LoadingIndicator visible={isLoading} title='Trying to fetch data' />
             </Box>
+            <RouterLink to='/about-us' title='About Us'>
+                <Box p={2} color='gray' sx={{ ':hover': { color: 'black' } }}>
+                    <InfoIcon fontSize='small' />
+                </Box>
+            </RouterLink>
             <RouterLink to='/config' title='Settings'>
                 <Box p={2} color='gray' sx={{ ':hover': { color: 'black' } }}>
                     <SettingsIcon fontSize='small' />

src/renderer/components/layout/Header.tsx

@@ -25,6 +25,12 @@ export const Header: React.FunctionComponent = () => {
                             <Box flex='1 0 auto'>Settings</Box>
                         </Flex>
                     </Route>
+                    <Route path='/about-us'>
+                        <Flex sx={{ position: 'relative' }}>
+                            <BackLink />
+                            <Box flex='1 0 auto'>About us</Box>
+                        </Flex>
+                    </Route>
                     <Route>Merge Requests</Route>
                 </Switch>
             </Text>