From a0c7dcadd65fa7363a4b0f94504ff20015d50fac Mon Sep 17 00:00:00 2001
From: ebembi-crdb <ebembi.bembi@cockroachlabs.com>
Date: Sun, 16 Mar 2025 17:35:07 +0530
Subject: [PATCH 1/4] feedback widget

---
 src/current/_includes/feedback-widget.html | 316 +++++++++++++++++++++
 src/current/_layouts/default.html          |   1 +
 2 files changed, 317 insertions(+)
 create mode 100644 src/current/_includes/feedback-widget.html

diff --git a/src/current/_includes/feedback-widget.html b/src/current/_includes/feedback-widget.html
new file mode 100644
index 00000000000..e32946e8307
--- /dev/null
+++ b/src/current/_includes/feedback-widget.html
@@ -0,0 +1,316 @@
+<!-- _includes/feedback-widget.html -->
+<div id="sticky-feedback-widget">
+  <!-- Sticky button with star SVG icon -->
+  <button id="sticky-rating-btn">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" role="presentation" aria-hidden="true">
+      <path fill="currentColor" d="M7.538 1.11a.5.5 0 0 1 .924 0l1.537 3.696a.5.5 0 0 0 .421.306l3.99.32a.5.5 0 0 1 .285.878l-3.04 2.604a.5.5 0 0 0-.16.496l.928 3.893a.5.5 0 0 1-.747.542L8.261 11.76a.5.5 0 0 0-.522 0l-3.415 2.086a.5.5 0 0 1-.747-.542l.928-3.893a.5.5 0 0 0-.16-.496L1.304 6.31a.5.5 0 0 1 .285-.878l3.99-.32A.5.5 0 0 0 6 4.806L7.538 1.11Z"></path>
+    </svg>
+    Rate This Page
+  </button>
+
+  <!-- Feedback window: a panel (not a full-screen modal) -->
+  <div id="feedback-overlay">
+    <div id="feedback-window">
+      <!-- Close button at top right -->
+      <span id="feedback-close-btn">&times;</span>
+
+      <!-- Star rating always visible at top -->
+      <div id="star-container">
+        <div id="star-rating">
+          <span class="star" data-value="1">★</span>
+          <span class="star" data-value="2">★</span>
+          <span class="star" data-value="3">★</span>
+          <span class="star" data-value="4">★</span>
+          <span class="star" data-value="5">★</span>
+        </div>
+      </div>
+
+      <!-- Step 1: Prompt to select star rating -->
+      <div id="step1" class="feedback-step active">
+        <p>Please select a star rating above.</p>
+      </div>
+
+      <!-- Step 2: Feedback Form -->
+      <div id="step2" class="feedback-step">
+        <h3 id="feedback-heading">Tell us about your experience</h3>
+        <textarea id="comments" placeholder="Tell us about your experience"></textarea>
+        <input type="email" id="email" placeholder="Email Address (Optional)" />
+        <button id="screenshot-btn">Show us a screenshot</button>
+        <input type="file" id="screenshot" accept="image/*" />
+        <button id="submit-btn">Send</button>
+      </div>
+
+      <!-- Step 3: Thank You & Documentation Links -->
+      <div id="step3" class="feedback-step">
+        <h3>Thank you for your feedback!</h3>
+        <p>Your input helps us improve our documentation.</p>
+        <hr>
+        <h4>Explore More Documentation:</h4>
+        <ul id="doc-links">
+          <li><a href="https://www.cockroachlabs.com/docs/" target="_blank">CockroachDB Docs</a></li>
+          <li><a href="https://university.cockroachlabs.com/" target="_blank">Cockroach University</a></li>
+          <li><a href="https://forum.cockroachlabs.com/" target="_blank">CockroachDB Community Forums</a></li>
+          <li><a href="https://support.cockroachlabs.com/" target="_blank">CockroachDB Support</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Sticky Feedback Widget Styles */
+  #sticky-feedback-widget {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    position: relative;
+    z-index: 9999;
+  }
+  /* Sticky button in bottom-right corner, shifted left to be beside Kapa AI button */
+  #sticky-rating-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 220px;
+    background-color: #6B46C1;
+    color: #fff;
+    border: none;
+    border-radius: 12px;
+    padding: 12px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    z-index: 9999;
+    display: inline-flex;
+    align-items: center;
+  }
+  #sticky-rating-btn svg {
+    margin-right: 8px;
+  }
+  #sticky-rating-btn:hover {
+    background-color: #5a379f;
+  }
+  /* Feedback window overlay: a fixed window (not full-screen modal) */
+  #feedback-overlay {
+    display: none;
+    position: fixed;
+    bottom: 80px; /* Appear above the sticky button */
+    right: 20px;
+    width: 420px;
+    max-width: 90%;
+    z-index: 10000;
+  }
+  /* Feedback window panel */
+  #feedback-window {
+    position: relative;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+    padding: 24px;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+  /* Close button at top right of the window */
+  #feedback-close-btn {
+    position: absolute;
+    top: 8px;
+    right: 12px;
+    font-size: 24px;
+    cursor: pointer;
+    color: #666;
+  }
+  #feedback-close-btn:hover {
+    color: #333;
+  }
+  /* Star rating container */
+  #star-container {
+    text-align: center;
+    margin-bottom: 16px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+  }
+  #star-rating {
+    margin: 8px 0;
+  }
+  .star {
+    font-size: 30px;
+    color: #ccc;
+    cursor: pointer;
+    margin: 0 4px;
+    transition: transform 0.25s ease, color 0.25s ease;
+  }
+  .star.hover, .star.selected {
+    color: #FFD700; /* golden stars */
+    transform: scale(1.3);
+  }
+  /* Feedback steps */
+  .feedback-step {
+    display: none;
+    text-align: center;
+  }
+  .feedback-step.active {
+    display: block;
+  }
+  /* Form elements */
+  textarea, input[type="email"] {
+    width: 100%;
+    padding: 10px;
+    margin: 12px 0;
+    border: 1px solid #ddd;
+    border-radius: 12px;
+    font-size: 14px;
+    box-sizing: border-box;
+  }
+  textarea {
+    min-height: 100px;
+    resize: vertical;
+  }
+  /* Hidden file input */
+  #screenshot {
+    display: none;
+  }
+  /* Screenshot and Send buttons */
+  #screenshot-btn, #submit-btn {
+    background-color: #6B46C1;
+    color: #fff;
+    border: none;
+    border-radius: 12px;
+    padding: 10px 16px;
+    font-size: 14px;
+    cursor: pointer;
+    margin-top: 10px;
+    display: block;
+  }
+  #submit-btn {
+    margin-top: 16px;
+    width: 100%;
+  }
+  #screenshot-btn:hover, #submit-btn:hover {
+    background-color: #5a379f;
+  }
+  /* Documentation links in final step */
+  #doc-links {
+    list-style-type: none;
+    padding: 0;
+    margin-top: 16px;
+    text-align: left;
+  }
+  #doc-links li {
+    margin: 8px 0;
+  }
+  #doc-links a {
+    text-decoration: none;
+    color: #6B46C1;
+    font-weight: 500;
+  }
+  #doc-links a:hover {
+    text-decoration: underline;
+  }
+  /* Headings */
+  #feedback-window h3 {
+    margin-top: 0;
+    margin-bottom: 12px;
+    font-size: 18px;
+    color: #333;
+  }
+  #feedback-window h4 {
+    margin-bottom: 8px;
+    font-size: 16px;
+    color: #333;
+  }
+  /* Horizontal rule */
+  #feedback-window hr {
+    border: 0;
+    height: 1px;
+    background-color: #eee;
+    margin: 16px 0;
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const stickyBtn       = document.getElementById('sticky-rating-btn');
+    const feedbackOverlay = document.getElementById('feedback-overlay');
+    const feedbackWindow  = document.getElementById('feedback-window');
+    const closeBtn        = document.getElementById('feedback-close-btn');
+    const step1           = document.getElementById('step1');
+    const step2           = document.getElementById('step2');
+    const step3           = document.getElementById('step3');
+    const stars           = document.querySelectorAll('.star');
+    const feedbackHeading = document.getElementById('feedback-heading');
+    const commentsField   = document.getElementById('comments');
+    const emailField      = document.getElementById('email');
+    const screenshotBtn   = document.getElementById('screenshot-btn');
+    const screenshotField = document.getElementById('screenshot');
+    const submitBtn       = document.getElementById('submit-btn');
+    let currentRating     = 0;
+
+    // Function to reset the widget
+    function resetWidget() {
+      currentRating = 0;
+      stars.forEach(s => s.classList.remove('selected', 'hover'));
+      commentsField.value = '';
+      emailField.value = '';
+      screenshotField.value = '';
+      step1.classList.add('active');
+      step2.classList.remove('active');
+      step3.classList.remove('active');
+      feedbackHeading.textContent = 'Tell us about your experience';
+      commentsField.placeholder   = 'Tell us about your experience';
+      screenshotBtn.textContent   = 'Show us a screenshot';
+    }
+
+    // Clicking the sticky button resets and opens the feedback window
+    stickyBtn.addEventListener('click', () => {
+      resetWidget();
+      feedbackOverlay.style.display = 'block';
+    });
+
+    // Close button: hides the feedback window
+    closeBtn.addEventListener('click', () => {
+      feedbackOverlay.style.display = 'none';
+    });
+
+    // Star rating hover & selection
+    stars.forEach(star => {
+      star.addEventListener('mouseover', () => {
+        const val = parseInt(star.getAttribute('data-value'), 10);
+        stars.forEach(s => s.classList.toggle('hover', parseInt(s.getAttribute('data-value'), 10) <= val));
+      });
+      star.addEventListener('mouseout', () => {
+        stars.forEach(s => s.classList.remove('hover'));
+      });
+      star.addEventListener('click', () => {
+        currentRating = parseInt(star.getAttribute('data-value'), 10);
+        stars.forEach(s => s.classList.toggle('selected', parseInt(s.getAttribute('data-value'), 10) <= currentRating));
+        // Transition from Step 1 -> Step 2
+        step1.classList.remove('active');
+        step2.classList.add('active');
+        if (currentRating <= 2) {
+          feedbackHeading.textContent = 'Tell us how we can improve';
+          commentsField.placeholder = 'Tell us how we can improve';
+          screenshotBtn.textContent = 'Show us where the problem is';
+        } else {
+          feedbackHeading.textContent = 'Tell us more about your experience';
+          commentsField.placeholder = 'Tell us more about your experience';
+          screenshotBtn.textContent = 'Show us a screenshot';
+        }
+      });
+    });
+
+    // Screenshot button triggers the hidden file input
+    screenshotBtn.addEventListener('click', () => {
+      screenshotField.click();
+    });
+
+    // Submit feedback: In a real app, send data to the server here.
+    submitBtn.addEventListener('click', () => {
+      step2.classList.remove('active');
+      step3.classList.add('active');
+    });
+
+    // Prevent overlay from closing when clicking inside the feedback window
+    feedbackWindow.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+  });
+</script>
diff --git a/src/current/_layouts/default.html b/src/current/_layouts/default.html
index 55b89dbf944..937cbee230a 100755
--- a/src/current/_layouts/default.html
+++ b/src/current/_layouts/default.html
@@ -117,5 +117,6 @@
     });
   };
 </script>
+{% include feedback-widget.html %}
   </body>
 </html>

From 454d41e222618b533a104de45c8d8de041a562d4 Mon Sep 17 00:00:00 2001
From: ebembi-crdb <ebembi.bembi@cockroachlabs.com>
Date: Tue, 1 Apr 2025 20:26:17 +0530
Subject: [PATCH 2/4] review changes

---
 src/current/_includes/feedback-widget.html | 122 +++++++++++----------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/src/current/_includes/feedback-widget.html b/src/current/_includes/feedback-widget.html
index e32946e8307..1e150b8aafa 100644
--- a/src/current/_includes/feedback-widget.html
+++ b/src/current/_includes/feedback-widget.html
@@ -8,13 +8,11 @@
     Rate This Page
   </button>
 
-  <!-- Feedback window: a panel (not a full-screen modal) -->
+  <!-- Feedback overlay -->
   <div id="feedback-overlay">
     <div id="feedback-window">
-      <!-- Close button at top right -->
       <span id="feedback-close-btn">&times;</span>
 
-      <!-- Star rating always visible at top -->
       <div id="star-container">
         <div id="star-rating">
           <span class="star" data-value="1">★</span>
@@ -25,12 +23,10 @@
         </div>
       </div>
 
-      <!-- Step 1: Prompt to select star rating -->
       <div id="step1" class="feedback-step active">
         <p>Please select a star rating above.</p>
       </div>
 
-      <!-- Step 2: Feedback Form -->
       <div id="step2" class="feedback-step">
         <h3 id="feedback-heading">Tell us about your experience</h3>
         <textarea id="comments" placeholder="Tell us about your experience"></textarea>
@@ -40,7 +36,6 @@ <h3 id="feedback-heading">Tell us about your experience</h3>
         <button id="submit-btn">Send</button>
       </div>
 
-      <!-- Step 3: Thank You & Documentation Links -->
       <div id="step3" class="feedback-step">
         <h3>Thank you for your feedback!</h3>
         <p>Your input helps us improve our documentation.</p>
@@ -49,7 +44,7 @@ <h4>Explore More Documentation:</h4>
         <ul id="doc-links">
           <li><a href="https://www.cockroachlabs.com/docs/" target="_blank">CockroachDB Docs</a></li>
           <li><a href="https://university.cockroachlabs.com/" target="_blank">Cockroach University</a></li>
-          <li><a href="https://forum.cockroachlabs.com/" target="_blank">CockroachDB Community Forums</a></li>
+          <li><a href="https://forum.cockroachlabs.com/" target="_blank">Community Forums</a></li>
           <li><a href="https://support.cockroachlabs.com/" target="_blank">CockroachDB Support</a></li>
         </ul>
       </div>
@@ -57,48 +52,52 @@ <h4>Explore More Documentation:</h4>
   </div>
 </div>
 
+<!-- Styles -->
 <style>
-  /* Sticky Feedback Widget Styles */
   #sticky-feedback-widget {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     position: relative;
     z-index: 9999;
   }
-  /* Sticky button in bottom-right corner, shifted left to be beside Kapa AI button */
+
   #sticky-rating-btn {
     position: fixed;
-    bottom: 20px;
-    right: 220px;
-    background-color: #6B46C1;
-    color: #fff;
-    border: none;
-    border-radius: 12px;
-    padding: 12px 16px;
+    bottom: 120px; /* updated from 20px to 90px */
+    right: 20px;
+    background-color: rgba(76, 14, 255, 0.05);
+    color: #4C0EFF;
+    border: 1.5px solid #4C0EFF;
+    border-radius: 8px;
+    padding: 10px 16px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    z-index: 9999;
     display: inline-flex;
     align-items: center;
+    gap: 6px;
+    backdrop-filter: blur(4px);
+    transition: background-color 0.2s ease, box-shadow 0.2s ease;
   }
+
   #sticky-rating-btn svg {
-    margin-right: 8px;
+    color: #4C0EFF;
   }
+
   #sticky-rating-btn:hover {
-    background-color: #5a379f;
+    background-color: rgba(76, 14, 255, 0.1);
+    box-shadow: 0 2px 6px rgba(76, 14, 255, 0.2);
   }
-  /* Feedback window overlay: a fixed window (not full-screen modal) */
+
   #feedback-overlay {
     display: none;
     position: fixed;
-    bottom: 80px; /* Appear above the sticky button */
+    bottom: 160px;
     right: 20px;
     width: 420px;
     max-width: 90%;
     z-index: 10000;
   }
-  /* Feedback window panel */
+
   #feedback-window {
     position: relative;
     background: #fff;
@@ -109,7 +108,7 @@ <h4>Explore More Documentation:</h4>
     max-height: 90vh;
     overflow-y: auto;
   }
-  /* Close button at top right of the window */
+
   #feedback-close-btn {
     position: absolute;
     top: 8px;
@@ -118,19 +117,22 @@ <h4>Explore More Documentation:</h4>
     cursor: pointer;
     color: #666;
   }
+
   #feedback-close-btn:hover {
     color: #333;
   }
-  /* Star rating container */
+
   #star-container {
     text-align: center;
     margin-bottom: 16px;
     padding-bottom: 10px;
     border-bottom: 1px solid #eee;
   }
+
   #star-rating {
     margin: 8px 0;
   }
+
   .star {
     font-size: 30px;
     color: #ccc;
@@ -138,19 +140,21 @@ <h4>Explore More Documentation:</h4>
     margin: 0 4px;
     transition: transform 0.25s ease, color 0.25s ease;
   }
+
   .star.hover, .star.selected {
-    color: #FFD700; /* golden stars */
+    color: #FFD700;
     transform: scale(1.3);
   }
-  /* Feedback steps */
+
   .feedback-step {
     display: none;
     text-align: center;
   }
+
   .feedback-step.active {
     display: block;
   }
-  /* Form elements */
+
   textarea, input[type="email"] {
     width: 100%;
     padding: 10px;
@@ -160,17 +164,18 @@ <h4>Explore More Documentation:</h4>
     font-size: 14px;
     box-sizing: border-box;
   }
+
   textarea {
     min-height: 100px;
     resize: vertical;
   }
-  /* Hidden file input */
+
   #screenshot {
     display: none;
   }
-  /* Screenshot and Send buttons */
+
   #screenshot-btn, #submit-btn {
-    background-color: #6B46C1;
+    background-color: #4C0EFF;
     color: #fff;
     border: none;
     border-radius: 12px;
@@ -180,44 +185,50 @@ <h4>Explore More Documentation:</h4>
     margin-top: 10px;
     display: block;
   }
+
   #submit-btn {
     margin-top: 16px;
     width: 100%;
   }
+
   #screenshot-btn:hover, #submit-btn:hover {
-    background-color: #5a379f;
+    background-color: #3a0ccc;
   }
-  /* Documentation links in final step */
+
   #doc-links {
     list-style-type: none;
     padding: 0;
     margin-top: 16px;
     text-align: left;
   }
+
   #doc-links li {
     margin: 8px 0;
   }
+
   #doc-links a {
     text-decoration: none;
-    color: #6B46C1;
+    color: #4C0EFF;
     font-weight: 500;
   }
+
   #doc-links a:hover {
     text-decoration: underline;
   }
-  /* Headings */
+
   #feedback-window h3 {
     margin-top: 0;
     margin-bottom: 12px;
     font-size: 18px;
     color: #333;
   }
+
   #feedback-window h4 {
     margin-bottom: 8px;
     font-size: 16px;
     color: #333;
   }
-  /* Horizontal rule */
+
   #feedback-window hr {
     border: 0;
     height: 1px;
@@ -226,25 +237,25 @@ <h4>Explore More Documentation:</h4>
   }
 </style>
 
+<!-- Script -->
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const stickyBtn       = document.getElementById('sticky-rating-btn');
+  document.addEventListener('DOMContentLoaded', function () {
+    const stickyBtn = document.getElementById('sticky-rating-btn');
     const feedbackOverlay = document.getElementById('feedback-overlay');
-    const feedbackWindow  = document.getElementById('feedback-window');
-    const closeBtn        = document.getElementById('feedback-close-btn');
-    const step1           = document.getElementById('step1');
-    const step2           = document.getElementById('step2');
-    const step3           = document.getElementById('step3');
-    const stars           = document.querySelectorAll('.star');
+    const feedbackWindow = document.getElementById('feedback-window');
+    const closeBtn = document.getElementById('feedback-close-btn');
+    const step1 = document.getElementById('step1');
+    const step2 = document.getElementById('step2');
+    const step3 = document.getElementById('step3');
+    const stars = document.querySelectorAll('.star');
     const feedbackHeading = document.getElementById('feedback-heading');
-    const commentsField   = document.getElementById('comments');
-    const emailField      = document.getElementById('email');
-    const screenshotBtn   = document.getElementById('screenshot-btn');
+    const commentsField = document.getElementById('comments');
+    const emailField = document.getElementById('email');
+    const screenshotBtn = document.getElementById('screenshot-btn');
     const screenshotField = document.getElementById('screenshot');
-    const submitBtn       = document.getElementById('submit-btn');
-    let currentRating     = 0;
+    const submitBtn = document.getElementById('submit-btn');
+    let currentRating = 0;
 
-    // Function to reset the widget
     function resetWidget() {
       currentRating = 0;
       stars.forEach(s => s.classList.remove('selected', 'hover'));
@@ -255,22 +266,19 @@ <h4>Explore More Documentation:</h4>
       step2.classList.remove('active');
       step3.classList.remove('active');
       feedbackHeading.textContent = 'Tell us about your experience';
-      commentsField.placeholder   = 'Tell us about your experience';
-      screenshotBtn.textContent   = 'Show us a screenshot';
+      commentsField.placeholder = 'Tell us about your experience';
+      screenshotBtn.textContent = 'Show us a screenshot';
     }
 
-    // Clicking the sticky button resets and opens the feedback window
     stickyBtn.addEventListener('click', () => {
       resetWidget();
       feedbackOverlay.style.display = 'block';
     });
 
-    // Close button: hides the feedback window
     closeBtn.addEventListener('click', () => {
       feedbackOverlay.style.display = 'none';
     });
 
-    // Star rating hover & selection
     stars.forEach(star => {
       star.addEventListener('mouseover', () => {
         const val = parseInt(star.getAttribute('data-value'), 10);
@@ -282,7 +290,6 @@ <h4>Explore More Documentation:</h4>
       star.addEventListener('click', () => {
         currentRating = parseInt(star.getAttribute('data-value'), 10);
         stars.forEach(s => s.classList.toggle('selected', parseInt(s.getAttribute('data-value'), 10) <= currentRating));
-        // Transition from Step 1 -> Step 2
         step1.classList.remove('active');
         step2.classList.add('active');
         if (currentRating <= 2) {
@@ -297,18 +304,15 @@ <h4>Explore More Documentation:</h4>
       });
     });
 
-    // Screenshot button triggers the hidden file input
     screenshotBtn.addEventListener('click', () => {
       screenshotField.click();
     });
 
-    // Submit feedback: In a real app, send data to the server here.
     submitBtn.addEventListener('click', () => {
       step2.classList.remove('active');
       step3.classList.add('active');
     });
 
-    // Prevent overlay from closing when clicking inside the feedback window
     feedbackWindow.addEventListener('click', (e) => {
       e.stopPropagation();
     });

From b40e3f34b0ce84a12a223dfd0cefb2a7cb98eedc Mon Sep 17 00:00:00 2001
From: ebembi-crdb <ebembi.bembi@cockroachlabs.com>
Date: Wed, 2 Apr 2025 14:14:25 +0530
Subject: [PATCH 3/4] review changes

---
 src/current/_includes/feedback-widget.html | 53 ++++++++++++++--------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/current/_includes/feedback-widget.html b/src/current/_includes/feedback-widget.html
index 1e150b8aafa..00efa97db4d 100644
--- a/src/current/_includes/feedback-widget.html
+++ b/src/current/_includes/feedback-widget.html
@@ -1,11 +1,11 @@
 <!-- _includes/feedback-widget.html -->
 <div id="sticky-feedback-widget">
-  <!-- Sticky button with star SVG icon -->
+  <!-- Sticky button with star SVG icon + text -->
   <button id="sticky-rating-btn">
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" role="presentation" aria-hidden="true">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" role="presentation" aria-hidden="true">
       <path fill="currentColor" d="M7.538 1.11a.5.5 0 0 1 .924 0l1.537 3.696a.5.5 0 0 0 .421.306l3.99.32a.5.5 0 0 1 .285.878l-3.04 2.604a.5.5 0 0 0-.16.496l.928 3.893a.5.5 0 0 1-.747.542L8.261 11.76a.5.5 0 0 0-.522 0l-3.415 2.086a.5.5 0 0 1-.747-.542l.928-3.893a.5.5 0 0 0-.16-.496L1.304 6.31a.5.5 0 0 1 .285-.878l3.99-.32A.5.5 0 0 0 6 4.806L7.538 1.11Z"></path>
     </svg>
-    Rate This Page
+    <span>Rate This Page</span>
   </button>
 
   <!-- Feedback overlay -->
@@ -60,27 +60,46 @@ <h4>Explore More Documentation:</h4>
     z-index: 9999;
   }
 
+  /* Adjusted to reduce overall height and spacing */
   #sticky-rating-btn {
     position: fixed;
-    bottom: 120px; /* updated from 20px to 90px */
+    bottom: 110px;
     right: 20px;
+    width: 72px;
+    height: 80px;               /* Reduced from 110px to 90px */
     background-color: rgba(76, 14, 255, 0.05);
     color: #4C0EFF;
     border: 1.5px solid #4C0EFF;
-    border-radius: 8px;
-    padding: 10px 16px;
+    border-radius: 16px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
-    display: inline-flex;
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 6px;
+    justify-content: center;
+    gap: 4px;                   /* Reduced gap from 8px to 4px */
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
     backdrop-filter: blur(4px);
     transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    padding: 6px 6px;           /* Reduced padding from 10px 8px to 6px 6px */
+    text-align: center;
+    box-sizing: border-box;
   }
 
   #sticky-rating-btn svg {
+    width: 18px;                /* Reduced from 22px to 18px */
+    height: 18px;               /* Reduced from 22px to 18px */
     color: #4C0EFF;
+    flex-shrink: 0;
+    margin: 0;
+    position: relative;
+  }
+
+  #sticky-rating-btn span {
+    line-height: 1.2;
   }
 
   #sticky-rating-btn:hover {
@@ -117,7 +136,6 @@ <h4>Explore More Documentation:</h4>
     cursor: pointer;
     color: #666;
   }
-
   #feedback-close-btn:hover {
     color: #333;
   }
@@ -140,7 +158,6 @@ <h4>Explore More Documentation:</h4>
     margin: 0 4px;
     transition: transform 0.25s ease, color 0.25s ease;
   }
-
   .star.hover, .star.selected {
     color: #FFD700;
     transform: scale(1.3);
@@ -150,7 +167,6 @@ <h4>Explore More Documentation:</h4>
     display: none;
     text-align: center;
   }
-
   .feedback-step.active {
     display: block;
   }
@@ -164,7 +180,6 @@ <h4>Explore More Documentation:</h4>
     font-size: 14px;
     box-sizing: border-box;
   }
-
   textarea {
     min-height: 100px;
     resize: vertical;
@@ -173,7 +188,6 @@ <h4>Explore More Documentation:</h4>
   #screenshot {
     display: none;
   }
-
   #screenshot-btn, #submit-btn {
     background-color: #4C0EFF;
     color: #fff;
@@ -185,12 +199,10 @@ <h4>Explore More Documentation:</h4>
     margin-top: 10px;
     display: block;
   }
-
   #submit-btn {
     margin-top: 16px;
     width: 100%;
   }
-
   #screenshot-btn:hover, #submit-btn:hover {
     background-color: #3a0ccc;
   }
@@ -201,17 +213,14 @@ <h4>Explore More Documentation:</h4>
     margin-top: 16px;
     text-align: left;
   }
-
   #doc-links li {
     margin: 8px 0;
   }
-
   #doc-links a {
     text-decoration: none;
     color: #4C0EFF;
     font-weight: 500;
   }
-
   #doc-links a:hover {
     text-decoration: underline;
   }
@@ -222,13 +231,11 @@ <h4>Explore More Documentation:</h4>
     font-size: 18px;
     color: #333;
   }
-
   #feedback-window h4 {
     margin-bottom: 8px;
     font-size: 16px;
     color: #333;
   }
-
   #feedback-window hr {
     border: 0;
     height: 1px;
@@ -270,15 +277,18 @@ <h4>Explore More Documentation:</h4>
       screenshotBtn.textContent = 'Show us a screenshot';
     }
 
+    // Show the feedback overlay
     stickyBtn.addEventListener('click', () => {
       resetWidget();
       feedbackOverlay.style.display = 'block';
     });
 
+    // Hide the feedback overlay
     closeBtn.addEventListener('click', () => {
       feedbackOverlay.style.display = 'none';
     });
 
+    // Star rating interactions
     stars.forEach(star => {
       star.addEventListener('mouseover', () => {
         const val = parseInt(star.getAttribute('data-value'), 10);
@@ -304,15 +314,18 @@ <h4>Explore More Documentation:</h4>
       });
     });
 
+    // Screenshot button triggers file input
     screenshotBtn.addEventListener('click', () => {
       screenshotField.click();
     });
 
+    // Submit the feedback
     submitBtn.addEventListener('click', () => {
       step2.classList.remove('active');
       step3.classList.add('active');
     });
 
+    // Prevent clicks inside the feedback window from closing the overlay
     feedbackWindow.addEventListener('click', (e) => {
       e.stopPropagation();
     });

From a620cd0dba411159b4cc550f0dd25f8f60dc85cd Mon Sep 17 00:00:00 2001
From: ebembi-crdb <ebembi.bembi@cockroachlabs.com>
Date: Thu, 3 Apr 2025 12:41:53 +0530
Subject: [PATCH 4/4] review changes

---
 src/current/_includes/feedback-widget.html | 67 +++++++++-------------
 1 file changed, 27 insertions(+), 40 deletions(-)

diff --git a/src/current/_includes/feedback-widget.html b/src/current/_includes/feedback-widget.html
index 00efa97db4d..8a54287c227 100644
--- a/src/current/_includes/feedback-widget.html
+++ b/src/current/_includes/feedback-widget.html
@@ -1,11 +1,11 @@
 <!-- _includes/feedback-widget.html -->
 <div id="sticky-feedback-widget">
-  <!-- Sticky button with star SVG icon + text -->
+  <!-- Sticky button with star SVG icon -->
   <button id="sticky-rating-btn">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" role="presentation" aria-hidden="true">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" role="presentation" aria-hidden="true">
       <path fill="currentColor" d="M7.538 1.11a.5.5 0 0 1 .924 0l1.537 3.696a.5.5 0 0 0 .421.306l3.99.32a.5.5 0 0 1 .285.878l-3.04 2.604a.5.5 0 0 0-.16.496l.928 3.893a.5.5 0 0 1-.747.542L8.261 11.76a.5.5 0 0 0-.522 0l-3.415 2.086a.5.5 0 0 1-.747-.542l.928-3.893a.5.5 0 0 0-.16-.496L1.304 6.31a.5.5 0 0 1 .285-.878l3.99-.32A.5.5 0 0 0 6 4.806L7.538 1.11Z"></path>
     </svg>
-    <span>Rate This Page</span>
+    Rate This Page
   </button>
 
   <!-- Feedback overlay -->
@@ -60,46 +60,27 @@ <h4>Explore More Documentation:</h4>
     z-index: 9999;
   }
 
-  /* Adjusted to reduce overall height and spacing */
   #sticky-rating-btn {
     position: fixed;
-    bottom: 110px;
+    bottom: 120px;
     right: 20px;
-    width: 72px;
-    height: 80px;               /* Reduced from 110px to 90px */
     background-color: rgba(76, 14, 255, 0.05);
     color: #4C0EFF;
     border: 1.5px solid #4C0EFF;
-    border-radius: 16px;
-    font-size: 14px;
+    border-radius: 8px;
+    padding: 10px 16px;
+    font-size: 12px; /* font size reduced from 14px */
     font-weight: 500;
     cursor: pointer;
-    display: flex;
-    flex-direction: column;
+    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    gap: 4px;                   /* Reduced gap from 8px to 4px */
-    white-space: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    gap: 4px; /* gap reduced from 6px */
     backdrop-filter: blur(4px);
     transition: background-color 0.2s ease, box-shadow 0.2s ease;
-    padding: 6px 6px;           /* Reduced padding from 10px 8px to 6px 6px */
-    text-align: center;
-    box-sizing: border-box;
   }
 
   #sticky-rating-btn svg {
-    width: 18px;                /* Reduced from 22px to 18px */
-    height: 18px;               /* Reduced from 22px to 18px */
     color: #4C0EFF;
-    flex-shrink: 0;
-    margin: 0;
-    position: relative;
-  }
-
-  #sticky-rating-btn span {
-    line-height: 1.2;
   }
 
   #sticky-rating-btn:hover {
@@ -112,7 +93,7 @@ <h4>Explore More Documentation:</h4>
     position: fixed;
     bottom: 160px;
     right: 20px;
-    width: 420px;
+    width: 320px; /* width reduced from 420px */
     max-width: 90%;
     z-index: 10000;
   }
@@ -136,6 +117,7 @@ <h4>Explore More Documentation:</h4>
     cursor: pointer;
     color: #666;
   }
+
   #feedback-close-btn:hover {
     color: #333;
   }
@@ -152,12 +134,13 @@ <h4>Explore More Documentation:</h4>
   }
 
   .star {
-    font-size: 30px;
+    font-size: 24px; /* star size reduced from 30px */
     color: #ccc;
     cursor: pointer;
     margin: 0 4px;
     transition: transform 0.25s ease, color 0.25s ease;
   }
+
   .star.hover, .star.selected {
     color: #FFD700;
     transform: scale(1.3);
@@ -167,6 +150,7 @@ <h4>Explore More Documentation:</h4>
     display: none;
     text-align: center;
   }
+
   .feedback-step.active {
     display: block;
   }
@@ -177,9 +161,10 @@ <h4>Explore More Documentation:</h4>
     margin: 12px 0;
     border: 1px solid #ddd;
     border-radius: 12px;
-    font-size: 14px;
+    font-size: 12px; /* font size reduced from 14px */
     box-sizing: border-box;
   }
+
   textarea {
     min-height: 100px;
     resize: vertical;
@@ -188,21 +173,24 @@ <h4>Explore More Documentation:</h4>
   #screenshot {
     display: none;
   }
+
   #screenshot-btn, #submit-btn {
     background-color: #4C0EFF;
     color: #fff;
     border: none;
     border-radius: 12px;
     padding: 10px 16px;
-    font-size: 14px;
+    font-size: 12px; /* font size reduced from 14px */
     cursor: pointer;
     margin-top: 10px;
     display: block;
   }
+
   #submit-btn {
     margin-top: 16px;
     width: 100%;
   }
+
   #screenshot-btn:hover, #submit-btn:hover {
     background-color: #3a0ccc;
   }
@@ -213,14 +201,17 @@ <h4>Explore More Documentation:</h4>
     margin-top: 16px;
     text-align: left;
   }
+
   #doc-links li {
     margin: 8px 0;
   }
+
   #doc-links a {
     text-decoration: none;
     color: #4C0EFF;
     font-weight: 500;
   }
+
   #doc-links a:hover {
     text-decoration: underline;
   }
@@ -228,14 +219,16 @@ <h4>Explore More Documentation:</h4>
   #feedback-window h3 {
     margin-top: 0;
     margin-bottom: 12px;
-    font-size: 18px;
+    font-size: 16px; /* font size reduced from 18px */
     color: #333;
   }
+
   #feedback-window h4 {
     margin-bottom: 8px;
-    font-size: 16px;
+    font-size: 14px; /* font size reduced from 16px */
     color: #333;
   }
+
   #feedback-window hr {
     border: 0;
     height: 1px;
@@ -277,18 +270,15 @@ <h4>Explore More Documentation:</h4>
       screenshotBtn.textContent = 'Show us a screenshot';
     }
 
-    // Show the feedback overlay
     stickyBtn.addEventListener('click', () => {
       resetWidget();
       feedbackOverlay.style.display = 'block';
     });
 
-    // Hide the feedback overlay
     closeBtn.addEventListener('click', () => {
       feedbackOverlay.style.display = 'none';
     });
 
-    // Star rating interactions
     stars.forEach(star => {
       star.addEventListener('mouseover', () => {
         const val = parseInt(star.getAttribute('data-value'), 10);
@@ -314,18 +304,15 @@ <h4>Explore More Documentation:</h4>
       });
     });
 
-    // Screenshot button triggers file input
     screenshotBtn.addEventListener('click', () => {
       screenshotField.click();
     });
 
-    // Submit the feedback
     submitBtn.addEventListener('click', () => {
       step2.classList.remove('active');
       step3.classList.add('active');
     });
 
-    // Prevent clicks inside the feedback window from closing the overlay
     feedbackWindow.addEventListener('click', (e) => {
       e.stopPropagation();
     });