From 8ea6efec93612af493595a331fbafe36062f6af5 Mon Sep 17 00:00:00 2001
From: mrfry <mrfry@airmail.cc>
Date: Tue, 17 Nov 2020 13:09:17 +0100
Subject: [PATCH] Moved x button to seperate div, changed up/down arrows during
 test solving to fancy arrows

---
 stable.user.js | 60 +++++++++++++++++++++++++++-----------------------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/stable.user.js b/stable.user.js
index cb411c2..750f05b 100755
--- a/stable.user.js
+++ b/stable.user.js
@@ -1851,6 +1851,25 @@
           mainDiv.style.top = mousePosition.y + offset[1] + 'px'
         }
       })
+
+      const xrow = document.createElement('div')
+      SetStyle(xrow, {
+        height: '20px',
+        display: 'flex',
+        justifyContent: 'flex-end',
+      })
+      mainDiv.appendChild(xrow)
+
+      const xButton = CreateNodeWithText(xrow, '❌', 'div')
+      SetStyle(xButton, {
+        margin: '5px',
+        cursor: 'pointer',
+      })
+      xButton.addEventListener('mousedown', e => {
+        e.stopPropagation()
+        mainDiv.parentNode.removeChild(mainDiv)
+      })
+
       // ------------------------------------------------------------------
       var matchPercent = msgItem[0][0].p
       if (isSimpleMessage) {
@@ -1966,16 +1985,17 @@
           percentTextBox.innerText = relevantQuestion.p + '%'
         }
 
+        const buttonStyle = {
+          color: 'white',
+          backgroundColor: 'transparent',
+          margin: buttonMargin,
+          border: 'none',
+          fontSize: '30px',
+          cursor: 'pointer',
+          userSelect: 'none',
+        }
         var buttonMargin = '2px 2px 2px 2px' // uniform button margin
         if (msgItem[currItem].length > 1) {
-          const buttonStyle = {
-            color: 'white',
-            backgroundColor: 'transparent',
-            margin: buttonMargin,
-            border: 'none',
-            fontSize: '30px',
-            cursor: 'pointer',
-          }
           // PREV SUGG BUTTON ------------------------------------------------------------------------------------------------------------
           var prevSuggButton = CreateNodeWithText(
             prevSuggestionCell,
@@ -2009,8 +2029,8 @@
         } else {
           // if there are multiple items to display
           // PREV QUESTION BUTTON ------------------------------------------------------------------------------------------------------------
-          var prevButton = CreateNodeWithText(prevQuestionCell, '^', 'button')
-          prevButton.style.margin = buttonMargin // fancy margin
+          var prevButton = CreateNodeWithText(prevQuestionCell, '⬆️', 'div')
+          SetStyle(prevButton, buttonStyle)
 
           // event listener
           prevButton.addEventListener('click', function() {
@@ -2018,8 +2038,8 @@
             SetQuestionText()
           })
           // NEXT QUESTION BUTTON ------------------------------------------------------------------------------------------------------------
-          var nextButton = CreateNodeWithText(nextQuestionCell, 'ˇ', 'button')
-          nextButton.style.margin = buttonMargin // fancy margin
+          var nextButton = CreateNodeWithText(nextQuestionCell, '⬇️', 'div')
+          SetStyle(nextButton, buttonStyle)
 
           // event listener
           nextButton.addEventListener('click', function() {
@@ -2031,22 +2051,6 @@
       }
       appedtTo.appendChild(mainDiv) // THE FINAL APPEND
 
-      const xButton = CreateNodeWithText(mainDiv, '❌', 'div')
-      const xButtonSize = 40
-      SetStyle(xButton, {
-        margin: '5px',
-        position: 'absolute',
-        height: xButtonSize + 'px',
-        top: 0,
-        width: xButtonSize + 'px',
-        left: width - xButtonSize + 'px',
-        cursor: 'pointer',
-      })
-      xButton.addEventListener('mousedown', e => {
-        e.stopPropagation()
-        mainDiv.parentNode.removeChild(mainDiv)
-      })
-
       // setting some events
       // addEventListener(window, 'scroll', function () {
       //   mainDiv.style.top = (pageYOffset + startFromTop) + 'px';