From 29812fba219e7f783207c78dfd589402cc232cd6 Mon Sep 17 00:00:00 2001
From: seaerchin <jer005@e.ntu.edu.sg>
Date: Thu, 8 Apr 2021 00:07:24 +0800
Subject: [PATCH] feat(css/html): added css/html for keymap legend styling

---
 src/sass/style.scss |  3 +++
 static/index.html   | 29 +++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/sass/style.scss b/src/sass/style.scss
index cb650b3ae..17a39e57d 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -3041,6 +3041,7 @@ key {
     &.languageGroups,
     &.layout,
     &.keymapLayout,
+    &.keymapLegendStyle,
     &.fontFamily,
     &.funbox,
     &.keymapStyle,
@@ -3553,6 +3554,7 @@ key {
     .pageSettings .section.language .buttons,
     .pageSettings .section.layout .buttons,
     .pageSettings .section.keymapLayout .buttons,
+    .pageSettings .section.keymapLegendStyle .buttons,
     .pageSettings .section.fontFamily .buttons,
     .pageSettings .section.funbox .buttons,
     .pageSettings .section.keymapStyle .buttons {
@@ -3663,6 +3665,7 @@ key {
     .pageSettings .section.language .buttons,
     .pageSettings .section.layout .buttons,
     .pageSettings .section.keymapLayout .buttons,
+    .pageSettings .section.keymapLegendStyle .buttons,
     .pageSettings .section.fontFamily .buttons,
     .pageSettings .section.funbox .buttons,
     .pageSettings .section.keymapStyle .buttons {
diff --git a/static/index.html b/static/index.html
index 7274cd36c..011cc7807 100644
--- a/static/index.html
+++ b/static/index.html
@@ -2769,6 +2769,35 @@
                   </div>
                 </div>
               </div>
+              <div class="section keymapLegendStyle">
+                <h1>keymap legend style</h1>
+                <div class="buttons">
+                  <div
+                    class="button"
+                    keymapStyle="lowercase"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    lowercase
+                  </div>
+                  <div
+                    class="button"
+                    keymapStyle="uppercase"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    UPPERCASE
+                  </div>
+                  <div
+                    class="button"
+                    keymapStyle="blank"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    &nbsp;
+                  </div>
+                </div>
+              </div>
               <div class="section keymapLayout">
                 <h1>keymap layout</h1>
                 <div class="buttons"></div>