Revert changes to options button and close button

2 files changed, 10 insertions, 62 deletions

diff --git a/public/popup.css b/public/popup.css
index 46b690c4..120c2333 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -115,18 +115,19 @@
 }
 
 /*
- * Close popup button when displayed in-page (top-left corner)
+ * Close popup button when displayed in-page (top-right corner)
  */
 .sbCloseButton {
-  border: none;
+  background: transparent;
+  border: 0;
+  padding: 8px;
   cursor: pointer;
   position: absolute;
-  background: transparent;
+  top: 5px;
+  right: 5px;
   opacity: 0.5;
-  padding: 8px;
-  left: 26px;
-  top: 26px;
 }
+
 .sbCloseButton:hover {
   opacity: 1;
 }
@@ -148,59 +149,6 @@
   margin: 8px;
 }
 
-/* 
- * Options button (top-right corner)
- */
-#optionsButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  box-shadow: none;
-  background: none;
-  border: none;
-  padding: 5px;
-  height: 32px;
-  width: 32px;
-  right: 26px;
-  top: 26px;
-}
-#optionsButton svg {
-  transition: transform 0.15s ease-in-out !important;
-  transform-origin: center center;
-  color: var(--sb-grey-fg-color);
-}
-#optionsButton:hover svg {
-  color: var(--sb-main-fg-color);
-  transform: rotate(90deg);
-}
-#optionsButton:active svg {
-  transform: scale(1.5);
-}
-
-/*
- * Options button Tooltip
- */
-#optionsButton:before {
-  background-color: var(--sb-grey-bg-color);
-  color: var(--sb-main-fg-color);
-  content: attr(data-hover);
-  pointer-events: none;
-  border-radius: 16px;
-  position: absolute;
-  padding: 4px 8px;
-  transition: .3s;
-  width: content;
-  left: -200%;
-  z-index: 1;
-  opacity: 0;
-  top: 4px;
-}
-#optionsButton:hover:before {
-  transform: translateX(-5px);
-  opacity: 1;
-}
-
 /*
  * Refresh segments button
  */
diff --git a/public/popup.html b/public/popup.html
index b038706e..7bb4b3e8 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -60,9 +60,9 @@
           <span id="disableSkipping">__MSG_disableSkipping__</span>
           <span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span>
         </label>
-        <!-- Settings link, re-positioned to top-right -->
-        <button id="optionsButton" data-hover="__MSG_Options__" title="__MSG_OptionsInfo__">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"  fill="currentColor"><path d="M24 13.6v-3.2c-1.7-.6-2.7-.8-3.2-2h0c-.5-1.3.1-2.1.8-3.7l-2.3-2.3c-1.6.7-2.4 1.4-3.7.8h0c-1.3-.5-1.4-1.6-2-3.2h-3.2c-.6 1.6-.7 2.7-2 3.2h0c-1.3.5-2.1-.1-3.7-.8L2.4 4.7c.7 1.6 1.4 2.4.8 3.7s-1.6 1.4-3.2 2v3.2c1.6.6 2.7.7 3.2 2 .5 1.3-.1 2.2-.8 3.7l2.3 2.3c1.6-.7 2.4-1.4 3.7-.8h0c1.3.5 1.4 1.6 2 3.2h3.2c.6-1.6.8-2.7 2-3.2h0c1.3-.5 2.1.1 3.7.9l2.3-2.3c-.7-1.6-1.4-2.4-.8-3.7s1.6-1.4 3.2-2zM12 16a4 4 0 1 1 0-8 4 4 0 1 1 0 8z"/></svg>
+        <button id="optionsButton" class="sbControlsMenu-item" title="__MSG_optionsInfo__">
+          <img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
+          __MSG_Options__
         </button>
       </div>