Merge pull request #99 from Giveth/add-Estimated-icon

Add estimated icon

.eslintrc

@@ -1,8 +1,6 @@
 {
-  "extends": [
-    "next/core-web-vitals",
-    "plugin:@next/next/recommended",
-    "plugin:prettier/recommended"  ],
+  "parser": "@typescript-eslint/parser",
+  "extends": ["plugin:prettier/recommended"],
   "rules": {
     "prettier/prettier": [
       "error",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.24",
+	"version": "1.11.25",
 	"files": [
 		"/lib"
 	],
@@ -35,9 +35,13 @@
 		"@types/node": "^20",
 		"@types/react": "^18",
 		"@types/react-dom": "^18",
-		"eslint": "^8",
-		"eslint-config-next": "14.1.0",
+		"@typescript-eslint/eslint-plugin": "^7.5.0",
+		"@typescript-eslint/parser": "^7.5.0",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.1.3",
 		"eslint-plugin-storybook": "^0.8.0",
+		"prettier": "^3.2.5",
 		"storybook": "^7.6.17",
 		"typescript": "^5"
 	},

src/components/buttonLinks/ButtonLink.tsx

@@ -22,91 +22,91 @@ 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 {
 		${props => {
 			if (props.disabled) return '';

src/components/buttonLinks/OutlineButtonLink.tsx

@@ -9,7 +9,9 @@ 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;
@@ -24,31 +26,31 @@ 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;')}

src/components/buttons/Button.tsx

@@ -10,7 +10,10 @@ 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;

src/components/buttons/OutlineButton.tsx

@@ -10,7 +10,9 @@ 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;
@@ -26,41 +28,41 @@ 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 {
 		${props => {
 			if (props.disabled) return '';

src/components/icons/Estimated/Estimated.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconEstimated16 } from './Estimated16';
+import { IconEstimated24 } from './Estimated24';
+import { IconEstimated32 } from './Estimated32';
+
+export const IconEstimated: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconEstimated16 color={color} />;
+		case '24':
+			return <IconEstimated24 color={color} />;
+		case '32':
+			return <IconEstimated32 color={color} />;
+		default:
+			return <IconEstimated24 size={size} color={color} />;
+	}
+};

src/components/icons/Estimated/Estimated16.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconEstimated16: FC<IIconProps> = ({ color = 'currentColor' }) => (
+	<svg
+		width='16'
+		height='16'
+		viewBox='0 0 16 16'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M0 1.33333C0 0.596953 0.596954 0 1.33333 0H14.6667C15.403 0 16 0.596954 16 1.33333V14.6667C16 15.403 15.403 16 14.6667 16H1.33333C0.596953 16 0 15.403 0 14.6667V1.33333Z'
+			fill={color}
+		/>
+		<path
+			d='M2.65799 10.0879C2.29372 10.0879 1.99376 9.79504 2.0115 9.4312C2.05267 8.58655 2.20441 7.88554 2.46671 7.32817C2.79423 6.63221 3.21942 6.12575 3.7423 5.80879C4.27092 5.49182 4.82827 5.33333 5.41435 5.33333C6.00043 5.33333 6.5348 5.48837 7.01745 5.79845C7.50585 6.10164 8.0632 6.58053 8.68951 7.23514C9.1147 7.67614 9.45371 7.98622 9.70653 8.16537C9.96509 8.34453 10.2466 8.43411 10.5512 8.43411C11.0453 8.43411 11.436 8.2205 11.7233 7.79328C11.8886 7.54364 12.0044 7.23019 12.0708 6.85293C12.1608 6.34139 12.562 5.91215 13.0814 5.91215C13.5902 5.91215 14.012 6.3215 13.972 6.82875C13.9144 7.55831 13.7682 8.17268 13.5333 8.67183C13.2115 9.36779 12.7863 9.87425 12.2577 10.1912C11.7291 10.5082 11.1717 10.6667 10.5856 10.6667C9.99957 10.6667 9.4652 10.5151 8.98255 10.2119C8.49989 9.90181 7.94254 9.41947 7.31049 8.76486C6.89104 8.32386 6.55204 8.01378 6.29347 7.83463C6.03491 7.65547 5.75336 7.56589 5.44883 7.56589C4.98341 7.56589 4.59843 7.76227 4.2939 8.15504C4.07578 8.43673 3.94034 8.85614 3.88758 9.41325C3.85255 9.7831 3.55926 10.0879 3.18775 10.0879H2.65799Z'
+			fill='white'
+		/>
+	</svg>
+);

src/components/icons/Estimated/Estimated24.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconEstimated24: FC<IIconProps> = ({
+	color = 'currentColor',
+	size = 24,
+}) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 24 24'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2Z'
+			fill={color}
+		/>
+		<path
+			d='M3.98698 15.1318C3.44057 15.1318 2.99065 14.6926 3.01725 14.1468C3.07901 12.8798 3.30661 11.8283 3.70006 10.9922C4.19134 9.94832 4.82913 9.18863 5.61345 8.71318C6.40638 8.23773 7.2424 8 8.12153 8C9.00065 8 9.8022 8.23256 10.5262 8.69767C11.2588 9.15246 12.0948 9.8708 13.0343 10.8527C13.6721 11.5142 14.1806 11.9793 14.5598 12.2481C14.9476 12.5168 15.37 12.6512 15.8268 12.6512C16.568 12.6512 17.1541 12.3307 17.585 11.6899C17.8328 11.3155 18.0065 10.8453 18.1061 10.2794C18.2412 9.51208 18.843 8.86822 19.6221 8.86822C20.3854 8.86822 21.018 9.48225 20.958 10.2431C20.8716 11.3375 20.6523 12.259 20.2999 13.0078C19.8173 14.0517 19.1795 14.8114 18.3866 15.2868C17.5936 15.7623 16.7576 16 15.8785 16C14.9994 16 14.1978 15.7726 13.4738 15.3178C12.7498 14.8527 11.9138 14.1292 10.9657 13.1473C10.3366 12.4858 9.82805 12.0207 9.44021 11.7519C9.05236 11.4832 8.63004 11.3488 8.17324 11.3488C7.47511 11.3488 6.89765 11.6434 6.44085 12.2326C6.11367 12.6551 5.91051 13.2842 5.83137 14.1199C5.77882 14.6747 5.33889 15.1318 4.78163 15.1318H3.98698Z'
+			fill='white'
+		/>
+	</svg>
+);

src/components/icons/Estimated/Estimated32.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconEstimated32: FC<IIconProps> = ({ color = 'currentColor' }) => (
+	<svg
+		width='32'
+		height='32'
+		viewBox='0 0 32 32'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M0 2.66667C0 1.19391 1.19391 0 2.66667 0H29.3333C30.8061 0 32 1.19391 32 2.66667V29.3333C32 30.8061 30.8061 32 29.3333 32H2.66667C1.19391 32 0 30.8061 0 29.3333V2.66667Z'
+			fill={color}
+		/>
+		<path
+			d='M5.31598 20.1757C4.58743 20.1757 3.98753 19.5901 4.023 18.8624C4.10535 17.1731 4.40882 15.7711 4.93342 14.6563C5.58845 13.2644 6.43884 12.2515 7.48459 11.6176C8.54184 10.9836 9.65654 10.6667 10.8287 10.6667C12.0009 10.6667 13.0696 10.9767 14.0349 11.5969C15.0117 12.2033 16.1264 13.1611 17.379 14.4703C18.2294 15.3523 18.9074 15.9724 19.4131 16.3307C19.9302 16.6891 20.4933 16.8682 21.1023 16.8682C22.0906 16.8682 22.8721 16.441 23.4467 15.5866C23.7771 15.0873 24.0087 14.4604 24.1415 13.7059C24.3216 12.6828 25.124 11.8243 26.1628 11.8243C27.1805 11.8243 28.024 12.643 27.944 13.6575C27.8288 15.1166 27.5364 16.3454 27.0666 17.3437C26.423 18.7356 25.5726 19.7485 24.5154 20.3824C23.4582 21.0164 22.3435 21.3333 21.1713 21.3333C19.9991 21.3333 18.9304 21.0301 17.9651 20.4238C16.9998 19.8036 15.8851 18.8389 14.621 17.5297C13.7821 16.6477 13.1041 16.0276 12.5869 15.6693C12.0698 15.3109 11.5067 15.1318 10.8977 15.1318C9.96682 15.1318 9.19687 15.5245 8.5878 16.3101C8.15157 16.8735 7.88068 17.7123 7.77515 18.8265C7.7051 19.5662 7.11852 20.1757 6.3755 20.1757H5.31598Z'
+			fill='white'
+		/>
+	</svg>
+);

src/components/icons/index.tsx

@@ -485,3 +485,7 @@ export * from './QF/QF32';
 export * from './World/World32';
 export * from './WrongNetwork/WrongNetwork32';
 export * from './MessageSquare/MessageSquare32';
+export * from './Estimated/Estimated';
+export * from './Estimated/Estimated16';
+export * from './Estimated/Estimated24';
+export * from './Estimated/Estimated32';

src/components/social-icons/Lens.tsx

@@ -14,8 +14,8 @@ export const IconLens: FC<ISocialIconProps> = ({
 			xmlns='http://www.w3.org/2000/svg'
 		>
 			<path
-				fill-rule='evenodd'
-				clip-rule='evenodd'
+				fillRule='evenodd'
+				clipRule='evenodd'
 				d='M11.0146 3.60143C11.6705 3.05426 12.4021 2.84608 13.1039 2.89871C13.8524 2.95485 14.545 3.30571 15.0624 3.81534C15.5797 4.32501 15.9351 5.00671 15.992 5.74242C16.0494 6.48483 15.8008 7.26242 15.1454 7.94481C15.0855 8.00769 15.0243 8.06968 14.9617 8.13093C11.9891 11.0592 8.04042 11.0669 8.00002 11.0669H7.99982C7.97963 11.0669 4.01846 11.0668 1.03814 8.13063L1.0375 8.12989C0.975974 8.06894 0.915383 8.00754 0.8557 7.94585L0.855223 7.94525C0.199538 7.26344 -0.0492793 6.48605 0.00794417 5.74364C0.064646 5.00805 0.419804 4.32627 0.936976 3.81643C1.4541 3.30662 2.14671 2.95547 2.89537 2.8991C3.59705 2.84626 4.32888 3.05418 4.98504 3.60108C5.0556 2.75756 5.42319 2.10106 5.95678 1.64972C6.52587 1.16834 7.2675 0.933594 7.99984 0.933594C8.73219 0.933594 9.4738 1.16834 10.0429 1.64972C10.5765 2.10112 10.9441 2.75774 11.0146 3.60143ZM8.13592 10.7701L8.13579 10.7663H8.13603L8.13592 10.7701ZM7.86377 10.7701L7.86366 10.7663H7.8639L7.86377 10.7701ZM10.2332 6.70398C10.1518 6.70398 10.1236 6.81969 10.1755 6.88099C10.2673 6.98955 10.3226 7.12922 10.3226 7.28161C10.3226 7.62739 10.0381 7.9077 9.68715 7.9077C9.33614 7.9077 9.0516 7.62739 9.0516 7.28161C9.0516 7.26312 9.0271 7.25392 9.01603 7.26891C8.9158 7.40453 8.84813 7.55679 8.82032 7.71666C8.80468 7.80666 8.7304 7.88132 8.63707 7.88132H8.58553C8.46372 7.88132 8.36324 7.78397 8.38121 7.66609C8.50445 6.85826 9.31259 6.27236 10.2332 6.27236C11.1537 6.27236 11.9618 6.85826 12.085 7.66609C12.1029 7.78397 12.0025 7.88132 11.8807 7.88132C11.7588 7.88132 11.6624 7.78348 11.6359 7.66714C11.5155 7.13763 10.9569 6.70398 10.2332 6.70398ZM4.58977 7.28161C4.58977 7.25722 4.55767 7.24412 4.54256 7.26353C4.43541 7.40127 4.36241 7.55726 4.3315 7.72166C4.31326 7.81873 4.23308 7.8995 4.13216 7.8995H4.09434C3.97253 7.8995 3.87205 7.80219 3.89 7.68432C4.01318 6.87605 4.82142 6.29059 5.74191 6.29059C6.66239 6.29059 7.47063 6.87605 7.5938 7.68432C7.61178 7.80219 7.51128 7.8995 7.38947 7.8995C7.26768 7.8995 7.17121 7.80175 7.14476 7.68538C7.02434 7.15554 6.46583 6.72221 5.74191 6.72221C5.6761 6.72221 5.65202 6.81323 5.69607 6.86105C5.79842 6.97219 5.86078 7.11973 5.86078 7.28161C5.86078 7.62739 5.57626 7.9077 5.22528 7.9077C4.87429 7.9077 4.58977 7.62739 4.58977 7.28161ZM8.70681 8.79153C8.7929 8.70719 8.92595 8.66621 9.03284 8.72328C9.13973 8.78051 9.18028 8.91313 9.10325 9.00552C8.85236 9.3061 8.44615 9.49669 7.99814 9.49669C7.55036 9.49669 7.14326 9.30818 6.89204 9.00523C6.81528 8.91269 6.85634 8.78006 6.96344 8.72328C7.07054 8.66651 7.20337 8.70808 7.28934 8.79243C7.45493 8.95516 7.70622 9.06513 7.99814 9.06513C8.28929 9.06513 8.54085 8.95396 8.70681 8.79153Z'
 				fill={color}
 			/>

src/components/typography/ButtonText.tsx

@@ -5,7 +5,9 @@ export interface IButtonTextProps {
 }
 
 export const ButtonText = styled.span<IButtonTextProps>`
-	font-family: Red Hat Text, sans-serif;
+	font-family:
+		Red Hat Text,
+		sans-serif;
 	font-style: normal;
 	text-transform: uppercase;
 	font-weight: 700;

src/components/typography/GLink.tsx

@@ -5,7 +5,9 @@ export interface IGLinkProps {
 }
 
 export const GLink = styled.span<IGLinkProps>`
-	font-family: Red Hat Text, sans-serif;
+	font-family:
+		Red Hat Text,
+		sans-serif;
 	font-style: normal;
 	font-weight: normal;
 	display: inline-block;