Update visuals of hide buttons for login warning

candela97 · Apr 23, 2020 · 48da111 · 48da111
1 parent a2a0016
commit 48da111
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 34 deletions.
diff --git a/css/enhancedsteam.css b/css/enhancedsteam.css
@@ -1554,40 +1554,48 @@ img.astats_icon {
  * add_language_warning(),
  * add_fake_country_code_warning()
  **************************************/
-.es_warning {
-  display: flex;
+.es_warn {
   font-size: 12px;
-  color: #fff;
   padding: 8px 0;
   text-align: center;
-  background: linear-gradient(rgb(154, 40, 32) 0%, rgb(214, 53, 37) 100%);
+  background: linear-gradient(#9a2820 0%, #d63525 100%);
+  color: white;
 }
-.es_warning__msg {
-  display: inline;
-  flex-grow: 1;
+
+.es_warn__cnt {
+  max-width: 940px;
+  display: flex;
+  justify-content: space-between;
+  margin: auto;
+  line-height: 20px;
 }
-.es_warning__msg > a {
+.es_warn__cnt a {
   text-decoration: underline;
 }
-.es_warning__controls {
-  display: inline-flex;
-  align-items: center;
-  margin-right: 10px;
-}
-.es_warning__controls > * {
-  margin: 0 5px;
-}
-.es_warning__dont-show-again {
-  display: inline-flex;
-  align-items: center;
-}
-.es_warning__input {
-  margin-right: .5em;
+
+.es_warn__control {
+  white-space: nowrap;
 }
-.es_warning__close {
+
+.es_warn__btn {
+  background: linear-gradient(135deg, #faa 0%,#d46a6a 100%);
+  padding: 0 10px;
+  color: black;
+  text-transform: uppercase;
+  font-size: 11px;
+  border-radius: 1px;
+  text-decoration: none !important;
+  display: inline-block;
+  line-height: 20px;
   cursor: pointer;
+  white-space: nowrap;
+}
+.es_warn__btn:hover {
+  background: linear-gradient(135deg, #801515 0%,#500 100%);
+  color: white;
 }
 
+
 /***************************************
  * Wishlist
  * add_wishlist_total()

diff --git a/js/content/common.js b/js/content/common.js
@@ -1235,23 +1235,26 @@ let AugmentedSteam = (function() {
 
     function addWarning(innerHTML, stopShowingHandler) {
         let el = HTML.element(
-            `<div class="es_warning">
-                <div class="es_warning__msg">${innerHTML}</div>
-                <div class="es_warning__controls">
-                    <div class="es_warning__dont-show-again">
-                        <input type="checkbox" class="es_warning__input js_warning__input">
-                        ${Localization.str.update.dont_show}
+            `<div class="es_warn js-warn">
+                <div class="es_warn__cnt">
+                    <div>${innerHTML}</div>
+                    <div class="es_warn__control">
+                        <a class="es_warn__btn js-warn-close">${Localization.str.update.dont_show}</a>
+                        <a class="es_warn__btn js-warn-hide">${Localization.str.hide}</a>
                     </div>
-                    <div class="es_warning__close js_warning__close">X</div>
                 </div>
             </div>`);
 
-        el.querySelector(".js_warning__close").addEventListener("click", () => {
-            if (el.querySelector(".js_warning__input").checked && stopShowingHandler) {
+        el.querySelector(".js-warn-close").addEventListener("click", () => {
+            if (stopShowingHandler) {
                 stopShowingHandler();
             }
-            el.closest(".es_warning").remove();
-        })
+            el.closest(".js-warn").remove();
+        });
+
+        el.querySelector(".js-warn-hide").addEventListener("click", () => {
+            el.closest(".js-warn").remove();
+        });
 
         document.getElementById("global_header").insertAdjacentElement("afterend", el);
     }