Fix/minor fixies (#365)

* Swiper thumbs update

src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx

@@ -1,7 +1,7 @@
 import type { PopupProps } from '../../_shared/Popup'
 
 import { clsx } from 'clsx'
-import { createSignal, Show } from 'solid-js'
+import { createEffect, createSignal, onMount, Show } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
 import { Popup } from '../../_shared/Popup'
@@ -17,12 +17,13 @@ type Props = {
 
 export const FeedArticlePopup = (props: Props) => {
   const { t } = useLocalize()
-  const [isHidden, setHidden] = createSignal(false)
+  const [hidePopup, setHidePopup] = createSignal(false)
   return (
     <>
       <Popup
         {...props}
-        closePopup={() => isHidden()}
+        //TODO: fix hide logic
+        closePopup={hidePopup()}
         horizontalAnchor={'right'}
         variant="tiny"
         popupCssClass={styles.feedArticlePopup}
@@ -34,7 +35,7 @@ export const FeedArticlePopup = (props: Props) => {
               role="button"
               onClick={() => {
                 props.onShareClick()
-                setHidden(true)
+                setHidePopup(true)
               }}
             >
               {t('Share')}
@@ -47,7 +48,7 @@ export const FeedArticlePopup = (props: Props) => {
                 role="button"
                 onClick={() => {
                   alert('Help to edit')
-                  setHidden(true)
+                  setHidePopup(true)
                 }}
               >
                 {t('Help to edit')}
@@ -60,7 +61,7 @@ export const FeedArticlePopup = (props: Props) => {
               role="button"
               onClick={() => {
                 props.onInviteClick()
-                setHidden(true)
+                setHidePopup(false)
               }}
             >
               {t('Invite experts')}

src/components/_shared/Popup/Popup.tsx

@@ -15,7 +15,7 @@ export type PopupProps = {
   onVisibilityChange?: (isVisible: boolean) => void
   horizontalAnchor?: HorizontalAnchor
   variant?: 'bordered' | 'tiny'
-  closePopup?: (isVisible: boolean) => void
+  closePopup?: boolean
 }
 
 export const Popup = (props: PopupProps) => {
@@ -29,13 +29,7 @@ export const Popup = (props: PopupProps) => {
   })
 
   const containerRef: { current: HTMLElement } = { current: null }
-
+  const closePopup = () => setIsVisible(false)
-  const closePopup = () => {
-    setIsVisible(false)
-    if (props.closePopup) {
-      props.closePopup
-    }
-  }
 
   useOutsideClickHandler({
     containerRef,
@@ -43,6 +37,12 @@ export const Popup = (props: PopupProps) => {
     handler: () => closePopup(),
   })
 
+  createEffect(() => {
+    if (props.closePopup) {
+      closePopup()
+    }
+  })
+
   const toggle = () => setIsVisible((oldVisible) => !oldVisible)
   return (
     <span class={clsx(styles.container, props.containerCssClass)} ref={(el) => (containerRef.current = el)}>

src/components/_shared/SolidSwiper/ImageSwiper.tsx

@@ -52,7 +52,7 @@ export const ImageSwiper = (props: Props) => {
     const { register } = await import('swiper/element/bundle')
     register()
     SwiperCore.use([Pagination, Navigation, Manipulation])
-    mainSwipeRef.current.swiper.on('slideChange', handleSlideChange)
+    mainSwipeRef.current?.swiper?.on('slideChange', handleSlideChange)
   })
 
   onMount(() => {
@@ -102,6 +102,7 @@ export const ImageSwiper = (props: Props) => {
                 watch-overflow={true}
                 watch-slides-visibility={true}
                 direction={'horizontal'}
+                slides-per-group-auto={true}
               >
                 <For each={props.images}>
                   {(slide, index) => (
@@ -130,7 +131,7 @@ export const ImageSwiper = (props: Props) => {
                 class={clsx(styles.navigation, styles.thumbsNav, styles.next, {
                   [styles.disabled]: slideIndex() + 1 === props.images.length,
                 })}
-                onClick={() => thumbSwipeRef.current.swiper.slideTo(10)}
+                onClick={() => thumbSwipeRef.current.swiper.slideNext()}
               >
                 <Icon name="swiper-r-arr" class={styles.icon} />
               </div>

src/components/_shared/SolidSwiper/Swiper.module.scss

@@ -52,14 +52,21 @@
       }
 
       .thumbs {
-        overflow: hidden;
+        //overflow: hidden;
         box-sizing: border-box;
         margin: 0;
         position: relative;
 
+        & > swiper-container {
+          display: flex;
+          flex-direction: row;
+          gap: 10px;
+        }
+
         .thumbsNav {
-          height: 52px;
+          height: 100%;
           overflow: hidden;
+          width: 24px;
 
           &.prev {
             top: 50%;