From 95df6d831d20f31da7e9a1c31a3eba6f79c2d580 Mon Sep 17 00:00:00 2001
From: Nancy <68706811+nancy-dassana@users.noreply.github.com>
Date: Thu, 11 Feb 2021 10:10:16 -0800
Subject: [PATCH] fix #215 - Fix iconButton pending styles CSS (#216)

Closes #215

Co-authored-by: github-actions <github-actions@users.noreply.github.com>
---
 package.json                        |  2 +-
 src/components/IconButton/index.tsx |  2 +-
 src/components/IconButton/utils.ts  | 27 ++++++++++++++++++---------
 src/components/Popover/utils.ts     |  2 +-
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index aa28c9ba..82870481 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.8.9",
+	"version": "0.9.0",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},
diff --git a/src/components/IconButton/index.tsx b/src/components/IconButton/index.tsx
index 60388b21..c6e60717 100644
--- a/src/components/IconButton/index.tsx
+++ b/src/components/IconButton/index.tsx
@@ -81,7 +81,7 @@ const useStyles = createUseStyles({
 			'& $disabled': generateThemedDisabledStyles(dark),
 			'& $hasBorder': {
 				...generateThemedHasBorderStyles(dark),
-				'& $primary': generateThemedPrimaryStyles(dark)
+				'&$primary': generateThemedPrimaryStyles(dark)
 			},
 			'& $iconButton': generateThemedIconBtnStyles(dark)
 		},
diff --git a/src/components/IconButton/utils.ts b/src/components/IconButton/utils.ts
index cf0938cf..ac3f47cd 100644
--- a/src/components/IconButton/utils.ts
+++ b/src/components/IconButton/utils.ts
@@ -82,20 +82,29 @@ export const generateThemedPendingStyles = (themeType: ThemeType) => {
 
 export const generateThemedPrimaryStyles = (themeType: ThemeType) => {
 	const {
+		disabled: { color: disabledColor }
+	} = themedStyles[themeType]
+	const {
+		disabledBgColor,
 		primaryBackgroundColor,
-		primaryDisabledBgColor,
-		primaryDisabledTextColor,
 		primaryHoverBgColor
 	} = buttonPalette[themeType]
 
 	return {
-		'&$disabled': {
-			backgroundColor: primaryDisabledBgColor,
-			color: primaryDisabledTextColor
-		},
-		'&:hover': {
-			backgroundColor: primaryHoverBgColor,
-			color: blacks['lighten-80']
+		'&$circle': {
+			'&$disabled': {
+				'&:hover': {
+					backgroundColor: disabledBgColor,
+					borderColor: disabledBgColor,
+					color: disabledColor
+				},
+				backgroundColor: disabledBgColor,
+				color: disabledColor
+			},
+			'&:hover': {
+				backgroundColor: primaryHoverBgColor,
+				color: blacks['lighten-80']
+			}
 		},
 		backgroundColor: primaryBackgroundColor,
 		borderColor: 'transparent',
diff --git a/src/components/Popover/utils.ts b/src/components/Popover/utils.ts
index c4ce5653..a370cfd1 100644
--- a/src/components/Popover/utils.ts
+++ b/src/components/Popover/utils.ts
@@ -14,7 +14,7 @@ const { fade } = ColorManipulationTypes
 
 const popoverPalette = {
 	[dark]: {
-		accent: manipulateColor(blacks.base, 72, fade),
+		accent: manipulateColor(blacks['darken-40'], 72, fade),
 		background: blacks['lighten-10'],
 		text: {
 			title: blacks['lighten-80']