diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index 29767a2a24c4c538fc9f6f816cff3d2bc37932b8..d6fbe52db03643eb44a344c7e8b9b527af34c8e5 100644 --- a/examples/web/react/app.tsx +++ b/examples/web/react/app.tsx @@ -293,6 +293,9 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => { const onKeyboardClick = () => { showToast("Keyboard click"); }; + const onInformationClick = () => { + showToast("Information click"); + }; const onThemeClick = () => { setBackgroundIndex((backgroundIndex + 1) % backgrounds.length); }; @@ -420,6 +423,12 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => { imageAlt="keyboard" onClick={onKeyboardClick} /> + <Button + text={"Information"} + image={require("../res/info.svg")} + imageAlt="iformation" + onClick={onInformationClick} + /> <Button text={"Theme"} image={require("../res/marker.svg")} diff --git a/examples/web/react/components/button-container/button-container.css b/examples/web/react/components/button-container/button-container.css index 6bf22e660471139564a60639b8e52b7fe4b33da3..1d1df8f7b94bc330238cfcb7dbaa2ecea756599c 100644 --- a/examples/web/react/components/button-container/button-container.css +++ b/examples/web/react/components/button-container/button-container.css @@ -3,8 +3,8 @@ } .button-container > * { - margin-right: 8px; margin-bottom: 12px; + margin-right: 8px; } .button-container > *:last-child { diff --git a/examples/web/react/components/keyboard-chip8/keyboard-chip8.css b/examples/web/react/components/keyboard-chip8/keyboard-chip8.css index 002e132137edafae2c89d5fa6fbcd1b44bb91943..01f35fef038dc2cc39305784fdfde7dca61efb1d 100644 --- a/examples/web/react/components/keyboard-chip8/keyboard-chip8.css +++ b/examples/web/react/components/keyboard-chip8/keyboard-chip8.css @@ -1,55 +1,55 @@ - -.keyboard-chip8 { - font-size: 0px; - text-align: center; - touch-callout: none; - -o-touch-callout: none; - -ms-touch-callout: none; - -moz-touch-callout: none; - -khtml-touch-callout: none; - -webkit-touch-callout: none; - user-select: none; - -o-user-select: none; - -ms-user-select: none; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; -} - -.keyboard-chip8 > .keyboard-line { - margin-bottom: 12px; -} - -.keyboard-chip8 > .keyboard-line:last-child { - margin-bottom: 0px; -} - -.keyboard-chip8 .key { - border: 2px solid #ffffff; - border-radius: 5px 5px 5px 5px; - -o-border-radius: 5px 5px 5px 5px; - -ms-border-radius: 5px 5px 5px 5px; - -moz-border-radius: 5px 5px 5px 5px; - -khtml-border-radius: 5px 5px 5px 5px; - -webkit-border-radius: 5px 5px 5px 5px; - cursor: pointer; - display: inline-block; - font-size: 38px; - height: 48px; - line-height: 46px; - margin-right: 14px; - text-align: center; - width: 48px; -} - -.keyboard-chip8 .key:last-child { - margin-right: 0px; -} - -.keyboard-chip8 .key:hover { - background-color: #50cb93; -} - -.keyboard-chip8 .key:active { - background-color: #2a9d8f; -} + +.keyboard-chip8 { + font-size: 0px; + text-align: center; + touch-callout: none; + -o-touch-callout: none; + -ms-touch-callout: none; + -moz-touch-callout: none; + -khtml-touch-callout: none; + -webkit-touch-callout: none; + user-select: none; + -o-user-select: none; + -ms-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; +} + +.keyboard-chip8 > .keyboard-line { + margin-bottom: 12px; +} + +.keyboard-chip8 > .keyboard-line:last-child { + margin-bottom: 0px; +} + +.keyboard-chip8 .key { + border: 2px solid #ffffff; + border-radius: 5px 5px 5px 5px; + -o-border-radius: 5px 5px 5px 5px; + -ms-border-radius: 5px 5px 5px 5px; + -moz-border-radius: 5px 5px 5px 5px; + -khtml-border-radius: 5px 5px 5px 5px; + -webkit-border-radius: 5px 5px 5px 5px; + cursor: pointer; + display: inline-block; + font-size: 38px; + height: 48px; + line-height: 46px; + margin-right: 14px; + text-align: center; + width: 48px; +} + +.keyboard-chip8 .key:last-child { + margin-right: 0px; +} + +.keyboard-chip8 .key:hover { + background-color: #50cb93; +} + +.keyboard-chip8 .key:active { + background-color: #2a9d8f; +}