From 5a3c616ba356883444e7b4683e733145cc2af746 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Mon, 20 May 2024 19:52:34 +0700
Subject: [PATCH] Update: Enhanced App Features

---
 src/css/converter.css           | 8 ++++++++
 src/css/cropper.css             | 7 +++++++
 src/css/filter.css              | 9 ++++++++-
 src/css/resizer.css             | 1 +
 src/css/rotator.css             | 8 ++++++++
 src/css/sound-remover.css       | 7 +++++++
 src/css/thumbnail-generator.css | 9 ++++++++-
 src/css/watermarker.css         | 8 ++++++++
 src/python/image_tools.py       | 4 ++--
 9 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/css/converter.css b/src/css/converter.css
index 73f2e85..677e5dc 100644
--- a/src/css/converter.css
+++ b/src/css/converter.css
@@ -22,6 +22,7 @@
 
 #message {
     color: #c60000;
+    text-align: center;
 }
 
 #formats {
@@ -85,3 +86,10 @@ canvas {
         max-width: 100%;
     }
 }
+
+body.dark-mode #controls,
+body.dark-mode #preview {
+    background-color: #333;
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
diff --git a/src/css/cropper.css b/src/css/cropper.css
index e416dfb..3de17fc 100644
--- a/src/css/cropper.css
+++ b/src/css/cropper.css
@@ -40,4 +40,11 @@ canvas {
     #crop-container {
         width: 95%;
     }
+
+}
+
+body.dark-mode #crop-container {
+    background-color: #333;
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }
diff --git a/src/css/filter.css b/src/css/filter.css
index d46cd90..85789ae 100644
--- a/src/css/filter.css
+++ b/src/css/filter.css
@@ -89,4 +89,11 @@ canvas {
         width: 95%;
         max-width: 100%;
     }
-}
\ No newline at end of file
+}
+
+body.dark-mode #controls,
+body.dark-mode #preview {
+    background-color: #333;
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
diff --git a/src/css/resizer.css b/src/css/resizer.css
index 8c0dc99..4860ffa 100644
--- a/src/css/resizer.css
+++ b/src/css/resizer.css
@@ -22,6 +22,7 @@ body.dark-mode #inputSection,
 body.dark-mode #previewSection {
     background-color: #333;
     box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 body.dark-mode .instructions {
diff --git a/src/css/rotator.css b/src/css/rotator.css
index d1953d5..aaf6083 100644
--- a/src/css/rotator.css
+++ b/src/css/rotator.css
@@ -60,6 +60,7 @@ button:hover {
 #message {
     margin-top: 20px;
     color: red;
+    text-align: center;
 }
 
 @media (max-width: 768px) {
@@ -82,3 +83,10 @@ button:hover {
         width: auto;
     }
 }
+
+body.dark-mode #controls,
+body.dark-mode #preview {
+    background-color: #333;
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
diff --git a/src/css/sound-remover.css b/src/css/sound-remover.css
index d82493f..6c5835c 100644
--- a/src/css/sound-remover.css
+++ b/src/css/sound-remover.css
@@ -124,3 +124,10 @@ button {
         max-width: 100%;
     }
 }
+
+body.dark-mode #controls,
+body.dark-mode #preview {
+    background-color: #333;
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
diff --git a/src/css/thumbnail-generator.css b/src/css/thumbnail-generator.css
index 303b430..682eaf3 100644
--- a/src/css/thumbnail-generator.css
+++ b/src/css/thumbnail-generator.css
@@ -54,7 +54,7 @@ button {
 }
 
 .thumbnail.selected {
-    border-color: #007bff;
+    border: 5px solid #007bff;
 }
 
 #upload {
@@ -118,3 +118,10 @@ input[type="number"] {
         max-width: 100%;
     }
 }
+
+body.dark-mode #controls,
+body.dark-mode #preview {
+    background-color: #333;
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
diff --git a/src/css/watermarker.css b/src/css/watermarker.css
index d3572c3..c98f30f 100644
--- a/src/css/watermarker.css
+++ b/src/css/watermarker.css
@@ -36,6 +36,7 @@ button {
     align-items: center;
     max-width: 70%;
     border-radius: 8px;
+    padding: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
@@ -85,3 +86,10 @@ canvas {
         width: auto;
     }
 }
+
+body.dark-mode #controls,
+body.dark-mode #preview {
+    background-color: #333;
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
diff --git a/src/python/image_tools.py b/src/python/image_tools.py
index 659a007..4fdaed1 100644
--- a/src/python/image_tools.py
+++ b/src/python/image_tools.py
@@ -59,8 +59,8 @@ def main():
             height = int(input("Enter the new height: "))
             resize_image(input_path, output_path, width, height)
         elif choice == '2':
-            format = input("Enter the new image format (e.g., JPEG, PNG): ")
-            convert_image_format(input_path, output_path, format)
+            new_format = input("Enter the new image format (e.g., JPEG, PNG): ")
+            convert_image_format(input_path, output_path, new_format)
         elif choice == '3':
             degrees = float(input("Enter the number of degrees to rotate the image: "))
             rotate_image(input_path, output_path, degrees)