From 3a27d97811c5a4d7dd970d3def16eafd8816b84f Mon Sep 17 00:00:00 2001
From: Rectos VX <rectos28@hotmail.com>
Date: Thu, 9 May 2024 17:31:12 +0400
Subject: [PATCH] Update: change update icon + animation

---
 src/main/resources/static/css/home.css        | 17 +++++++++--
 .../resources/templates/fragments/card.html   |  2 +-
 src/main/resources/templates/home.html        | 28 +++++++++----------
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index bf719259..30bbdbd2 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -75,11 +75,11 @@
 }
 
 #tool-icon {
-height: 100%;
+  height: 100%;
 }
 
 #tool-text {
-margin: 0.5rem 0.5rem 0rem;
+  margin: 0.5rem 0.5rem 0rem;
 }
 
 .card-title {
@@ -135,3 +135,16 @@ margin: 0.5rem 0.5rem 0rem;
   }
 }
 
+.update-notice {
+  animation: scale 1s infinite alternate;
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(0.96);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/card.html b/src/main/resources/templates/fragments/card.html
index b6e1ce18..eddeb0a7 100644
--- a/src/main/resources/templates/fragments/card.html
+++ b/src/main/resources/templates/fragments/card.html
@@ -1,7 +1,7 @@
 <div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}"
   th:data-bs-tags="${tags}">
   <a th:href="${cardLink}">
-    <div class="d-flex align-items-center"> <!-- Add a flex container to align the SVG and title -->
+    <div class="d-flex align-items-center">
 
       <div id="tool-icon" class="icon" alt="icon" th:class="@{${toolGroup}}">
         <span class="material-symbols-rounded nav-icon" th:text="@{${toolIcon}}"></span>
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index aa360dcd..9f78c128 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -29,20 +29,20 @@
         </span>
         <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
         <div class="features-container">
-        
-          <div th:if="${@shouldShow}" class="feature-card favorite" id="update-link" style="display: none;">
-			  <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank" class="nav-link text-body-secondary px-2" rel="noopener">
-			    <div class="d-flex align-items-center">
-			      <!-- Replace the existing icon markup with the new one -->
-			      <div class="icon" alt="icon" th:class="advance">
-			        <img class="card-icon home-card-icon home-card-icon-colour" src="images/update.svg" alt="Icon" width="30" height="30">
-			      </div>
-			      <!-- End of icon markup replacement -->
-			      <h5 class="card-title lookatme ms-2" th:text="#{settings.update}" th:data-lookatme-text="#{settings.update}"></h5>
-			    </div>
-			    <p class="card-text" id="app-update"></p>
-			  </a>
-			</div>
+
+          <div th:if="${@shouldShow}" class="feature-card favorite update-notice" id="update-link" style="display: none;">
+            <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank" rel="noopener">
+              <div class="d-flex align-items-center">
+                <div id="tool-icon" class="advance" alt="icon">
+                  <span class="material-symbols-rounded nav-icon">update</span>
+                </div>
+                <div id="tool-text">
+                  <h5 class="card-title" th:text="#{settings.update}"></h5>
+                  <p class="card-text" id="app-update"></p>
+                </div>
+              </div>
+            </a>
+          </div>
 
 
           <div