Update CSS

@theme/styles.css

@@ -273,6 +273,8 @@ ul.nav.navbar-nav {
   --language-picker-background-color: var(--color-gray-8);
   --select-list-bg-color: var(--color-gray-8);
 
+  --button-bg-color-secondary: var(--color-gray-8);
+
   --footer-title-text-color: black;
   --bg-color: var(--color-gray-9);
   --bg-color-raised: var(--color-gray-8);

redocly.yaml

@@ -133,6 +133,13 @@ analytics:
     defaultDataLayer:
       platform: redocly
     enableWebVitalsTracking: true
+feedback:
+  type: scale
+  settings:
+    label: How helpful was this page?
+    submitText: Thanks for your feedback!
+    leftScaleLabel: Not helpful
+    rightScaleLabel: Very helpful
 scripts:
   head:
     - src: https://cmp.osano.com/AzyjT6TIZMlgyLyy8/f11f7772-8ed5-4b73-bd17-c0814edcc440/osano.js

styles/_content.scss

@@ -2,6 +2,7 @@
 
 [data-component-name="Markdown/Markdown"] article {
   padding-bottom: 50px;
+  border-bottom: 1px solid $gray-400;
 
   p code,
   table code,

styles/_feedback.scss

@@ -1,96 +1,3 @@
-// TEMPORARY: overriding the feedback widget styles here
+[data-component-name="Feedback/Feedback"] {
-#feedback-content {
+  margin: 0 auto !important;
-  .docked-widget {
-    border: none !important;
-    background-color: transparent !important;
-    position: static !important;
-    box-shadow: none !important;
-    width: auto !important;
-  }
-
-  .widget-form-wrapper {
-    position: static !important;
-    box-shadow: none !important;
-    display: block;
-    background-color: $gray-800 !important;
-    border-width: 0 !important;
-    padding: 24px !important;
-    border-radius: 8px !important;
-
-    div {
-      background-color: $gray-800 !important;
-    }
-
-    textarea {
-      background-color: $white !important;
-      opacity: 1 !important;
-      border: none !important;
-      border-radius: 4px !important;
-      margin: 0 !important;
-      width: 100% !important;
-      color: $black !important;
-    }
-
-    .widget-header-title {
-      background: none !important;
-      flex-grow: 0 !important;
-      padding-right: 1rem !important;
-      height: auto !important;
-      padding: 0 !important;
-      margin-bottom: 10px !important;
-    }
-
-    .widget-header-footer {
-      background: none !important;
-    }
-
-    .widget-form-footer {
-      padding-right: 0 !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;
-        margin: 0 !important;
-        margin-top: 8px !important;
-        &:hover {
-          background: $blue-purple-600 !important;
-        }
-
-        &.disabled,
-        &[disabled="disabled"] {
-          background-color: $blue-purple-700 !important;
-
-          &:hover {
-            background-color: $blue-purple-700 !important;
-          }
-        }
-    }
-
-    .cancel {
-      margin: 0 !important;
-      margin-top: 8px !important;
-      color: $blue-purple-300 !important;
-      font-weight: 600 !important;
-    }
-  }
-
-  #closeFeedback {
-    display: none;
-  }
-
-  .widget-helpful {
-    .widget-header {
-      background-color: $gray-800 !important;
-      border-radius: 8px !important;
-    }
-
-    .widget-header-title {
-      color: $white !important;
-    }
-  }
 }

styles/light/_light-theme.scss

@@ -1120,6 +1120,10 @@ main article .card-grid {
   }
 }
 
+[data-component-name="Markdown/Markdown"] article {
+  border-bottom-color: $gray-500;
+}
+
 .dev-blog {
   .text-bg {
     background-color: $white;