fix lightbox images layering for icons (#338)

* fix lightbox images layering for icons

* refactor icon data lightbox

src/components/Article/Article.module.scss

@@ -20,7 +20,7 @@ img {
 }
 
 .articleContent {
-  img {
+  img:not([data-disable-lightbox='true']) {
     cursor: zoom-in;
   }
 }

src/components/Article/FullArticle.tsx

@@ -277,7 +277,7 @@ export const FullArticle = (props: Props) => {
   }
 
   const handleArticleBodyClick = (event) => {
-    if (event.target.tagName === 'IMG') {
+    if (event.target.tagName === 'IMG' && !event.target.dataset['disableLightbox']) {
       const src = event.target.src
       openLightbox(getImageUrl(src))
     }

src/components/_shared/Icon/Icon.tsx

@@ -19,7 +19,12 @@ export const Icon = (passedProps: IconProps) => {
 
   return (
     <div class={clsx('icon', styles.icon, props.class)} style={props.style}>
-      <img src={`/icons/${props.name}.svg`} alt={props.title ?? props.name} class={props.iconClassName} />
+      <img
+        src={`/icons/${props.name}.svg`}
+        alt={props.title ?? props.name}
+        class={props.iconClassName}
+        data-disable-lightbox="true"
+      />
       <Show when={props.counter}>
         <div class={styles.notificationsCounter}>{props.counter}</div>
       </Show>