From fef3ebf9a0f6a14606684e189ffdc647a071edc0 Mon Sep 17 00:00:00 2001
From: Avior <f.bouillon@aptatio.com>
Date: Mon, 27 Feb 2023 12:01:34 +0100
Subject: [PATCH] feat: Add padding to input svgs so they are more clickable

Signed-off-by: Avior <f.bouillon@aptatio.com>
---
 src/Input/Input.module.styl | 1 +
 src/Input/index.tsx         | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Input/Input.module.styl b/src/Input/Input.module.styl
index b33097b..6dfa0d8 100644
--- a/src/Input/Input.module.styl
+++ b/src/Input/Input.module.styl
@@ -22,6 +22,7 @@
 	svg
 		position absolute
 		user-select none
+		padding 8px
 		color black
 		@media (prefers-color-scheme dark)
 			color white
diff --git a/src/Input/index.tsx b/src/Input/index.tsx
index 2db0c64..880a388 100644
--- a/src/Input/index.tsx
+++ b/src/Input/index.tsx
@@ -350,7 +350,8 @@ export default class Input extends React.Component<Props, States> {
 		}
 
 		if ('icon' in Icon) {
-			return <Icon.icon size="18" className={buildClassName(css[position], css.iconClickable)} onClick={async () => {
+			// 18 + 8 of padding
+			return <Icon.icon size={8*2+18} className={buildClassName(css[position], css.iconClickable)} onClick={async () => {
 				if (this.props.disabled) {return}
 				const value = Icon.transformer(this.state.value ?? this.state.displayedValue ?? '')
 				this.setState({ value: value, displayedValue: value, valueUpdate: true })