From 04dc08935f7dbde0d5fa45dcffaff33b929d153f Mon Sep 17 00:00:00 2001
From: danielyxie <dxie@g.hmc.edu>
Date: Wed, 3 Oct 2018 13:09:11 -0500
Subject: [PATCH] Changed buttons that used <span> into <button> elements for
 real this time

---
 css/buttons.scss             |  1 +
 css/interactivetutorial.scss | 13 +++----------
 dist/engine.css              | 22 ++++++++--------------
 index.html                   | 34 +++++++++++++++++-----------------
 src/index.html               | 34 +++++++++++++++++-----------------
 5 files changed, 46 insertions(+), 58 deletions(-)

diff --git a/css/buttons.scss b/css/buttons.scss
index e93ac6bf5..48328832d 100644
--- a/css/buttons.scss
+++ b/css/buttons.scss
@@ -11,6 +11,7 @@
 /* Remove default <button> styling */
 button {
     border: none;
+    background-color: transparent;
 }
 
 .a-link-button,
diff --git a/css/interactivetutorial.scss b/css/interactivetutorial.scss
index 143260d6d..e3f7a58a5 100644
--- a/css/interactivetutorial.scss
+++ b/css/interactivetutorial.scss
@@ -53,26 +53,19 @@
     }
 }
 
-/*
-#interactive-tutorial-exit {
-    float: left;
-}
-
-#interactive-tutorial-back {
-    margin-right: 20%;
-    float: right;
-}
-*/
 #interactive-tutorial-exit {
     position: absolute;
     bottom: 0;
     left: 0;
+    padding: 4px;
 }
 
 #interactive-tutorial-back {
     float: left;
+    padding: 4px;
 }
 
 #interactive-tutorial-next {
     float: right;
+    padding: 4px;
 }
diff --git a/dist/engine.css b/dist/engine.css
index 4d3beb21c..9f86fac16 100644
--- a/dist/engine.css
+++ b/dist/engine.css
@@ -482,7 +482,8 @@ a:visited {
  */
 /* Remove default <button> styling */
 button {
-  border: none; }
+  border: none;
+  background-color: transparent; }
 
 .a-link-button,
 .std-button {
@@ -1530,26 +1531,19 @@ button {
     text-decoration: none;
     cursor: pointer; }
 
-/*
-#interactive-tutorial-exit {
-    float: left;
-}
-
-#interactive-tutorial-back {
-    margin-right: 20%;
-    float: right;
-}
-*/
 #interactive-tutorial-exit {
   position: absolute;
   bottom: 0;
-  left: 0; }
+  left: 0;
+  padding: 4px; }
 
 #interactive-tutorial-back {
-  float: left; }
+  float: left;
+  padding: 4px; }
 
 #interactive-tutorial-next {
-  float: right; }
+  float: right;
+  padding: 4px; }
 
 /* COLORS */
 /* Attributes */
diff --git a/index.html b/index.html
index 34973e2d8..e7a0b6e1a 100644
--- a/index.html
+++ b/index.html
@@ -723,8 +723,8 @@
     <!-- Log Box -->
     <div id="log-box-container">
         <div id="log-box-content">
-            <span id="log-box-close" class="popup-box-button"> Close </span>
-            <span id="log-box-kill-script" class="popup-box-button">Kill Script</span>
+            <button id="log-box-close" class="popup-box-button"> Close </button>
+            <button id="log-box-kill-script" class="popup-box-button">Kill Script</button>
             <p id="log-box-text-header"> </p>
             <p id="log-box-text"> </p>
         </div>
@@ -734,8 +734,8 @@
     <div id="yes-no-box-container" class="popup-box-container">
         <div id="yes-no-box-content" class="popup-box-content">
             <p id="yes-no-box-text"> </p>
-            <span id="yes-no-box-yes" class="popup-box-button"> Yes </span>
-            <span id="yes-no-box-no" class="popup-box-button"> No </span>
+            <button id="yes-no-box-yes" class="popup-box-button"> Yes </button>
+            <button id="yes-no-box-no" class="popup-box-button"> No </button>
         </div>
     </div>
 
@@ -744,8 +744,8 @@
         <div id="yes-no-text-input-box-content" class="popup-box-content">
             <p id="yes-no-text-input-box-text"> </p>
             <input type="text" id="yes-no-text-input-box-input" pattern="[a-zA-Z0-9-_]" maxlength="30" />
-            <span id="yes-no-text-input-box-yes" class="popup-box-button"> Yes </span>
-            <span id="yes-no-text-input-box-no" class="popup-box-button"> No </span>
+            <button id="yes-no-text-input-box-yes" class="popup-box-button"> Yes </button>
+            <button id="yes-no-text-input-box-no" class="popup-box-button"> No </button>
         </div>
     </div>
 
@@ -758,8 +758,8 @@
                 Would you like to join? <br /> <br />
                 Warning: Joining this faction may prevent you from joining other factions during this run!
             </p>
-            <span id="faction-invitation-box-yes" class="popup-box-button"> Yes </span>
-            <span id="faction-invitation-box-no" class="popup-box-button"> No </span>
+            <button id="faction-invitation-box-yes" class="popup-box-button"> Yes </button>
+            <button id="faction-invitation-box-no" class="popup-box-button"> No </button>
         </div>
     </div>
 
@@ -768,9 +768,9 @@
         <div id="infiltration-box-content" class="popup-box-content">
             <p id="infiltration-box-text"> </p>
 
-            <span id="infiltration-box-sell" class="a-link-button"> Sell on Black Market </span> <br /><br />
+            <button id="infiltration-box-sell" class="a-link-button"> Sell on Black Market </button> <br /><br />
             <select id="infiltration-faction-select"> </select> <br />
-            <span id="infiltration-box-faction" class="a-link-button"> Give to Faction for Reputation </span>
+            <button id="infiltration-box-faction" class="a-link-button"> Give to Faction for Reputation </button>
 
         </div>
     </div>
@@ -783,7 +783,7 @@
     <div id="work-in-progress-container" class="generic-fullscreen-container">
         <p id="work-in-progress-text"> </p>
 
-        <span id="work-in-progress-cancel-button"> Cancel Work </span>
+        <button id="work-in-progress-cancel-button"> Cancel Work </button>
     </div>
 
     <!-- Red Pill Container -->
@@ -798,9 +798,9 @@
     <div id="interactive-tutorial-wrapper">
     <div id="interactive-tutorial-container">
         <p id="interactive-tutorial-text"> </p>
-        <span id="interactive-tutorial-exit"> Exit Tutorial </span>
-        <span id="interactive-tutorial-next"> Next </span>
-        <span id="interactive-tutorial-back"> Back </span>
+        <button id="interactive-tutorial-exit"> Exit Tutorial </button>
+        <button id="interactive-tutorial-next"> Next </button>
+        <button id="interactive-tutorial-back"> Back </button>
     </div>
     </div>
 
@@ -839,8 +839,8 @@
             </table>
         </div>
         <div class="character-quick-options">
-            <span id="character-overview-save-button">Save Game</span>
-            <span id="character-overview-options-button">Options</span>
+            <button id="character-overview-save-button">Save Game</button>
+            <button id="character-overview-options-button">Options</button>
         </div>
     </div>
     </div>
@@ -853,7 +853,7 @@
     <!-- Game Options -->
     <div id="game-options-container" class="popup-box-container">
         <div id="game-options-content" class="game-options-box">
-            <span id="game-options-close-button">&times;</span>
+            <button id="game-options-close-button">&times;</button>
             <h1> Game Options </h1>
             <br />
             <div id="game-options-left-panel">
diff --git a/src/index.html b/src/index.html
index 8121a6b94..1d7636669 100644
--- a/src/index.html
+++ b/src/index.html
@@ -725,8 +725,8 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
     <!-- Log Box -->
     <div id="log-box-container">
         <div id="log-box-content">
-            <span id="log-box-close" class="popup-box-button"> Close </span>
-            <span id="log-box-kill-script" class="popup-box-button">Kill Script</span>
+            <button id="log-box-close" class="popup-box-button"> Close </button>
+            <button id="log-box-kill-script" class="popup-box-button">Kill Script</button>
             <p id="log-box-text-header"> </p>
             <p id="log-box-text"> </p>
         </div>
@@ -736,8 +736,8 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
     <div id="yes-no-box-container" class="popup-box-container">
         <div id="yes-no-box-content" class="popup-box-content">
             <p id="yes-no-box-text"> </p>
-            <span id="yes-no-box-yes" class="popup-box-button"> Yes </span>
-            <span id="yes-no-box-no" class="popup-box-button"> No </span>
+            <button id="yes-no-box-yes" class="popup-box-button"> Yes </button>
+            <button id="yes-no-box-no" class="popup-box-button"> No </button>
         </div>
     </div>
 
@@ -746,8 +746,8 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
         <div id="yes-no-text-input-box-content" class="popup-box-content">
             <p id="yes-no-text-input-box-text"> </p>
             <input type="text" id="yes-no-text-input-box-input" pattern="[a-zA-Z0-9-_]" maxlength="30" />
-            <span id="yes-no-text-input-box-yes" class="popup-box-button"> Yes </span>
-            <span id="yes-no-text-input-box-no" class="popup-box-button"> No </span>
+            <button id="yes-no-text-input-box-yes" class="popup-box-button"> Yes </button>
+            <button id="yes-no-text-input-box-no" class="popup-box-button"> No </button>
         </div>
     </div>
 
@@ -760,8 +760,8 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
                 Would you like to join? <br /> <br />
                 Warning: Joining this faction may prevent you from joining other factions during this run!
             </p>
-            <span id="faction-invitation-box-yes" class="popup-box-button"> Yes </span>
-            <span id="faction-invitation-box-no" class="popup-box-button"> No </span>
+            <button id="faction-invitation-box-yes" class="popup-box-button"> Yes </button>
+            <button id="faction-invitation-box-no" class="popup-box-button"> No </button>
         </div>
     </div>
 
@@ -770,9 +770,9 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
         <div id="infiltration-box-content" class="popup-box-content">
             <p id="infiltration-box-text"> </p>
 
-            <span id="infiltration-box-sell" class="a-link-button"> Sell on Black Market </span> <br /><br />
+            <button id="infiltration-box-sell" class="a-link-button"> Sell on Black Market </button> <br /><br />
             <select id="infiltration-faction-select"> </select> <br />
-            <span id="infiltration-box-faction" class="a-link-button"> Give to Faction for Reputation </span>
+            <button id="infiltration-box-faction" class="a-link-button"> Give to Faction for Reputation </button>
 
         </div>
     </div>
@@ -785,7 +785,7 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
     <div id="work-in-progress-container" class="generic-fullscreen-container">
         <p id="work-in-progress-text"> </p>
 
-        <span id="work-in-progress-cancel-button"> Cancel Work </span>
+        <button id="work-in-progress-cancel-button"> Cancel Work </button>
     </div>
 
     <!-- Red Pill Container -->
@@ -800,9 +800,9 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
     <div id="interactive-tutorial-wrapper">
     <div id="interactive-tutorial-container">
         <p id="interactive-tutorial-text"> </p>
-        <span id="interactive-tutorial-exit"> Exit Tutorial </span>
-        <span id="interactive-tutorial-next"> Next </span>
-        <span id="interactive-tutorial-back"> Back </span>
+        <button id="interactive-tutorial-exit"> Exit Tutorial </button>
+        <button id="interactive-tutorial-next"> Next </button>
+        <button id="interactive-tutorial-back"> Back </button>
     </div>
     </div>
 
@@ -841,8 +841,8 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
             </table>
         </div>
         <div class="character-quick-options">
-            <span id="character-overview-save-button">Save Game</span>
-            <span id="character-overview-options-button">Options</span>
+            <button id="character-overview-save-button">Save Game</button>
+            <button id="character-overview-options-button">Options</button>
         </div>
     </div>
     </div>
@@ -855,7 +855,7 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
     <!-- Game Options -->
     <div id="game-options-container" class="popup-box-container">
         <div id="game-options-content" class="game-options-box">
-            <span id="game-options-close-button">&times;</span>
+            <button id="game-options-close-button">&times;</button>
             <h1> Game Options </h1>
             <br />
             <div id="game-options-left-panel">