scribbletune · Dezzles · Oct 6, 2020 · Oct 6, 2020 · Oct 6, 2020 · Oct 6, 2020
diff --git a/docs/style.css b/docs/style.css
@@ -1,101 +1,7 @@
-html, body {
-	height: 100%;
-}
-body {
-	font-family: -apple-system, BlinkMacSystemFont,
-		"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-		"Fira Sans", "Droid Sans", "Helvetica Neue",
-		sans-serif;
-}
-
-.app {
-	display: flex;
-	align-items: center;
-	flex-direction: column;
-	justify-content: center;
-	height: 100%;
-}
-
-select, button {
-	margin-right: 10px;
-}
-
 .home .logo {
 	background: url(logo.png);
-	background-size: 250px;
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	width: 250px;
-	height: 277px;
 }
 
 .page .logo {
 	background: url(logo.png);
-	background-size: 150px;
-	background-position: bottom; 
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	width: 150px;
-	height: 26px;
-	position: fixed;
-	left: 20px;
-	top: 20px;
-	margin: 0;
-}
-
-.blue {
-	color: #00aeef;
-}
-
-.orange {
-	color: orange;
-}
-
-footer {
-	font-size: 12px;
-	position: static;
-	margin-top:30px;
-	text-align: center;
-	width: 100%;
-}
-
-/* Make the footer sticky for desktop */
-/*@media(min-height:520px) {
-	footer {
-		font-size: 12px;
-		position: fixed;
-		bottom: 10px;
-	}
-}*/
-
-/* Enforce landscape mode for mobile https://css-tricks.com/snippets/css/orientation-lock/ */
-/*@media (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
-	.page {
-		transform: rotate(-90deg);
-		transform-origin: left top;
-		width: 100vh;
-		overflow-x: hidden;
-		position: absolute;
-		top: 100%;
-		left: 0;
-	}
-}
-*/
-
-@media (min-width: 320px) and (max-width: 767px) {
-	.instrument {
-		margin-top: 60px;
-	}
-
-	.page .logo {
-		background-size: 120px;
-		width: 120px;
-		height: 20px;
-	}
-
-	.guitarContainer .fifteenthFret {
-		display: none !important;
-	}
 }
diff --git a/docs/vendor.js.map b/docs/vendor.js.map
diff --git a/src/App.less b/src/App.less
@@ -0,0 +1,102 @@
+html, body {
+}
+body {
+	font-family: -apple-system, BlinkMacSystemFont,
+		"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+		"Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  overflow: hidden;
+}
+
+.app {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+button {
+	margin-right: 10px;
+}
+
+.title {
+	min-height: 40px;
+	outline: 1px solid blue;
+	width: 100%;
+}
+
+.home .logo {
+	background-size: 250px;
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	width: 250px;
+	height: 277px;
+}
+
+.page .logo {
+	background-size: 150px;
+	background-position: bottom; 
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	width: 150px;
+	height: 26px;
+	left: 20px;
+	top: 20px;
+	margin: 0;
+}
+
+.blue {
+	color: #00aeef;
+}
+
+.orange {
+	color: orange;
+}
+
+footer {
+	font-size: 12px;
+	position: static;
+	margin-top:30px;
+	text-align: center;
+	width: 100%;
+}
+
+/* Make the footer sticky for desktop */
+/*@media(min-height:520px) {
+	footer {
+		font-size: 12px;
+		position: fixed;
+		bottom: 10px;
+	}
+}*/
+
+/* Enforce landscape mode for mobile https://css-tricks.com/snippets/css/orientation-lock/ */
+/*@media (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
+	.page {
+		transform: rotate(-90deg);
+		transform-origin: left top;
+		width: 100vh;
+		overflow-x: hidden;
+		position: absolute;
+		top: 100%;
+		left: 0;
+	}
+}
+*/
+
+@media (min-width: 320px) and (max-width: 767px) {
+	.instrument {
+		margin-top: 60px;
+	}
+
+	.page .logo {
+		background-size: 120px;
+		width: 120px;
+		height: 20px;
+	}
+
+	.guitarContainer .fifteenthFret {
+		display: none !important;
+	}
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { Route, Link } from 'react-router-dom';
 import Loadable from "react-loadable";
 import Menu from './components/Menu/index';
-
+import './App.less'
+import NotesSetter from './components/NotesSetter/index';
 export const LoadablePiano = Loadable({
 	loader: () => import(/* webpackChunkName: "piano" */ './modules/Piano'),
 	loading: () => <div>loading ...</div>
@@ -28,10 +29,17 @@ const App = () => {
 	mainClass += ' app';
 	return (
 		<section className={mainClass}>
-			<Link to="/">
-				<h1 className="logo">Johann</h1>
-			</Link>
-			<Menu />
+			<nav id="navbar" className="navbar has-shadow is-spaced">
+				<div className="navbar-brand">
+					<Link to="/">
+						<h1 className="logo">Johann</h1>
+					</Link>
+				</div>
+				<div className="navbar-menu">
+					<Menu />
+				</div>
+			</nav>
+			<NotesSetter />
 			<Route path='/piano' exact={true} component={LoadablePiano} />
 			<Route path='/guitar' exact={true} component={LoadableGuitar} />
 			<Route path='/keyboard' exact={true} component={LoadableComputerKeyboard} />

diff --git a/src/components/Dropdown/Dropdown.less b/src/components/Dropdown/Dropdown.less
@@ -0,0 +1,5 @@
+.dropdown {
+  width: 100%;
+  height: 40px;
+  border-radius: 4px;
+}
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-
+import './Dropdown.less'
 /**
  * @param {Array} data A list of (object) items that have the name and value of the option to be displayed
  * @param {Function} onChangeEventHandler A function that will be triggered for the onChange event of the dropdown
@@ -19,7 +19,7 @@ const Dropdown = ({data, onChangeEventHandler, controlType, selectedValue, dispa
 		onChangeEventHandler(dispatch, dataObj);
 	};
 	return (
-		<select onChange={localOnChangeHandler.bind(this)} data-control-type={controlType} value={selectedValue}>
+		<select onChange={localOnChangeHandler.bind(this)} data-control-type={controlType} value={selectedValue} className="dropdown">
 			{list}
 		</select>
 	);

diff --git a/src/components/Menu/Menu.less b/src/components/Menu/Menu.less
@@ -8,27 +8,6 @@
 		text-transform: uppercase;
 	}
 
-	nav {
-		ul {
-			list-style: none;
-			margin: 0;
-			padding: 0;
-
-			li {
-				margin: 0 10px;
-
-				a {
-					color: black;
-					font-weight: bold;
-				}
-			}
-		}
-	}
-}
-
-.menu, nav ul {
-	display: flex;
-	align-items: center;
 }
 
 /* The menu on home page is postioned differently than the pages */
@@ -44,8 +23,6 @@
 
 .page {
 	.menu {
-		position: fixed;
-		top: 20px;
 		p {
 			display: none;
 		}

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import NotesSetter from '../NotesSetter/index';
 import './Menu.less';
 
 const Menu = () => {
@@ -11,15 +10,13 @@ const Menu = () => {
 
 	return (
 		<div className="menu">
-			<p>Generate chord &amp; scale charts to practice</p>
-			<nav>
-				<ul>
-					<li className={guitarSelected}><Link to="/guitar">Guitar</Link></li>
-					<li className={pianoSelected}><Link to="/piano">Piano</Link></li>
-					<li className={keyboardSelected}><Link to="/keyboard">Keyboard</Link></li>
-				</ul>
-			</nav>
-			<NotesSetter />
+			<div className="navbar-start">
+				<div className="navbar-item">
+					<div className={guitarSelected}><Link to="/guitar">Guitar</Link></div>
+					<div className={pianoSelected}><Link to="/piano">Piano</Link></div>
+					<div className={keyboardSelected}><Link to="/keyboard">Keyboard</Link></div>
+				</div>
+			</div>
 		</div>
 	);
 };

diff --git a/src/components/NotesSetter/NotesSetter.less b/src/components/NotesSetter/NotesSetter.less
@@ -1,6 +1,15 @@
 .notesSetter {
-	list-style: none;
 	padding: 0;
 	margin: 5px 0;
 	display: flex;
+	width: 100%;
+	flex-direction: column;
+
+}
+
+.notesSetterkey {
+	padding: 0;
+	margin: 0px;
+	display: flex;
+	flex-direction: row;
 }
diff --git a/src/components/NotesSetter/index.tsx b/src/components/NotesSetter/index.tsx
@@ -34,25 +34,25 @@ const NotesSetter = ({ currentScale, currentChord, notesType, rootNote }) => {
 	}
 
 	return (
-		<ul className="notesSetter">
-			<li>
-				<Dropdown 
-					data={getPitches()} 
-					controlType="rootNote" 
-					onChangeEventHandler={controlChanged} 
-					selectedValue={rootNote}
-				/>
-			</li>
-			<li>{getChordScaleDropdown()}</li>
-			<li>
+		<div className="notesSetter">
+			<div>
 				<Dropdown 
 					data={notesTypeOptions} 
 					controlType="notesType" 
 					onChangeEventHandler={controlChanged} 
 					selectedValue={notesType}
 				/>
-			</li>
-		</ul>
+			</div>
+			<div className="notesSetterkey">
+				<Dropdown 
+					data={getPitches()} 
+					controlType="rootNote" 
+					onChangeEventHandler={controlChanged} 
+					selectedValue={rootNote}
+				/>
+				{getChordScaleDropdown()}
+			</div>
+		</div>
 	);
 };
 

diff --git a/src/modules/ComputerKeyboard/ComputerKeyboard.less b/src/modules/ComputerKeyboard/ComputerKeyboard.less
@@ -2,6 +2,8 @@
 
 .computer-keys {
 	display: flex;
+	width: fit-content;
+	margin: auto;
 }
 
 .computer-keys div {