From 57a289e38389d0d9a5d8c32bfde0c84a415b48be Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 23 Nov 2023 00:31:51 +0300
Subject: [PATCH] Lightbox controls style fixes

---
 .../_shared/Lightbox/Lightbox.module.scss     | 36 ++++++++++++++-----
 src/components/_shared/Lightbox/Lightbox.tsx  | 14 +++++---
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/components/_shared/Lightbox/Lightbox.module.scss b/src/components/_shared/Lightbox/Lightbox.module.scss
index 67075ab9..6f99e359 100644
--- a/src/components/_shared/Lightbox/Lightbox.module.scss
+++ b/src/components/_shared/Lightbox/Lightbox.module.scss
@@ -4,7 +4,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgb(0 0 0 / 80%);
+  background-color: rgb(0 0 0 / 50%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -13,10 +13,12 @@
   .image {
     max-width: 90%;
     max-height: 80%;
-    cursor: pointer;
+    cursor: grab;
   }
 
   .close {
+    background: rgb(0 0 0 / 50%);
+    border-radius: 100%;
     position: fixed;
     z-index: 1001;
     top: 20px;
@@ -24,8 +26,16 @@
     font-size: 30px;
     color: white;
     cursor: pointer;
-    width: 20px;
-    height: 20px;
+    width: 36px;
+    height: 36px;
+
+    .icon {
+      height: 20px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 20px;
+    }
   }
 
   .zoomControls {
@@ -39,16 +49,26 @@
     z-index: 1001;
 
     .control {
+      background-color: rgb(0 0 0 / 50%);
       border-radius: 50%;
-      width: 24px;
-      height: 24px;
-      font-size: 20px;
+      width: 30px;
+      height: 30px;
+      font-size: 24px;
       line-height: 1;
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 2px solid #fff;
+      transition: background-color 0.3s;
       color: #fff;
+
+      &:hover {
+        background-color: #000;
+      }
+    }
+
+    .controlDefault {
+      font-size: 1.2rem;
+      letter-spacing: 0.15em;
     }
   }
 }
diff --git a/src/components/_shared/Lightbox/Lightbox.tsx b/src/components/_shared/Lightbox/Lightbox.tsx
index 2ae578aa..56092245 100644
--- a/src/components/_shared/Lightbox/Lightbox.tsx
+++ b/src/components/_shared/Lightbox/Lightbox.tsx
@@ -28,6 +28,10 @@ export const Lightbox = (props: Props) => {
     event.stopPropagation()
     setZoomLevel(zoomLevel() / ZOOM_STEP)
   }
+  const zoomReset = (event) => {
+    event.stopPropagation()
+    setZoomLevel(1)
+  }
 
   const lightboxStyle = () => ({
     transform: `scale(${zoomLevel()})`,
@@ -39,17 +43,17 @@ export const Lightbox = (props: Props) => {
   return (
     <div class={clsx(styles.Lightbox, props.class)} onClick={closeLightbox}>
       <span class={styles.close} onClick={closeLightbox}>
-        <Icon name="close-white" />
+        <Icon name="close-white" class={styles.icon} />
       </span>
       <div class={styles.zoomControls}>
         <button class={styles.control} onClick={(event) => zoomOut(event)}>
-          <b>-</b>
+          &minus;
         </button>
-        <button class={styles.control} onClick={() => setZoomLevel(1)}>
-          <b style={{ 'font-size': '10px' }}>1:1</b>
+        <button class={clsx(styles.control, styles.controlDefault)} onClick={(event) => zoomReset(event)}>
+          1:1
         </button>
         <button class={styles.control} onClick={(event) => zoomIn(event)}>
-          <b>+</b>
+          +
         </button>
       </div>
       <img