fix: feedback btn colors

carbon-design-system · Sep 16, 2020 · d9f351a · d9f351a
1 parent 32d2523
commit d9f351a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 20 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/BackToTopBtn/BackToTopBtn.module.scss b/packages/gatsby-theme-carbon/src/components/BackToTopBtn/BackToTopBtn.module.scss
@@ -23,6 +23,7 @@
 .button:focus {
   outline: none;
   border: 2px solid $focus;
+  box-shadow: inset 0 0 0 1px $inverse-01;
 }
 
 .button svg {

diff --git a/packages/gatsby-theme-carbon/src/components/FeedbackDialog/FeedbackDialog.js b/packages/gatsby-theme-carbon/src/components/FeedbackDialog/FeedbackDialog.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import { FaceWink20, FaceWinkFilled20 } from '@carbon/icons-react';
+import { FaceWink20 } from '@carbon/icons-react';
 
 import LaunchButton from './LaunchButton';
 import Form from './Form';
@@ -14,7 +14,6 @@ const FeedbackDialog = ({ onSubmit }) => {
       <LaunchButton
         visible={visible}
         icon={FaceWink20}
-        filledIcon={FaceWinkFilled20}
         onClick={() => setVisible(!visible)}
       />
     </>

diff --git a/packages/gatsby-theme-carbon/src/components/FeedbackDialog/LaunchButton.js b/packages/gatsby-theme-carbon/src/components/FeedbackDialog/LaunchButton.js
@@ -2,12 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import styles from './LaunchButton.module.scss';
 
-function LaunchButton({
-  onClick,
-  visible,
-  icon: RegularIcon,
-  filledIcon: FilledIcon,
-}) {
+function LaunchButton({ onClick, visible, icon: RegularIcon }) {
   const classNames = cx(styles.button, {
     [styles.selected]: visible,
   });
@@ -19,7 +14,7 @@ function LaunchButton({
       className={classNames}
       onClick={onClick}
       aria-label="This launches a modal form to give website feedback.">
-      {visible ? <FilledIcon /> : <RegularIcon />}
+      <RegularIcon />
     </button>
   );
 }

diff --git a/packages/gatsby-theme-carbon/src/components/FeedbackDialog/LaunchButton.module.scss b/packages/gatsby-theme-carbon/src/components/FeedbackDialog/LaunchButton.module.scss
@@ -3,7 +3,7 @@
   height: $spacing-09;
   border-radius: 50%;
   border-color: transparent;
-  background: var(--cds-interactive-02);
+  background: $carbon--gray-30;
   transition: all $duration--fast-02;
   z-index: z('modal');
   padding-top: 0.325rem;
@@ -15,20 +15,27 @@
   right: $spacing-07;
 }
 
-.button:hover {
-  background: var(--cds-inverse-01); // gray-60 hover
-}
-
-.button.selected:hover {
-  background: var(--cds-interactive-02);
-}
-
 .button:focus {
   outline: none;
   border: 2px solid var(--cds-inverse-focus-ui);
-  box-shadow: inset 0 0 0 1px #fff;
+  box-shadow: inset 0 0 0 1px $inverse-01;
 }
 
 .button svg {
-  fill: var(--cds-icon-03);
+  fill: $carbon--black-100;
+}
+
+//unselected state hover + selected state (non-hover) #886
+.button:hover,
+.button.selected {
+  background: $inverse-01; // gray-60 hover
+}
+
+//selected state hover
+.button.selected:hover {
+  background: var(--cds-interactive-02);
+}
+
+.button.selected:hover svg {
+  fill: $icon-03;
 }