add feedback widget

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

View File

@@ -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;
}
}
}

View File

@@ -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