From 5759522aff9b4aff930a71edf0237edd18cd89ae Mon Sep 17 00:00:00 2001 From: Gene Mecija Date: Tue, 28 Jan 2020 23:46:23 -0800 Subject: [PATCH] Styling, layout --- public/index.html | 3 +- src/App.js | 29 ++--- src/components/KeyTypePicker.js | 22 +++- src/components/ModePicker.js | 30 +++-- src/components/MorseButtons.js | 13 +- src/components/WordListPicker.js | 64 +++++---- src/components/WordsPerMinute.js | 9 +- src/config.json | 2 +- src/css/App.css | 216 ++++++++++++++++++++++--------- src/css/App.css.map | 2 +- src/hooks/useElectronicKey.js | 2 +- src/scss/App.scss | 203 ++++++++++++++++++++--------- 12 files changed, 406 insertions(+), 189 deletions(-) diff --git a/public/index.html b/public/index.html index aa069f2..ff10222 100644 --- a/public/index.html +++ b/public/index.html @@ -15,6 +15,7 @@ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> + - React App + Learn Morse Code diff --git a/src/App.js b/src/App.js index 27dbfe7..c56c56f 100644 --- a/src/App.js +++ b/src/App.js @@ -21,7 +21,6 @@ import Legend from './components/Legend'; import WordsPerMinute from "./components/WordsPerMinute" import MorseButtons from './components/MorseButtons' import Footer from './components/Footer'; -import { WPMContext } from './contexts/wpmContext'; import StraightKey from './components/StraightKey'; import ElectronicKey from './components/ElectronicKey'; @@ -31,19 +30,24 @@ export default React.memo(function App() { const {keyType} = useContext(KeyTypeContext) const {gameMode} = useContext(GameModeContext) - const wpm = useContext(WPMContext) - return ( <>
- + - - - + + +
+ + + + {gameMode === 'challenge' && + + } +
{keyType === "straight" ? : @@ -64,17 +68,12 @@ export default React.memo(function App() { } */} {gameMode === 'challenge' && - <> - - - - - - - + } + +