Markup fixes: (#292)

- auth modal height
- notifications close panel

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;
+      color: var(--default-color-invert);
-      border-color: black;
+      border-color: var(--background-color-invert);
     }
   }
 }

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;
+      padding: 1.23rem 38px;
-      border-bottom: 1px solid var(--black-100);
+      border-bottom: 2px solid var(--black-100);
     }
 
     .content {
@@ -77,10 +76,19 @@ $transition-duration: 200ms;
 
 .closeButton {
   position: absolute;
-  top: 0;
+  top: 1.2rem;
-  right: 0;
+  right: 1rem;
-  padding: 20px;
+  padding: 1rem;
   cursor: pointer;
+  z-index: 1;
+
+  &:hover {
+    background-color: var(--background-color-invert);
+
+    .closeIcon {
+      filter: invert(1);
+    }
+  }
 }
 
 .notificationView + .notificationView {

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 class={styles.closeIcon} name="close" />
-          <Icon name="close" />
         </div>
         <div class={styles.title}>{t('Notifications')}</div>
         <div class={clsx('wide-container', styles.content)} ref={(el) => (scrollContainerRef.current = el)}>

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,7 +66,6 @@ export const Slider = (props: Props) => {
 
   createEffect(() => {
     if (props.hasThumbs && !!thumbsEl) {
-      setTimeout(() => {
       setSwiperThumbs(
         new Swiper(thumbsEl, {
           slidesPerView: 'auto',
@@ -79,13 +80,11 @@ export const Slider = (props: Props) => {
           }
         })
       )
-      }, 500)
     }
   })
 
   createEffect(() => {
     if (!swiper() && !!el) {
-      setTimeout(() => {
       if (swiperThumbs()) {
         opts.thumbs = {
           swiper: swiperThumbs()
@@ -98,10 +97,14 @@ export const Slider = (props: Props) => {
       }
 
       setSwiper(new Swiper(el, opts))
-      }, 500)
+      swiper().update()
     }
   })
 
+  createEffect(() => {
+    swiper().update()
+  })
+
   return (
     <div class={clsx('floor', 'floor--important', props.variant)}>
       <div class="wide-container">