fix #215 - Fix iconButton pending styles CSS

Closes #215
dassana-io · Feb 11, 2021 · 3443dc0 · 3443dc0
1 parent fbc7ec7
commit 3443dc0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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']