From 511a8b5768bbb14d4144438cd1b08ddf23fa3370 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 23 Apr 2020 14:12:43 +0700
Subject: [PATCH] fixed switcher appearance

---
 src/components/node/ImageSwitcher/styles.scss  | 9 +++++----
 src/components/node/NodeImageBlock/index.tsx   | 4 ++--
 src/components/node/NodeImageBlock/styles.scss | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/node/ImageSwitcher/styles.scss b/src/components/node/ImageSwitcher/styles.scss
index dae7fef9..77ee2f10 100644
--- a/src/components/node/ImageSwitcher/styles.scss
+++ b/src/components/node/ImageSwitcher/styles.scss
@@ -7,14 +7,15 @@
 
 .switcher {
   position: absolute;
-  background: darken($content_bg, 2%);
+  // background: darken($content_bg, 2%);
+  background: url('../../../../src/sprites/noise.png') $main_bg_color;
   display: flex;
   left: 50%;
   transform: translate(-50%, 0);
-  top: 0;
+  top: -5px;
   border-radius: 24px;
-  padding: 0 13px;
-  flex-wrap: wrap;
+  padding: 0 3px;
+  // flex-wrap: wrap;
   transition: background-color 0.5s;
 
   & > div {
diff --git a/src/components/node/NodeImageBlock/index.tsx b/src/components/node/NodeImageBlock/index.tsx
index 0741da31..124200d7 100644
--- a/src/components/node/NodeImageBlock/index.tsx
+++ b/src/components/node/NodeImageBlock/index.tsx
@@ -20,7 +20,7 @@ interface IProps {
 const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowPhotoswipe }) => {
   const [is_animated, setIsAnimated] = useState(false);
   const [current, setCurrent] = useState(0);
-  const [height, setHeight] = useState(window.innerHeight - 140);
+  const [height, setHeight] = useState(window.innerHeight - 150);
   const [loaded, setLoaded] = useState<Record<number, boolean>>({});
   const refs = useRef<Record<number, HTMLDivElement>>({});
 
@@ -41,7 +41,7 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
 
   useEffect(() => {
     if (!refs || !refs.current[current] || !loaded[current])
-      return setHeight(window.innerHeight - 140);
+      return setHeight(window.innerHeight - 150);
 
     const el = refs.current[current];
     const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
diff --git a/src/components/node/NodeImageBlock/styles.scss b/src/components/node/NodeImageBlock/styles.scss
index 8c931586..a9529f4d 100644
--- a/src/components/node/NodeImageBlock/styles.scss
+++ b/src/components/node/NodeImageBlock/styles.scss
@@ -23,7 +23,7 @@
   user-select: none;
 
   .image {
-    max-height: calc(100vh - 140px);
+    max-height: calc(100vh - 150px);
     max-width: 100%;
     opacity: 1;
     border-radius: $radius;
@@ -52,7 +52,7 @@
 
 .placeholder {
   width: 100%;
-  height: calc(100vh - 140px);
+  height: calc(100vh - 130px);
   border-radius: $radius;
   display: flex;
   align-items: center;