From 80b1e25bb659a0b08d44164d3afe6c61ad880e17 Mon Sep 17 00:00:00 2001
From: Phu Pham <ppham@ripple.com>
Date: Wed, 26 Apr 2023 14:06:10 -0400
Subject: [PATCH] add feedback widget

---
 styles/_feedback.scss                         | 69 ++++++++++++++++---
 styles/light/_light-theme.scss                | 31 ++++++++-
 template/component-feedback-widget.html.jinja | 32 ++++-----
 3 files changed, 103 insertions(+), 29 deletions(-)

diff --git a/styles/_feedback.scss b/styles/_feedback.scss
index d9d715aac8..0725f9e2ab 100644
--- a/styles/_feedback.scss
+++ b/styles/_feedback.scss
@@ -1,24 +1,73 @@
 // TEMPORARY: overriding the feedback widget styles here
 #feedback-content {
   .docked-widget {
+    border: none !important;
+  }
+  .widget-form-wrapper {
     position: static !important;
     box-shadow: none !important;
     display: block;
-    background-color: $body-bg !important;
+    background-color: $gray-800 !important;
     border-width: 0 !important;
     padding: 2rem;
+    border-radius: 8px !important;
 
-    .widget-header {
-      background: none !important;
-
-      .widget-header-title {
-        flex-grow: 0 !important;
-        padding-right: 1rem !important;
-      }
+    div {
+      background-color: $gray-800 !important;
     }
 
-    #closeFeedback {
-      display: none;
+    textarea {
+      background-color: $white !important;
+      opacity: 1 !important;
+      border: none !important;
+      border-radius: 4px !important;
+    }
+
+    .widget-header-title {
+      background: none !important;
+      flex-grow: 0 !important;
+      padding-right: 1rem !important;
+    }
+
+    .widget-header-footer {
+      background: none !important;
+    }
+    
+    .submit {
+        background-color: $blue-purple-500 !important;
+        font-weight: bold !important;
+        color: $white !important;
+        border: none !important;
+        border-color: transparent !important;
+        border-radius: 4px !important;
+        &:hover {
+          background: $blue-purple-600 !important;
+        }
+
+        &.disabled,
+        &[disabled="disabled"] {
+          background-color: $blue-purple-700 !important;
+
+          &:hover {
+            background-color: $blue-purple-700 !important;
+          }
+        }
+    }
+    .cancel {
+      color: $blue-purple-300 !important;
+      font-weight: 600 !important;
+    }
+  }
+  #closeFeedback {
+    display: none;
+  }
+
+  .widget-helpful {
+    .widget-header {
+      background-color: $gray-800 !important;
+    }
+    .widget-header-title {
+      color: $white !important;
     }
   }
 }
diff --git a/styles/light/_light-theme.scss b/styles/light/_light-theme.scss
index 2929df0c3b..5fcf830408 100644
--- a/styles/light/_light-theme.scss
+++ b/styles/light/_light-theme.scss
@@ -763,15 +763,40 @@ pre code {
 
 // feedback widget
 #feedback-content {
-  .docked-widget {
+  // .docked-widget {
+  //   .widget-header {
+  //     background-color: $light-bg !important;
+  //     color: $light-fg !important;
+  //   }
+  // }
+  .widget-form-wrapper {
+    background-color: $white !important;
+    div {
+      background-color: $white !important;
+    }
+    textarea {
+      background-color: $gray-200 !important;
+    }
+    .widget-header-title {
+      color: $gray-900 !important;
+    }
+    .cancel {
+      color: $blue-purple-500 !important;
+    }
+  }
+
+  .widget-helpful {
     .widget-header {
-      background-color: $light-bg !important;
-      color: $light-fg !important;
+      background-color: $white !important;
+    }
+    .widget-header-title {
+      color: $gray-900 !important;
     }
     .widget-header-icon {
       filter: invert(100%);
     }
   }
+
 }
 
 // Docs landing page
diff --git a/template/component-feedback-widget.html.jinja b/template/component-feedback-widget.html.jinja
index 1fa981ef69..1851bfad4a 100644
--- a/template/component-feedback-widget.html.jinja
+++ b/template/component-feedback-widget.html.jinja
@@ -1,19 +1,19 @@
 <!-- Feedback Widget -->
-<!-- <script src="{{currentpage.prefix}}assets/vendor/feedback-widget.js"></script> -->
-<!-- <div id="feedback-content"></div> -->
+<script src="{{currentpage.prefix}}assets/vendor/feedback-widget.js"></script>
+<div id="feedback-content"></div>
 <script>
-  // // Options
-  // const options = {
-  //   analyticsConfig: [
-  //     // { name: 'ga', id: 'UA-45576805-2' },
-  //     // { name: 'gtm', id: 'GTM-THHW334' },
-  //   ],
-  //   analyticsName: 'Feedback Widget Tracker',
-  //   theme: 'xrpl',
-  //   currentPath: window.location.pathname,
-  //   parentElement: '#feedback-content',
-  // };
-  // 
-  // // Init WidgetClass
-  // const r = new WidgetClass(options);
+  // Options
+  const options = {
+    analyticsConfig: [
+      // { name: 'ga', id: 'UA-45576805-2' },
+      // { name: 'gtm', id: 'GTM-THHW334' },
+    ],
+    analyticsName: 'Feedback Widget Tracker',
+    theme: 'xrpl',
+    currentPath: window.location.pathname,
+    parentElement: '#feedback-content',
+  };
+
+  // Init WidgetClass
+  const r = new WidgetClass(options);
 </script>