Make feedback widget more prominent (#2682)

docs/_extra/css/extra.css

@@ -17,6 +17,7 @@
   :root {
 	--color-primary: hsl(170, 69%, 35%);
 	--color-primary-shade-1: hsl(170, 69%, 30%);
+	--color-primary-tint-1: hsl(170, 69%, 97%);
 	--color-text-base: #58585F; 
 	--color-text-dark: #555555;
 	--color-background-base: #f2f4f8;

docs/_extra/css/feedback.css

@@ -0,0 +1,35 @@
+/* form itself */
+.md-feedback {
+	background-color: var(--color-primary-tint-1);
+	padding: 10px;
+}
+
+.md-feedback fieldset {
+}
+
+/* form title */
+.md-feedback__title {
+	color: var(--color-primary);
+	font-size: 1.3rem;
+}
+
+/* container for vote buttons and note */
+.md-feedback__inner {
+}
+
+/* list of rating buttons */
+.md-feedback__list {
+}
+
+/* rating button icons */
+.md-feedback__icon {
+}
+
+.md-feedback__icon svg {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+/* post-submission note */
+.md-feedback__note {
+}

mkdocs.yml

@@ -64,7 +64,7 @@ extra:
           note: >-
             Thanks for your feedback!
         - icon: material/emoticon-sad-outline
-          name: This page could be improved
+          name: This page wasn't helpful
           data: 0
           note: >-
             Thanks for your feedback! Help us improve this page by
@@ -84,6 +84,7 @@ extra_css:
   - _extra/css/macro-styles.css
   - _extra/css/templates-widget.css
   - _extra/css/workflow-demo.css
+  - _extra/css/feedback.css
 # https://squidfunk.github.io/mkdocs-material/customization/?h=#additional-javascript
 extra_javascript:
   - _extra/javascript/extra.js