From f1e68f219cd111a5bc3d0580a9dfe5ff19769e33 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Thu, 2 Nov 2023 06:31:00 +0300
Subject: [PATCH] Markup fixes: (#292)

- auth modal height
- notifications close panel
---
 .../Nav/AuthModal/AuthModal.module.scss       | 14 ++---
 .../NotificationsPanel.module.scss            | 20 +++++--
 .../NotificationsPanel/NotificationsPanel.tsx |  3 +-
 src/components/_shared/Slider/Slider.tsx      | 59 ++++++++++---------
 4 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/src/components/Nav/AuthModal/AuthModal.module.scss b/src/components/Nav/AuthModal/AuthModal.module.scss
index 6b8216b5..74f5bb7c 100644
--- a/src/components/Nav/AuthModal/AuthModal.module.scss
+++ b/src/components/Nav/AuthModal/AuthModal.module.scss
@@ -4,7 +4,7 @@
   position: relative;
 
   @include media-breakpoint-up(md) {
-    min-height: 710px;
+    min-height: 600px;
   }
 
   input {
@@ -40,9 +40,9 @@
 .authImage {
   @include font-size(1.5rem);
 
-  background: #141414 url('/auth-page.jpg') center no-repeat;
+  background: var(--background-color-invert) url('/auth-page.jpg') center no-repeat;
   background-size: cover;
-  color: #fff;
+  color: var(--default-color-invert);
   display: flex;
   padding: 3em;
   position: relative;
@@ -69,7 +69,7 @@
   z-index: 1;
 
   a {
-    color: #fff;
+    color: var(--default-color-invert);
 
     &:hover {
       color: rgb(255 255 255 / 70%);
@@ -91,7 +91,7 @@
   margin-bottom: 0;
 
   a {
-    color: #fff !important;
+    color: var(--default-color-invert) !important;
 
     &:hover {
       color: rgb(255, 255, 255, 0.6) !important;
@@ -192,8 +192,8 @@
     border-color: #d00820;
 
     &:hover {
-      color: white;
-      border-color: black;
+      color: var(--default-color-invert);
+      border-color: var(--background-color-invert);
     }
   }
 }
diff --git a/src/components/NotificationsPanel/NotificationsPanel.module.scss b/src/components/NotificationsPanel/NotificationsPanel.module.scss
index 26be7838..6810547c 100644
--- a/src/components/NotificationsPanel/NotificationsPanel.module.scss
+++ b/src/components/NotificationsPanel/NotificationsPanel.module.scss
@@ -31,11 +31,10 @@ $transition-duration: 200ms;
       color: var(--black-500);
       font-style: normal;
       font-weight: 700;
-      line-height: 36px;
       position: sticky;
       top: 0;
-      padding: 16px 38px;
-      border-bottom: 1px solid var(--black-100);
+      padding: 1.23rem 38px;
+      border-bottom: 2px solid var(--black-100);
     }
 
     .content {
@@ -77,10 +76,19 @@ $transition-duration: 200ms;
 
 .closeButton {
   position: absolute;
-  top: 0;
-  right: 0;
-  padding: 20px;
+  top: 1.2rem;
+  right: 1rem;
+  padding: 1rem;
   cursor: pointer;
+  z-index: 1;
+
+  &:hover {
+    background-color: var(--background-color-invert);
+
+    .closeIcon {
+      filter: invert(1);
+    }
+  }
 }
 
 .notificationView + .notificationView {
diff --git a/src/components/NotificationsPanel/NotificationsPanel.tsx b/src/components/NotificationsPanel/NotificationsPanel.tsx
index 3c772a93..2618895f 100644
--- a/src/components/NotificationsPanel/NotificationsPanel.tsx
+++ b/src/components/NotificationsPanel/NotificationsPanel.tsx
@@ -162,8 +162,7 @@ export const NotificationsPanel = (props: Props) => {
     >
       <div ref={(el) => (panelRef.current = el)} class={styles.panel}>
         <div class={styles.closeButton} onClick={handleHide}>
-          {/*TODO: check markup (hover)*/}
-          <Icon name="close" />
+          <Icon class={styles.closeIcon} name="close" />
         </div>
         <div class={styles.title}>{t('Notifications')}</div>
         <div class={clsx('wide-container', styles.content)} ref={(el) => (scrollContainerRef.current = el)}>
diff --git a/src/components/_shared/Slider/Slider.tsx b/src/components/_shared/Slider/Slider.tsx
index c5797459..6410940b 100644
--- a/src/components/_shared/Slider/Slider.tsx
+++ b/src/components/_shared/Slider/Slider.tsx
@@ -7,7 +7,7 @@ import 'swiper/scss/navigation'
 import 'swiper/scss/pagination'
 import 'swiper/scss/thumbs'
 import './Slider.scss'
-import { createEffect, createSignal, JSX, Show } from 'solid-js'
+import { createEffect, createSignal, JSX, on, Show } from 'solid-js'
 import { Icon } from '../Icon'
 import { clsx } from 'clsx'
 
@@ -33,6 +33,8 @@ export const Slider = (props: Props) => {
   const [swiper, setSwiper] = createSignal<Swiper>()
   const [swiperThumbs, setSwiperThumbs] = createSignal<Swiper>()
   const opts: SwiperOptions = {
+    observer: true,
+    observeParents: true,
     roundLengths: true,
     loop: true,
     centeredSlides: true,
@@ -64,44 +66,45 @@ export const Slider = (props: Props) => {
 
   createEffect(() => {
     if (props.hasThumbs && !!thumbsEl) {
-      setTimeout(() => {
-        setSwiperThumbs(
-          new Swiper(thumbsEl, {
-            slidesPerView: 'auto',
-            modules: [Thumbs],
-            roundLengths: true,
-            spaceBetween: 20,
-            freeMode: true,
-            breakpoints: {
-              768: {
-                direction: 'vertical'
-              }
+      setSwiperThumbs(
+        new Swiper(thumbsEl, {
+          slidesPerView: 'auto',
+          modules: [Thumbs],
+          roundLengths: true,
+          spaceBetween: 20,
+          freeMode: true,
+          breakpoints: {
+            768: {
+              direction: 'vertical'
             }
-          })
-        )
-      }, 500)
+          }
+        })
+      )
     }
   })
 
   createEffect(() => {
     if (!swiper() && !!el) {
-      setTimeout(() => {
-        if (swiperThumbs()) {
-          opts.thumbs = {
-            swiper: swiperThumbs()
-          }
-
-          opts.pagination = {
-            el: '.swiper-pagination',
-            type: 'fraction'
-          }
+      if (swiperThumbs()) {
+        opts.thumbs = {
+          swiper: swiperThumbs()
         }
 
-        setSwiper(new Swiper(el, opts))
-      }, 500)
+        opts.pagination = {
+          el: '.swiper-pagination',
+          type: 'fraction'
+        }
+      }
+
+      setSwiper(new Swiper(el, opts))
+      swiper().update()
     }
   })
 
+  createEffect(() => {
+    swiper().update()
+  })
+
   return (
     <div class={clsx('floor', 'floor--important', props.variant)}>
       <div class="wide-container">