From a7a100f7d9a24aa6b1c38c60bc244944409a11f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=82osz=20Grocholewski?= <m.grocholewski@atcomp.pl>
Date: Wed, 12 Feb 2025 09:05:02 +0100
Subject: [PATCH] fix(icons): correct icons styles
---
src/shared/Icon/Icons/BringBackIcon.tsx | 24 ++-----------------
src/shared/Icon/Icons/BringFrontIcon.tsx | 24 ++-----------------
src/shared/Icon/Icons/CenterIcon.tsx | 10 ++++----
src/shared/Icon/Icons/CrossedEyeIcon.tsx | 13 ++--------
src/shared/Icon/Icons/EyeIcon.tsx | 11 +--------
src/shared/Icon/Icons/LayersIcon.tsx | 11 ++++-----
src/shared/Icon/Icons/PadlockLockedIcon.tsx | 4 ++--
src/shared/Icon/Icons/PadlockOpenIcon.tsx | 4 ++--
src/shared/Icon/Icons/TrashIcon.tsx | 21 +++-------------
.../IconButton/IconButton.component.tsx | 18 +++++++++++---
10 files changed, 38 insertions(+), 102 deletions(-)
diff --git a/src/shared/Icon/Icons/BringBackIcon.tsx b/src/shared/Icon/Icons/BringBackIcon.tsx
index 527363be..d086ac9b 100644
--- a/src/shared/Icon/Icons/BringBackIcon.tsx
+++ b/src/shared/Icon/Icons/BringBackIcon.tsx
@@ -11,17 +11,7 @@ export const BringBackIcon = ({ className }: BringBackIconProps): JSX.Element =>
fill="none"
className={className}
>
- <rect
- x="32"
- y="32"
- width="64"
- height="64"
- rx="10"
- ry="10"
- strokeWidth="8"
- stroke="black"
- fill="white"
- />
+ <rect x="32" y="32" width="64" height="64" rx="10" ry="10" strokeWidth="8" fill="white" />
<rect
x="4"
y="4"
@@ -33,16 +23,6 @@ export const BringBackIcon = ({ className }: BringBackIconProps): JSX.Element =>
stroke="white"
fill="none"
/>
- <rect
- x="4"
- y="4"
- width="64"
- height="64"
- rx="10"
- ry="10"
- strokeWidth="8"
- stroke="black"
- fill="black"
- />
+ <rect x="4" y="4" width="64" height="64" rx="10" ry="10" strokeWidth="8" fill="black" />
</svg>
);
diff --git a/src/shared/Icon/Icons/BringFrontIcon.tsx b/src/shared/Icon/Icons/BringFrontIcon.tsx
index c06ecebb..e5aa5017 100644
--- a/src/shared/Icon/Icons/BringFrontIcon.tsx
+++ b/src/shared/Icon/Icons/BringFrontIcon.tsx
@@ -11,17 +11,7 @@ export const BringFrontIcon = ({ className }: BringFrontIconProps): JSX.Element
fill="none"
className={className}
>
- <rect
- x="4"
- y="4"
- width="64"
- height="64"
- rx="10"
- ry="10"
- strokeWidth="8"
- stroke="black"
- fill="black"
- />
+ <rect x="4" y="4" width="64" height="64" rx="10" ry="10" strokeWidth="8" fill="black" />
<rect
x="30"
y="30"
@@ -33,16 +23,6 @@ export const BringFrontIcon = ({ className }: BringFrontIconProps): JSX.Element
stroke="white"
fill="none"
/>
- <rect
- x="32"
- y="32"
- width="64"
- height="64"
- rx="10"
- ry="10"
- strokeWidth="8"
- stroke="black"
- fill="white"
- />
+ <rect x="32" y="32" width="64" height="64" rx="10" ry="10" strokeWidth="8" fill="white" />
</svg>
);
diff --git a/src/shared/Icon/Icons/CenterIcon.tsx b/src/shared/Icon/Icons/CenterIcon.tsx
index ab0ef375..d5f0df63 100644
--- a/src/shared/Icon/Icons/CenterIcon.tsx
+++ b/src/shared/Icon/Icons/CenterIcon.tsx
@@ -11,10 +11,10 @@ export const CenterIcon = ({ className }: CenterIconProps): JSX.Element => (
fill="none"
className={className}
>
- <circle cx="50" cy="50" r="45" stroke="black" strokeWidth="6" fill="none" />
- <line x1="50" y1="5" x2="50" y2="30" stroke="black" strokeWidth="6" />
- <line x1="50" y1="70" x2="50" y2="95" stroke="black" strokeWidth="6" />
- <line x1="5" y1="50" x2="30" y2="50" stroke="black" strokeWidth="6" />
- <line x1="65" y1="50" x2="95" y2="50" stroke="black" strokeWidth="6" />
+ <circle cx="50" cy="50" r="45" strokeWidth="6" fill="none" />
+ <line x1="50" y1="5" x2="50" y2="30" strokeWidth="6" />
+ <line x1="50" y1="70" x2="50" y2="95" strokeWidth="6" />
+ <line x1="5" y1="50" x2="30" y2="50" strokeWidth="6" />
+ <line x1="65" y1="50" x2="95" y2="50" strokeWidth="6" />
</svg>
);
diff --git a/src/shared/Icon/Icons/CrossedEyeIcon.tsx b/src/shared/Icon/Icons/CrossedEyeIcon.tsx
index b8ad98a3..6706f088 100644
--- a/src/shared/Icon/Icons/CrossedEyeIcon.tsx
+++ b/src/shared/Icon/Icons/CrossedEyeIcon.tsx
@@ -17,19 +17,10 @@ export const CrossedEyeIcon = ({ className }: CrossedEyeIconProps): JSX.Element
<path
d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"
fill="none"
- stroke="black"
strokeLinecap="round"
strokeLinejoin="round"
/>
- <circle
- cx="12"
- cy="12"
- r="3"
- fill="none"
- stroke="black"
- strokeLinecap="round"
- strokeLinejoin="round"
- />
- <line x1="3" y1="3" x2="21" y2="21" fill="none" stroke="black" />
+ <circle cx="12" cy="12" r="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+ <line x1="3" y1="3" x2="21" y2="21" fill="none" />
</svg>
);
diff --git a/src/shared/Icon/Icons/EyeIcon.tsx b/src/shared/Icon/Icons/EyeIcon.tsx
index 36995fa4..302f111a 100644
--- a/src/shared/Icon/Icons/EyeIcon.tsx
+++ b/src/shared/Icon/Icons/EyeIcon.tsx
@@ -17,18 +17,9 @@ export const EyeIcon = ({ className }: EyeIconProps): JSX.Element => (
<path
d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"
fill="none"
- stroke="black"
- strokeLinecap="round"
- strokeLinejoin="round"
- />
- <circle
- cx="12"
- cy="12"
- r="3"
- fill="none"
- stroke="black"
strokeLinecap="round"
strokeLinejoin="round"
/>
+ <circle cx="12" cy="12" r="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
diff --git a/src/shared/Icon/Icons/LayersIcon.tsx b/src/shared/Icon/Icons/LayersIcon.tsx
index bebcbea3..a3e7bcc4 100644
--- a/src/shared/Icon/Icons/LayersIcon.tsx
+++ b/src/shared/Icon/Icons/LayersIcon.tsx
@@ -6,31 +6,28 @@ export const LayersIcon = ({ className }: LayersIconProps): JSX.Element => (
<svg
width="20"
height="20"
- viewBox="0 0 24 24"
+ viewBox="0 0 22 22"
fill="none"
className={className}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 4L4 8.5L12 13L20 8.5L12 4Z"
- stroke="black"
- strokeWidth="1"
+ strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
<path
d="M4 12.5L12 17L20 12.5"
- stroke="black"
- strokeWidth="1"
+ strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
<path
d="M4 16.5L12 21L20 16.5"
- stroke="black"
- strokeWidth="1"
+ strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
diff --git a/src/shared/Icon/Icons/PadlockLockedIcon.tsx b/src/shared/Icon/Icons/PadlockLockedIcon.tsx
index 51f8fec5..4491a472 100644
--- a/src/shared/Icon/Icons/PadlockLockedIcon.tsx
+++ b/src/shared/Icon/Icons/PadlockLockedIcon.tsx
@@ -14,7 +14,7 @@ export const PadlockLockedIcon = ({ className }: PadlockLockedIconProps): JSX.El
className={className}
xmlns="http://www.w3.org/2000/svg"
>
- <rect x="5" y="10" width="14" height="10" rx="2" fill="none" stroke="black" />
- <path d="M8 10V6a4 4 0 0 1 8 0v4" fill="none" stroke="black" />
+ <rect x="5" y="10" width="14" height="10" rx="2" fill="none" />
+ <path d="M8 10V6a4 4 0 0 1 8 0v4" fill="none" />
</svg>
);
diff --git a/src/shared/Icon/Icons/PadlockOpenIcon.tsx b/src/shared/Icon/Icons/PadlockOpenIcon.tsx
index b6e2265a..2c966931 100644
--- a/src/shared/Icon/Icons/PadlockOpenIcon.tsx
+++ b/src/shared/Icon/Icons/PadlockOpenIcon.tsx
@@ -14,7 +14,7 @@ export const PadlockOpenIcon = ({ className }: PadlockOpenIconProps): JSX.Elemen
className={className}
xmlns="http://www.w3.org/2000/svg"
>
- <rect x="5" y="10" width="14" height="10" rx="2" fill="none" stroke="black" />
- <path d="M16 10V6a4 4 0 0 0-8 0" fill="none" stroke="black" />
+ <rect x="5" y="10" width="14" height="10" rx="2" fill="none" />
+ <path d="M16 10V6a4 4 0 0 0-8 0" fill="none" />
</svg>
);
diff --git a/src/shared/Icon/Icons/TrashIcon.tsx b/src/shared/Icon/Icons/TrashIcon.tsx
index b85b9410..f7d093a6 100644
--- a/src/shared/Icon/Icons/TrashIcon.tsx
+++ b/src/shared/Icon/Icons/TrashIcon.tsx
@@ -4,27 +4,12 @@ interface TrashIconProps {
export const TrashIcon = ({ className }: TrashIconProps): JSX.Element => (
<svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 22 22"
width="20"
height="20"
- viewBox="0 0 24 24"
- fill="none"
className={className}
- xmlns="http://www.w3.org/2000/svg"
>
- <path d="M7 6H17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
- <path d="M9 4H15V6H9V4Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
- <rect
- x="6"
- y="6"
- width="12"
- height="14"
- rx="1"
- stroke="currentColor"
- strokeWidth="1.5"
- fill="none"
- />
- <path d="M9 10V16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
- <path d="M12 10V16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
- <path d="M15 10V16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+ <path d="M9 3V4H4V6H5V20C5 21.1 5.9 22 7 22H17C18.1 22 19 21.1 19 20V6H20V4H15V3H9M7 6H17V20H7V6M9 8V18H11V8H9M13 8V18H15V8H13Z" />
</svg>
);
diff --git a/src/shared/IconButton/IconButton.component.tsx b/src/shared/IconButton/IconButton.component.tsx
index be43b0d0..569d745b 100644
--- a/src/shared/IconButton/IconButton.component.tsx
+++ b/src/shared/IconButton/IconButton.component.tsx
@@ -27,6 +27,18 @@ export const IconButton = ({
throw new Error('IconButton component must have a icon property!');
}
+ const isStrokeIcon = [
+ 'plugin',
+ 'bring-back',
+ 'bring-front',
+ 'center',
+ 'eye',
+ 'crossed-eye',
+ 'padlock-open',
+ 'padlock-locked',
+ 'layers',
+ ].includes(icon);
+
return (
<button
className={twMerge(
@@ -41,9 +53,9 @@ export const IconButton = ({
>
<Icon
className={twMerge(
- icon !== 'plugin'
- ? 'fill-font-400 group-hover:fill-primary-500 group-active:fill-primary-500'
- : 'stroke-font-400 group-hover:stroke-primary-500 group-active:stroke-primary-500',
+ isStrokeIcon
+ ? 'stroke-font-400 group-hover:stroke-primary-500 group-active:stroke-primary-500'
+ : 'fill-font-400 group-hover:fill-primary-500 group-active:fill-primary-500',
isActive && getActiveFillOrStrokeColor(icon),
classNameIcon,
)}
--
GitLab