Merge pull request #101 from Giveth/fix-button-hover

Fix button hover

Author: MohammadPCh

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.26",
+	"version": "1.11.27",
 	"files": [
 		"/lib"
 	],

src/components/buttonLinks/ButtonLink.tsx

@@ -22,92 +22,92 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 					? css`
 							color: ${brandColors.giv[400]};
 							background-color: ${brandColors.giv[500]};
-						`
+					  `
 					: css`
 							color: ${neutralColors.gray[100]};
 							background-color: ${brandColors.pinky[500]};
-						`;
+					  `;
 			case 'secondary':
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[400]};
 							background-color: ${brandColors.giv[500]};
-						`
+					  `
 					: css`
 							color: ${neutralColors.gray[100]};
 							background-color: ${brandColors.giv[500]};
-						`;
+					  `;
 			case 'texty':
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[500]};
 							background-color: unset;
 							padding: 8px 24px;
-						`
+					  `
 					: css`
 							color: ${brandColors.deep[100]};
 							background-color: unset;
 							padding: 8px 24px;
-						`;
+					  `;
 			case 'texty-gray':
 				return props.disabled
 					? css`
 							color: ${neutralColors.gray[500]};
 							background-color: unset;
 							padding: 8px 24px;
 							opacity: 0.5;
-						`
+					  `
 					: css`
 							color: ${neutralColors.gray[500]};
 							background-color: unset;
 							padding: 8px 24px;
-						`;
+					  `;
 			case 'texty-primary':
 				return props.disabled
 					? css`
 							color: ${brandColors.pinky[500]};
 							background-color: unset;
 							padding: 8px 24px;
 							opacity: 0.5;
-						`
+					  `
 					: css`
 							color: ${brandColors.pinky[500]};
 							background-color: unset;
 							padding: 8px 24px;
-						`;
+					  `;
 			case 'texty-secondary':
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[500]};
 							background-color: unset;
 							padding: 8px 24px;
 							opacity: 0.5;
-						`
+					  `
 					: css`
 							color: ${brandColors.giv[500]};
 							background-color: unset;
 							padding: 8px 24px;
-						`;
+					  `;
 
 			default:
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[400]};
 							background-color: ${brandColors.giv[500]};
-						`
+					  `
 					: css`
 							color: ${neutralColors.gray[100]};
 							background-color: ${brandColors.pinky[500]};
-						`;
+					  `;
 		}
 	}}
 	${props =>
 		props.disabled
 			? ''
 			: css`
 					cursor: pointer;
-				`}
-  :hover {
+			  `}
+  &:hover {
 		${props => {
 			if (props.disabled) return '';
 			switch (props.$linkType) {

src/components/buttonLinks/OutlineButtonLink.tsx

@@ -9,9 +9,7 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 	border: 2px solid;
 	border-radius: 48px;
 	padding: ${props => (props.size === 'large' ? '22px' : '14px')} 24px;
-	transition:
-		color 0.3s ease,
-		border-color 0.3s ease,
+	transition: color 0.3s ease, border-color 0.3s ease,
 		background-color 0.3s ease;
 	background-color: unset;
 	display: flex;
@@ -26,35 +24,35 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 					? css`
 							color: ${brandColors.giv[500]};
 							border-color: ${brandColors.giv[500]};
-						`
+					  `
 					: css`
 							color: ${brandColors.pinky[400]};
 							border-color: ${brandColors.pinky[400]};
-						`;
+					  `;
 			case 'secondary':
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[500]};
 							border-color: ${brandColors.giv[500]};
-						`
+					  `
 					: css`
 							color: ${brandColors.giv['000']};
 							border-color: ${brandColors.giv['000']};
-						`;
+					  `;
 			default:
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[500]};
 							border-color: ${brandColors.giv[500]};
-						`
+					  `
 					: css`
 							color: ${brandColors.pinky[400]};
 							border-color: ${brandColors.pinky[400]};
-						`;
+					  `;
 		}
 	}}
 	${props => (props.disabled ? '' : 'cursor: pointer;')}
-  :hover {
+  &:hover {
 		${props => {
 			if (props.disabled) return '';
 			switch (props.$linkType) {

src/components/buttons/Button.tsx

@@ -10,10 +10,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 	border: 0 solid;
 	border-radius: 48px;
 	padding: ${props => (props.size === 'large' ? '24px' : '16px')} 24px;
-	transition:
-		background-color 0.3s ease,
-		color 0.3s ease,
-		opacity 0.3s ease;
+	transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -109,7 +106,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 		}
 	}}
 	${props => (props.disabled ? '' : 'cursor: pointer;')}
-  :hover {
+  &:hover {
 		${props => {
 			if (props.disabled) return '';
 			switch (props.$buttonType) {

src/components/buttons/OutlineButton.tsx

@@ -10,9 +10,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 	border: 2px solid;
 	border-radius: 48px;
 	padding: ${props => (props.size === 'large' ? '22px' : '14px')} 24px;
-	transition:
-		color 0.3s ease,
-		border-color 0.3s ease,
+	transition: color 0.3s ease, border-color 0.3s ease,
 		background-color 0.3s ease;
 	background: unset;
 	display: flex;
@@ -28,42 +26,42 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 					? css`
 							color: ${brandColors.pinky[300]};
 							border-color: ${brandColors.pinky[300]};
-						`
+					  `
 					: css`
 							color: ${brandColors.pinky[400]};
 							border-color: ${brandColors.pinky[400]};
-						`;
+					  `;
 			case 'secondary':
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[500]};
 							border-color: ${brandColors.giv[500]};
 							opacity: 0.4;
-						`
+					  `
 					: css`
 							color: ${brandColors.giv['000']};
 							border-color: ${brandColors.giv['000']};
-						`;
+					  `;
 			default:
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[500]};
 							border-color: ${brandColors.giv[500]};
 							opacity: 0.4;
-						`
+					  `
 					: css`
 							color: ${brandColors.pinky[400]};
 							border-color: ${brandColors.pinky[400]};
-						`;
+					  `;
 		}
 	}}
 	${props =>
 		props.disabled
 			? ''
 			: css`
 					cursor: pointer;
-				`}
-  :hover {
+			  `}
+  &:hover {
 		${props => {
 			if (props.disabled) return '';
 			switch (props.$buttonType) {