Merge branch 'main' into changing_all_font_size_units_to_rem

Giveth · Sep 12, 2022 · fb95d82 · fb95d82
2 parents 7137702 + 879a527
commit fb95d82
Show file tree

Hide file tree

Showing 14 changed files with 414 additions and 67 deletions.
diff --git a/src/components/buttonLinks/ButtonLink.tsx b/src/components/buttonLinks/ButtonLink.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import { FC } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { brandColors, neutralColors } from '../../common/colors';
 import { ButtonText } from '../typography/ButtonText';
 import { IButtonLinkContainerProps, IButtonLinkProps } from './type';
@@ -19,35 +19,105 @@ const ButtonLinkContainer = styled.a<IButtonLinkContainerProps>`
 		switch (props.linkType) {
 			case 'primary':
 				return props.disabled
-					? `color: ${brandColors.giv[400]};background-color: ${brandColors.giv[500]};`
-					: `color: ${neutralColors.gray[100]};background-color: ${brandColors.pinky[500]};`;
+					? 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
-					? `color: ${brandColors.giv[400]};background-color: ${brandColors.giv[500]};`
-					: `color: ${neutralColors.gray[100]};background-color: ${brandColors.giv[500]};`;
+					? 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
-					? `color: ${brandColors.giv[500]};background-color: unset};padding: 8px 24px;`
-					: `color: ${brandColors.deep[100]};background-color: unset};padding: 8px 24px;`;
+					? css`
+							color: ${brandColors.giv[500]};
+							background-color: unset;
+							padding: 8px 24px;
+					  `
+					: css`
+							color: ${brandColors.deep[100]};
+							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
-					? `color: ${brandColors.giv[400]};background-color: ${brandColors.giv[500]};`
-					: `color: ${neutralColors.gray[100]};background-color: ${brandColors.pinky[500]};`;
+					? css`
+							color: ${brandColors.giv[400]};
+							background-color: ${brandColors.giv[500]};
+					  `
+					: css`
+							color: ${neutralColors.gray[100]};
+							background-color: ${brandColors.pinky[500]};
+					  `;
 		}
 	}}
-	${props => (props.disabled ? '' : 'cursor: pointer;')}
+	${props =>
+		props.disabled
+			? ''
+			: css`
+					cursor: pointer;
+			  `}
   :hover {
 		${props => {
 			if (props.disabled) return '';
 			switch (props.linkType) {
 				case 'primary':
-					return `color: ${neutralColors.gray[100]};background-color: ${brandColors.pinky[600]};`;
+					return css`
+						color: ${neutralColors.gray[100]};
+						background-color: ${brandColors.pinky[600]};
+					`;
 				case 'secondary':
-					return `color: ${neutralColors.gray[100]};background-color: ${brandColors.giv[700]};`;
+					return css`
+						color: ${neutralColors.gray[100]};
+						background-color: ${brandColors.giv[700]};
+					`;
 				case 'texty':
-					return `color: ${brandColors.deep[100]};background-color: ${brandColors.giv[700]}};`;
+					return css`
+						color: ${brandColors.deep[100]};
+						background-color: ${brandColors.giv[700]};
+					`;
 				default:
-					return `color: ${brandColors.deep[100]};background-color: ${brandColors.giv[700]}};`;
+					return css`
+						color: ${brandColors.deep[100]};
+						background-color: ${brandColors.giv[700]};
+					`;
 			}
 		}}
 	}

diff --git a/src/components/buttonLinks/OutlineButtonLink.tsx b/src/components/buttonLinks/OutlineButtonLink.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import { FC } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { brandColors } from '../../common/colors';
 import { ButtonText } from '../typography/ButtonText';
 import { IButtonLinkContainerProps, IButtonLinkProps } from './type';
@@ -21,16 +21,34 @@ const ButtonLinkContainer = styled.a<IButtonLinkContainerProps>`
 		switch (props.linkType) {
 			case 'primary':
 				return props.disabled
-					? `color: ${brandColors.giv[500]};border-color: ${brandColors.giv[500]};`
-					: `color: ${brandColors.pinky[400]};border-color: ${brandColors.pinky[400]};`;
+					? 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
-					? `color: ${brandColors.giv[500]};border-color: ${brandColors.giv[500]};`
-					: `color: ${brandColors.giv['000']};border-color: ${brandColors.giv['000']};`;
+					? css`
+							color: ${brandColors.giv[500]};
+							border-color: ${brandColors.giv[500]};
+					  `
+					: css`
+							color: ${brandColors.giv['000']};
+							border-color: ${brandColors.giv['000']};
+					  `;
 			default:
 				return props.disabled
-					? `color: ${brandColors.giv[500]};border-color: ${brandColors.giv[500]};`
-					: `color: ${brandColors.pinky[400]};border-color: ${brandColors.pinky[400]};`;
+					? 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;')}
@@ -39,11 +57,20 @@ const ButtonLinkContainer = styled.a<IButtonLinkContainerProps>`
 			if (props.disabled) return '';
 			switch (props.linkType) {
 				case 'primary':
-					return `color: ${brandColors.pinky[500]};border-color: ${brandColors.pinky[500]};`;
+					return css`
+						color: ${brandColors.pinky[500]};
+						border-color: ${brandColors.pinky[500]};
+					`;
 				case 'secondary':
-					return `color: ${brandColors.giv[500]};background-color: ${brandColors.giv['000']};`;
+					return css`
+						color: ${brandColors.giv[500]};
+						background-color: ${brandColors.giv['000']};
+					`;
 				default:
-					return `color: ${brandColors.pinky[500]};border-color: ${brandColors.pinky[500]};`;
+					return css`
+						color: ${brandColors.pinky[500]};
+						border-color: ${brandColors.pinky[500]};
+					`;
 			}
 		}}
 	}

diff --git a/src/components/buttonLinks/type.ts b/src/components/buttonLinks/type.ts
@@ -1,16 +1,19 @@
-import { MouseEventHandler, ReactNode } from 'react';
+import type { ReactNode, ComponentPropsWithoutRef } from 'react';
 
 export interface IButtonLinkContainerProps {
-	linkType?: 'primary' | 'secondary' | 'texty';
+	linkType?:
+		| 'primary'
+		| 'secondary'
+		| 'texty'
+		| 'texty-primary'
+		| 'texty-secondary';
 	size?: 'small' | 'medium' | 'large';
 	disabled?: boolean;
-	icon?: ReactNode;
-	className?: string;
-	onClick?: MouseEventHandler<HTMLAnchorElement>;
 }
 
-export interface IButtonLinkProps extends IButtonLinkContainerProps {
+export interface IButtonLinkProps
+	extends ComponentPropsWithoutRef<'a'>,
+		IButtonLinkContainerProps {
+	icon?: ReactNode;
 	label: string;
-	href?: string;
-	target?: string;
 }
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FC } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { brandColors, neutralColors } from '../../common/colors';
 import { ButtonText } from '../typography/ButtonText';
 import { Loader, LoadingContainer } from './common';
@@ -10,7 +10,8 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 	border: 0 solid;
 	border-radius: 48px;
 	padding: ${props => (props.size === 'large' ? '24px' : '16px')} 24px;
-	transition: background 0.3s ease;
+	transition: background-color 0.3s ease, color 0.3s ease;
+	transition: opacity 0.3s ease, color 0.3s ease;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -19,22 +20,75 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 	${props => {
 		if (props.disabled) {
 			if (props.buttonType === 'texty') {
-				return `color: ${brandColors.giv[500]};background: unset};padding: 8px 24px;opacity: 0.5;`;
+				return css`
+					color: ${brandColors.giv[500]};
+					background-color: unset;
+					padding: 8px 24px;
+					opacity: 0.5;
+				`;
+			}
+			if (props.buttonType === 'texty-primary') {
+				return css`
+					color: ${brandColors.pinky[500]};
+					background-color: unset;
+					padding: 8px 24px;
+					opacity: 0.5;
+				`;
+			}
+			if (props.buttonType === 'texty-secondary') {
+				return css`
+					color: ${brandColors.giv[500]};
+					background-color: unset;
+					padding: 8px 24px;
+					opacity: 0.5;
+				`;
 			}
 			if (props.buttonType === 'primary') {
-				return `background: ${brandColors.pinky[300]};color: ${brandColors.pinky[200]};`;
+				return css`
+					background-color: ${brandColors.pinky[300]};
+					color: ${brandColors.pinky[200]};
+				`;
 			}
-			return `color: ${brandColors.giv[400]};background: ${brandColors.giv[500]};opacity: 0.5;`;
+			return css`
+				color: ${brandColors.giv[400]};
+				background-color: ${brandColors.giv[500]};
+				opacity: 0.5;
+			`;
 		}
 		switch (props.buttonType) {
 			case 'primary':
-				return `color: ${neutralColors.gray[100]};background: ${brandColors.pinky[500]};`;
+				return css`
+					color: ${neutralColors.gray[100]};
+					background-color: ${brandColors.pinky[500]};
+				`;
 			case 'secondary':
-				return `color: ${neutralColors.gray[100]};background: ${brandColors.giv[500]};`;
+				return css`
+					color: ${neutralColors.gray[100]};
+					background-color: ${brandColors.giv[500]};
+				`;
 			case 'texty':
-				return `color: ${brandColors.deep[100]};background: unset};padding: 8px 24px;`;
+				return css`
+					color: ${brandColors.deep[100]};
+					background-color: unset;
+					padding: 8px 24px;
+				`;
+			case 'texty-primary':
+				return css`
+					color: ${brandColors.pinky[500]};
+					background-color: unset;
+					padding: 8px 24px;
+				`;
+			case 'texty-secondary':
+				return css`
+					color: ${brandColors.giv[500]};
+					background-color: unset;
+					padding: 8px 24px;
+				`;
 			default:
-				return `color: ${neutralColors.gray[100]};background: ${brandColors.pinky[500]};`;
+				return css`
+					color: ${neutralColors.gray[100]};
+					background-color: ${brandColors.pinky[500]};
+				`;
 		}
 	}}
 	${props => (props.disabled ? '' : 'cursor: pointer;')}
@@ -43,13 +97,33 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 			if (props.disabled) return '';
 			switch (props.buttonType) {
 				case 'primary':
-					return `color: ${neutralColors.gray[100]};background: ${brandColors.pinky[600]};`;
+					return css`
+						color: ${neutralColors.gray[100]};
+						background-color: ${brandColors.pinky[600]};
+					`;
 				case 'secondary':
-					return `color: ${neutralColors.gray[100]};background: ${brandColors.giv[700]};`;
+					return css`
+						color: ${neutralColors.gray[100]};
+						background-color: ${brandColors.giv[700]};
+					`;
 				case 'texty':
-					return `color: ${brandColors.deep[100]};background: ${brandColors.giv[700]}};`;
+					return css`
+						color: ${brandColors.deep[100]};
+						background-color: ${brandColors.giv[700]};
+					`;
+				case 'texty-primary':
+					return css`
+						color: ${brandColors.pinky[700]};
+					`;
+				case 'texty-secondary':
+					return css`
+						color: ${brandColors.giv[700]};
+					`;
 				default:
-					return `color: ${brandColors.deep[100]};background: ${brandColors.giv[700]}};`;
+					return css`
+						color: ${brandColors.deep[100]};
+						background-color: ${brandColors.giv[700]};
+					`;
 			}
 		}}
 	}