From 535621a20687167e765feff198c413f60a9c55eb Mon Sep 17 00:00:00 2001
From: Gene Mecija <genemecija@outlook.com>
Date: Fri, 31 Jan 2020 01:45:12 -0800
Subject: [PATCH] Layout updates, Info section

---
 src/App.js                       |   3 +
 src/components/Info.js           |  11 ++
 src/components/KeyTypePicker.js  |   2 +-
 src/components/Legend.js         |  17 ++-
 src/components/WordsPerMinute.js |   4 +-
 src/css/App.css                  | 171 ++++++++++++++--------------
 src/css/App.css.map              |   2 +-
 src/scss/App.scss                | 190 ++++++++++++++++---------------
 8 files changed, 213 insertions(+), 187 deletions(-)
 create mode 100644 src/components/Info.js

diff --git a/src/App.js b/src/App.js
index 132b1c4..d03e063 100644
--- a/src/App.js
+++ b/src/App.js
@@ -23,6 +23,7 @@ import MorseButtons from './components/MorseButtons'
 import Footer from './components/Footer';
 import StraightKey from './components/StraightKey';
 import ElectronicKey from './components/ElectronicKey';
+import Info from './components/Info';
 
 export default React.memo(function App() {
 
@@ -39,7 +40,9 @@ export default React.memo(function App() {
                 <WordListPickerContextProvider>
                 <WordFeederContextProvider>
                     <div id="sidebar">
+                        <Info />
                         <div id="mainOptions">
+                            <h2>Options</h2>
                             <ModePicker />
                             <KeyTypePicker />
                             <WordsPerMinute />
diff --git a/src/components/Info.js b/src/components/Info.js
new file mode 100644
index 0000000..27d62a4
--- /dev/null
+++ b/src/components/Info.js
@@ -0,0 +1,11 @@
+import React from "react"
+
+export default React.memo(function Info() {
+
+    return (
+        <div id="info">
+            <h2>Info</h2>
+            <p>This is my info section. It will contain information morse code, e.g. how long dits, dahs, and spacing is.</p>
+        </div>
+    )
+})
\ No newline at end of file
diff --git a/src/components/KeyTypePicker.js b/src/components/KeyTypePicker.js
index 1b2b41b..e8adf0e 100644
--- a/src/components/KeyTypePicker.js
+++ b/src/components/KeyTypePicker.js
@@ -36,7 +36,7 @@ export default React.memo(function KeyTypePicker() {
     return (
             <div id="keyType" className="mode-picker">
                 <div id="title">
-                    Keyer Type&nbsp;<i className="ri-question-line"></i> 
+                    Keyer&nbsp;<i className="ri-question-line"></i> 
                 </div>
                 <div id="buttons">
                     <button id="straight" className="selected" onClick={handleClick}>
diff --git a/src/components/Legend.js b/src/components/Legend.js
index acf1112..6cf3f13 100644
--- a/src/components/Legend.js
+++ b/src/components/Legend.js
@@ -26,7 +26,7 @@ function Legend() {
     }
 
     const legend = Object.keys(morseCode).map((morse, index) =>
-        <div key={"legend_item_"+index}>
+        <div key={"legend_item_"+index} className="item">
             <button key={"legend_btn_"+index} onClick={handleClick}>{morse.toUpperCase()}</button>
             <span key={"legend_spn_"+index}>{morseCode[morse]}</span>
         </div>
@@ -34,10 +34,17 @@ function Legend() {
 
     return (
             <div id="legend">
-                {legend}
-                <button id="test" onClick={handleClick}>Anya</button>
-                <button id="test" onClick={handleClick}>Alexandra</button>
-                <button id="test" onClick={handleClick}>Paris</button>
+                <div id="title">
+                    <h2>Legend</h2>
+                </div>
+                <div id="legend-items">
+                    {legend}
+                    <div>
+                        <button id="test" onClick={handleClick}>Anya</button>
+                        <button id="test" onClick={handleClick}>Alexandra</button>
+                        <button id="test" onClick={handleClick}>Paris</button>
+                    </div>
+                </div>
             </div>
     )
 }
diff --git a/src/components/WordsPerMinute.js b/src/components/WordsPerMinute.js
index 7ea67c6..76a9781 100644
--- a/src/components/WordsPerMinute.js
+++ b/src/components/WordsPerMinute.js
@@ -27,8 +27,8 @@ export default React.memo(function WordsPerMinute(props) {
                 WPM
             </div>
             <div id='input'>
-                <button id='wpm-down' onClick={decrement}><i className="ri-arrow-down-s-line"></i></button>&nbsp;
-                <input type="number" name="wpm" id='wpm-input' min="5" max="30" value={wpm} onChange={handleChange}></input>&nbsp;
+                <button id='wpm-down' onClick={decrement}><i className="ri-arrow-down-s-line"></i></button>
+                <input type="number" name="wpm" id='wpm-input' min="5" max="30" value={wpm} onChange={handleChange}></input>
                 <button id='wpm-up' onClick={increment}><i className="ri-arrow-up-s-line"></i></button>
             </div>
         </div>
diff --git a/src/css/App.css b/src/css/App.css
index b0083b6..f01ba3c 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -65,9 +65,8 @@ header {
   -ms-flex-pack: distribute;
       justify-content: space-around;
   height: 100%;
-  width: 350px;
-  padding-top: 50px;
-  padding-bottom: 50px;
+  width: 500px;
+  padding: 1.5em;
 }
 
 #main-content #main-interface {
@@ -85,11 +84,15 @@ header {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  width: 900px;
+  width: 600px;
   height: 100%;
   min-width: 400px;
 }
 
+h2 {
+  margin-bottom: 0.5em;
+}
+
 i[class*="ri-"] {
   cursor: pointer;
   font-weight: normal;
@@ -97,10 +100,6 @@ i[class*="ri-"] {
   color: #777;
 }
 
-i[class*="ri-"]:hover {
-  color: goldenrod;
-}
-
 #mainOptions {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -115,7 +114,6 @@ i[class*="ri-"]:hover {
   width: 100%;
   max-width: 95vw;
   height: 200px;
-  border: 1px solid red;
 }
 
 #mainOptions .mode-picker {
@@ -132,8 +130,25 @@ i[class*="ri-"]:hover {
           justify-content: flex-start;
 }
 
+#mainOptions .mode-picker div {
+  padding: 5px;
+  height: 2.4em;
+}
+
 #mainOptions .mode-picker #title {
   font-weight: bold;
+  font-size: 1.1em;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding-left: 0px;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 
 #mainOptions .mode-picker #buttons {
@@ -148,10 +163,6 @@ i[class*="ri-"]:hover {
           align-items: center;
 }
 
-#mainOptions .mode-picker #buttons button {
-  height: 1.4rem;
-}
-
 #mainOptions .mode-picker #input {
   margin-left: 10px;
   display: -webkit-box;
@@ -171,6 +182,7 @@ i[class*="ri-"]:hover {
   border-radius: 3px;
   border: 1px solid #ddd;
   height: 1.3rem;
+  font-size: 0.75em;
 }
 
 #mainOptions .mode-picker #input select {
@@ -178,100 +190,92 @@ i[class*="ri-"]:hover {
 }
 
 #mainOptions .mode-picker #input button {
-  height: 20px;
   width: 20px;
-  border-radius: 50%;
-  line-height: 10px;
+  height: 20px;
+  border-radius: 3px;
 }
 
 #mainOptions .mode-picker #input button i {
   position: relative;
-  left: -2px;
+  left: -1px;
+  font-size: 1.1em;
+  font-weight: bold;
 }
 
-.mode-picker {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-item-align: center;
-      align-self: center;
-}
-
-.mode-picker #title {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  margin: 7px;
-}
-
-.mode-picker button {
+#mainOptions .mode-picker button {
   background: #f1f1f1;
-  color: #333;
-  margin: 7px;
-  padding: 5px;
-  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
-          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
+  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
+          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
+  border-radius: 3px;
   border: 0px;
-  border-radius: 5px;
+  padding: 0.3em;
+  margin-left: 10px;
+  margin-right: 10px;
+  font-size: 0.75em;
+  color: #333;
 }
 
-.mode-picker .selected {
-  -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -1px 1px white;
-          box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -1px 1px white;
+#mainOptions .mode-picker button.selected {
+  -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.3), inset 0px -1px 1px white;
+          box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.3), inset 0px -1px 1px white;
 }
 
 #legend {
   background: #f1f1f1;
   width: 100%;
-  max-width: 95vw;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   -webkit-box-pack: space-evenly;
       -ms-flex-pack: space-evenly;
           justify-content: space-evenly;
-  top: 250px;
-  left: 50px;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
 
-#legend div {
+#legend #legend-items {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+}
+
+#legend #legend-items .item {
   border: 1px solid #ccc;
-  border-radius: 3px;
   margin: 1px;
   width: 80px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: nowrap;
-      flex-wrap: nowrap;
 }
 
-#legend div button {
+#legend #legend-items .item button {
   width: 20px;
   height: 20px;
   margin: 4px;
   border: 0px;
   border-radius: 2px;
-  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
-          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
+  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
+          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
 }
 
-#legend div button:active {
+#legend #legend-items .item button:active {
   -webkit-transform: translateY(3px);
           transform: translateY(3px);
   -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
           box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
 }
 
-#legend div span {
+#legend #legend-items .item span {
   width: 60%;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
@@ -296,8 +300,8 @@ i[class*="ri-"]:hover {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
-          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
+  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
+          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
   -webkit-transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
   transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
   transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out;
@@ -319,10 +323,10 @@ i[class*="ri-"]:hover {
   background: #f4f4f4;
   margin: 0px;
   border: 0px;
-  -webkit-transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
-  transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
-  transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out;
-  transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
+  -webkit-transition: width 500ms ease-out, background 500ms ease-out, color 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
+  transition: width 500ms ease-out, background 500ms ease-out, color 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
+  transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out, color 500ms ease-out;
+  transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out, color 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
 }
 
 #morseButton button.showPaddles {
@@ -331,8 +335,8 @@ i[class*="ri-"]:hover {
   font-weight: bold;
   width: 60px;
   height: 55px;
-  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
-          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
+  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
+          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
 }
 
 #morseButton button#left {
@@ -402,9 +406,9 @@ i[class*="ri-"]:hover {
   margin-bottom: 20px;
   padding-left: 10px;
   padding-right: 10px;
-  border-radius: 4px;
-  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
-          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
+  border-radius: 3px;
+  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
+          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
   font-size: 3rem;
   font-family: "Courier", monospace;
   font-weight: bold;
@@ -464,9 +468,9 @@ i[class*="ri-"]:hover {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  border-radius: 4px;
-  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
-          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
+  border-radius: 3px;
+  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
+          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
 }
 
 #morseBufferDisplay #alphanumeric-container #alphanumeric {
@@ -480,7 +484,7 @@ i[class*="ri-"]:hover {
 }
 
 #morseBufferDisplay #alphanumeric-container #alphanumeric span {
-  padding: 4px;
+  padding: 3px;
   -webkit-transition: background 300ms ease-in-out;
   transition: background 300ms ease-in-out;
 }
@@ -504,7 +508,7 @@ i[class*="ri-"]:hover {
 }
 
 #morseBufferDisplay #ditDahs span {
-  padding: 4px;
+  padding: 3px;
   -webkit-transition: background 100ms ease-in-out;
   transition: background 100ms ease-in-out;
 }
@@ -514,7 +518,7 @@ i[class*="ri-"]:hover {
   height: 40px;
   width: 30px !important;
   margin-left: 3px;
-  border-radius: 5px;
+  border-radius: 3px;
   -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 0.1);
           box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 0.1);
   display: -webkit-box;
@@ -608,9 +612,9 @@ i[class*="ri-"]:hover {
   height: 40px;
   width: 30px !important;
   margin-left: 3px;
-  border-radius: 5px;
-  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
-          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
+  border-radius: 3px;
+  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
+          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -634,12 +638,12 @@ i[class*="ri-"]:hover {
 .morseError {
   background: rgba(255, 0, 0, 0.4);
   color: #780000;
-  border-radius: 5px;
+  border-radius: 3px;
 }
 
 .correct {
   background: rgba(0, 255, 0, 0.4);
-  border-radius: 5px;
+  border-radius: 3px;
 }
 
 #morseHistory-textbox {
@@ -661,7 +665,6 @@ i[class*="ri-"]:hover {
 }
 
 #morseHistory {
-  border: 1px solid purple;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -736,7 +739,7 @@ i[class*="ri-"]:hover {
   background: rgba(255, 0, 0, 0.4);
   height: 1.7rem;
   color: #780000;
-  border-radius: 5px;
+  border-radius: 3px;
 }
 
 .morseCard .ditDahs-container, .morseCard .alphanumeric-container {
diff --git a/src/css/App.css.map b/src/css/App.css.map
index de9c89a..9f656aa 100644
--- a/src/css/App.css.map
+++ b/src/css/App.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "../scss/App.scss"
     ],
diff --git a/src/scss/App.scss b/src/scss/App.scss
index 38e2009..1044e6e 100644
--- a/src/scss/App.scss
+++ b/src/scss/App.scss
@@ -10,12 +10,12 @@ $main-bg-color-light: #f1f1f1;
 $main-font-color-light: #333;
 
 $morseCard-shadow-light: 0px 3px 3px rgba(0, 0, 0, 0.2);
-$main-box-shadow-light: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 1);
-$main-box-shadow-light-selected: inset 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -1px 1px rgba(255, 255, 255, 1);
+$main-box-shadow-light: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px rgba(255, 255, 255, 1);
+$main-box-shadow-light-selected: inset 0px 2px 2px rgba(0, 0, 0, 0.3), inset 0px -1px 1px rgba(255, 255, 255, 1);
 $main-box-shadow-dark: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 0.1);
 $main-box-shadow-dark-selected: inset 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -1px 1px rgba(255, 255, 255, 0.1);
 
-$main-border-radius: 5px;
+$main-border-radius: 3px;
 
 $border-radius-neumorphic: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15);
 $border-radius-neumorphic-dark: 0px -10px 20px rgba(255, 255, 255, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.4);
@@ -62,9 +62,8 @@ header {
         flex-direction: column;
         justify-content: space-around;
         height: 100%;
-        width: 350px;
-        padding-top: 50px;
-        padding-bottom: 50px;
+        width: 500px;
+        padding: 1.5em;
     }
     #main-interface {
         border: 1px solid blue;
@@ -72,7 +71,7 @@ header {
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        width: 900px;
+        width: 600px;
         height: 100%;
         min-width: 400px;
     }
@@ -80,15 +79,14 @@ header {
 footer {
 
 }
-
+h2 {
+    margin-bottom: 0.5em;
+}
 i[class*="ri-"] {
     cursor: pointer;
     font-weight: normal;
     font-size: 0.9rem;
     color: #777;
-    &:hover {
-        color: goldenrod;
-    }
 }
 
 #mainOptions {
@@ -98,7 +96,7 @@ i[class*="ri-"] {
     width: 100%;
     max-width: 95vw;
     height: 200px;
-    border: 1px solid red;
+    // border: 1px solid red;
     .mode-picker {
         // border: 1px solid green;
         width: 100%;
@@ -106,19 +104,27 @@ i[class*="ri-"] {
         align-self: flex-start;
         align-content: center;
         justify-content: flex-start;
-        // height: 60px;
-        // height: 45px;
+
+        div {
+            padding: 5px;
+            height: 2.4em;
+        }
+
         #title {
             font-weight: bold;
+            font-size: 1.1em;
+            // border: 1px solid red;
+            height: 100%;
+            display: flex;
+            padding-left: 0px;
+            justify-content: flex-start;
+            align-items: center;
         }
         #buttons {
             // border: 1px solid blue;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            button {
-                height: 1.4rem;
-            }
         }
         #input {
             margin-left: 10px;
@@ -131,90 +137,86 @@ i[class*="ri-"] {
                 border-radius: 3px;
                 border: 1px solid #ddd;
                 height: 1.3rem;
+                font-size: 0.75em;
             }
             select {
                 height: 1.4rem;
             }
             button {
-                height: 20px;
                 width: 20px;
-                border-radius: 50%;
-                line-height: 10px;
+                height: 20px;
+                border-radius: 3px;
+                // line-height: 10px;
                 i {
                     position: relative;
-                    left: -2px;
+                    left: -1px;
+                    // top: -2px;
+                    font-size: 1.1em;
+                    font-weight: bold;
                 }
             }
         }
-    }
-}
-
-.mode-picker {
-    display: flex;
-    align-self: center;
-    #title {
-        display: flex;  
-        justify-content: center;
-        align-items: center;
-        margin: 7px;
-    }
-
-    button {
-        // background: #fcfcfc;
-        background: $main-bg-color-light;
-        color: $main-font-color-light;
-        margin: 7px;
-        padding: 5px;
-        box-shadow: $main-box-shadow-light;
-        border: 0px;
-        border-radius: $main-border-radius;
-    }
-    .selected {
-        // color: goldenrod;
-        box-shadow: $main-box-shadow-light-selected;
-    }
-}
-
-#legend {
-    background: $main-bg-color-light;
-    width: 100%;
-    max-width: 95vw;
-    // height: 325px;
-    display: flex;
-    // flex-direction: column;
-    justify-content: space-evenly;
-    top: 250px;
-    left: 50px;
-    flex-wrap: wrap;
-
-    div {
-        border: 1px solid #ccc;
-        border-radius: 3px;
-        margin: 1px;
-        width: 80px;
-        display: flex;
-        flex-wrap: nowrap;
-        // background: #BBB;
-        
         button {
-            width: 20px;
-            height: 20px;
-            margin: 4px;
-            border: 0px;
-            border-radius: 2px;
+            background: $main-bg-color-light;
             box-shadow: $main-box-shadow-light;
-            &:active {
-                transform: translateY(3px);
-                box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
+            border-radius: $main-border-radius;
+            border: 0px;
+            padding: 0.3em;
+            margin-left: 10px;
+            margin-right: 10px;
+
+            font-size: 0.75em;
+            color: $main-font-color-light;
+
+            &.selected {
+                box-shadow: $main-box-shadow-light-selected;
             }
         }
-        span {
-            width: 60%;
-            justify-content: center;
-            text-align: center;
+    }
+}
+
+
+#legend {
+    // border: 1px solid orange;
+    background: $main-bg-color-light;
+    width: 100%;
+    // height: 325px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+
+    #legend-items {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        width: 100%;
+        
+        .item {
+            border: 1px solid #ccc;
+            margin: 1px;
+            width: 80px;
+            display: flex;
+
+            button {
+                width: 20px;
+                height: 20px;
+                margin: 4px;
+                border: 0px;
+                border-radius: 2px;
+                box-shadow: $main-box-shadow-light;
+                &:active {
+                    transform: translateY(3px);
+                    box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
+                }
+            }
+            span {
+                width: 60%;
+                justify-content: center;
+                text-align: center;
+            }
         }
     }
-
 }
 
 #morseButton {
@@ -249,7 +251,7 @@ i[class*="ri-"] {
         margin: 0px;
         border: 0px;
         // transition: all 20ms ease-out;
-        transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out;
+        transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out, color 500ms ease-out;
         
         &.showPaddles {
             color: #888;
@@ -378,7 +380,7 @@ i[class*="ri-"] {
     padding-right: 10px;
 
     // border: 1px solid green;
-    border-radius: 4px;
+    border-radius: $main-border-radius;
     box-shadow: $main-box-shadow-light;
     
     font-size: 3rem;
@@ -425,7 +427,7 @@ i[class*="ri-"] {
         display: flex;
         justify-content: center;
         align-items: center;
-        border-radius: 4px;
+        border-radius: $main-border-radius;
         box-shadow: $main-box-shadow-light;
         // box-shadow: $morseCard-shadow-light;
         
@@ -441,7 +443,7 @@ i[class*="ri-"] {
             }
 
             span {
-                padding: 4px;
+                padding: $main-border-radius;
                 transition: background 300ms ease-in-out;
             }
         }
@@ -460,7 +462,7 @@ i[class*="ri-"] {
         font-weight: bold;
 
         span {
-            padding: 4px;
+            padding: $main-border-radius;
             transition: background 100ms ease-in-out;
         }
 
@@ -560,13 +562,13 @@ i[class*="ri-"] {
 .morseError {
     background: rgba(255,0,0,0.4);
     color: rgb(120, 0, 0);
-    border-radius: 5px;
+    border-radius: $main-border-radius;
     // text-decoration: line-through;
 }
 .correct {
     background: rgba(0,255,0,0.4);
     // color: rgb(120, 0, 0);
-    border-radius: 5px;
+    border-radius: $main-border-radius;
 }
 
 // #morseHistory {
@@ -593,7 +595,7 @@ i[class*="ri-"] {
     }
 }
 #morseHistory {
-    border: 1px solid purple;
+    // border: 1px solid purple;
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -647,7 +649,7 @@ i[class*="ri-"] {
         background: #fdfdfd;
         // width: 50%;
         white-space: nowrap;
-        border-radius: 3px;
+        border-radius: $main-border-radius;
         box-shadow: $morseCard-shadow-light;
         line-height: 1.7rem;
         display: flex;
@@ -657,7 +659,7 @@ i[class*="ri-"] {
             height: 1.7rem;
             // background: blue;
             color: rgb(120, 0, 0);
-            border-radius: 5px;
+            border-radius: $main-border-radius;
             // text-decoration: line-through;
         }
     }