fix(www): improve feedback-widget toggle button and hover state (#13923)

gatsbyjs · May 8, 2019 · 2943ab4 · 2943ab4
1 parent 2e26800
commit 2943ab4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/www/src/components/feedback-widget/buttons.js b/www/src/components/feedback-widget/buttons.js
@@ -108,18 +108,18 @@ export const ToggleButtonIcon = styled(`span`)`
   color: ${colors.white};
   display: flex;
   font-size: ${fontSizes[1]};
-  height: ${space[6]};
+  height: ${space[8]};
   justify-content: center;
   position: absolute;
-  right: ${space[3]};
-  transform: scale(1);
+  right: ${space[1]};
+  transform: scale(0.6);
   transition: 0.5s;
-  width: ${space[6]};
+  width: ${space[8]};
 
   svg {
     fill: ${colors.white};
-    height: ${space[3]};
-    width: ${space[3]};
+    height: ${space[5]};
+    width: ${space[5]};
     transition: 0.5s;
   }
 
@@ -128,6 +128,11 @@ export const ToggleButtonIcon = styled(`span`)`
     .failed &,
     .success &,
     .submitting & {
+      svg {
+        height: ${space[6]};
+        width: ${space[6]};
+      }
+
       &:hover {
         svg {
           transform: rotate(90deg);
@@ -191,7 +196,7 @@ export const ToggleButton = styled(`button`)`
       ${ToggleButtonIcon} {
         background: ${colors.white};
         border: 1px solid ${colors.gray.border};
-        transform: scale(1.8);
+        transform: scale(1);
 
         svg {
           fill: ${colors.gatsby};

diff --git a/www/src/components/feedback-widget/feedback-widget.js b/www/src/components/feedback-widget/feedback-widget.js
@@ -9,7 +9,7 @@ import SubmitSuccess from "./submit-success"
 import SubmitError from "./submit-error"
 import { ScreenReaderText, WidgetContainer } from "./styled-elements"
 import MdClose from "react-icons/lib/md/close"
-import MdQuestionMark from "./question-mark-icon"
+import MdChatBubbleOutline from "react-icons/lib/md/chat-bubble-outline"
 
 const postFeedback = ({ rating, comment }) => {
   const payload = {
@@ -168,12 +168,9 @@ const FeedbackWidget = () => {
           </Fragment>
         ) : (
           <Fragment>
-            <ToggleButtonLabel>
-              Was this doc helpful to you
-              <ScreenReaderText>?</ScreenReaderText>
-            </ToggleButtonLabel>
+            <ToggleButtonLabel>Was this doc helpful to you?</ToggleButtonLabel>
             <ToggleButtonIcon>
-              <MdQuestionMark />
+              <MdChatBubbleOutline />
             </ToggleButtonIcon>
           </Fragment>
         )}