From 844976ef89acdf3f3504e8e36d88fcd7364c2553 Mon Sep 17 00:00:00 2001
From: Ryan <ryantl66@gmail.com>
Date: Mon, 14 Apr 2025 13:06:30 -0400
Subject: [PATCH] Updated zoom-in, zoom-out, rotate-left & rotate-right buttons
 to match prev & next

---
 css/styles.css    | 30 +++++++++++++++++++-----------
 js/filePreview.js |  8 ++++----
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 6bd1738..8331134 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1711,6 +1711,20 @@ body.dark-mode .CodeMirror-matchingbracket {
   border-bottom: 1px solid #ffffff !important;
 }
 
+.zoom_in,
+.zoom_out,
+.rotate_left,
+.rotate_right {
+  background: rgba(80, 80, 80, 0.6) !important;
+  border: none !important;
+  color: white !important;
+  cursor: pointer !important;
+  border-radius: 4px !important;
+  transition: background 0.3s ease, box-shadow 0.3s ease !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
+  transform: translateY(-10px);
+}
+
 .gallery-nav-btn {
   background: rgba(80, 80, 80, 0.6) !important;
   border: none !important;
@@ -1723,21 +1737,15 @@ body.dark-mode .CodeMirror-matchingbracket {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
 }
 
-.gallery-nav-btn:hover {
+.gallery-nav-btn:hover,
+.zoom_in:hover,
+.zoom_out:hover,
+.rotate_left:hover,
+.rotate_right:hover {
   background: rgba(80, 80, 80, 0.8) !important;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
 }
 
-.gallery-nav-btn.left {
-  left: 10px;
-  right: auto;
-}
-
-.gallery-nav-btn.right {
-  right: 10px;
-  left: auto;
-}
-
 .drop-hover {
   background-color: #e0e0e0;
   border: 1px dashed #666;
diff --git a/js/filePreview.js b/js/filePreview.js
index 7a2b38c..0a5b738 100644
--- a/js/filePreview.js
+++ b/js/filePreview.js
@@ -182,7 +182,7 @@ export function previewFile(fileUrl, fileName) {
     leftTop.style.gap = '4px';
     // Zoom In button.
     const zoomInBtn = document.createElement('button');
-    zoomInBtn.className = 'material-icons';
+    zoomInBtn.className = 'material-icons zoom_in';
     zoomInBtn.title = 'Zoom In';
     zoomInBtn.style.background = 'transparent';
     zoomInBtn.style.border = 'none';
@@ -190,7 +190,7 @@ export function previewFile(fileUrl, fileName) {
     zoomInBtn.textContent = 'zoom_in';
     // Zoom Out button.
     const zoomOutBtn = document.createElement('button');
-    zoomOutBtn.className = 'material-icons';
+    zoomOutBtn.className = 'material-icons zoom_out';
     zoomOutBtn.title = 'Zoom Out';
     zoomOutBtn.style.background = 'transparent';
     zoomOutBtn.style.border = 'none';
@@ -265,7 +265,7 @@ export function previewFile(fileUrl, fileName) {
     rightTop.style.gap = '4px';
     // Rotate Left button.
     const rotateLeftBtn = document.createElement('button');
-    rotateLeftBtn.className = 'material-icons';
+    rotateLeftBtn.className = 'material-icons rotate_left';
     rotateLeftBtn.title = 'Rotate Left';
     rotateLeftBtn.style.background = 'transparent';
     rotateLeftBtn.style.border = 'none';
@@ -273,7 +273,7 @@ export function previewFile(fileUrl, fileName) {
     rotateLeftBtn.textContent = 'rotate_left';
     // Rotate Right button.
     const rotateRightBtn = document.createElement('button');
-    rotateRightBtn.className = 'material-icons';
+    rotateRightBtn.className = 'material-icons rotate_right';
     rotateRightBtn.title = 'Rotate Right';
     rotateRightBtn.style.background = 'transparent';
     rotateRightBtn.style.border = 'none';