diff --git a/src/components/app.tsx b/src/components/app.tsx index d4643e2..6bcb6be 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -54,7 +54,6 @@ const useStyles = makeStyles(theme => ({ marginLeft: -theme.spacing(2), }, copyrightTypography: { - marginRight: theme.spacing(1), textAlign: 'center', }, backdrop: { diff --git a/src/components/topmenu.tsx b/src/components/topmenu.tsx index 4e44930..79c62a5 100644 --- a/src/components/topmenu.tsx +++ b/src/components/topmenu.tsx @@ -25,6 +25,7 @@ import InfoIcon from '@material-ui/icons/Info'; import ToggleOffIcon from '@material-ui/icons/ToggleOff'; import ToggleOnIcon from '@material-ui/icons/ToggleOn'; import Win95Icon from '../images/win95/win95.png'; +import HelpIcon from '@material-ui/icons/Help'; import { W95TopMenu } from './win95/topmenu'; @@ -42,6 +43,7 @@ export const TopMenu = function(props: { onClick?: () => void }) { let discTitle = useShallowEqualSelector(state => state.main.disc?.title ?? ``); const githubLinkRef = React.useRef(null); + const helpLinkRef = React.useRef(null); const [menuAnchorEl, setMenuAnchorEl] = React.useState(null); const menuOpen = Boolean(menuAnchorEl); @@ -107,6 +109,18 @@ export const TopMenu = function(props: { onClick?: () => void }) { [handleMenuClose] ); + const handleHelpLink = useCallback( + (event: React.MouseEvent) => { + event.stopPropagation(); + if (event.target !== helpLinkRef.current) { + // Prevent opening the link twice + helpLinkRef.current?.click(); + } + handleMenuClose(); + }, + [handleMenuClose] + ); + const menuItems = []; if (mainView === 'MAIN') { menuItems.push( @@ -169,6 +183,24 @@ export const TopMenu = function(props: { onClick?: () => void }) { About ); + menuItems.push( + + + + + + + Support and FAQs + + + + ); menuItems.push( diff --git a/src/components/welcome.tsx b/src/components/welcome.tsx index a7831ce..597886e 100644 --- a/src/components/welcome.tsx +++ b/src/components/welcome.tsx @@ -16,6 +16,7 @@ import { AboutDialog } from './about-dialog'; import { TopMenu } from './topmenu'; import ChromeIconPath from '../images/chrome-icon.svg'; import { W95Welcome } from './win95/welcome'; +import OpenInNewIcon from '@material-ui/icons/OpenInNew'; const useStyles = makeStyles(theme => ({ main: { @@ -46,6 +47,20 @@ const useStyles = makeStyles(theme => ({ display: 'flex', justifyContent: 'space-between', }, + connectContainer: { + flex: '1 1 auto', + display: 'flex', + justifyContent: 'center', + flexDirection: 'column', + alignItems: 'center', + }, + supportContainer: { + flex: '1 1 auto', + display: 'flex', + justifyContent: 'center', + flexDirection: 'column', + alignItems: 'center', + }, })); export const Welcome = (props: {}) => { @@ -86,17 +101,35 @@ export const Welcome = (props: {}) => { {browserSupported ? ( - - Press the button to connect to a NetMD device - +
+ + Press the button to connect to a NetMD device + - + - - {pairingMessage} - + + {pairingMessage} + +
+
+ + + Support and FAQ{' '} + + + +
) : ( diff --git a/src/components/win95/app.tsx b/src/components/win95/app.tsx index f1f0f56..0d4865f 100644 --- a/src/components/win95/app.tsx +++ b/src/components/win95/app.tsx @@ -79,6 +79,10 @@ export const W95App = () => { setMenuOpen(!isMenuOpen); }, [isMenuOpen, setMenuOpen]); + const handleHelpClick = useCallback(() => { + window.open('https://github.com/cybercase/webminidisc/wiki/Support-and-FAQ', '_blank'); + }, []); + const currentTheme = original; const theme = { ...currentTheme, @@ -106,6 +110,9 @@ export const W95App = () => { + {isMenuOpen ? : null} <>