From ee8aae1410b069442076a703abee9b3d5f8070f9 Mon Sep 17 00:00:00 2001
From: "[poww10s]" <[theironminer@gmail.com]>
Date: Fri, 20 Nov 2020 08:47:06 -0500
Subject: [PATCH] added button styling

---
 src/features/timbre/Timbre.module.css | 28 +++++++++++++++++++++++++++
 src/features/timbre/timbreSwitcher.js |  5 +++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/features/timbre/Timbre.module.css b/src/features/timbre/Timbre.module.css
index 835dde7..6d1d68a 100644
--- a/src/features/timbre/Timbre.module.css
+++ b/src/features/timbre/Timbre.module.css
@@ -8,3 +8,31 @@
 .lineBreak {
     width: 100%;
 }
+
+.buttonContainer {
+    position: fixed;
+    top: 0;
+    left: 25%;
+}
+
+.buttonContainer > button {
+    background: white;
+    color: slategrey;
+    font-size: 1em;
+    margin: 0.75em 1em;
+    padding: 0.25em 1em;
+    border: 2px solid slategrey;
+    border-radius: 3px;
+    outline: none;
+}
+
+.buttonContainer > button:hover {
+    background: white;
+    color: slateblue;
+    border: 2px solid slateblue;
+}
+.buttonContainer > button:focus {
+    background: slateblue;
+    color: white;
+    border: 2px solid slateblue;
+}
diff --git a/src/features/timbre/timbreSwitcher.js b/src/features/timbre/timbreSwitcher.js
index aa03ab4..669ab6f 100644
--- a/src/features/timbre/timbreSwitcher.js
+++ b/src/features/timbre/timbreSwitcher.js
@@ -3,6 +3,7 @@ import Timbre from './Timbre';
 import Vocoder from './Vocoder';
 import { useDispatch, useSelector } from 'react-redux';
 import { timbreCurrentUpdate } from './timbreSlice';
+import styles from './Timbre.module.css';
 
 export default function TimbreSwitcher(props) {
     const currentTimbre = useSelector((state) => state.timbres.currentTimbre);
@@ -15,8 +16,8 @@ export default function TimbreSwitcher(props) {
 
     return (
         <div>
-            <div>
-                <button onClick={(e) => handleClick(e, 'timbre1')}>
+            <div className={styles.buttonContainer}>
+                <button autoFocus onClick={(e) => handleClick(e, 'timbre1')}>
                     set to timbre 1
                 </button>
                 <button onClick={(e) => handleClick(e, 'timbre2')}>