web: move settings section to main menu

Author: x1unix

web/src/Header.tsx

@@ -4,6 +4,7 @@ import { CommandBar, ICommandBarItemProps } from 'office-ui-fabric-react/lib/Com
 import { getTheme } from '@uifabric/styling';
 import SettingsModal, {SettingsChanges} from './settings/SettingsModal';
 import AboutModal from './AboutModal';
+import config from './services/config';
 import {
     Connect,
     newImportFileDispatcher,
@@ -89,6 +90,16 @@ export class Header extends React.Component<any, HeaderState> {
                 onClick: () => {
                     this.props.dispatch(saveFileDispatcher);
                 },
+            },
+            {
+                key: 'settings',
+                text: 'Settings',
+                ariaLabel: 'Settings',
+                iconProps: {iconName: 'Settings'},
+                disabled: this.props.loading,
+                onClick: () => {
+                    this.setState({showSettings: true});
+                }
             }
         ];
     }
@@ -122,21 +133,23 @@ export class Header extends React.Component<any, HeaderState> {
     get overflowItems(): ICommandBarItemProps[] {
         return [
             {
-                key: 'settings',
-                text: 'Settings',
-                ariaLabel: 'Settings',
-                iconOnly: true,
-                iconProps: {iconName: 'Settings'},
-                disabled: this.props.loading,
-                onClick: () => {
-                    this.setState({showSettings: true});
-                }
+                key: 'new-issue',
+                text: 'Submit Issue',
+                ariaLabel: 'Submit Issue',
+                iconProps: {iconName: 'Bug'},
+                onClick: () => window.open(config.issueUrl, '_blank')
+            },
+            {
+                key: 'donate',
+                text: 'Donate',
+                ariaLabel: 'Donate',
+                iconProps: {iconName: 'Heart'},
+                onClick: () => window.open(config.donateUrl, '_blank')
             },
             {
                 key: 'about',
                 text: 'About',
                 ariaLabel: 'About',
-                iconOnly: true,
                 iconProps: {iconName: 'Info'},
                 onClick: () => {
                     this.setState({showAbout: true});

web/src/services/config.ts

@@ -49,6 +49,8 @@ export default {
     appVersion: getVariableValue('VERSION', '1.0.0'),
     serverUrl: getVariableValue('LANG_SERVER', window.location.origin),
     githubUrl: getVariableValue('GITHUB_URL', 'https://github.com/x1unix/go-playground'),
+    issueUrl: getVariableValue('ISSUE_URL', 'https://github.com/x1unix/go-playground/issues/new'),
+    donateUrl: getVariableValue('DONATE_URL', 'https://opencollective.com/bttr-go-playground'),
 
     get darkThemeEnabled(): boolean {
         if (this._cache[DARK_THEME_KEY]) {