ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-20 11:45:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

add feedback widget

Browse Source
This commit is contained in:
Phu Pham
2023-04-26 14:06:10 -04:00
parent fba08a582a
commit 80b1e25bb6
3 changed files with 103 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
styles/_feedback.scss
View File

@@ -1,24 +1,73 @@
// TEMPORARY: overriding the feedback widget styles here // TEMPORARY: overriding the feedback widget styles here
#feedback-content { #feedback-content {
.docked-widget { .docked-widget {
border: none !important;
}
.widget-form-wrapper {
position: static !important; position: static !important;
box-shadow: none !important; box-shadow: none !important;
display: block; display: block;
background-color: $body-bg !important; background-color: $gray-800 !important;
border-width: 0 !important; border-width: 0 !important;
padding: 2rem; padding: 2rem;
border-radius: 8px !important;
.widget-header { div {
background: none !important; background-color: $gray-800 !important;
.widget-header-title {
flex-grow: 0 !important;
padding-right: 1rem !important;
}
} }
#closeFeedback { textarea {
display: none; 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;
} }
} }
} }

31
styles/light/_light-theme.scss
View File

@@ -763,15 +763,40 @@ pre code {
// feedback widget // feedback widget
#feedback-content { #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 { .widget-header {
background-color: $light-bg !important; background-color: $white !important;
color: $light-fg !important; }
.widget-header-title {
color: $gray-900 !important;
} }
.widget-header-icon { .widget-header-icon {
filter: invert(100%); filter: invert(100%);
} }
} }
} }
// Docs landing page // Docs landing page

32
template/component-feedback-widget.html.jinja
View File

@@ -1,19 +1,19 @@
<!-- Feedback Widget --> <!-- Feedback Widget -->
<!-- <script src="{{currentpage.prefix}}assets/vendor/feedback-widget.js"></script> --> <script src="{{currentpage.prefix}}assets/vendor/feedback-widget.js"></script>
<!-- <div id="feedback-content"></div> --> <div id="feedback-content"></div>
<script> <script>
// // Options // Options
// const options = { const options = {
// analyticsConfig: [ analyticsConfig: [
// // { name: 'ga', id: 'UA-45576805-2' }, // { name: 'ga', id: 'UA-45576805-2' },
// // { name: 'gtm', id: 'GTM-THHW334' }, // { name: 'gtm', id: 'GTM-THHW334' },
// ], ],
// analyticsName: 'Feedback Widget Tracker', analyticsName: 'Feedback Widget Tracker',
// theme: 'xrpl', theme: 'xrpl',
// currentPath: window.location.pathname, currentPath: window.location.pathname,
// parentElement: '#feedback-content', parentElement: '#feedback-content',
// }; };
//
// // Init WidgetClass // Init WidgetClass
// const r = new WidgetClass(options); const r = new WidgetClass(options);
</script> </script>