Merge pull request #70 from Giveth/add_all_sizes_to_wallet_outline

Add all sizes to wallet outline

package.json

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

src/components/buttons/Button.tsx

@@ -10,8 +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;
-	transition: opacity 0.3s ease, color 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/icons/Profile.tsx

@@ -7,8 +7,8 @@ export const IconProfile: FC<IIconProps> = ({
 }) => {
 	const size24 = (
 		<svg
-			width='24'
-			height='24'
+			width={size}
+			height={size}
 			viewBox='0 0 24 24'
 			fill='none'
 			xmlns='http://www.w3.org/2000/svg'

src/components/icons/WalletOutline.tsx

@@ -7,20 +7,20 @@ export const IconWalletOutline: FC<IIconProps> = ({
 }) => {
 	const size16 = (
 		<svg
-			width='16'
-			height='16'
+			width={size}
+			height={size}
 			viewBox='0 0 16 16'
 			fill='none'
 			xmlns='http://www.w3.org/2000/svg'
 		>
 			<path
 				d='M13 4.5H3C2.17157 4.5 1.5 5.17157 1.5 6V12C1.5 12.8284 2.17157 13.5 3 13.5H13C13.8284 13.5 14.5 12.8284 14.5 12V6C14.5 5.17157 13.8284 4.5 13 4.5Z'
-				stroke='#030823'
+				stroke={color}
 				strokeLinejoin='round'
 			/>
 			<path
 				d='M12.855 4.5V3.5625C12.8549 3.33256 12.8041 3.10548 12.7062 2.89745C12.6082 2.68941 12.4656 2.50556 12.2884 2.35901C12.1112 2.21245 11.9039 2.10681 11.6812 2.04961C11.4585 1.99242 11.2259 1.98508 11 2.02813L2.77 3.43281C2.4126 3.50092 2.09017 3.69162 1.85833 3.97201C1.62648 4.2524 1.49975 4.60492 1.5 4.96875V6.49999'
-				stroke='#030823'
+				stroke={color}
 				strokeLinejoin='round'
 			/>
 			<path
@@ -39,13 +39,13 @@ export const IconWalletOutline: FC<IIconProps> = ({
 		>
 			<path
 				d='M19.5 6.75H4.5C3.25736 6.75 2.25 7.75736 2.25 9V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75Z'
-				stroke='#030823'
+				stroke={color}
 				strokeWidth='1.5'
 				strokeLinejoin='round'
 			/>
 			<path
 				d='M19.2825 6.74999V5.34374C19.2824 4.99884 19.2062 4.65821 19.0592 4.34616C18.9123 4.03411 18.6984 3.75833 18.4326 3.5385C18.1668 3.31867 17.8558 3.16021 17.5217 3.07441C17.1877 2.98862 16.8388 2.97762 16.5 3.04218L4.155 5.14921C3.6189 5.25137 3.13526 5.53742 2.78749 5.95801C2.43972 6.3786 2.24963 6.90737 2.25 7.45311V9.74998'
-				stroke='#030823'
+				stroke={color}
 				strokeWidth='1.5'
 				strokeLinejoin='round'
 			/>
@@ -66,13 +66,13 @@ export const IconWalletOutline: FC<IIconProps> = ({
 		>
 			<path
 				d='M26 9H6C4.34315 9 3 10.3431 3 12V24C3 25.6569 4.34315 27 6 27H26C27.6569 27 29 25.6569 29 24V12C29 10.3431 27.6569 9 26 9Z'
-				stroke='#030823'
+				stroke={color}
 				strokeWidth='2'
 				strokeLinejoin='round'
 			/>
 			<path
 				d='M25.71 8.99999V7.125C25.7099 6.66513 25.6082 6.21096 25.4123 5.79489C25.2164 5.37883 24.9311 5.01112 24.5768 4.71802C24.2224 4.42491 23.8077 4.21362 23.3623 4.09923C22.9169 3.98484 22.4517 3.97016 22 4.05625L5.54 6.86562C4.8252 7.00184 4.18035 7.38323 3.71665 7.94402C3.25296 8.50481 2.99951 9.20983 3 9.93749V13'
-				stroke='#030823'
+				stroke={color}
 				strokeWidth='2'
 				strokeLinejoin='round'
 			/>

src/stories/Introduction.stories.mdx

@@ -116,6 +116,6 @@ import StackAlt from './assets/stackalt.svg';
 
 # Welcome to React NPM Boilerplate
 
-This boilerplate helps you to Pubslish your React component to NPM.
+This boilerplate helps you to Publish your React component to NPM.
 
 [**Cherik**](https://mpch.ir)