Fix various aspects of OTel survey banner styling / display (#2641)

* Fix various aspects of OTel survey banner styling / display

* Remove spurious margins to vertically center the banner text
* Use less in-your-face background color for banner
* Use icon instead of literal "X" for close button
* Don't show the banner on every docs page, only on the homepage
* Keep banner hidden via localStorage once it's dismissed once
* Remove italic style from link (italic usually just makes things harder to read)

Signed-off-by: Julius Volz <[email protected]>

* Move banner back to every page

Signed-off-by: Julius Volz <[email protected]>

---------

Signed-off-by: Julius Volz <[email protected]>

Author: juliusv

content/css/docs.css

@@ -79,8 +79,7 @@ body {
 }
 
 .banner {
-  background-color: #ffc107;
-  text-align: center;
+  background-color: rgb(252, 232, 170);
   width: 100%;
   display: flex;
   gap: 32px;
@@ -100,12 +99,11 @@ body {
 
 .banner a {
   text-decoration: underline;
-  font-style: italic;
 }
 
 .banner h3 {
+  margin: 1.2em 0;
   font-size: 16px;
-  font-weight: 600;
   font-family: Lato, sans-serif;
 }
 

layouts/banner.html

@@ -1,5 +1,6 @@
 <div class="container banner" id="banner">
-  <h3>We are doing a <a href="https://forms.gle/TomwH6tFGecZCUNy9" target="_blank">survey</a> about OTLP Resource Attributes in Prometheus, please participate!
+  <h3>We are doing a <a href="https://forms.gle/TomwH6tFGecZCUNy9" target="_blank">survey</a> about OTLP Resource
+    Attributes in Prometheus, please participate!
   </h3>
-  <button type="button" aria-label="Close" onclick="hideBanner()">X</button>
+  <button type="button" aria-label="Close" onclick="hideBanner()"><i class="ti ti-x"></i></button>
 </div>

layouts/footer.html

@@ -24,6 +24,11 @@
         if (banner) {
           banner.style.display = 'none';
         }
+        localStorage.setItem("hide-banner", "true");
+      }
+
+      if (localStorage.getItem("hide-banner") === "true") {
+        hideBanner();
       }
     </script>
   </body>