From 38633d4db12d7d1a56bb96b4b1f9224f55b4cc40 Mon Sep 17 00:00:00 2001
From: reecebrowne <74901996+reecebrowne@users.noreply.github.com>
Date: Fri, 3 Jan 2025 11:23:26 +0000
Subject: [PATCH] Green buttons (#2597)

# Description

Making buttons green
Closes #()

![image](https://github.com/user-attachments/assets/29417e03-664d-4a77-a3ca-80d0a8b76f07)

## Checklist

- [X ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ X] I have performed a self-review of my own code
- [X ] I have attached images of the change if it is UI based
- [ X] I have commented my code, particularly in hard-to-understand
areas
- [ X] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ X] My changes generate no new warnings
- [ X] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

Co-authored-by: Reece Browne <reece@stirling.pdf>
---
 .../resources/templates/misc/add-image.html   |  2 +-
 src/main/resources/templates/multi-tool.html  | 87 ++++++++++---------
 src/main/resources/templates/sign.html        |  2 +-
 3 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/src/main/resources/templates/misc/add-image.html b/src/main/resources/templates/misc/add-image.html
index 9addaebd4..51fbc94ef 100644
--- a/src/main/resources/templates/misc/add-image.html
+++ b/src/main/resources/templates/misc/add-image.html
@@ -100,7 +100,7 @@
                 <span class="btn-tooltip" th:text="#{sign.last}"></span>
               </button>
               <button id="download-pdf" class="btn btn-outline-secondary"
-                style="color: green; border-color: green; background: rgba(0, 128, 0, 0.2)">
+                style="border-color: green; color:#b2e3a8; background: rgba(24, 122, 5, 1)">
                 <span class="material-symbols-rounded">
                   download
                 </span>
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index d45160f27..3e64fda51 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -88,31 +88,31 @@
                   </button>
                   <button id="deselect-All-Container" class="btn btn-secondary enable-on-file hidden"
                     onclick="toggleSelectAll()" disabled>
-                    <span  class="material-symbols-rounded" id="deselect-icon">deselect</span>
-                      <span class="btn-tooltip" th:text="#{multiTool.deselectAll}"></span>
+                    <span class="material-symbols-rounded" id="deselect-icon">deselect</span>
+                    <span class="btn-tooltip" th:text="#{multiTool.deselectAll}"></span>
                   </button>
                   <button id="select-All-Container" class="btn btn-secondary enable-on-file hidden"
-                  onclick="toggleSelectAll()" disabled>
-                  <span  class="material-symbols-rounded"
-                    id="select-icon">select_all</span>
+                    onclick="toggleSelectAll()" disabled>
+                    <span class="material-symbols-rounded" id="select-icon">select_all</span>
                     <span class="btn-tooltip" th:text="#{multiTool.selectAll}"></span>
-                </button>
+                  </button>
                   <div class="button-container">
-                    <button id="delete-button" class="btn btn-danger delete hidden"  onclick="deleteSelected()">
+                    <button id="delete-button" class="btn btn-danger delete hidden" onclick="deleteSelected()">
                       <span class="material-symbols-rounded">delete</span>
                       <span class="btn-tooltip" th:text="#{multiTool.deleteSelected}"></span>
                     </button>
                   </div>
                   <div style="margin-left:auto">
-                    <button id="export-selected-button" class="btn btn-primary enable-on-file hidden"
-                      onclick="exportPdf(true)" disabled>
+                    <button id="export-selected-button"
+                      style="border-color: green; color:#b2e3a8; background: rgba(24, 122, 5, 1)"
+                      class="btn btn-primary enable-on-file hidden" onclick="exportPdf(true)" disabled>
                       <span class="btn-tooltip" th:text="#{multiTool.downloadSelected}"></span>
-                      <span  class="material-symbols-rounded">
+                      <span class="material-symbols-rounded">
                         file_save
                       </span>
                     </button>
-                    <button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf(false)"
-                      disabled>
+                    <button style="border-color: green; color:#b2e3a8; background: rgba(24, 122, 5, 1)"
+                      id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf(false)" disabled>
                       <span class="material-symbols-rounded">
                         download
                       </span>
@@ -124,7 +124,8 @@
                   <div style="display:flex; height:3rem; margin-right:1rem">
                     <h5 th:text="#{multiTool.selectedPages}" style="white-space: nowrap; margin-right: 1rem;">Selected
                       Pages</h5>
-                    <input type="text" id="csv-input" class="form-control" style="height:2.5rem" placeholder="1,3,5-10"  value="">
+                    <input type="text" id="csv-input" class="form-control" style="height:2.5rem" placeholder="1,3,5-10"
+                      value="">
                   </div>
                   <ul id="selected-pages-list" class="pages-list"></ul>
                 </div>
@@ -151,29 +152,29 @@
     window.selectAll = false;
 
     window.translations = {
-        rotateLeft: '[[#{multiTool.rotateLeft}]]',
-        rotateRight: '[[#{multiTool.rotateRight}]]',
-        moveLeft: '[[#{multiTool.moveLeft}]]',
-        moveRight: '[[#{multiTool.moveRight}]]',
-        delete: '[[#{multiTool.delete}]]',
-        split: '[[#{multiTool.split}]]',
-        addFile: '[[#{multiTool.addFile}]]',
-        insertPageBreak:'[[#{multiTool.insertPageBreak}]]',
-        dragDropMessage:'[[#{multiTool.dragDropMessage}]]',
-        undo: '[[#{multiTool.undo}]]',
-        redo: '[[#{multiTool.redo}]]',
+      rotateLeft: '[[#{multiTool.rotateLeft}]]',
+      rotateRight: '[[#{multiTool.rotateRight}]]',
+      moveLeft: '[[#{multiTool.moveLeft}]]',
+      moveRight: '[[#{multiTool.moveRight}]]',
+      delete: '[[#{multiTool.delete}]]',
+      split: '[[#{multiTool.split}]]',
+      addFile: '[[#{multiTool.addFile}]]',
+      insertPageBreak: '[[#{multiTool.insertPageBreak}]]',
+      dragDropMessage: '[[#{multiTool.dragDropMessage}]]',
+      undo: '[[#{multiTool.undo}]]',
+      redo: '[[#{multiTool.redo}]]',
     };
 
     window.decrypt = {
-                    passwordPrompt: '[[#{decrypt.passwordPrompt}]]',
-                    cancelled: '[[#{decrypt.cancelled}]]',
-                    noPassword: '[[#{decrypt.noPassword}]]',
-                    invalidPassword: '[[#{decrypt.invalidPassword}]]',
-                    invalidPasswordHeader: '[[#{decrypt.invalidPasswordHeader}]]',
-                    unexpectedError: '[[#{decrypt.unexpectedError}]]',
-                    serverError: '[[#{decrypt.serverError}]]',
-                    success: '[[#{decrypt.success}]]',
-              }
+      passwordPrompt: '[[#{decrypt.passwordPrompt}]]',
+      cancelled: '[[#{decrypt.cancelled}]]',
+      noPassword: '[[#{decrypt.noPassword}]]',
+      invalidPassword: '[[#{decrypt.invalidPassword}]]',
+      invalidPasswordHeader: '[[#{decrypt.invalidPasswordHeader}]]',
+      unexpectedError: '[[#{decrypt.unexpectedError}]]',
+      serverError: '[[#{decrypt.serverError}]]',
+      success: '[[#{decrypt.success}]]',
+    }
 
     const csvInput = document.getElementById("csv-input");
     csvInput.addEventListener("keydown", function (event) {
@@ -217,18 +218,18 @@
     )
 
     fileDragManager.setCallback(async (files) => pdfContainer.handleDroppedFiles(files));
-    document.addEventListener('keydown', function(event) {
-    let targetElementId = event.target.id;
+    document.addEventListener('keydown', function (event) {
+      let targetElementId = event.target.id;
 
-    // To avoid undoing/redoing the page when the user is simply undoing/redoing text
-    const isFilenameInputField = (targetElementId === 'filename-input') && (event.target === document.activeElement);
+      // To avoid undoing/redoing the page when the user is simply undoing/redoing text
+      const isFilenameInputField = (targetElementId === 'filename-input') && (event.target === document.activeElement);
 
-    const isUndo = (event.ctrlKey && event.key === 'z');
-    const isRedo = (event.ctrlKey && event.key == 'y');
-    if (isUndo && !isFilenameInputField)
-      undoManager.undo();
-    else if (isRedo && !isFilenameInputField) undoManager.redo();
-});
+      const isUndo = (event.ctrlKey && event.key === 'z');
+      const isRedo = (event.ctrlKey && event.key == 'y');
+      if (isUndo && !isFilenameInputField)
+        undoManager.undo();
+      else if (isRedo && !isFilenameInputField) undoManager.redo();
+    });
   </script>
 </body>
 
diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html
index 85bce6c2f..5c7ecf7ea 100644
--- a/src/main/resources/templates/sign.html
+++ b/src/main/resources/templates/sign.html
@@ -212,7 +212,7 @@
                 <span class="btn-tooltip" th:text="#{sign.last}"></span>
               </button>
               <button id="download-pdf" class="btn btn-outline-secondary"
-                style="color: green;border-color: green; background: rgba(0, 128, 0, 0.2);">
+                style="border-color: green; color:#b2e3a8; background: rgba(24, 122, 5, 1)">
                 <span class="material-symbols-rounded">
                   download
                 </span>